---
version: alpha
name: Highsnobiety
description: "White canvas streetwear media — HS Sans Bold uppercase at tight negative tracking for all display, a near-achromatic black-and-white palette with a single electric yellow accent, and editorial photography doing every chromatic job the chrome refuses."

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#f5f5f5"             # light section bands, hover state background  /* estimated */
  surface-dark: "#000000"        # inverted hero sections, pill badge fill

  # Ink / text
  ink: "#000000"                 # primary headlines, body copy, nav links
  ink-secondary: "#737373"       # metadata, captions, secondary labels
  on-dark: "#ffffff"             # text on black surfaces
  on-primary: "#000000"          # text on electric-yellow accent

  # Brand accent
  primary: "#e5ff00"             # electric chartreuse — "Spring 25 Issue" badge, low-confidence but confirmed
  primary-container: "#e5ff00"   # same hue for container contexts

  # Interaction states
  text-hover: "#2e2e2e"          # link color on hover — from extracted link tree  /* was rgb(46,46,46) */
  link-default: "#020202"        # near-black default link color  /* was rgb(2,2,2) */

  # Borders
  border: "#000000"              # 1px solid hairline dividers and nav underlines

  # Shadow tints
  shadow-soft: "#000000"         # was rgba(0,0,0,0.12) — flattened for Google format; used at near-zero opacity

  # Focus / accessibility
  focus-ring: "#000000"          # outline on keyboard navigation  /* estimated — no explicit focus color in dembrandt data */

typography:
  display-hero:
    fontFamily: "HS Sans, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 96px
    fontWeight: 700
    lineHeight: 0.95
    letterSpacing: -1.92px
  display:
    fontFamily: "HS Sans, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 64px
    fontWeight: 700
    lineHeight: 0.95
    letterSpacing: -1.6px
  heading-section:
    fontFamily: "HS Sans, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 44px
    fontWeight: 700
    lineHeight: 0.95
    letterSpacing: 0px
  heading-sub:
    fontFamily: "HS Sans, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 900
    lineHeight: 1.10
    letterSpacing: -0.64px
  body-large:
    fontFamily: "HS Sans, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  body:
    fontFamily: "HS Sans, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  nav-link:
    fontFamily: "HS Sans, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.20
    letterSpacing: 0.14px
  button-ui:
    fontFamily: "HS Sans, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.20
    letterSpacing: 0.14px
  label:
    fontFamily: "HS Sans, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 900
    lineHeight: 1.20
    letterSpacing: 0px
  caption:
    fontFamily: "HS Sans, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
  4xl: 96px

rounded:
  none: 0px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
  button-primary-hover:
    backgroundColor: "{colors.ink-secondary}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px

  button-outline:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
  button-outline-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px

  badge-accent:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
  badge-dark:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

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

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

  nav:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 16px 0px
  nav-link-hover:
    textColor: "{colors.text-hover}"
    padding: 16px 0px

  section-label:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 0px
---

# Highsnobiety Design System

## Overview

Highsnobiety is the loudest quiet brand in streetwear media. The canvas is white (`{colors.background}`) — a complete inversion of the noir-editorial playbook — and against that open white expanse, HS Sans arrives at 96px, uppercase, weight 700, crammed at `lineHeight: 0.95` and tracking pulled deep into negative territory. The result is a display type that behaves like a stamp rather than a heading: words press into the page, each letter almost touching its neighbor, headlines that feel screen-printed rather than set. Everything is uppercase at the display level. Nothing whispers.

The brand's singular hue is the electric chartreuse — `{colors.primary}` (`#e5ff00`) — and it appears with pointed restraint. On the live site, it surfaces as a pill badge on the "Spring 25 Issue" navigation tab: a bolt of voltage against the black nav text, functional and impossible to miss. It does not repeat, it does not bleed into buttons or backgrounds, it does not spawn a palette of relatives. One saturated color, one job, maximum contrast. Every other chromatic decision is made by editorial photography — campaign imagery in full color against the achromatic chrome, which recedes completely to let the clothes and the culture speak.

The typographic system is monolithic: HS Sans is the only typeface. There is no secondary serif, no monospace register, no decorative face imported for section stamps. HS Sans ranges across weight 400 for reading copy and body UI, weight 700 for display, and weight 900 for section labels and subheadings — three weights of the same grotesque doing every register of the hierarchy. The system trusts weight contrast and scale over font contrast. It is an editorial system with the confidence to use one tool well.

