8 CSS Brutalist Designs

Streetwear Catalog

A stark product catalog for a fictional high-concept fashion label — the kind that charges $1,240 for a coat and means it.

Best forfashion e-commerce, design-led product catalogs, lookbook-style stores.

Pure CSS MIT licensed
Live Demo Open in tab
Open in playground

The code

<section class="br-stw" aria-label="Streetwear catalog demo">
  <div class="card">

    <div class="id-bar">
      <div class="id-brand">VCNM</div>
      <div class="id-season">SS25 — Void Collection</div>
      <div class="id-meta">
        <button class="id-meta-item" type="button">Search</button>
        <button class="id-meta-item" type="button">Account</button>
        <button class="id-meta-item" type="button">Stockists</button>
        <button class="id-meta-item cart" type="button">
          Bag
          <span class="cart-count">2</span>
        </button>
      </div>
    </div>

    <div class="filter-bar">
      <div class="filter-label">Filter:</div>
      <button class="filter-pill active" type="button">All</button>
      <button class="filter-pill" type="button">Outerwear</button>
      <button class="filter-pill" type="button">Tops</button>
      <button class="filter-pill" type="button">Bottoms</button>
      <button class="filter-pill" type="button">Footwear</button>
      <button class="filter-pill" type="button">Accessories</button>
      <button class="filter-pill" type="button">Archive</button>
      <div class="filter-right">
        <select class="sort-select" aria-label="Sort">
          <option>Newest</option>
          <option>Price: Low→High</option>
          <option>Price: High→Low</option>
        </select>
        <div class="count-tag">24 pieces</div>
      </div>
    </div>

    <div class="product-grid">

      <article class="product product-tall">
        <div class="product-img p-dark">
          <div class="img-shape">
            <div class="shape-jacket-body"></div>
            <div class="shape-lapel-l"></div>
            <div class="shape-lapel-r"></div>
          </div>
          <div class="product-label-tape new">New</div>
          <div class="size-peek">
            <span class="sz">XS</span><span class="sz">S</span><span class="sz">M</span><span class="sz out">L</span><span class="sz">XL</span>
          </div>
          <div class="drag-hint">VIEW →</div>
          <div class="quick-add">+ QUICK ADD</div>
        </div>
        <div class="product-info">
          <div class="p-cat">Outerwear</div>
          <div class="p-name">Deconstructed Field Jacket</div>
          <div class="p-bottom">
            <div><span class="p-price">$680</span></div>
            <span class="p-ref">REF.SS25-OW-04</span>
          </div>
        </div>
      </article>

      <article class="product">
        <div class="product-img p-cream">
          <div class="img-shape">
            <div class="shape-shirt"></div>
            <div class="shape-pocket"></div>
          </div>
          <div class="size-peek">
            <span class="sz">XS</span><span class="sz">S</span><span class="sz">M</span><span class="sz">L</span>
          </div>
          <div class="drag-hint">VIEW →</div>
          <div class="quick-add">+ QUICK ADD</div>
        </div>
        <div class="product-info">
          <div class="p-cat">Tops</div>
          <div class="p-name">Raw Edge Shirt</div>
          <div class="p-bottom">
            <div><span class="p-price">$210</span></div>
            <span class="p-ref">SS25-TP-11</span>
          </div>
        </div>
      </article>

      <article class="product featured">
        <div class="product-img p-deep">
          <div class="img-shape">
            <div class="shape-coat-body"></div>
            <div class="shape-coat-shoulders"></div>
          </div>
          <div class="ghost-brand">VCNM</div>
          <div class="product-label-tape ltd">Ltd. Ed.</div>
          <div class="size-peek on-dark">
            <span class="sz dark-sz">XS</span>
            <span class="sz dark-sz">S</span>
            <span class="sz dark-sz out">M</span>
            <span class="sz dark-sz">L</span>
          </div>
          <div class="quick-add invert">+ QUICK ADD</div>
        </div>
        <div class="product-info featured-info">
          <div class="p-cat">Outerwear · Limited Edition · 40 pieces</div>
          <div class="p-name">Overlock Maxi Coat — Void Black</div>
          <div><span class="p-price big">$1,240</span></div>
          <span class="p-ref ref-right">SS25-OW-01-LTD</span>
        </div>
      </article>

      <article class="product">
        <div class="product-img p-mid">
          <div class="img-shape">
            <div class="shape-trouser-l"></div>
            <div class="shape-trouser-r"></div>
            <div class="shape-trouser-waist"></div>
          </div>
          <div class="size-peek">
            <span class="sz">28</span><span class="sz">30</span><span class="sz out">32</span><span class="sz">34</span>
          </div>
          <div class="drag-hint">VIEW →</div>
          <div class="quick-add">+ QUICK ADD</div>
        </div>
        <div class="product-info">
          <div class="p-cat">Bottoms</div>
          <div class="p-name">Technical Cargo Pant</div>
          <div class="p-bottom">
            <div><span class="p-price sale">$295</span><span class="p-price-orig">$420</span></div>
            <span class="p-ref">SS25-BT-03</span>
          </div>
        </div>
      </article>

      <article class="product">
        <div class="product-img p-darker">
          <div class="img-shape">
            <div class="shape-hoodie"></div>
            <div class="shape-hood"></div>
            <div class="shape-pouch"></div>
          </div>
          <div class="product-label-tape new">New</div>
          <div class="size-peek on-dark">
            <span class="sz dark-sz">S</span>
            <span class="sz dark-sz">M</span>
            <span class="sz dark-sz">L</span>
            <span class="sz dark-sz">XL</span>
          </div>
          <div class="drag-hint">VIEW →</div>
          <div class="quick-add invert">+ QUICK ADD</div>
        </div>
        <div class="product-info">
          <div class="p-cat">Tops</div>
          <div class="p-name">Seam-Exposed Hoodie</div>
          <div class="p-bottom">
            <div><span class="p-price">$340</span></div>
            <span class="p-ref">SS25-TP-07</span>
          </div>
        </div>
      </article>

      <article class="product">
        <div class="product-img p-light">
          <div class="img-shape">
            <div class="shape-wide-l"></div>
            <div class="shape-wide-r"></div>
            <div class="shape-wide-waist"></div>
          </div>
          <div class="size-peek">
            <span class="sz">XS</span><span class="sz">S</span><span class="sz">M</span><span class="sz out">L</span>
          </div>
          <div class="drag-hint">VIEW →</div>
          <div class="quick-add">+ QUICK ADD</div>
        </div>
        <div class="product-info">
          <div class="p-cat">Bottoms</div>
          <div class="p-name">Wide-Leg Twill Trouser</div>
          <div class="p-bottom">
            <div><span class="p-price">$380</span></div>
            <span class="p-ref">SS25-BT-06</span>
          </div>
        </div>
      </article>

      <article class="product">
        <div class="product-img p-dark">
          <div class="img-shape">
            <div class="shape-bag-body"></div>
            <div class="shape-bag-handle"></div>
            <div class="shape-bag-clasp"></div>
          </div>
          <div class="product-label-tape sale">Sale</div>
          <div class="size-peek on-dark">
            <span class="sz dark-sz">OS</span>
          </div>
          <div class="drag-hint">VIEW →</div>
          <div class="quick-add invert">+ QUICK ADD</div>
        </div>
        <div class="product-info">
          <div class="p-cat">Accessories</div>
          <div class="p-name">Structured Tote — Void</div>
          <div class="p-bottom">
            <div><span class="p-price sale">$195</span><span class="p-price-orig">$280</span></div>
            <span class="p-ref">SS25-AC-02</span>
          </div>
        </div>
      </article>

    </div>

  </div>
