---
version: alpha
name: "Stüssy"
description: "Stark black-and-white streetwear retail system set in Helvetica Neue LT Pro — spare editorial grid, left-rail navigation, and the handstyle logo as the sole decorative object."

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#f5f5f5"          # was rgba(0,0,0,0.04) on white — Google format requires hex; used on nav bottom borders

  # Ink / text
  ink: "#000000"
  ink-secondary: "#757575"    # mid-gray for metadata, secondary labels
  on-primary: "#ffffff"       # white reversed onto black surfaces

  # Brand accent — Stüssy uses black as its only brand color
  primary: "#000000"

  # Interaction
  text-hover: "#333333"       # hover text darkening on links
  focus-ring: "#000000"

  # Borders
  border: "#000000"           # 1px top border on list items (nav links)
  border-subtle: "#f5f5f5"    # was rgb(245,245,245) — hairline below-element divider
  border-mid: "#757575"       # select / form element borders

  # Shadow tints
  # was rgba(0,0,0,0.2) and rgba(0,0,0,0.3) — Google format requires hex; flattened on white
  shadow-soft: "#cccccc"      # was rgba(0,0,0,0.2) — Google format requires hex
  shadow-mid: "#b3b3b3"       # was rgba(0,0,0,0.3) — Google format requires hex

  # Semantic
  error: "#cc0000"            # /* estimated */ form validation; not explicitly captured in extraction

typography:
  display-hero:
    fontFamily: "Helvetica Neue LT Pro, HelveticaNeue, Helvetica Neue, Arial, Helvetica, sans-serif"
    fontSize: 48px
    fontWeight: 500
    lineHeight: 0.88
    letterSpacing: 0px
  display:
    fontFamily: "Helvetica Neue LT Pro, HelveticaNeue, Helvetica Neue, Arial, Helvetica, sans-serif"
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0px
  heading-section:
    fontFamily: "Helvetica Neue LT Pro, HelveticaNeue, Helvetica Neue, Arial, Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 0.88
    letterSpacing: 0px
    fontFeature: "\"kern\""
  heading-sub:
    fontFamily: "Helvetica Neue LT Pro, HelveticaNeue, Helvetica Neue, Arial, Helvetica, sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.28
    letterSpacing: 0px
    fontFeature: "\"kern\""
  body-large:
    fontFamily: "Helvetica Neue LT Pro, HelveticaNeue, Helvetica Neue, Arial, Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.40
    letterSpacing: 0px
    fontFeature: "\"kern\""
  body:
    fontFamily: "Helvetica Neue LT Pro, HelveticaNeue, Helvetica Neue, Arial, Helvetica, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.40
    letterSpacing: 0px
    fontFeature: "\"kern\""
  nav-link:
    fontFamily: "Helvetica Neue LT Pro, HelveticaNeue, Helvetica Neue, Arial, Helvetica, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.28
    letterSpacing: 0px
    fontFeature: "\"kern\""
  button-ui:
    fontFamily: "Helvetica Neue LT Pro, HelveticaNeue, Helvetica Neue, Arial, Helvetica, sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0px
    fontFeature: "\"kern\""
  label:
    fontFamily: "Helvetica Neue LT Pro, HelveticaNeue, Helvetica Neue, Arial, Helvetica, sans-serif"
    fontSize: 11px
    fontWeight: 500
    lineHeight: 1.40
    letterSpacing: 0px
    fontFeature: "\"kern\""
  caption:
    fontFamily: "Helvetica Neue LT Pro, HelveticaNeue, Helvetica Neue, Arial, Helvetica, sans-serif"
    fontSize: 10px
    fontWeight: 500
    lineHeight: 1.40
    letterSpacing: 0px
    fontFeature: "\"kern\""
  overline:
    fontFamily: "Helvetica Neue LT Pro, HelveticaNeue, Helvetica Neue, Arial, Helvetica, sans-serif"
    fontSize: 10px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0px
    fontFeature: "\"kern\""

spacing:
  xs: 5px
  sm: 10px
  md: 15px
  lg: 20px
  xl: 30px
  2xl: 55px
  3xl: 125px