**Key Characteristics:**
- Pure white canvas (`{colors.background}`) with no tinting — the anti-noir street-media statement
- HS Sans Bold (700) uppercase at 96px–44px, `lineHeight: 0.95`, `letterSpacing: -1.92px` — display type as graphic stamp
- Single typeface (HS Sans) across weights 400 / 700 / 900; no secondary or decorative face introduced
- Electric chartreuse accent (`{colors.primary}`) used exactly once in nav — maximum voltage, minimal footprint
- Near-achromatic color system: black ink on white canvas, with `{colors.ink-secondary}` gray for metadata
- Binary radius: `{rounded.none}` on all structural elements, `{rounded.pill}` only for nav-badge and filter chips
- 8px base spacing scale, with 96px (`{spacing.4xl}`) as the dominant large-block separator
- Story tiles are chromeless — image crops edge-to-edge, no card border, no resting shadow
- Photography delivers all chromatic weight; the chrome provides none
- Motion at 0.2s ease across all interactive elements; media hover at 1s ease (cinematic)
- Uppercase labels at 0.14px tracking in `{typography.nav-link}` — compact, not ballooned
- Nav collapses at 639px; tablet range begins at 640px; desktop at 1024px

## Colors

### Surface & Canvas
- **White** (`{colors.background}`): The entire editorial surface. White is Highsnobiety's page — not dark, not tinted, not warm. This is an absolute commitment.
- **Light Gray** (`{colors.surface}`): Reserved for hover states and subtle alternating section bands. Barely distinct from white at a glance.
- **Black** (`{colors.surface-dark}`): Inverted sections, hero overlays, and the fill for dark pill badges. Appears in the navigation bar's active badge, and in promotional dark-canvas strips.

### Ink / Text
- **Black** (`{colors.ink}`): All editorial headlines, body copy, nav links, and interactive labels. Pure `#000000` — the boldest possible choice against the white canvas.
- **Mid Gray** (`{colors.ink-secondary}`): `#737373` — bylines, timestamps, section labels, tertiary UI metadata. The only shade that softens the otherwise binary chromatic language.
- **White on Dark** (`{colors.on-dark}`): Text placed on `{colors.surface-dark}` backgrounds, pill badges, inverted CTAs.

### Brand Accent
- **Electric Chartreuse** (`{colors.primary}`): `#e5ff00` — the signature voltage. A neon yellow-green that reads immediately as a signal, not a decoration. Appears as the "Spring 25 Issue" nav tab badge. Never applied broadly; its rarity is what makes it work.

### Interaction
- **Hover Text** (`{colors.text-hover}`): `#2e2e2e` — near-black link color on hover, a fractional shift from the default black that registers as depth rather than color change.
- **Default Link** (`{colors.link-default}`): `#020202` — functionally black; provides the near-black base before hover darkens it.

### Borders & Shadows
- **Border** (`{colors.border}`): `#000000` — 1px solid hairline, used for navigation underlines and section dividers. Hard edge, no softening.
- **Shadow Soft** (`{colors.shadow-soft}`): Flattened from `rgba(0,0,0,0.12)` — the extracted shadow is near-transparent, appearing only on consent-layer overlays. Not a design element.

## Typography

### Font Family
- **Primary**: `HS Sans` (self-hosted, proprietary grotesque), with fallbacks `Helvetica Neue, Helvetica, Arial, sans-serif`. The only type family in the system — it covers display, body, UI, nav, labels, and captions through weight and scale variation alone.
- **No secondary typeface**: Highsnobiety does not pair HS Sans with a serif, a display face, or a monospace — a deliberate monolithic choice.

### Hierarchy

The complete type scale lives in the `typography:` token block. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 96px / Bold 700 / uppercase / `lineHeight: 0.95` / `letterSpacing: -1.92px` — cover headlines, campaign openers |
| `display` | 64px / Bold 700 / uppercase / `lineHeight: 0.95` / `letterSpacing: -1.6px` — primary story headlines |
| `heading-section` | 44px / Bold 700 / uppercase / `lineHeight: 0.95` — section group headers |
| `heading-sub` | 32px / Black 900 / `lineHeight: 1.10` / `letterSpacing: -0.64px` — subheadings, feature callouts |
| `body-large` | 20px / Regular 400 / `lineHeight: 1.60` — article decks, intro paragraphs |
| `body` | 17px / Regular 400 / `lineHeight: 1.60` — reading copy, form labels |
| `nav-link` | 14px / Regular 400 / uppercase / `letterSpacing: 0.14px` — horizontal nav categories |
| `button-ui` | 14px / Bold 700 / uppercase / `letterSpacing: 0.14px` — CTA labels, badge text |
| `label` | 16px / Black 900 / `lineHeight: 1.20` — product labels, emphasized UI |
| `caption` | 14px / Regular 400 / `lineHeight: 1.40` — timestamps, photo credits, metadata |

### Principles
- **One face, three weights**: HS Sans at 400, 700, and 900 covers every register. No typeface imports beyond the brand grotesque.
- **Uppercase is the display register**: All `display-hero`, `display`, and `heading-section` tokens run with `text-transform: uppercase`. Body copy and reading text stay sentence-case.
- **Tight line-height defines the stamp quality**: `lineHeight: 0.95` on every display token means ascenders nearly collide. This is the system's signature compression, not an accident.
- **Negative tracking at large sizes**: `display-hero` tracks at `-1.92px`, `display` at `-1.6px`. Below 32px, tracking flips to slightly positive (`0.14px`) for legibility.
- **Weight 900 for section labels**: The `heading-sub` and `label` tokens use Black weight — heavier than the Bold 700 display. Subheadings punch harder than captions, not softer.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block. Base unit: 8px, scaling through the standard doubling sequence plus 48px and 96px for large section separators.

Highsnobiety's spacing is generous at the macro level and editorial-tight at the tile level. Story tiles pack image edges with minimal gutter (`{spacing.sm}`–`{spacing.md}`); major editorial sections breathe at `{spacing.3xl}`–`{spacing.4xl}`. The 96px value (`{spacing.4xl}`) appears with high frequency on the live site — used as the dominant separator between homepage sections and as a structural column width signal.

### Grid & Container
- Max content width: approximately 1044px centered (from the 1044px spacing value appearing in structural positions)
- Story grid: 3–4 columns on desktop, reducing to 2-up then 1-up on mobile
- Navigation: centered wordmark, horizontal category links below, hamburger menu icon at left edge
- Campaign heroes: full-bleed, breaking the content container
- Breakpoints: 639px (mobile), 640px (tablet start), 1023px (tablet end), 1024px (desktop)

### Whitespace Philosophy
- **White is the texture**: Unlike dark editorial brands that use black as structure, Highsnobiety uses white space actively — it separates, breathes, and gives photography room to land.
- **96px section blocks**: The `{spacing.4xl}` gap between homepage sections creates deliberate pauses — editorial rhythm over retail density.
- **Photography defines the tile boundary**: No card chrome, no border, no rounding — the image edge is the tile edge.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | Story tiles, page canvas, all editorial surfaces — the default everywhere |
| Hairline (Level 1) | `1px solid {colors.border}` | Navigation underlines, section dividers |
| Hover Lift (Level 2) | Background shifts to `{colors.surface}` | Story tile hover — subtle gray tint under the image |
| Overlay (Level 3) | `rgba(0,0,0,0.12)` shadow at 0px spread | Third-party consent/modal layer only — not a design element |
| Focus (Level 4) | `outline: 2px solid {colors.focus-ring}` | Keyboard accessibility ring on interactive elements |

**Shadow Philosophy**: Highsnobiety is effectively shadowless. The two shadows in the dembrandt output are essentially invisible (0px spread, near-transparent opacity) and belong to third-party consent UI. The design system itself creates zero z-axis illusion — depth is expressed entirely through the black-on-white ink relationship and the visual weight of HS Sans Bold uppercase at negative tracking.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Every structural element — tiles, buttons, inputs, nav — the default |
| `pill` | 9999px | Nav badges ("Spring 25 Issue"), category filter chips |

The system is binary and uncompromising. Hard 0px corners everywhere structural; pill radius only for the narrow semantic category of "this is a badge or filter chip." There is no 4px, no 8px, no 16px intermediate. Adding any mid-range border-radius to a button, card, or input breaks the visual identity immediately.

## Components

The complete component spec lives in the `components:` token block. Reference component tokens directly via `{components.*}`.

### Button Variants

- **`button-primary`** — Black fill (`{colors.surface-dark}`), white label (`{colors.on-dark}`), `{typography.button-ui}` (14px / 700 / uppercase), 0px radius, `12px 24px` padding. Hover darkens to `{colors.ink-secondary}` — subtle, not a full-color shift.
- **`button-outline`** — White fill, black text, 1px `{colors.border}` border, 0px radius. Hover fills `{colors.surface}`. Used for secondary actions on white canvas.

### Cards

Story tiles are chromeless editorial primitives. Full-bleed image, then category label in `{colors.ink-secondary}` at `{typography.caption}`, then headline in `{typography.display}` (uppercase Bold, negative tracking). No card border, no shadow, no padding — the image crop is the tile boundary.

- **`card`** — Zero-chrome tile, `padding: 0px`, white surface. Image occupies 100% tile width.
- **`card-hover`** — Background lifts to `{colors.surface}` — a barely-perceptible gray signal of interactivity.

### Inputs

- **`input`** — White fill, 1px solid `{colors.border}` (black), 0px radius, `12px 16px` padding, `{typography.body}` text.
- **`input-focus`** — Border holds at `{colors.focus-ring}`. The square frame doesn't change shape — focus is expressed through border-color only.

### Badges / Tags

- **`badge-accent`** — Electric chartreuse fill (`{colors.primary}`), black label (`{colors.on-primary}`), pill radius, `{typography.button-ui}`. The "Spring 25 Issue" treatment. Maximum signal, minimal usage.
- **`badge-dark`** — Black fill, white label, pill radius. Used for category pills and section tags in dark contexts.

### Navigation

- **`nav`** — White background, black uppercase category links in `{typography.nav-link}`, centered wordmark "HIGHSNOBIETY" in HS Sans Bold. Menu icon at left, search and bag icons at right. Hover: link color shifts to `{colors.text-hover}`.

### Section Labels

- **`section-label`** — Gray text (`{colors.ink-secondary}`), `{typography.caption}`, no background, no padding. Appears above story headlines as an editorial category designator ("STYLE", "SNEAKERS", "SHOPPING").

## Do's and Don'ts

### Do
- Default every canvas to `{colors.background}` (`#ffffff`) — white is the editorial platform, not a fallback
- Set all display and section headlines in `{typography.display-hero}` / `{typography.display}` at uppercase with negative tracking — the stamp compression is the brand voice
- Use HS Sans exclusively — no secondary faces, no serif pairings, no display imports
- Reserve `{colors.primary}` (`#e5ff00`) for single-use badge contexts; rarity is its power
- Keep all buttons, cards, inputs, and structural elements at `{rounded.none}` — never introduce mid-range radii
- Use `{rounded.pill}` only for nav badges and category filter chips — the semantic "this is a chip" signal
- Let editorial photography carry chromatic weight — the chrome introduces no competing color
- Use `{spacing.4xl}` (96px) for major section separations — the macro spacing is generous even as tiles are tight
- Apply `{colors.ink-secondary}` only for metadata — section labels, bylines, captions — never for headlines

### Don't
- Don't soften the canvas to off-white or cream — `{colors.background}` is absolute `#ffffff`
- Don't introduce a second typeface — HS Sans weight variation (400 / 700 / 900) is the entire hierarchy
- Don't apply `{colors.primary}` broadly — spreading chartreuse across buttons or backgrounds destroys its signal value
- Don't add card shadows or resting elevation to story tiles — the system is flat; photography provides depth
- Don't use title-case for display headlines — uppercase is structural in this system, not stylistic for individual headlines
- Don't add border-radius between 1px and 9998px — it is `{rounded.none}` or `{rounded.pill}`, nothing between
- Don't reduce `lineHeight` below 0.95 on display type — that is already the floor; going tighter causes rendering artifacts
- Don't apply `{colors.ink-secondary}` to anything interactive — gray is metadata, not a muted action color
- Don't put a resting shadow on navigation — the sticky header is defined by the hairline `{colors.border}` underline only

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile | <640px | Single column; hero display scales to ~48px; nav collapses to hamburger + centered wordmark |
| Tablet | 640–1023px | 2-column story grid; horizontal nav visible; full-bleed heroes maintained |
| Desktop | ≥1024px | Full 3–4-column grid; complete horizontal nav; max ~1044px container |

### Touch Targets
- Nav category links at 14px get `{spacing.md}` top/bottom padding for adequate tap height
- Story tile cards are fully tappable — no isolated hit area on the headline
- Badge pills have `{spacing.xs}` vertical padding minimum; pill shape aids tap affordance on mobile

### Collapsing Strategy
- **Navigation**: Full horizontal category row → hamburger drawer at 640px. Wordmark stays centered at all sizes.
- **Display type**: `display-hero` at 96px scales toward 48–56px on mobile; uppercase and negative tracking are preserved at all sizes.
- **Grid**: 4-up → 2-up → 1-up. Images maintain aspect ratios with `object-fit: cover`.
- **Section spacing**: `{spacing.4xl}` (96px) section gaps compress toward `{spacing.2xl}` (48px) on mobile.

### Image Behavior
- Campaign heroes full-bleed at all breakpoints
- Story tile images run at consistent aspect ratios (3:2 landscape, 2:3 portrait)
- No art direction changes on image crops — the same image serves all breakpoints

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` (`#ffffff`)
- Primary text: `{colors.ink}` (`#000000`)
- Metadata: `{colors.ink-secondary}` (`#737373`)
- Brand accent: `{colors.primary}` (`#e5ff00`) — one use only
- Dark surface: `{colors.surface-dark}` (`#000000`)
- Border: `{colors.border}` (`#000000`, 1px)
- No chromatic palette beyond chartreuse

### Example Component Prompts

1. "Build a Highsnobiety story tile on `{colors.background}`. Full-bleed image with zero border-radius. Below the image: a section label in `{colors.ink-secondary}` at `{typography.caption}` (14px / 400 / uppercase / `letterSpacing: 0.14px`). Then a headline in HS Sans 64px / weight 700 / uppercase / `lineHeight: 0.95` / `letterSpacing: -1.6px`. No card border, no shadow, no padding — the image edge is the tile edge."

2. "Design the Highsnobiety top navigation bar: white background (`{colors.background}`), centered 'HIGHSNOBIETY' wordmark in HS Sans Bold, a row of uppercase 14px nav category links below in `{colors.ink}` with `letterSpacing: 0.14px`. On the far right: a chartreuse pill badge (`{colors.primary}`, `{rounded.pill}`, black text, `{typography.button-ui}`) labeled 'SPRING 25 ISSUE'. Hamburger icon at left. Hairline 1px `{colors.border}` bottom divider."

3. "Create a Highsnobiety primary CTA button: `{colors.surface-dark}` fill, `{colors.on-dark}` text in HS Sans 14px / weight 700 / uppercase / `letterSpacing: 0.14px`. Zero border-radius (`{rounded.none}`). Padding: `12px 24px`. On hover, background shifts to `{colors.ink-secondary}` — subtle, not a full flip."

4. "Generate a Highsnobiety campaign hero: `{colors.background}` canvas, full-width editorial photograph (breaking the container), then below it a cover headline at 96px HS Sans / weight 700 / uppercase / `lineHeight: 0.95` / `letterSpacing: -1.92px` in `{colors.ink}`. A 20px body deck in `{colors.ink}` at `{typography.body-large}` below the headline. No decorative elements — photography and type only."

5. "Build a Highsnobiety category filter row: a series of pill buttons (`{rounded.pill}`) with `1px solid {colors.border}`, white fill, 14px HS Sans Bold uppercase label in `{colors.ink}`. On active/selected: fill inverts to `{colors.surface-dark}` with `{colors.on-dark}` text. Add one `{colors.primary}` pill for a featured category (e.g., 'SPRING 25'). On mobile, pills scroll horizontally."

6. "Design a Highsnobiety homepage section opener: `{spacing.4xl}` (96px) top margin from the preceding section, an uppercase section title in `{typography.heading-section}` (HS Sans 44px / 700 / `lineHeight: 0.95`) in `{colors.ink}`, then a 3-column story tile grid below with `{spacing.md}` gutters. Section title has no decorative elements — scale and uppercase weight carry it."

### Iteration Guide

1. Start on pure white (`{colors.background}`) — the white canvas is the brand identity, not a neutral default.
2. Headline type rule: HS Sans Bold 700, uppercase, always `lineHeight: 0.95`, always negative tracking at display sizes (`-1.6px` to `-1.92px`). If the headline doesn't feel compressed, it isn't Highsnobiety.
3. Accent rule: `{colors.primary}` (`#e5ff00`) appears exactly once per view — a single badge or CTA. If it appears twice, remove one. If it appears zero times, it may not be needed. Rarity is its mechanism.
4. Radius rule: `{rounded.none}` on every structure. `{rounded.pill}` only for chips and badges. There is no in-between.
5. Typeface rule: HS Sans only. Weight variation (400 / 700 / 900) does what other systems use multiple typefaces to achieve.
6. Color rule: the chrome is black and white. Photography provides all hue. If you're adding brand color to chrome elements, stop.
7. Spacing rule: tight at the tile level (`{spacing.sm}`–`{spacing.md}` gutters), generous at the section level (`{spacing.3xl}`–`{spacing.4xl}` blocks). The rhythm is editorial, not retail.

---

## 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 Highsnobiety. Brand names and trademarks belong to their respective owners.