</section>
/* ─── 08 Streetwear Catalog — VCNM SS25 Void Collection ──── */
@import url('https://fonts.googleapis.com/css2?family=Familjen+Grotesk:ital,wght@0,400;0,700;1,400&family=Syncopate:wght@400;700&display=swap');

.br-stw {
  --br-stw-bg: #f0ede8;
  --br-stw-ink: #0a0a0a;
  --br-stw-mid: #888;
  --br-stw-pale: #d8d4ce;
  --br-stw-red: #cc1100;
  --br-stw-rule: 1px solid #0a0a0a;

  position: relative;
  width: 100%;
  height: 820px;
  background: var(--br-stw-bg);
  color: var(--br-stw-ink);
  font-family: 'Familjen Grotesk', system-ui, sans-serif;
  overflow: hidden;
  box-sizing: border-box;
}

.br-stw *,
.br-stw *::before,
.br-stw *::after { box-sizing: border-box; margin: 0; padding: 0; }

.br-stw .card {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Identity bar */
.br-stw .id-bar {
  border-bottom: 3px solid var(--br-stw-ink);
  display: flex;
  align-items: stretch;
  height: 44px;
  flex-shrink: 0;
}
.br-stw .id-brand {
  font-family: 'Syncopate', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 6px;
  text-transform: uppercase;
  padding: 0 28px;
  display: flex;
  align-items: center;
  border-right: 3px solid var(--br-stw-ink);
  white-space: nowrap;
}
.br-stw .id-season {
  font-size: 9px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--br-stw-mid);
  padding: 0 20px;
  display: flex;
  align-items: center;
  border-right: var(--br-stw-rule);
}
.br-stw .id-meta { display: flex; align-items: center; gap: 0; margin-left: auto; }
.br-stw .id-meta-item {
  background: transparent;
  border: none;
  border-left: var(--br-stw-rule);
  padding: 0 18px;
  font-family: 'Familjen Grotesk', sans-serif;
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--br-stw-mid);
  height: 100%;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.br-stw .id-meta-item:hover { background: var(--br-stw-ink); color: var(--br-stw-bg); }