rounded:
  none: 0px
  pill: 34px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 16px
  button-primary-hover:
    backgroundColor: "{colors.text-hover}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.none}"
    padding: 8px 16px

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 16px
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border}"
    rounded: "{rounded.none}"
    padding: 8px 16px

  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 0px
  button-ghost-hover:
    textColor: "{colors.text-hover}"
    padding: 0px

  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px
  card-hover:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 8px 10px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus-ring}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 8px 10px

  select:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border-mid}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 6px 10px
  select-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus-ring}"
    rounded: "{rounded.none}"
    padding: 6px 10px

  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 3px 8px

  nav-sidebar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    borderTop: "1px solid {colors.border}"
    padding: 5px 0px

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 9px 15px
---

# Stüssy Design System

## Overview

Stüssy's website is one of the quietest storefronts in streetwear: a white canvas (`{colors.background}`) colonized by a persistent left-rail navigation, sparse editorial photography, and Helvetica Neue LT Pro in medium weight with no decorative punctuation whatsoever. Founded in 1980 by Shawn Stussy in Laguna Beach — the handstyle signature borrowed from his surfboard shaping business — the brand built streetwear's original underground credibility. The site carries that heritage through deliberate restraint: no marquees, no promo banners, no social feed overlays. Just the iconic scrawled wordmark, a left column of category links, and full-bleed photography that earns its silence.

The typography operates as a continuous mono-weight system. Helvetica Neue LT Pro in Roman, Medium, and Bold forms the entire hierarchy — the crown favicon SVG echoes the same geometric register. Every text element uppercase-transforms in practice: navigation labels, category headings, product names. This is not typographic decoration; it is tone. Stüssy's design language belongs to the early zine era of streetwear typography, when uppercase Helvetica on offset printing meant authenticity. The site digitizes that posture without nostalgia, keeping the type small, tight, and confident.

What distinguishes this system from its streetwear contemporaries is the structural choice of the left-rail sidebar. Where Palace and Supreme run horizontal navigation, Stüssy's category menu runs vertically along the left edge, producing a layout closer to an editorial archive than a product grid. The primary canvas is the wide right column that receives full-height photography. The sidebar does not collapse into a hamburger at desktop widths — it is always present, always vertical, a permanent directory beside the image plane.

**Key Characteristics:**
- White canvas (`{colors.background}`) with black ink (`{colors.ink}`) throughout — no chromatic accent, zero exceptions
- Helvetica Neue LT Pro self-hosted in Roman (400), Medium (500), and Bold (700) — all three weights in active use, uppercase transforms applied system-wide
- Persistent left-rail sidebar navigation (`{components.nav-sidebar}`) — vertical directory, border-top on each link, page-length
- Zero border-radius on all structural UI (`{rounded.none}`) — pill (`{rounded.pill}`) reserved for circular badge/pill elements only
- Product cards are pure photography rectangles: zero padding, zero radius, zero shadow — the image is the card
- Spacing built on a non-standard 5px base grid (`{spacing.xs}`) rather than the conventional 8px — tighter and more print-like
- Font sizes compressed: the body reads at 12px weight 500, navigation links at 12px — small text as a stance, not a limitation
- Uppercase transforms applied pervasively — Helvetica Neue at uppercase 12px reads as a label, not as metadata
- Two shadows captured (20% and 30% black ambient glows) — approximated to near-white hex; the effective design is flat
- No gradients, no custom iconography beyond SVG glyphs, no brand color other than `{colors.primary}` (black)

## Colors

### Surface & Canvas
- **White** (`{colors.background}`): The total page canvas — full-bleed, uninterrupted. The sidebars and header share this base; there is no secondary panel tint in active use.
- **Near-White Surface** (`{colors.surface}`): Derived from the hairline `rgb(245, 245, 245)` border value captured in extraction — used as the lightest possible hover fill or divider surface. Effectively invisible against white.

### Ink / Text
- **Black** (`{colors.ink}`): The sole ink color for all headings, body copy, navigation links, and interactive elements. No ink variation other than opacity-reduced approximations.
- **Mid Gray** (`{colors.ink-secondary}`): Secondary metadata — product subtext, form placeholder states, disabled labels. Derived from the `rgb(117,117,117)` select-border value.
- **White-on-Dark** (`{colors.on-primary}`): Reversed text for any element placed on a black fill — buttons, badges.

### Brand Accent
- **Black** (`{colors.primary}`): Stüssy uses no chromatic brand accent. The primary color IS black — consistent with the brand's refusal to deploy color as a signal. The handstyle logo is the brand's only identity mark; color does not carry that work.

### Interaction States
- **Hover Text** (`{colors.text-hover}`): Subtle darkening on link hover — a near-black that gives interactivity without breaking the monochrome contract.
- **Focus Ring** (`{colors.focus-ring}`): Pure black outline on focus — no glow, no color.

### Borders & Structure
- **Primary Border** (`{colors.border}`): 1px solid black used as the top rule on each sidebar navigation item — the vertical list is structured entirely by hairline rules.
- **Hairline Border** (`{colors.border-subtle}`): The `rgb(245, 245, 245)` bottom-border captured on div and button elements — almost invisible, structural only.
- **Form Border** (`{colors.border-mid}`): Gray applied to select and form-field outlines. The `rgb(117, 117, 117)` value from the extraction data.

### Shadows
- **Shadow Soft** (`{colors.shadow-soft}`): Was `rgba(0, 0, 0, 0.2) 0px 0px 18px 0px` — Google format requires hex; flattened on white. Used at extremely low incidence — effectively unused.
- **Shadow Mid** (`{colors.shadow-mid}`): Was `rgba(0, 0, 0, 0.3) 0px 0px 24px 0px` — Google format requires hex; flattened on white. The system is designed as flat; these values appear in modal/overlay contexts.

## Typography

### Font Family
- **Primary**: `Helvetica Neue LT Pro`, with fallbacks: `HelveticaNeue`, `Helvetica Neue`, `Arial`, `Helvetica`, `sans-serif`
- **Self-hosted files**: `HelveticaNeueLTPro-Roman.woff2` (Regular/400), `HelveticaNeueLTPro-Md.woff2` (Medium/500), `HelveticaNeueLTPro-Bd.woff2` (Bold/700)
- **Instrument Sans** also hosted (`instrumentsans_n4`, `instrumentsans_n7`) — used in specific checkout or third-party contexts, not the core design language
- **OpenType Features**: `"kern"` applied to every captured text element — standard kerning only, no stylistic sets, no ligature overrides

*For external implementations where Helvetica Neue LT Pro is unavailable, `Inter` at weight 500/700 is the closest web-safe substitute for the medium-weight uppercase posture. `DM Sans` reads warmer; `Outfit` more expressive. The distinguishing characteristic of Neue LT Pro over system Helvetica is the slightly wider aperture and more even weight distribution at small sizes.*

### Hierarchy

The complete type scale is declared in the `typography:` token block above. Use those tokens directly.

| Token | Use |
|---|---|
| `display-hero` | Campaign-scale headlines, seasonal drops, large editorial headers |
| `display` | Section banners, category landing heads |
| `heading-section` | In-page section titles, sidebar section labels at 16px |
| `heading-sub` | Product group sub-headers, taxonomy labels at 12px Bold |
| `body-large` | Editorial copy, product description leads |
| `body` | Core product metadata, filter labels, secondary navigation |
| `nav-link` | Sidebar navigation items, header utility links |
| `button-ui` | CTA labels, add-to-cart, checkout actions |
| `label` | Form field labels, product attribute tags at 11px |
| `caption` | SKU data, size/color notation, fine print at 10px |
| `overline` | Category flags, status tags at 10px Bold |

### Principles
- One typeface carries every role — Helvetica Neue LT Pro from the scrawled-headline scale to the 10px caption, with no supplementary display face or serif for contrast
- Three weights in active use (Roman 400, Medium 500, Bold 700) — weight is the typographic variable, not face or size variation
- Uppercase transforms applied at almost every scale: the system reads as a label-printer aesthetic carried into a browser, consistent with Stüssy's print and skate-culture origins
- Body and navigation text sits at 12px — the system is intentionally small and dense, treating the user as someone who already knows the brand taxonomy
- Line-height at 0.88 for the primary body context (16px) — a tighter-than-1.0 setting that is unusual outside tightly-leaded print design

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 5px.

The spacing personality is tight, print-derived, and non-standard. The dominant measured values — 3.5px (494 instances), 5px (71 instances), 15px (30 instances), 20px (49 instances) — cluster around 5px increments rather than the conventional 8px grid. This produces a density closer to a printed lookbook or catalog than a web e-commerce environment. Section-level spacing at 30px and 55px creates moderate breathing room; the 125px value appears in the left-rail sidebar height or hero image offset zones.

### Grid & Container
- Layout: persistent left sidebar (category navigation, ~120px wide) + full-width right image column — a classic editorial split
- Right column carries full-height photography with no internal gutter — photography bleeds to the column edge
- Product grids within category pages: multi-column responsive, 3–4 columns desktop, collapsing at mobile breakpoints
- Max container: approximately 900px at the largest breakpoint before the layout expands to full-width

### Whitespace Philosophy
- The sidebar is always present at desktop widths — the page never goes purely full-bleed without its directory structure
- Product card spacing is zero padding — the image tile and the type beneath are the only vertical rhythm signals
- Section-level air is modest: 30–55px between page zones. The system does not use generous vertical breathing room as a luxury signal; whitespace is structural, not atmospheric

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Every structural element — product tiles, nav sidebar, buttons, page canvas |
| Ambient (Level 1) | `rgba(0,0,0,0.2) 0px 0px 18px` | Approximated to `{colors.shadow-soft}`; modal/overlay contexts |
| Ambient (Level 2) | `rgba(0,0,0,0.3) 0px 0px 24px` | Approximated to `{colors.shadow-mid}`; deeper modal depth |
| Focus Ring | `1px solid {colors.focus-ring}` | Input and interactive focus state |

**Shadow Philosophy**: Stüssy is architecturally flat. The two shadow values captured by dembrandt are ambient glows applied at low confidence (count of 1 each) — they appear in overlay or modal contexts, not in the product browsing experience. The core site reads as a shadowless system: no card elevation, no button lift, no panel depth. This flatness matches the zine-and-catalog register of the brand's visual history; depth is expressed through the photography's dimensional subjects, not through UI layering.

## Shapes

The complete radius scale is in the `rounded:` token block above.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | All structural elements — cards, buttons, inputs, nav, dividers, section containers |
| `pill` | 34px | Pill-shaped badge or count indicator (span elements only — 3 instances captured) |

The system is binary: structural UI is entirely flat-cornered (`{rounded.none}`), and the only rounding in the system is the 34px pill reserved for count badges or notification indicators on navigation items. This is not a systematic radius scale — it is one design exception on a fully zero-radius base, confirming that Stüssy treats rounded corners as functional signals (this is a count, not a label) rather than aesthetic ones.

## Components

The complete component spec lives in the `components:` token block above.

### Button Variants

- **`button-primary`** — Black fill, white label, zero radius, compact 8px/16px padding. The primary CTA: "Add to Cart," checkout submit. On hover, shifts to near-black `{colors.text-hover}`.
- **`button-secondary`** — White fill, black label, 1px black border (`{colors.border}`). Secondary actions — wishlist, share, secondary shop filters.
- **`button-ghost`** — Transparent fill, black text, zero padding. Inline link-style actions, tertiary navigation items, sidebar utilities.

### Cards

Product cards are photography-first rectangles with zero structural chrome: no padding, no radius, no shadow, no border. The tile IS the photograph. Product name appears in `{typography.body}` (12px Medium uppercase) directly below the image; price and color data in `{typography.caption}` (10px Medium). Cards do not lift or scale on hover — the photography is the experience.

### Inputs

Form inputs use a bottom-underline border treatment (`border-bottom: 1px solid {colors.ink}`) captured in extraction, consistent with the sidebar's top-ruled list items. The convention creates a ruled-line aesthetic rather than a boxed-field one. Focus: the bottom rule intensifies or a black outline ring appears. Background stays white throughout. Typography: `{typography.body}` (12px Medium).

### Badges / Tags

The pill badge (`{rounded.pill}` at 34px) appears on navigation count indicators. Construction: black fill, white caption at `{typography.caption}` (10px), 3px/8px padding. The 34px radius on a small element produces a fully circular or oval pill. This is the system's only rounded element.

### Navigation

The sidebar (`{components.nav-sidebar}`) is the primary navigation structure: a vertical list of categories bordered above each item by a 1px black rule (`{colors.border}`), type in `{typography.nav-link}` (12px Medium uppercase). The structure is a visible directory — every category names itself in uppercase Helvetica beside the main editorial image. The top header bar (`{components.nav-bar}`) carries the wordmark SVG at left and utility controls (Search, Bag) at right, in 12px Medium.

## Do's and Don'ts

### Do
- Use `{colors.background}` as an unbroken white canvas — no off-white, no warm cream, no panel tints outside structural necessity
- Set every text element in Helvetica Neue LT Pro — do not introduce a secondary typeface even for display headers or pull-quotes
- Apply `{rounded.none}` to every structural element; reserve `{rounded.pill}` exclusively for count indicators and notification badges
- Keep all product photography at zero padding, zero radius, zero shadow — the image bleeds to the tile edge
- Maintain the left-rail sidebar as a persistent, vertical, full-height directory; it is the brand's structural signature on the web
- Use uppercase text-transform on navigation items and product labels — the uppercase register is part of the type identity
- Apply 1px black top borders (`{colors.border}`) to each sidebar navigation item — the ruled-list format is structural to the layout
- Keep type small and dense: body at 12px Medium, caption at 10px — the system speaks to brand familiarity, not first-time orientation

### Don't
- Don't introduce any chromatic brand accent — Stüssy's identity has no color beyond black and white; adding a teal, orange, or red disrupts the posture entirely
- Don't use border-radius between 1px and 33px — the system is binary (`{rounded.none}` or `{rounded.pill}`); mid-range softness has no precedent here
- Don't add elevation to product cards — no shadows, no border, no lift on hover; the photography is dimensional, the UI is flat
- Don't increase font sizes above 16px for body contexts — the dense small-type scale is intentional, not a mobile-only compromise
- Don't convert the sidebar to a horizontal top navigation at desktop widths — the vertical rail is the layout's architectural choice, not a mobile fallback
- Don't apply gradient fills to any surface — the system is flat, matte, and zero-gradient
- Don't use sentence-case for navigation labels — uppercase Helvetica is the system's voice at every scale
- Don't introduce bold (700) weight at body or nav sizes — Bold is reserved for UI element labels (`{typography.button-ui}`) and overline tags; Medium 500 carries the readable content
- Don't use more than two shadow layers — the system is designed flat; overlay shadows are a utility exception, not a design grammar

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <484px | Single-column product stack; sidebar collapses or hides; wordmark centers |
| Mobile | 484–600px | Two-column product grid begins; condensed header |
| Mobile Large | 600–699px | Two to three columns; sidebar may appear as drawer |
| Tablet | 699–768px | Three-column grid; sidebar visible; split layout begins |
| Desktop | 768–900px | Full sidebar + right-column editorial layout; four-column product grids |
| Large Desktop | >900px | Maximum layout width; sidebar persistent; photography at full height |

### Touch Targets
- Navigation sidebar links at 12px with 5px vertical padding — tap target is approximately 22px; at mobile widths the list expands to full-row taps
- Buttons at 8px/16px padding produce approximately 28–34px tap height — adequate but minimal; primary CTA areas may use full-width treatment at mobile
- Product tile tap area is the full image rectangle — naturally oversized by photography dimensions

### Collapsing Strategy
- Left-rail sidebar: persistent at desktop (≥768px), collapses to drawer or hamburger at mobile — the horizontal nav utility emerges for small screens
- Product grid: 4 columns → 3 → 2 → 1 across breakpoints; photography remains zero-padding throughout all collapse states
- Header: wordmark and utility controls persist at all widths; search link stays visible
- Section padding contracts from `{spacing.xl}` (30px) to `{spacing.md}` (15px) at mobile

### Image Behavior
- Editorial photography is full-height in the right column — the image height drives page height at desktop
- Product thumbnail photography fills tiles at every breakpoint with no border-radius and no shadow
- Hero campaign images use object-fit cover — compositional framing is editorial, not mechanical cropping
- Logo wordmark SVG scales proportionally; crown favicon is 32px SVG at all sizes

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}`
- Text: `{colors.ink}`
- Secondary text: `{colors.ink-secondary}`
- Brand accent: `{colors.primary}` (black)
- Border (sidebar rules): `{colors.border}`
- Form borders: `{colors.border-mid}`
- CTA: `{colors.primary}`
- Focus ring: `{colors.focus-ring}`

### Example Component Prompts

- "Build a Stüssy product browsing layout. Left: a 120px-wide vertical sidebar on white (`{colors.background}`). Each category link in Helvetica Neue LT Pro 12px Medium uppercase (`{typography.nav-link}`), black (`{colors.ink}`), zero decoration. Each list item separated by a 1px solid black top border (`{colors.border}`), 5px top/bottom padding. Right: full-width editorial photograph bleeding to the column edge, no radius, no shadow. The sidebar is always visible at desktop widths."
- "Create a Stüssy primary Add to Cart button. Background: `{colors.primary}` (black). Text: `{colors.on-primary}` (white). Font: Helvetica Neue LT Pro 12px Bold uppercase (`{typography.button-ui}`), kern feature enabled. Padding: 8px 16px. Radius: `{rounded.none}`. No shadow. Hover: background shifts to `{colors.text-hover}` (#333) over 0.2s ease."
- "Design a Stüssy product card. No border, no radius, no shadow, no padding. Product photograph fills the full tile rectangle. Directly below: product name in 12px Medium uppercase Helvetica Neue LT Pro (`{typography.body}`), black (`{colors.ink}`). Below that: price in 10px Medium (`{typography.caption}`), color option in 10px Medium ink-secondary (`{colors.ink-secondary}`). Hover state: no scale, no lift — the image does not animate."
- "Create a Stüssy-style navigation count badge. Background: `{colors.primary}` (black). Text: `{colors.on-primary}` (white). Font: 10px Medium Helvetica Neue LT Pro (`{typography.caption}`). Padding: 3px 8px. Radius: `{rounded.pill}` (34px) — fully pill-shaped. Used as a cart count or notification indicator placed inline after a navigation label."
- "Build a Stüssy search / form input. White background, no border-left/right/top. Bottom border only: 1px solid `{colors.ink}`. No radius. Font: Helvetica Neue LT Pro 12px Medium (`{typography.body}`), black text. Padding: 8px 0px. Placeholder in `{colors.ink-secondary}`. On focus: bottom border sharpens or a 1px black outline ring appears (`{colors.focus-ring}`). No glow, no color shift."
- "Design a Stüssy-style top header bar on white (`{colors.background}`). Left: handstyle wordmark SVG in black (`{colors.ink}`). Right: SEARCH and BAG text links in 12px Medium Helvetica Neue uppercase (`{typography.nav-link}`), black, no underline on rest, subtle underline or opacity change on hover. Height approximately 40px. No bottom border, no shadow. The header is flat against the white canvas."

### Iteration Guide

1. Start with `{colors.background}` as the full unbroken canvas. Set the left sidebar to approximately 120px width with the primary editorial image column filling the remainder.
2. Apply `{colors.ink}` as the single ink color for all text, borders, and interactive elements. There is no accent color — black does all the work.
3. Set Helvetica Neue LT Pro Medium (500) as the base weight for body, navigation, and captions. Step up to Bold (700) only for button labels and UI overline tags. Apply uppercase text-transform broadly.
4. Keep `{rounded.none}` on every structural element. The only rounding permitted is `{rounded.pill}` on count badge spans.
5. Rule the sidebar with 1px solid black top borders (`{colors.border}`) on each nav item. This is the system's primary structural element.
6. Let photography carry all visual energy — no card shadows, no image framing, no hover effects on tiles. The image is always flat in its rectangle.
7. Match the 5px base spacing system: use 5px, 10px, 15px, 20px increments inside components. Use 30px and 55px for section-level separation.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Stüssy. Brand names and trademarks belong to their respective owners.