website_designs

Streetwear Design Reference

Overview

Streetwear as a cultural and design movement originated in the late 1970s and early 1980s, born from the convergence of Californian surf and skate culture with New York hip-hop fashion. Brands like Stussy (founded 1980), which started as hand-drawn logos on surfboards and T-shirts, laid the groundwork for what would become a global phenomenon. By the 1990s, Supreme (founded 1994 in downtown Manhattan) had codified the streetwear formula: bold logo-centric branding, limited-edition “drops,” and a deliberate culture of scarcity and exclusivity. The movement drew visual vocabulary from skateboarding, punk zines, graffiti, Japanese Harajuku fashion, and hip-hop – creating a design language that was inherently anti-establishment, youth-driven, and community-first. Brands like BAPE (A Bathing Ape), Palace, and later Off-White and Fear of God expanded this vocabulary, each contributing distinct visual signatures – from BAPE’s camo patterns and ape head logo to Off-White’s industrial quotation marks and diagonal stripes.

Translating streetwear into web and digital design means capturing the energy of hype culture, the urgency of limited drops, and the bold visual confidence of the movement. Streetwear websites are characteristically high-contrast and image-dominant, using oversized typography, aggressive negative space, and editorial-style product photography. The digital experience mirrors the real-world streetwear ritual: countdown timers for product releases, waitlist and RSVP sign-ups, sold-out badges, and a sense that if you blink, you miss it. Navigation tends to be minimal and direct – no decorative excess, just the brand, the product, and the drop schedule. The aesthetic channels a premium-yet-raw energy: luxury fashion confidence paired with underground authenticity.

The philosophy underlying streetwear web design is one of controlled exclusivity and cultural currency. Every design choice communicates status, scarcity, and belonging. Bold logos function as tribal markers. Monochrome palettes convey seriousness and editorial authority, while strategic pops of color (often a single signature brand hue) create instant recognition. The grid is intentionally disrupted – overlapping images, text that bleeds off-screen, and asymmetric layouts suggest the uncontrolled energy of the street while maintaining the precision of high-fashion presentation. The result is a digital space that feels simultaneously like a gallery, a skate shop, and a VIP waiting room.

---

Visual Characteristics

Core Design Traits

• Bold logo dominance – oversized brand logos and wordmarks serve as the primary visual anchor, often occupying full-screen hero space, echoing Supreme’s iconic box logo approach
• High-contrast monochromes – black-and-white palettes form the foundation, creating an editorial, premium feel that lets product imagery and brand marks command attention
• Oversized typography – display text scaled to maximum impact, often filling the entire viewport width, reflecting the streetwear tradition of bold graphic tees and signage
• Drop-culture urgency elements – countdown timers, “SOLD OUT” badges, “COMING SOON” overlays, and RSVP/waitlist forms that create artificial scarcity and hype
• Editorial product photography – high-resolution, dramatically lit product shots on minimal backgrounds; sneakers and garments presented as art objects with multiple angles
• Asymmetric grid disruption – intentionally broken grid layouts where images overlap, text bleeds off edges, and elements are offset to create dynamic tension
• Industrial and utilitarian details – zip-tie motifs, barcode elements, warehouse-style numbering, size tags, and label-inspired UI components (influenced by Off-White and Heron Preston)
• Negative space as confidence – generous whitespace or blackspace signals brand authority; the design breathes rather than clutters, letting each element carry maximum weight
• Sneaker-culture visual language – sole profiles, colorway swatches, release date typography, and 360-degree product views that speak directly to the sneakerhead community
• Collaborative cross-branding – frequent display of “x” (collab) branding, split logos, and dual-brand lockups reflecting the streetwear obsession with collaborative releases
• Scrolling text tickers – marquee-style horizontal scrolling text bars announcing drops, brand names, or slogans, evoking LED signage and event banners
• Street photography integration – candid, urban-environment lifestyle shots mixed with studio product photography to ground the brand in real-world culture

Design Principles

• Scarcity drives design – every visual choice should reinforce the idea that what is being shown is limited, exclusive, and time-sensitive
• Logo is king – the brand mark takes visual priority over decorative elements; if the logo does not dominate, the design has failed
• Confidence over explanation – minimal copy, no over-selling; the product and brand speak for themselves through visual authority
• Street authenticity meets luxury polish – the rawness of underground culture paired with the precision of high-fashion presentation
• Culture before commerce – design should reference the community, the movement, and the lifestyle before it references the transaction
• Less UI, more impact – navigation and interface chrome are minimized to let imagery, typography, and brand identity fill the space
• Temporal urgency – design elements should communicate “now or never,” whether through countdown timers, seasonal theming, or drop-date prominence
• Mobile-first always – streetwear audiences live on their phones; the mobile experience is the primary experience, not a responsive afterthought

---

Color Palette

Streetwear color palettes are rooted in high-contrast simplicity. The dominant foundation is monochrome – deep blacks, pure whites, and concrete grays – creating an editorial canvas that communicates both urban grit and luxury restraint. Accent colors are used sparingly but with maximum impact, typically limited to a single signature brand hue (Supreme’s red, Palace’s navy and coral tricolor, Off-White’s industrial orange). This discipline ensures that when color does appear, it commands immediate attention. Secondary palettes draw from military olive, industrial safety orange, and sneaker-culture colorway references – earth tones and utilitarian hues that reinforce the streetwear connection to workwear and military surplus.

Swatch	Hex	Role/Usage
	#0A0A0A	Primary black – backgrounds, hero sections, dominant surface
	#FFFFFF	Pure white – primary text on dark, clean product backgrounds
	#1A1A1A	Off-black – card surfaces, secondary dark areas, depth layers
	#2C2C2C	Charcoal – borders, dividers, subtle separations
	#808080	Mid-gray – muted text, timestamps, secondary information
	#E8E8E8	Light gray – alternate light backgrounds, product cards
	#E60000	Supreme red – primary brand accent, urgency, CTAs
	#FF6B00	Industrial orange – Off-White reference, warning labels, highlights
	#3D5A1E	Military olive – utilitarian accent, workwear references
	#C4A44A	Gold – premium tier, limited edition badges, VIP elements
	#1E3A5F	Deep navy – secondary cool accent, heritage sportswear nod
	#D4CBC2	Cement – sneaker sole reference, neutral warmth, sand tones
	#5C4033	Mocha brown – earth tone accent, leather and suede references
	#F5F5DC	Cream – vintage streetwear tee base, aged white alternative
	#6B21A8	Hype purple – limited drop highlights, neon event accents

:root {
  /* Foundation monochromes */
  --sw-black: #0A0A0A;
  --sw-white: #FFFFFF;
  --sw-off-black: #1A1A1A;
  --sw-charcoal: #2C2C2C;
  --sw-mid-gray: #808080;
  --sw-light-gray: #E8E8E8;

  /* Brand accent colors */
  --sw-red: #E60000;
  --sw-orange: #FF6B00;
  --sw-olive: #3D5A1E;
  --sw-gold: #C4A44A;
  --sw-navy: #1E3A5F;
  --sw-purple: #6B21A8;

  /* Material tones */
  --sw-cement: #D4CBC2;
  --sw-mocha: #5C4033;
  --sw-cream: #F5F5DC;

  /* Functional mappings */
  --sw-bg-primary: var(--sw-black);
  --sw-bg-surface: var(--sw-off-black);
  --sw-bg-card: var(--sw-charcoal);
  --sw-bg-alt: var(--sw-light-gray);
  --sw-text-primary: var(--sw-white);
  --sw-text-secondary: var(--sw-mid-gray);
  --sw-text-inverse: var(--sw-black);
  --sw-accent-primary: var(--sw-red);
  --sw-accent-secondary: var(--sw-orange);
  --sw-accent-premium: var(--sw-gold);
  --sw-border: var(--sw-charcoal);
  --sw-border-light: var(--sw-mid-gray);
}

---

Typography

Streetwear typography is defined by extremes: oversized, bold, and impossible to ignore. The movement inherits its typographic DNA from multiple sources – the blocky confidence of Supreme’s Futura Heavy Oblique, the industrial labeling of Off-White’s Helvetica quotation marks, the hand-drawn energy of skate brand logos, and the compressed authority of sportswear wordmarks. Display type is scaled to fill entire viewport widths, often set in all-caps with tight tracking. Body text, by contrast, is clean and minimal – usually a neutral sans-serif that stays out of the way. The tension between enormous display type and restrained body copy is a defining characteristic of streetwear digital design.

Recommended Google Fonts

Font	Weight(s)	Usage	Link
Anton	400	Oversized hero headlines, drop announcements	fonts.google.com/specimen/Anton
Bebas Neue	400	Compressed display headers, countdown timers	fonts.google.com/specimen/Bebas+Neue
Oswald	400, 600, 700	Section headings, navigation labels	fonts.google.com/specimen/Oswald
Barlow Condensed	400, 600, 700	Compact headings, product titles, UI labels	fonts.google.com/specimen/Barlow+Condensed
Inter	300, 400, 500, 700	Body text, descriptions, UI elements	fonts.google.com/specimen/Inter
Space Grotesk	400, 500, 700	Modern body text, technical details, prices	fonts.google.com/specimen/Space+Grotesk
Archivo Black	400	Bold display alternative, brand lockups	fonts.google.com/specimen/Archivo+Black
Roboto Mono	400, 500	Countdown digits, product codes, size labels	fonts.google.com/specimen/Roboto+Mono
Permanent Marker	400	Hand-drawn accent text, graffiti nods	fonts.google.com/specimen/Permanent+Marker
Russo One	400	Athletic/sportswear-influenced display	fonts.google.com/specimen/Russo+One

Font Pairing Suggestions

Heading	Body	Vibe
Anton	Inter	Classic streetwear e-commerce – bold hero text with clean, readable product descriptions
Bebas Neue	Space Grotesk	Drop-culture landing page – compressed urgency headers with modern geometric body
Oswald	Inter	Editorial lookbook – structured headlines with neutral, accessible body copy
Archivo Black	Roboto Mono	Industrial streetwear – heavy display paired with utilitarian monospace details
Barlow Condensed	Space Grotesk	Sneaker release page – compact and efficient with contemporary body text
Permanent Marker	Inter	Skate-culture sub-brand – hand-drawn energy balanced by clean readability

CSS Example

/* Import streetwear-appropriate Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Bebas+Neue&family=Oswald:wght@400;600;700&family=Barlow+Condensed:wght@400;600;700&family=Inter:wght@300;400;500;700&family=Space+Grotesk:wght@400;500;700&family=Archivo+Black&family=Roboto+Mono:wght@400;500&display=swap');

/* Hero / Display -- maximum impact oversized text */
h1 {
  font-family: 'Anton', 'Bebas Neue', Impact, sans-serif;
  font-size: clamp(4rem, 12vw, 10rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--sw-white);
}

/* Section headings -- condensed authority */
h2 {
  font-family: 'Oswald', 'Barlow Condensed', sans-serif;
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sw-white);
}

/* Subheadings -- product titles, card headers */
h3 {
  font-family: 'Barlow Condensed', 'Oswald', sans-serif;
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sw-white);
}

/* Body text -- clean and minimal */
body {
  font-family: 'Inter', 'Space Grotesk', -apple-system, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--sw-text-secondary);
}

/* Monospace accents -- codes, timers, labels */
.mono-accent {
  font-family: 'Roboto Mono', 'Courier New', monospace;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Oversized viewport-width text */
.viewport-text {
  font-family: 'Anton', sans-serif;
  font-size: 18vw;
  line-height: 0.85;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  color: var(--sw-white);
  opacity: 0.08;
}

---

Layout Principles

• Mobile-first grid architecture – design for 375px-width screens first; streetwear audiences are overwhelmingly mobile, so the phone experience is the canonical version
• Full-bleed hero imagery – hero sections should fill 100% viewport width and at least 90vh height, with product or lifestyle photography edge-to-edge
• Single-column product focus – product detail pages favor a single dominant image column (or stacked images on mobile) rather than multi-column complexity
• Minimal navigation chrome – hamburger menus, hidden nav drawers, or single-row text-link navigation; the nav should never compete with content
• Asymmetric overlap compositions – product images, text blocks, and graphic elements intentionally overlap, creating depth and visual tension within the grid
• Scrolling marquee tickers – horizontal scrolling text strips between sections announcing drops, brand taglines, or collab names, breaking the vertical flow
• Generous vertical spacing – sections separated by 100-200px of breathing room; the design should feel unhurried and confident despite the urgency of the content
• Grid disruption for emphasis – standard product grid (2-4 columns) intentionally broken by a full-width feature product or editorial image that spans the full grid width
• Sticky countdown elements – drop timers and release date banners that remain fixed at the top or bottom of the viewport during scroll
• Z-pattern and F-pattern awareness – place brand logos and hero text where the eye naturally scans first; product cards and CTAs follow the reading flow
• Footer as brand statement – oversized logo treatments, social links, and newsletter signups in the footer function as a closing brand declaration, not an afterthought
• Product grid with uniform aspect ratios – consistent square or 4:5 product image ratios create visual rhythm when browsing collections

---

CSS / Design Techniques

Drop Countdown Timer

A full-width countdown bar that communicates urgency and scarcity for upcoming product releases.

.drop-countdown {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 1rem 2rem;
  background: var(--sw-red);
  color: var(--sw-white);
  font-family: 'Roboto Mono', monospace;
  font-size: 0.875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.drop-countdown__label {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
}

.drop-countdown__digits {
  display: flex;
  gap: 0.5rem;
}

.drop-countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 3.5rem;
}

.drop-countdown__number {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
}

.drop-countdown__suffix {
  font-size: 0.625rem;
  opacity: 0.7;
  margin-top: 0.25rem;
}

Product Card

Clean, high-contrast product card with sold-out state and quick-view hover interaction.

.product-card {
  position: relative;
  background: var(--sw-bg-surface);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.product-card:hover {
  transform: translateY(-4px);
}

.product-card__image-wrapper {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--sw-light-gray);
}

.product-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.product-card:hover .product-card__image {
  transform: scale(1.05);
}

.product-card__badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.25rem 0.75rem;
  background: var(--sw-red);
  color: var(--sw-white);
  font-family: 'Oswald', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.product-card__badge--soldout {
  background: var(--sw-black);
  color: var(--sw-mid-gray);
  text-decoration: line-through;
}

.product-card__info {
  padding: 1rem;
}

.product-card__title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sw-white);
  margin: 0 0 0.25rem;
}

.product-card__price {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.875rem;
  color: var(--sw-mid-gray);
}

.product-card__quick-view {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.75rem;
  background: var(--sw-white);
  color: var(--sw-black);
  font-family: 'Oswald', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.product-card:hover .product-card__quick-view {
  transform: translateY(0);
}

Hype Button

Bold, high-contrast CTA button with streetwear energy and hover animation.

.btn-hype {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem 2.5rem;
  background: var(--sw-white);
  color: var(--sw-black);
  font-family: 'Oswald', sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid var(--sw-white);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.btn-hype:hover {
  background: transparent;
  color: var(--sw-white);
}

.btn-hype::after {
  content: '\2192';
  transition: transform 0.3s ease;
}

.btn-hype:hover::after {
  transform: translateX(4px);
}

/* Sold-out / disabled variant */
.btn-hype--soldout {
  background: transparent;
  color: var(--sw-mid-gray);
  border-color: var(--sw-charcoal);
  cursor: not-allowed;
  text-decoration: line-through;
}

/* Red accent variant */
.btn-hype--accent {
  background: var(--sw-red);
  color: var(--sw-white);
  border-color: var(--sw-red);
}

.btn-hype--accent:hover {
  background: transparent;
  color: var(--sw-red);
}

Streetwear Navigation

Minimal, logo-dominant navigation with hidden mobile drawer.

.sw-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 2rem;
  background: var(--sw-black);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  border-bottom: 1px solid var(--sw-charcoal);
}

.sw-nav__logo {
  font-family: 'Anton', sans-serif;
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sw-white);
  text-decoration: none;
}

.sw-nav__links {
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sw-nav__link {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sw-mid-gray);
  text-decoration: none;
  transition: color 0.2s ease;
}

.sw-nav__link:hover,
.sw-nav__link--active {
  color: var(--sw-white);
}

.sw-nav__actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.sw-nav__cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  background: var(--sw-red);
  color: var(--sw-white);
  font-family: 'Roboto Mono', monospace;
  font-size: 0.625rem;
  font-weight: 700;
  border-radius: 50%;
}

/* Mobile drawer */
@media (max-width: 768px) {
  .sw-nav__links {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80vw;
    height: 100vh;
    flex-direction: column;
    background: var(--sw-black);
    padding: 6rem 2rem 2rem;
    gap: 1.5rem;
    transition: right 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
    border-left: 1px solid var(--sw-charcoal);
  }

  .sw-nav__links--open {
    right: 0;
  }

  .sw-nav__link {
    font-size: 1.25rem;
    font-family: 'Oswald', sans-serif;
  }
}

Hero Section

Full-bleed hero with oversized text overlay, product image, and drop CTA.

.sw-hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 4rem 2rem;
  background: var(--sw-black);
  overflow: hidden;
}

.sw-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
  filter: grayscale(30%);
}

.sw-hero__content {
  position: relative;
  z-index: 2;
  max-width: 700px;
}

.sw-hero__label {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--sw-red);
  margin-bottom: 1rem;
}

.sw-hero__title {
  font-family: 'Anton', sans-serif;
  font-size: clamp(4rem, 14vw, 12rem);
  line-height: 0.85;
  text-transform: uppercase;
  color: var(--sw-white);
  margin: 0 0 1.5rem;
}

.sw-hero__subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: var(--sw-mid-gray);
  max-width: 400px;
  margin-bottom: 2rem;
  line-height: 1.5;
}

/* Background oversized watermark text */
.sw-hero__watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Anton', sans-serif;
  font-size: 25vw;
  text-transform: uppercase;
  color: var(--sw-white);
  opacity: 0.04;
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
}

Scrolling Marquee Ticker

Horizontal auto-scrolling text strip for brand announcements, drop names, and hype messaging.

.sw-marquee {
  overflow: hidden;
  white-space: nowrap;
  background: var(--sw-off-black);
  border-top: 1px solid var(--sw-charcoal);
  border-bottom: 1px solid var(--sw-charcoal);
  padding: 0.75rem 0;
}

.sw-marquee__track {
  display: inline-flex;
  animation: marquee-scroll 20s linear infinite;
}

.sw-marquee__item {
  font-family: 'Oswald', sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--sw-mid-gray);
  padding: 0 2rem;
}

.sw-marquee__separator {
  color: var(--sw-red);
  padding: 0 0.5rem;
}

@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Pause on hover for accessibility */
.sw-marquee:hover .sw-marquee__track {
  animation-play-state: paused;
}

Sold-Out Overlay

Overlay effect for sold-out products that maintains visual interest while communicating unavailability.

.soldout-overlay {
  position: relative;
}

.soldout-overlay::after {
  content: 'SOLD OUT';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 10, 0.75);
  color: var(--sw-white);
  font-family: 'Anton', sans-serif;
  font-size: clamp(1.5rem, 4vw, 3rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  backdrop-filter: blur(2px);
}

/* Diagonal stamp variant */
.soldout-overlay--stamp::after {
  content: 'SOLD OUT';
  background: transparent;
  color: var(--sw-red);
  font-size: clamp(2rem, 6vw, 5rem);
  transform: rotate(-15deg);
  text-shadow: 0 0 20px rgba(230, 0, 0, 0.3);
  border: 4px solid var(--sw-red);
  padding: 0.5rem 2rem;
  width: auto;
  height: auto;
  inset: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-15deg);
}

---

Design Do’s and Don’ts

Do’s

• Do prioritize the brand logo – make it the most visible and memorable element on every page; the logo is the foundation of streetwear identity
• Do use countdown timers and urgency cues – “Dropping in 02:14:33” or “Only 12 left” communicates the scarcity that drives hype culture
• Do embrace monochrome foundations – black, white, and gray should form 80-90% of the palette; let accent color earn its presence
• Do scale typography to the extreme – hero text should be uncomfortably large; if it fits comfortably on screen, it is too small
• Do show sold-out products – keeping unavailable items visible with “SOLD OUT” badges reinforces scarcity and drives FOMO
• Do invest in product photography – high-quality, dramatically lit images on clean backgrounds; the product is the content
• Do design mobile-first without compromise – the phone is where drops are copped, hype is built, and culture is consumed
• Do use monospace type for data – prices, countdowns, sizes, and product codes benefit from the utilitarian clarity of monospaced fonts

Don’ts

• Don’t use decorative gradients or rounded corners – streetwear favors sharp edges and flat color; soft design language undermines the aesthetic
• Don’t clutter with excessive UI elements – every button, label, and icon competes with the brand; if it is not essential, remove it
• Don’t use stock photography for lifestyle shots – streetwear audiences can detect inauthenticity instantly; invest in real community photography
• Don’t soften the typography – avoid light weights, serif fonts, or script typefaces for primary text; the vibe is bold, condensed, and direct
• Don’t over-explain products – minimal copy is a feature, not a limitation; trust the audience to understand the culture and the product
• Don’t use rainbow or multi-color palettes – discipline in color use is essential; one or two accents maximum against the monochrome base
• Don’t neglect loading performance – high-resolution product images must be optimized; a slow site during a drop is a failed drop
• Don’t ignore the SOLD OUT state – the sold-out experience is as important as the available experience; make it feel exclusive, not broken

---

Related Aesthetics

Aesthetic	Relationship
Graffiti Pop	Shares urban visual roots – graffiti, bold type, street culture – but Graffiti Pop is neon-maximalist where Streetwear is monochrome-minimal
Cyberpunk	Both use dark backgrounds and high-contrast accents; cyberpunk leans sci-fi and neon while streetwear stays grounded in real urban fashion
Dark Mode Neon	Overlapping dark-background aesthetics with bright accent colors; Dark Mode Neon is more tech-focused, Streetwear is fashion-focused
Corporate Grunge	Shares raw, anti-polished energy; Corporate Grunge applies it to corporate identity while Streetwear channels it through fashion and drops
DIY Punk	Common anti-establishment roots and handmade energy; DIY Punk is deliberately lo-fi while Streetwear combines raw authenticity with premium execution
Flat Design	Both favor clean surfaces and minimal ornamentation; Flat Design is systemically minimal while Streetwear is strategically minimal for brand impact
Gen Z Maximalism	Overlapping audience demographics but opposite visual approaches; Gen Z Maximalism is color-saturated and eclectic, Streetwear is disciplined and monochrome
Fitness Splatter	Shared boldness and athletic energy; Fitness Splatter is action-sport focused while Streetwear blends athletics with fashion culture
Chromecore	Both reference Y2K and futuristic aesthetics; Chromecore is metallic and reflective while Streetwear is matte and grounded

---

Quick-Start HTML Template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>STRTWRK -- Streetwear Design Template</title>

  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Anton&family=Bebas+Neue&family=Oswald:wght@400;600;700&family=Barlow+Condensed:wght@400;600;700&family=Inter:wght@300;400;500;700&family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet">

  <style>
    /* ========================================
       CSS Custom Properties
       ======================================== */
    :root {
      --sw-black: #0A0A0A;
      --sw-white: #FFFFFF;
      --sw-off-black: #1A1A1A;
      --sw-charcoal: #2C2C2C;
      --sw-mid-gray: #808080;
      --sw-light-gray: #E8E8E8;
      --sw-red: #E60000;
      --sw-orange: #FF6B00;
      --sw-olive: #3D5A1E;
      --sw-gold: #C4A44A;
      --sw-navy: #1E3A5F;
      --sw-cement: #D4CBC2;
      --sw-cream: #F5F5DC;
    }

    /* ========================================
       Reset & Base
       ======================================== */
    *, *::before, *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      font-size: 16px;
      line-height: 1.6;
      color: var(--sw-white);
      background: var(--sw-black);
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    img {
      display: block;
      max-width: 100%;
      height: auto;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    /* ========================================
       Drop Countdown Bar
       ======================================== */
    .countdown-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 2rem;
      padding: 0.75rem 1.5rem;
      background: var(--sw-red);
      color: var(--sw-white);
      font-family: 'Roboto Mono', monospace;
      font-size: 0.75rem;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1100;
    }

    .countdown-bar__label {
      font-family: 'Oswald', sans-serif;
      font-weight: 700;
    }

    .countdown-bar__timer {
      font-weight: 500;
      font-size: 0.875rem;
    }

    /* ========================================
       Navigation
       ======================================== */
    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1.25rem 2rem;
      background: var(--sw-black);
      position: fixed;
      top: 2.5rem;
      left: 0;
      right: 0;
      z-index: 1000;
      border-bottom: 1px solid var(--sw-charcoal);
    }

    .nav__logo {
      font-family: 'Anton', sans-serif;
      font-size: 1.5rem;
      letter-spacing: 0.15em;
      text-transform: uppercase;
    }

    .nav__links {
      display: flex;
      gap: 2rem;
      list-style: none;
    }

    .nav__link {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--sw-mid-gray);
      transition: color 0.2s ease;
    }

    .nav__link:hover {
      color: var(--sw-white);
    }

    .nav__cart {
      position: relative;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--sw-white);
    }

    .nav__cart-badge {
      position: absolute;
      top: -8px;
      right: -14px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 16px;
      height: 16px;
      background: var(--sw-red);
      border-radius: 50%;
      font-family: 'Roboto Mono', monospace;
      font-size: 0.5rem;
      font-weight: 700;
    }

    /* ========================================
       Hero Section
       ======================================== */
    .hero {
      position: relative;
      width: 100%;
      min-height: 100vh;
      display: flex;
      align-items: flex-end;
      padding: 6rem 2rem 4rem;
      background: var(--sw-black);
      overflow: hidden;
    }

    .hero__bg-text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-family: 'Anton', sans-serif;
      font-size: 28vw;
      text-transform: uppercase;
      color: var(--sw-white);
      opacity: 0.03;
      white-space: nowrap;
      pointer-events: none;
      user-select: none;
    }

    .hero__content {
      position: relative;
      z-index: 2;
      max-width: 700px;
    }

    .hero__tag {
      display: inline-block;
      font-family: 'Roboto Mono', monospace;
      font-size: 0.7rem;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--sw-red);
      margin-bottom: 1.5rem;
      padding: 0.375rem 0.75rem;
      border: 1px solid var(--sw-red);
    }

    .hero__title {
      font-family: 'Anton', sans-serif;
      font-size: clamp(4rem, 14vw, 12rem);
      line-height: 0.85;
      text-transform: uppercase;
      color: var(--sw-white);
      margin-bottom: 1.5rem;
    }

    .hero__subtitle {
      font-size: 1rem;
      color: var(--sw-mid-gray);
      max-width: 380px;
      margin-bottom: 2.5rem;
      line-height: 1.6;
    }

    /* ========================================
       Button Styles
       ======================================== */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 0.75rem;
      padding: 1rem 2.5rem;
      font-family: 'Oswald', sans-serif;
      font-size: 0.8rem;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      border: 2px solid var(--sw-white);
      background: var(--sw-white);
      color: var(--sw-black);
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .btn:hover {
      background: transparent;
      color: var(--sw-white);
    }

    .btn::after {
      content: '\2192';
      transition: transform 0.3s ease;
    }

    .btn:hover::after {
      transform: translateX(4px);
    }

    .btn--outline {
      background: transparent;
      color: var(--sw-white);
    }

    .btn--outline:hover {
      background: var(--sw-white);
      color: var(--sw-black);
    }

    .btn--soldout {
      background: transparent;
      color: var(--sw-mid-gray);
      border-color: var(--sw-charcoal);
      cursor: not-allowed;
      text-decoration: line-through;
    }

    .btn--soldout::after {
      content: '';
    }

    /* ========================================
       Marquee Ticker
       ======================================== */
    .marquee {
      overflow: hidden;
      white-space: nowrap;
      background: var(--sw-off-black);
      border-top: 1px solid var(--sw-charcoal);
      border-bottom: 1px solid var(--sw-charcoal);
      padding: 0.875rem 0;
    }

    .marquee__track {
      display: inline-flex;
      animation: scroll-left 25s linear infinite;
    }

    .marquee__item {
      font-family: 'Oswald', sans-serif;
      font-size: 0.8rem;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--sw-mid-gray);
      padding: 0 1.5rem;
    }

    .marquee__dot {
      color: var(--sw-red);
    }

    @keyframes scroll-left {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    .marquee:hover .marquee__track {
      animation-play-state: paused;
    }

    /* ========================================
       Section Headers
       ======================================== */
    .section {
      padding: 6rem 2rem;
    }

    .section__label {
      font-family: 'Roboto Mono', monospace;
      font-size: 0.65rem;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--sw-mid-gray);
      margin-bottom: 0.75rem;
    }

    .section__title {
      font-family: 'Anton', sans-serif;
      font-size: clamp(2.5rem, 6vw, 5rem);
      text-transform: uppercase;
      line-height: 0.95;
      margin-bottom: 3rem;
    }

    /* ========================================
       Product Grid
       ======================================== */
    .product-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 1px;
      background: var(--sw-charcoal);
      max-width: 1400px;
      margin: 0 auto;
    }

    .product-card {
      position: relative;
      background: var(--sw-off-black);
      overflow: hidden;
      cursor: pointer;
      transition: transform 0.3s ease;
    }

    .product-card:hover {
      z-index: 2;
    }

    .product-card__img {
      aspect-ratio: 4 / 5;
      background: var(--sw-light-gray);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Roboto Mono', monospace;
      font-size: 0.7rem;
      color: var(--sw-mid-gray);
      letter-spacing: 0.1em;
      overflow: hidden;
      transition: filter 0.4s ease;
    }

    .product-card:hover .product-card__img {
      filter: brightness(1.05);
    }

    .product-card__badge {
      position: absolute;
      top: 0.75rem;
      left: 0.75rem;
      padding: 0.2rem 0.6rem;
      font-family: 'Oswald', sans-serif;
      font-size: 0.6rem;
      font-weight: 700;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      z-index: 3;
    }

    .product-card__badge--new {
      background: var(--sw-red);
      color: var(--sw-white);
    }

    .product-card__badge--soldout {
      background: var(--sw-black);
      color: var(--sw-mid-gray);
    }

    .product-card__info {
      padding: 1rem;
    }

    .product-card__name {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.8rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--sw-white);
      margin-bottom: 0.25rem;
    }

    .product-card__meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .product-card__price {
      font-family: 'Roboto Mono', monospace;
      font-size: 0.8rem;
      color: var(--sw-mid-gray);
    }

    .product-card__sizes {
      font-family: 'Roboto Mono', monospace;
      font-size: 0.6rem;
      color: var(--sw-mid-gray);
      letter-spacing: 0.05em;
    }

    /* Quick-view overlay on hover */
    .product-card__overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 0.75rem;
      background: var(--sw-white);
      color: var(--sw-black);
      font-family: 'Oswald', sans-serif;
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      text-align: center;
      transform: translateY(100%);
      transition: transform 0.3s ease;
    }

    .product-card:hover .product-card__overlay {
      transform: translateY(0);
    }

    /* ========================================
       Featured Drop Section
       ======================================== */
    .featured-drop {
      display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: 80vh;
      background: var(--sw-off-black);
    }

    .featured-drop__image {
      background: var(--sw-light-gray);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Roboto Mono', monospace;
      font-size: 0.7rem;
      color: var(--sw-mid-gray);
    }

    .featured-drop__content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 4rem;
    }

    .featured-drop__collab {
      font-family: 'Roboto Mono', monospace;
      font-size: 0.65rem;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--sw-orange);
      margin-bottom: 1rem;
    }

    .featured-drop__title {
      font-family: 'Anton', sans-serif;
      font-size: clamp(3rem, 5vw, 5rem);
      text-transform: uppercase;
      line-height: 0.9;
      margin-bottom: 1.5rem;
    }

    .featured-drop__desc {
      font-size: 0.95rem;
      color: var(--sw-mid-gray);
      max-width: 420px;
      margin-bottom: 1rem;
      line-height: 1.7;
    }

    .featured-drop__price {
      font-family: 'Roboto Mono', monospace;
      font-size: 1.25rem;
      font-weight: 500;
      color: var(--sw-white);
      margin-bottom: 2rem;
    }

    .featured-drop__sizes {
      display: flex;
      gap: 0.5rem;
      margin-bottom: 2.5rem;
    }

    .size-btn {
      width: 2.5rem;
      height: 2.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--sw-charcoal);
      background: transparent;
      color: var(--sw-white);
      font-family: 'Roboto Mono', monospace;
      font-size: 0.65rem;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .size-btn:hover,
    .size-btn--selected {
      border-color: var(--sw-white);
      background: var(--sw-white);
      color: var(--sw-black);
    }

    .size-btn--unavailable {
      color: var(--sw-charcoal);
      border-color: var(--sw-charcoal);
      cursor: not-allowed;
      text-decoration: line-through;
    }

    /* ========================================
       Newsletter / Waitlist
       ======================================== */
    .waitlist {
      padding: 6rem 2rem;
      text-align: center;
      background: var(--sw-black);
      border-top: 1px solid var(--sw-charcoal);
    }

    .waitlist__title {
      font-family: 'Anton', sans-serif;
      font-size: clamp(2rem, 5vw, 4rem);
      text-transform: uppercase;
      margin-bottom: 0.75rem;
    }

    .waitlist__desc {
      font-size: 0.9rem;
      color: var(--sw-mid-gray);
      max-width: 400px;
      margin: 0 auto 2rem;
    }

    .waitlist__form {
      display: flex;
      max-width: 480px;
      margin: 0 auto;
      border: 1px solid var(--sw-charcoal);
    }

    .waitlist__input {
      flex: 1;
      padding: 1rem 1.25rem;
      background: var(--sw-off-black);
      border: none;
      color: var(--sw-white);
      font-family: 'Inter', sans-serif;
      font-size: 0.85rem;
      outline: none;
    }

    .waitlist__input::placeholder {
      color: var(--sw-mid-gray);
    }

    .waitlist__submit {
      padding: 1rem 2rem;
      background: var(--sw-white);
      color: var(--sw-black);
      border: none;
      font-family: 'Oswald', sans-serif;
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .waitlist__submit:hover {
      background: var(--sw-red);
      color: var(--sw-white);
    }

    /* ========================================
       Footer
       ======================================== */
    .footer {
      padding: 4rem 2rem;
      border-top: 1px solid var(--sw-charcoal);
      background: var(--sw-black);
    }

    .footer__top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 4rem;
      flex-wrap: wrap;
      gap: 2rem;
    }

    .footer__brand {
      font-family: 'Anton', sans-serif;
      font-size: 3rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      line-height: 1;
    }

    .footer__columns {
      display: flex;
      gap: 4rem;
    }

    .footer__col-title {
      font-family: 'Oswald', sans-serif;
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--sw-mid-gray);
      margin-bottom: 1rem;
    }

    .footer__col-link {
      display: block;
      font-size: 0.8rem;
      color: var(--sw-mid-gray);
      margin-bottom: 0.5rem;
      transition: color 0.2s ease;
    }

    .footer__col-link:hover {
      color: var(--sw-white);
    }

    .footer__bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 2rem;
      border-top: 1px solid var(--sw-charcoal);
    }

    .footer__copy {
      font-family: 'Roboto Mono', monospace;
      font-size: 0.65rem;
      color: var(--sw-mid-gray);
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .footer__social {
      display: flex;
      gap: 1.5rem;
    }

    .footer__social-link {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--sw-mid-gray);
      transition: color 0.2s ease;
    }

    .footer__social-link:hover {
      color: var(--sw-white);
    }

    /* ========================================
       Responsive
       ======================================== */
    @media (max-width: 768px) {
      .nav__links {
        display: none;
      }

      .hero {
        padding: 8rem 1.5rem 3rem;
      }

      .featured-drop {
        grid-template-columns: 1fr;
      }

      .featured-drop__content {
        padding: 2rem 1.5rem;
      }

      .product-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .footer__top {
        flex-direction: column;
      }

      .footer__columns {
        gap: 2rem;
      }

      .waitlist__form {
        flex-direction: column;
      }

      .countdown-bar {
        font-size: 0.6rem;
        gap: 1rem;
        padding: 0.5rem 1rem;
      }
    }

    @media (max-width: 480px) {
      .product-grid {
        grid-template-columns: 1fr;
      }

      .section {
        padding: 4rem 1.25rem;
      }
    }
  </style>
</head>
<body>

  <!-- ============ Countdown Bar ============ -->
  <div class="countdown-bar">
    <span class="countdown-bar__label">SS26 DROP 003</span>
    <span class="countdown-bar__timer" id="countdown">02 : 14 : 33 : 07</span>
  </div>

  <!-- ============ Navigation ============ -->
  <nav class="nav">
    <a href="#" class="nav__logo">STRTWRK</a>
    <ul class="nav__links">
      <li><a href="#" class="nav__link">New</a></li>
      <li><a href="#" class="nav__link">Shop</a></li>
      <li><a href="#" class="nav__link">Drops</a></li>
      <li><a href="#" class="nav__link">Lookbook</a></li>
      <li><a href="#" class="nav__link">About</a></li>
    </ul>
    <a href="#" class="nav__cart">
      Cart
      <span class="nav__cart-badge">2</span>
    </a>
  </nav>

  <!-- ============ Hero ============ -->
  <section class="hero">
    <div class="hero__bg-text">STRTWRK</div>
    <div class="hero__content">
      <span class="hero__tag">Spring / Summer 2026</span>
      <h1 class="hero__title">DROP<br>003</h1>
      <p class="hero__subtitle">
        Limited edition capsule. 48 pieces. No restocks.
        Inspired by concrete and velocity.
      </p>
      <a href="#" class="btn">Shop the Drop</a>
    </div>
  </section>

  <!-- ============ Marquee ============ -->
  <div class="marquee">
    <div class="marquee__track">
      <span class="marquee__item">NEW DROP</span>
      <span class="marquee__item marquee__dot">&bull;</span>
      <span class="marquee__item">LIMITED EDITION</span>
      <span class="marquee__item marquee__dot">&bull;</span>
      <span class="marquee__item">NO RESTOCKS</span>
      <span class="marquee__item marquee__dot">&bull;</span>
      <span class="marquee__item">FREE SHIPPING OVER $150</span>
      <span class="marquee__item marquee__dot">&bull;</span>
      <span class="marquee__item">STRTWRK x CONCRETE COLLAB</span>
      <span class="marquee__item marquee__dot">&bull;</span>
      <span class="marquee__item">NEW DROP</span>
      <span class="marquee__item marquee__dot">&bull;</span>
      <span class="marquee__item">LIMITED EDITION</span>
      <span class="marquee__item marquee__dot">&bull;</span>
      <span class="marquee__item">NO RESTOCKS</span>
      <span class="marquee__item marquee__dot">&bull;</span>
      <span class="marquee__item">FREE SHIPPING OVER $150</span>
      <span class="marquee__item marquee__dot">&bull;</span>
      <span class="marquee__item">STRTWRK x CONCRETE COLLAB</span>
      <span class="marquee__item marquee__dot">&bull;</span>
    </div>
  </div>

  <!-- ============ Product Grid ============ -->
  <section class="section">
    <p class="section__label">// 001 &mdash; Collection</p>
    <h2 class="section__title">Latest<br>Drop</h2>

    <div class="product-grid">
      <div class="product-card">
        <span class="product-card__badge product-card__badge--new">NEW</span>
        <div class="product-card__img">[PRODUCT IMAGE 420x525]</div>
        <div class="product-card__info">
          <p class="product-card__name">Concrete Hoodie -- Ash</p>
          <div class="product-card__meta">
            <span class="product-card__price">$185.00</span>
            <span class="product-card__sizes">S M L XL</span>
          </div>
        </div>
        <div class="product-card__overlay">Quick View</div>
      </div>

      <div class="product-card">
        <span class="product-card__badge product-card__badge--new">NEW</span>
        <div class="product-card__img">[PRODUCT IMAGE 420x525]</div>
        <div class="product-card__info">
          <p class="product-card__name">Velocity Tee -- Black</p>
          <div class="product-card__meta">
            <span class="product-card__price">$65.00</span>
            <span class="product-card__sizes">S M L XL XXL</span>
          </div>
        </div>
        <div class="product-card__overlay">Quick View</div>
      </div>

      <div class="product-card">
        <div class="product-card__img">[PRODUCT IMAGE 420x525]</div>
        <div class="product-card__info">
          <p class="product-card__name">Cargo Pant -- Olive</p>
          <div class="product-card__meta">
            <span class="product-card__price">$210.00</span>
            <span class="product-card__sizes">28 30 32 34</span>
          </div>
        </div>
        <div class="product-card__overlay">Quick View</div>
      </div>

      <div class="product-card">
        <span class="product-card__badge product-card__badge--soldout">SOLD OUT</span>
        <div class="product-card__img">[PRODUCT IMAGE 420x525]</div>
        <div class="product-card__info">
          <p class="product-card__name">Box Logo Cap -- White</p>
          <div class="product-card__meta">
            <span class="product-card__price">$55.00</span>
            <span class="product-card__sizes">OS</span>
          </div>
        </div>
      </div>

      <div class="product-card">
        <span class="product-card__badge product-card__badge--new">NEW</span>
        <div class="product-card__img">[PRODUCT IMAGE 420x525]</div>
        <div class="product-card__info">
          <p class="product-card__name">Cement Runner -- Gray/White</p>
          <div class="product-card__meta">
            <span class="product-card__price">$245.00</span>
            <span class="product-card__sizes">7 8 9 10 11 12</span>
          </div>
        </div>
        <div class="product-card__overlay">Quick View</div>
      </div>

      <div class="product-card">
        <div class="product-card__img">[PRODUCT IMAGE 420x525]</div>
        <div class="product-card__info">
          <p class="product-card__name">Utility Crossbody -- Black</p>
          <div class="product-card__meta">
            <span class="product-card__price">$95.00</span>
            <span class="product-card__sizes">OS</span>
          </div>
        </div>
        <div class="product-card__overlay">Quick View</div>
      </div>
    </div>
  </section>

  <!-- ============ Featured Drop ============ -->
  <section class="featured-drop">
    <div class="featured-drop__image">[FEATURE IMAGE 700x900]</div>
    <div class="featured-drop__content">
      <p class="featured-drop__collab">STRTWRK x CONCRETE WORKS</p>
      <h2 class="featured-drop__title">MONO<br>RUNNER<br>V2</h2>
      <p class="featured-drop__desc">
        Hand-finished cement-dyed uppers. Vulcanized sole unit.
        Each pair is individually numbered. Limited to 200 pairs worldwide.
      </p>
      <span class="featured-drop__price">$285.00</span>
      <div class="featured-drop__sizes">
        <button class="size-btn">7</button>
        <button class="size-btn">8</button>
        <button class="size-btn size-btn--selected">9</button>
        <button class="size-btn">10</button>
        <button class="size-btn">11</button>
        <button class="size-btn size-btn--unavailable">12</button>
        <button class="size-btn">13</button>
      </div>
      <a href="#" class="btn">Add to Cart</a>
    </div>
  </section>

  <!-- ============ Marquee 2 ============ -->
  <div class="marquee">
    <div class="marquee__track">
      <span class="marquee__item">200 PAIRS ONLY</span>
      <span class="marquee__item marquee__dot">&bull;</span>
      <span class="marquee__item">HAND NUMBERED</span>
      <span class="marquee__item marquee__dot">&bull;</span>
      <span class="marquee__item">CEMENT DYE PROCESS</span>
      <span class="marquee__item marquee__dot">&bull;</span>
      <span class="marquee__item">NO RESTOCKS EVER</span>
      <span class="marquee__item marquee__dot">&bull;</span>
      <span class="marquee__item">200 PAIRS ONLY</span>
      <span class="marquee__item marquee__dot">&bull;</span>
      <span class="marquee__item">HAND NUMBERED</span>
      <span class="marquee__item marquee__dot">&bull;</span>
      <span class="marquee__item">CEMENT DYE PROCESS</span>
      <span class="marquee__item marquee__dot">&bull;</span>
      <span class="marquee__item">NO RESTOCKS EVER</span>
      <span class="marquee__item marquee__dot">&bull;</span>
    </div>
  </div>

  <!-- ============ Waitlist ============ -->
  <section class="waitlist">
    <h2 class="waitlist__title">Get Early Access</h2>
    <p class="waitlist__desc">
      Join the list. Be first to know about drops, restocks, and exclusive collaborations.
    </p>
    <form class="waitlist__form" onsubmit="return false;">
      <input type="email" class="waitlist__input" placeholder="YOUR EMAIL ADDRESS">
      <button type="submit" class="waitlist__submit">Join</button>
    </form>
  </section>

  <!-- ============ Footer ============ -->
  <footer class="footer">
    <div class="footer__top">
      <div class="footer__brand">STRTWRK</div>
      <div class="footer__columns">
        <div>
          <p class="footer__col-title">Shop</p>
          <a href="#" class="footer__col-link">New Arrivals</a>
          <a href="#" class="footer__col-link">All Products</a>
          <a href="#" class="footer__col-link">Footwear</a>
          <a href="#" class="footer__col-link">Accessories</a>
          <a href="#" class="footer__col-link">Collaborations</a>
        </div>
        <div>
          <p class="footer__col-title">Info</p>
          <a href="#" class="footer__col-link">About</a>
          <a href="#" class="footer__col-link">Shipping</a>
          <a href="#" class="footer__col-link">Returns</a>
          <a href="#" class="footer__col-link">Size Guide</a>
          <a href="#" class="footer__col-link">Contact</a>
        </div>
        <div>
          <p class="footer__col-title">Legal</p>
          <a href="#" class="footer__col-link">Terms</a>
          <a href="#" class="footer__col-link">Privacy</a>
          <a href="#" class="footer__col-link">Cookies</a>
        </div>
      </div>
    </div>
    <div class="footer__bottom">
      <span class="footer__copy">&copy; 2026 STRTWRK. All rights reserved.</span>
      <div class="footer__social">
        <a href="#" class="footer__social-link">Instagram</a>
        <a href="#" class="footer__social-link">Twitter</a>
        <a href="#" class="footer__social-link">TikTok</a>
        <a href="#" class="footer__social-link">Discord</a>
      </div>
    </div>
  </footer>

  <!-- ============ Countdown Script ============ -->
  <script>
    /* Simple countdown timer */
    (function() {
      const target = new Date();
      target.setHours(target.getHours() + 2, target.getMinutes() + 14, target.getSeconds() + 33);

      function pad(n) { return String(n).padStart(2, '0'); }

      function update() {
        const now = new Date();
        const diff = Math.max(0, target - now);
        const d = Math.floor(diff / 86400000);
        const h = Math.floor((diff % 86400000) / 3600000);
        const m = Math.floor((diff % 3600000) / 60000);
        const s = Math.floor((diff % 60000) / 1000);
        document.getElementById('countdown').textContent =
          pad(d) + ' : ' + pad(h) + ' : ' + pad(m) + ' : ' + pad(s);
      }

      setInterval(update, 1000);
      update();
    })();
  </script>

</body>
</html>

---

Implementation Tips

• Optimize images aggressively for drop-day traffic – use WebP/AVIF formats, responsive srcset attributes, and lazy loading for product grids; a slow site during a high-traffic drop directly translates to lost sales
• Implement real countdown timers with server-synced time – client-side-only timers drift and can be manipulated; sync with a server timestamp to ensure all users see the same countdown and the drop triggers simultaneously
• Use prefers-reduced-motion to disable marquee animations – scrolling tickers and hover animations should respect user accessibility preferences; wrap animations in @media (prefers-reduced-motion: no-preference) {} queries
• Build sold-out states into every component from the start – do not treat “SOLD OUT” as an edge case; design the card, button, size selector, and page state for unavailability with the same care as the available state
• Leverage CSS clamp() for fluid typography – streetwear’s oversized display text must scale gracefully between mobile (375px) and desktop (1440px+); clamp() eliminates breakpoint-based font-size jumping
• Test on actual mobile devices during drop windows – Chrome DevTools responsive mode does not replicate real-world performance; test on mid-range Android devices and older iPhones where your actual audience shops
• Add skeleton loading states for product grids – during high-traffic drops, API responses may lag; animated skeleton placeholders (dark rectangles pulsing between --sw-off-black and --sw-charcoal) maintain the premium feel while loading
• Use scroll-snap for horizontal product carousels on mobile – the swipe-to-browse pattern feels native on mobile and mirrors the Instagram-trained browsing behavior of streetwear audiences

This site is open source. Improve this page.