.br-stw .id-meta-item.cart { color: var(--br-stw-ink); font-weight: 700; }
.br-stw .cart-count {
  background: var(--br-stw-red);
  color: white;
  font-size: 8px;
  width: 16px; height: 16px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  font-weight: 700;
}

/* Filter bar */
.br-stw .filter-bar {
  border-bottom: var(--br-stw-rule);
  display: flex;
  align-items: stretch;
  height: 36px;
  overflow-x: auto;
  flex-shrink: 0;
}
.br-stw .filter-bar::-webkit-scrollbar { display: none; }
.br-stw .filter-label {
  font-size: 8px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--br-stw-mid);
  padding: 0 16px;
  border-right: var(--br-stw-rule);
  display: flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
}
.br-stw .filter-pill {
  background: transparent;
  border: none;
  border-right: var(--br-stw-rule);
  font-family: 'Familjen Grotesk', sans-serif;
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 0 16px;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--br-stw-mid);
  transition: all 0.1s;
  white-space: nowrap;
  flex-shrink: 0;
}
.br-stw .filter-pill:hover { background: var(--br-stw-ink); color: var(--br-stw-bg); }
.br-stw .filter-pill.active { background: var(--br-stw-ink); color: var(--br-stw-bg); }
.br-stw .filter-right { margin-left: auto; display: flex; align-items: stretch; flex-shrink: 0; }
.br-stw .sort-select {
  background: transparent;
  border: none;
  border-left: var(--br-stw-rule);
  font-family: 'Familjen Grotesk', sans-serif;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--br-stw-mid);
  padding: 0 16px;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
}
.br-stw .count-tag {
  font-size: 8px;
  letter-spacing: 3px;
  color: var(--br-stw-mid);
  border-left: var(--br-stw-rule);
  padding: 0 16px;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

/* Product grid */
.br-stw .product-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr 1fr;
  overflow: hidden;
  min-height: 0;
}

.br-stw .product {
  border-right: var(--br-stw-rule);
  border-bottom: var(--br-stw-rule);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.br-stw .product:nth-child(4n) { border-right: none; }
.br-stw .product:nth-child(n+5) { border-bottom: none; }
.br-stw .product.product-tall { grid-row: 1 / 3; }
.br-stw .product.featured {
  grid-column: 3 / 5;
  grid-row: 1 / 2;
  border-right: none;
}

/* Image zone backgrounds */
.br-stw .product-img {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: var(--br-stw-pale);
}
.br-stw .p-dark { background: #1a1a1a; }
.br-stw .p-cream { background: #e8e4de; }
.br-stw .p-deep { background: #0d0d0d; }
.br-stw .p-mid { background: #c8c4bc; }
.br-stw .p-darker { background: #111; }
.br-stw .p-light { background: #e0dbd4; }

.br-stw .img-shape {
  position: absolute;
  inset: 0;
}

/* Jacket silhouette */
.br-stw .shape-jacket-body {
  position: absolute;
  width: 50%;
  height: 75%;
  background: #333;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.br-stw .shape-lapel-l {
  position: absolute;
  width: 18%;
  height: 32%;
  background: #222;
  top: 14%;
  left: 24%;
  transform: skewX(-8deg);
}
.br-stw .shape-lapel-r {
  position: absolute;
  width: 18%;
  height: 32%;
  background: #222;
  top: 14%;
  right: 24%;
  transform: skewX(8deg);
}

/* Shirt */
.br-stw .shape-shirt {
  position: absolute;
  width: 55%;
  height: 68%;
  background: #aaa8a2;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.br-stw .shape-pocket {
  position: absolute;
  width: 12%;
  height: 10%;
  background: #b5b2ac;
  top: 24%;
  left: 36%;
  border: 1px solid #999;
}

/* Featured coat */
.br-stw .shape-coat-body {
  position: absolute;
  width: 36%;
  height: 78%;
  background: #1a1a1a;
  top: 9%;
  left: 50%;
  transform: translateX(-50%);
}
.br-stw .shape-coat-shoulders {
  position: absolute;
  width: 52%;
  height: 14%;
  background: #1a1a1a;
  top: 9%;
  left: 50%;
  transform: translateX(-50%);
}
.br-stw .ghost-brand {
  position: absolute;
  bottom: 20px;
  left: 20px;
  font-family: 'Syncopate', sans-serif;
  font-size: 56px;
  font-weight: 700;
  color: rgba(255,255,255,0.04);
  line-height: 1;
  letter-spacing: -2px;
  pointer-events: none;
}

/* Trousers */
.br-stw .shape-trouser-l {
  position: absolute;
  width: 20%;
  height: 60%;
  background: #9a9590;
  bottom: 8%;
  left: 30%;
}
.br-stw .shape-trouser-r {
  position: absolute;
  width: 20%;
  height: 60%;
  background: #9a9590;
  bottom: 8%;
  right: 30%;
}
.br-stw .shape-trouser-waist {
  position: absolute;
  width: 44%;
  height: 18%;
  background: #9a9590;
  top: 18%;
  left: 28%;
}

/* Hoodie */
.br-stw .shape-hoodie {
  position: absolute;
  width: 58%;
  height: 70%;
  background: #1a1a1a;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.br-stw .shape-hood {
  position: absolute;
  width: 34%;
  height: 16%;
  background: #1a1a1a;
  border-radius: 50% 50% 0 0;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
}
.br-stw .shape-pouch {
  position: absolute;
  width: 28%;
  height: 11%;
  background: #222;
  bottom: 26%;
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid #333;
}

/* Wide-leg */
.br-stw .shape-wide-l {
  position: absolute;
  width: 22%;
  height: 56%;
  background: #c4c0ba;
  bottom: 8%;
  left: 23%;
  transform: skewX(4deg);
}
.br-stw .shape-wide-r {
  position: absolute;
  width: 22%;
  height: 56%;
  background: #c4c0ba;
  bottom: 8%;
  right: 23%;
  transform: skewX(-4deg);
}
.br-stw .shape-wide-waist {
  position: absolute;
  width: 46%;
  height: 20%;
  background: #c4c0ba;
  top: 17%;
  left: 27%;
}

/* Bag */
.br-stw .shape-bag-body {
  position: absolute;
  width: 50%;
  height: 42%;
  background: #2a2a2a;
  top: 26%;
  left: 25%;
}
.br-stw .shape-bag-handle {
  position: absolute;
  width: 4%;
  height: 18%;
  background: #333;
  top: 10%;
  left: 48%;
}
.br-stw .shape-bag-clasp {
  position: absolute;
  width: 12%;
  height: 5%;
  background: #555;
  top: 24%;
  left: 44%;
  border: 1px solid #666;
}

/* Label tape */
.br-stw .product-label-tape {
  position: absolute;
  top: 12px;
  left: 0;
  background: var(--br-stw-red);
  color: white;
  font-size: 8px;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 700;
  padding: 3px 10px;
  z-index: 2;
}
.br-stw .product-label-tape.new { background: var(--br-stw-ink); }
.br-stw .product-label-tape.ltd { background: #666; }
.br-stw .product-label-tape.sale { background: var(--br-stw-red); }

/* Quick add */
.br-stw .quick-add {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: var(--br-stw-ink);
  color: var(--br-stw-bg);
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 700;
  padding: 10px;
  text-align: center;
  transform: translateY(100%);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}
.br-stw .quick-add.invert { background: white; color: var(--br-stw-ink); }
.br-stw .product:hover .quick-add { transform: translateY(0); }

/* Size peek */
.br-stw .size-peek {
  position: absolute;
  top: 10px; right: 10px;
  display: flex;
  gap: 3px;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 2;
}
.br-stw .product:hover .size-peek { opacity: 1; }
.br-stw .sz {
  background: var(--br-stw-bg);
  font-size: 7px;
  letter-spacing: 1px;
  padding: 2px 5px;
  color: var(--br-stw-ink);
  border: 1px solid var(--br-stw-ink);
  font-weight: 700;
}
.br-stw .sz.out { background: transparent; color: var(--br-stw-mid); border-color: var(--br-stw-mid); text-decoration: line-through; }
.br-stw .sz.dark-sz {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border-color: #333;
}
.br-stw .sz.dark-sz.out { background: transparent; color: #555; border-color: #333; }

/* Drag hint */
.br-stw .drag-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Syncopate', sans-serif;
  font-size: 8px;
  letter-spacing: 4px;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
  text-align: center;
  color: rgba(255,255,255,0.7);
  mix-blend-mode: difference;
}
.br-stw .product:hover .drag-hint { opacity: 0.5; }

/* Info strip */
.br-stw .product-info {
  padding: 10px 12px 12px;
  border-top: var(--br-stw-rule);
  background: var(--br-stw-bg);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.br-stw .p-cat {
  font-size: 7px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--br-stw-mid);
}
.br-stw .p-name {
  font-family: 'Syncopate', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1.2;
}
.br-stw .p-bottom {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 2px;
}
.br-stw .p-price {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.5px;
}
.br-stw .p-price.big { font-size: 22px; }
.br-stw .p-price.sale { color: var(--br-stw-red); }
.br-stw .p-price-orig {
  font-size: 10px;
  color: var(--br-stw-mid);
  text-decoration: line-through;
  margin-left: 4px;
}
.br-stw .p-ref {
  font-size: 8px;
  color: var(--br-stw-mid);
  letter-spacing: 1px;
}
.br-stw .p-ref.ref-right { text-align: right; display: block; }

.br-stw .featured .p-name { font-size: 14px; }
.br-stw .featured-info { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 0 16px; }
.br-stw .featured-info .p-cat { grid-column: 1 / -1; }

@media (max-width: 900px) {
  .br-stw .product-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, minmax(220px, 1fr));
  }
  .br-stw .product:nth-child(4n) { border-right: var(--br-stw-rule); }
  .br-stw .product:nth-child(2n) { border-right: none; }
  .br-stw .product:nth-child(n+5) { border-bottom: var(--br-stw-rule); }
  .br-stw .product.product-tall { grid-row: auto; }
  .br-stw .product.featured { grid-column: 1 / 3; grid-row: auto; border-right: none; }
  .br-stw .id-meta-item:not(.cart) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .br-stw .quick-add, .br-stw .size-peek, .br-stw .drag-hint { transition: none; }
}

More from 8 CSS Brutalist Designs

Product CardsData DashboardIndie SaaS PricingLong Read EditorialForm ElementsSelected Work GridWindows 95 Desktop
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →