---
version: alpha
name: "Telfar"
description: "Minimal black-and-white retail design system for Telfar — clean editorial photography, Neue Haas Grotesk precision, and the iconic circular-T mark as the only accent."

colors:
  background: "#ffffff"
  surface: "#fafafa"
  surface-elevated: "#f4f4f4"
  ink: "#000000"
  ink-secondary: "#444444"
  ink-muted: "#888888"
  primary: "#000000"
  on-primary: "#ffffff"
  primary-container: "#f4f4f4"
  border: "#e7e9ea"
  border-subtle: "#f0f0f0"
  # was color(display-p3 0.9569 0.9569 0.9568) — Google format requires hex
  border-light: "#f4f4f4"
  # was rgba(0, 0, 0, 0.05) — Google format requires hex; flattened on white
  border-ghost: "#f2f2f2"
  focus-ring: "#000000"
  text-hover: "#222222"
  # was rgba(0, 0, 0, 0.04) shadow — Google format requires hex; flattened on white
  shadow-soft: "#f7f7f7"
  error: "#d93025"

typography:
  display-hero:
    fontFamily: "Neue Haas Grotesk Text Pro, Haas Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -0.5px
  display:
    fontFamily: "Neue Haas Grotesk Text Pro, Haas Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -0.25px
  heading-section:
    fontFamily: "Neue Haas Grotesk Text Pro, Haas Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
  heading-sub:
    fontFamily: "Neue Haas Grotesk Text Pro, Haas Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 0px
  body-large:
    fontFamily: "Neue Haas Grotesk Text Pro, Haas Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body:
    fontFamily: "Neue Haas Grotesk Text Pro, Haas Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  nav-link:
    fontFamily: "Neue Haas Grotesk Text Pro, Haas Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0px
  button-ui:
    fontFamily: "Neue Haas Grotesk Text Pro, Haas Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0.5px
  label:
    fontFamily: "Neue Haas Grotesk Text Pro, Haas Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0px
  caption:
    fontFamily: "Neue Haas Grotesk Text Pro, Haas Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0px
  overline:
    fontFamily: "Neue Haas Grotesk Text Pro, Haas Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 10px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0.5px

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

rounded:
  none: 0px
  sm: 6px
  md: 12px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 12px 24px
  button-primary-hover:
    backgroundColor: "{colors.text-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 12px 24px
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 12px 24px
  button-secondary-hover:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.ink}"
    borderColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 12px 24px
  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.sm}"
    padding: 10px 16px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus-ring}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 10px 16px
  badge:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.overline}"
    rounded: "{rounded.none}"
    padding: 3px 6px
  nav:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    borderBottom: "1px solid {colors.border}"
    padding: 16px 20px
  product-label:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.overline}"
    rounded: "{rounded.none}"
    padding: 5px 6px
---

# Telfar Design System

## Overview

Telfar's website is a study in reduction: pure white canvas (`{colors.background}`), full-bleed editorial photography, and an almost total absence of decorative chrome. The brand's ethos — "Not for you, for everyone" — reads in every design decision, from the democratic flat navigation that treats a $55 Small Shopper and a limited-edition Denim with identical visual weight, to the unadorned product grid that lets the bags themselves carry all the visual energy. There are no hero gradients, no announcement banners that wouldn't look at home on a newsstand, no dark-mode theatrics. Just cloth, colour, and clean Neue Haas Grotesk.

The typography anchors everything. Neue Haas Grotesk Text Pro, self-hosted in two weights (Regular 55Rg and Medium 65Md), carries the entire system from the headline right down to the 10px overline tags on product labels. It is a typeface that erases itself — neutral enough to let the product photography sing, precise enough to give the interface a quiet authority. Where contemporary streetwear brands reach for custom typefaces to signal exclusivity, Telfar uses a Swiss grotesque to signal access. The contrast ratio between the ink (`{colors.ink}`) and the white canvas is as high as it goes.

What makes this system distinctive is what it does NOT have. No gradients. No drop shadows beyond the lightest atmospheric wisps. No brand-accent colour other than black itself. The iconic circular-T logomark on each bag is the sole decorative object; everything else defers to it. Product cards animate on hover by fading in (`0.8s ease`) rather than lifting or zooming, keeping the experience unhurried. The result is a retail environment that feels closer to a gallery than a shop — not exclusionary luxury, but democratised rigour.

**Key Characteristics:**
- White canvas (`{colors.background}`) with `{colors.ink}` as the only colour — monochromatic by conviction, not budget
- Neue Haas Grotesk Text Pro self-hosted in Regular and Medium weights — neutral Swiss precision
- 6px border radius (`{rounded.sm}`) on all interactive elements: buttons, modals, inputs — soft but not playful
- Product cards use no border, no shadow, no rounded corners — pure photography-first presentation
- Breakpoints at 480px, 600px, 700px, 1000px — fine-grained progressive collapse
- Motion is long and eased: 0.6s–1.5s for media transforms, 0.8s fadeIn on card entrances
- Navigation strip with 1px bottom border — the only structural separator on the page
- Product labels in 10px uppercase Neue Haas Grotesk Medium (`{typography.overline}`) — small, precise, factual
- Badge system uses square 2px-radius, 1px ghost border, 10px uppercase — an anti-pill choice on an otherwise soft system
- No custom icon library, no illustrations — the bag photography is the entire visual vocabulary

## Colors

### Primary
- **Pure White** (`{colors.background}`): The dominant canvas. Full-bleed, edge to edge. Every page starts here.
- **Near-White Surface** (`{colors.surface}`): Subtle lift for footer zones and hover states where a tint is needed without introducing colour.
- **Soft Gray** (`{colors.surface-elevated}`): Form inputs, product label backgrounds, category pills. The lightest active surface before full white.
- **Pure Black** (`{colors.ink}`): All body text, headings, navigation links, button fills. The only colour doing real semantic work.

### Brand Accent
- **Black** (`{colors.primary}`): CTAs, primary buttons, icon strokes, logo text. Telfar uses no chromatic accent — the brand's identity lives in the photography, not the UI chrome.

### Text States
- **Secondary Ink** (`{colors.ink-secondary}`): Subdued descriptive copy, inactive states, badge text.
- **Muted Ink** (`{colors.ink-muted}`): Product label metadata, timestamps, supporting captions.
- **Hover Text** (`{colors.text-hover}`): Subtle darkening on link hover — a near-black that gives interactivity without disrupting the monochrome contract.

### Borders & Structure
- **Primary Border** (`{colors.border}`): Input outlines, modal borders, form chrome. An `rgb(231, 233, 234)` gray — slightly warm, almost invisible on white.
- **Subtle Border** (`{colors.border-subtle}`): Section dividers, fine separators. Lighter still, structural only.
- **Light Border** (`{colors.border-light}`): Was `color(display-p3 0.9569 0.9569 0.9568)` — Google format requires hex. The near-white system border used on cards and dialogs.
- **Ghost Border** (`{colors.border-ghost}`): Was `rgba(0, 0, 0, 0.05)` flattened on white — the lightest possible structural edge, used on badges and modal chrome.

### Semantic
- **Error** (`{colors.error}`): Standard destructive red. Used on form validation only — not visible in normal browsing.

### Shadow
- **Shadow Soft** (`{colors.shadow-soft}`): Was `rgba(0, 0, 0, 0.04) 0px 0px 18px 0px` — this translucent value is the entire shadow system. A near-white hex approximation. Telfar does not use elevation.

## Typography

### Font Family
- **Primary**: `Neue Haas Grotesk Text Pro`, with fallbacks: `Haas Grotesk`, `Helvetica Neue`, `Arial`, `sans-serif`
- **Self-hosted files**: `NHaasGroteskTXPro-55Rg.otf` (Regular/400), `NHaasGroteskTXPro-65Md.otf` (Medium/500)
- **OpenType Features**: None declared — the typeface is used at face value. No stylistic sets, no ligatures activated. The system relies on the font's inherent neutrality rather than OpenType personality.

*Note: For external implementations where Neue Haas Grotesk is unavailable, `Inter` at weight 400/500 is the closest web-safe substitute. `DM Sans` is a warmer alternative; `Outfit` is slightly more expressive. All share the same neutral grotesque register.*

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Campaign or editorial headlines, large product category headers |
| `display` | Section headers, product group titles |
| `heading-section` | Sub-category headings, filter panel labels, cart summaries |
| `heading-sub` | Product names in detail views, sidebars |
| `body-large` | Product descriptions, editorial body copy |
| `body` | UI body text, filter options, product metadata |
| `nav-link` | Header navigation, footer links |
| `button-ui` | CTAs, add-to-cart labels, form submit actions |
| `label` | Form field labels, inline UI labels |
| `caption` | Timestamps, legal copy, secondary product data |
| `overline` | Product category tags, status badges — 10px uppercase Medium |

### Principles
- One typeface carries the entire system — no display face, no mono, no serif variation
- Two weights only (Regular 400, Medium 500) — weight contrast is the sole typographic device
- The 10px overline (`{typography.overline}`) is a signature choice: the smallest text in the system, in uppercase, with 0.5px tracking — precise and deliberate, not small-because-secondary
- No letter-spacing manipulation on body or nav text — Neue Haas Grotesk earns its neutrality by being set straight
- Line-heights are conservative: 1.0 for UI elements, 1.4–1.5 for reading copy — the system doesn't breathe theatrically

## Layout

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

The spacing personality is compact without feeling crowded. The 8px base keeps product grids tight and information-dense, while the 48px–64px jumps reserve breathing room for section transitions and campaign headers. This is a shop that respects your time.

### Grid & Container
- Max content width: approx. 1000px before the layout loosens to full-width photography
- Product grid: multi-column responsive, collapsing from 4 or 5 columns to 2 at mobile
- Navigation: full-width strip, content-padded 20px on each side
- Product pages: split-layout on tablet+ (photography left, details right), stacked on mobile

### Whitespace Philosophy
- Product photography bleeds into the grid — no card padding, no offset white boxes
- Section spacing is handled by the 48–64px scale; individual component padding stays tight (8–20px)
- The system avoids large dead zones that would feel "luxury" or approachable only from distance

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Default for all product cards, buttons, body elements |
| Ghost (Level 1) | `rgba(0, 0, 0, 0.01) 0px 0px 10px 0px` | Near-invisible — essentially flat | 
| Subtle (Level 2) | `rgba(0, 0, 0, 0.04) 0px 0px 18px 0px` | Modal overlays, notification drawers |
| Focus Ring | `1px solid {colors.focus-ring}` on `outline: none` | Form inputs on focus |

**Shadow Philosophy**: Telfar runs essentially flat. The two shadow values captured by dembrandt (4% and 1% opacity ambient glows) are so subtle they read as floor reflections rather than designed elevation. Depth is expressed through photography (the 3D form of the bags themselves) rather than UI layering. No card has a shadow. No button lifts. The product is the three-dimensional object; the UI is the flat table it rests on.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Product cards, navigation bar, section containers, hero photography |
| `sm` | 6px | Buttons, modal dialogs, form inputs, primary interactive elements |
| `md` | 12px | Drawers, aside panels, email capture forms |
| `pill` | 9999px | Close buttons (circular), icon-only action buttons |

The shape system is binary in spirit: cards and structural containers are fully flat (`{rounded.none}`), interactive affordances use a consistent 6px soft (`{rounded.sm}`). This creates a clear visual grammar: if it's rounded, you can click it. The 6px was confirmed as the dominant radius across 191 elements by the extraction data — it is the system's one shape decision made at scale.

## Components

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

### Button variants

- **`button-primary`** — Solid black fill, white text, 6px radius, 12px/24px padding. The only CTA shape in the system. Used for "Add to Bag," checkout actions, and modals.
- **`button-secondary`** — White fill with a gray border (`{colors.border}`). Used for secondary shop actions (save, wishlist, filter apply). On hover, the border sharpens to full black.

### Cards

Product cards carry no structural chrome: no border, no radius, no shadow. They are photography-first rectangles that fade into view on load (`0.8s ease fadeIn`). The label badge below the photo carries product name in `{typography.body}`, colour/size selectors in `{typography.caption}`, and price in `{typography.body}`. The hover state shifts the card background to `{colors.surface}` (`0.6s ease`) — a near-invisible warmth that signals focus without the product disappearing into a lifted card illusion.

### Inputs

Form inputs use `{colors.border}` as the default outline and snap to `1px solid {colors.ink}` on focus. Radius is `{rounded.sm}`. Email capture specifically: 7px radius (Klaviyo widget override — rounds slightly beyond the core `6px`), with icon padding of `0px 56px 0px 40px`. Font is `{typography.body}` from the Neue Haas stack.

### Badges / Tags

The product label badge is a key system signature: 2px radius (not `{rounded.sm}`, not pill), 10px uppercase Medium, 1px ghost border, surface-elevated background. The near-zero radius feels like a print label cut from paper stock — physical, non-digital. Used for "NEW," "FW25," and colour-family overlines above product names.

### Navigation

The full-width navigation strip sits fixed at the top, with a 1px bottom border (`{colors.border}`) as the sole structural separator. Left: the wordmark SVG at 85×25px. Right: cart and account glyphs. Center: category links in `{typography.nav-link}`. On mobile, center links collapse behind a hamburger-style toggle. No mega-menu, no hover flyout panels. The nav keeps its promises.

## Do's and Don'ts

### Do
- Use `{colors.background}` full-bleed as the primary canvas — no off-white, no cream, no beige adjacent
- Set all interactive elements (buttons, inputs, modals) to `{rounded.sm}` (6px) — be consistent
- Let photography carry colour — the UI chrome should be invisible by comparison
- Use `{typography.overline}` at 10px uppercase for product labels — this is the system's signature text choice
- Apply the `0.8s ease` fadeIn to card entrances — the long duration is part of the experience
- Use `{colors.ink}` as the single CTA fill — the brand has no accent colour, and that's intentional
- Keep border-radius at `{rounded.none}` for all card and container structures
- Apply `1px solid {colors.border}` as the default input border, snapping to `{colors.focus-ring}` on focus
- Scale motion generously — the 0.6s ease on media and 1.5s scale transform for hero imagery read as confident, not slow

### Don't
- Don't introduce a chromatic brand accent (teal, tan, blush) — the monochrome palette IS the system
- Don't use drop shadows or elevation on product cards — photography should not appear to float
- Don't use border-radius above `{rounded.md}` except for fully circular close buttons
- Don't override `{typography.overline}` size upward — 10px is precise; scaling it "for legibility" destroys the signature
- Don't use bold (weight 700+) anywhere in the system — Medium 500 is the heaviest the brand goes
- Don't crop or mask editorial photography — full-bleed and unedited is the stance
- Don't add gradients to the canvas or button fills — solid black and solid white only
- Don't add hover transitions faster than 0.3s on interactive elements — the system deliberately slows down
- Don't use pill-shaped buttons — the 6px radius is the maximum for primary actions
- Don't use colour other than `{colors.error}` for semantic states — use weight, border, or label text instead

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <480px | Single-column product grid, stacked nav, navigation collapses |
| Mobile | 480–600px | Two-column grid, condensed header |
| Tablet Small | 600–700px | Two to three columns, split product layout begins |
| Tablet | 700–1000px | Three to four columns, full split product view |
| Desktop | >1000px | Four to five column grid, full navigation visible, max-width layout |

### Touch Targets
- Buttons use 12px/24px padding on 14px type — yielding ~38–44px tap targets at minimum
- Product card taps target the full photograph area — naturally oversized, accessible by default
- Navigation links are 44px in vertical extent on mobile

### Collapsing Strategy
- Product grid: 5 columns → 4 → 3 → 2 → 1 at each breakpoint step
- Navigation: full horizontal links collapse behind toggle below 700px; wordmark centers on mobile
- Product detail: side-by-side split layout (photography | info) stacks vertically below 700px
- Section padding contracts from `{spacing.2xl}` (48px) to `{spacing.lg}` (24px) at mobile

### Image Behavior
- Photography is full-bleed in cards — no padding, no border, no aspect-ratio override
- Hero campaign images maintain a fixed aspect ratio (approximately 4:5 for portrait bags, 16:9 for lifestyle)
- Product thumbnails in the grid use `object-fit: cover` — the bag centering is editorial, not mechanical
- Logo SVG scales proportionally; no icon-only fallback at any breakpoint

---

## Agent Prompt Guide

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

### Example Component Prompts

- "Build a Telfar product card on white (`{colors.background}`). No border, no shadow, no radius. Full-bleed product photograph occupying the top 75%. Below: product name in Neue Haas Grotesk Text Pro 14px weight 400 (`{typography.body}`), colour option in 12px weight 400 (`{typography.caption}`), price in 14px weight 500 (`{typography.body}` Medium). Above the photo: a 10px uppercase Medium overline badge (`{typography.overline}`) on `{colors.surface-elevated}` background, 2px radius, 1px `{colors.border-ghost}` border. Card entrance: `fadeIn 0.8s ease`. Hover: card background shifts to `{colors.surface}` over `0.6s ease`."
- "Create a primary Add to Bag button. Background: `{colors.primary}` (pure black). Text: `{colors.on-primary}` (white). Font: Neue Haas Grotesk 14px weight 500 (`{typography.button-ui}`), 0.5px letter-spacing, uppercase. Padding: 12px 24px. Radius: `{rounded.sm}` (6px). No shadow. Hover: background shifts to `{colors.text-hover}` over 0.3s cubic-bezier(0.4, 0, 0.2, 1)."
- "Design a Telfar-style header navigation strip on `{colors.background}`. Left: wordmark SVG in `{colors.ink}`. Center: category links in Neue Haas Grotesk 14px weight 400 (`{typography.nav-link}`), `{colors.ink}`, no underline. Right: cart and account icon glyphs in `{colors.ink}`. Bottom border: 1px solid `{colors.border}`. Padding: 16px 20px. Nav height: ~56px. Hover on links: opacity transition 0.3s ease to `{colors.text-hover}`."
- "Build a product badge / label tag for 'NEW'. Background: `{colors.surface-elevated}`. Text: `{colors.ink-secondary}`, Neue Haas Grotesk 10px weight 500 uppercase 0.5px tracking (`{typography.overline}`). Radius: 2px. Border: 1px solid `{colors.border-ghost}`. Padding: 3px 6px. No shadow, no pill shape."
- "Create a Telfar-style email capture form on `{colors.surface}`. Input: `{colors.background}` fill, 1px `{colors.border}` border, `{rounded.sm}` radius, Neue Haas Grotesk 14px weight 400 (`{typography.body}`), padding 10px 16px. Focus: border snaps to 1px `{colors.focus-ring}`. Submit button to the right: `{colors.primary}` fill, `{colors.on-primary}` text, `{typography.button-ui}` font, `{rounded.sm}` radius, 12px 24px padding. No shadow on either element."

### Iteration Guide

1. Start with `{colors.background}` as the full canvas — no tints, no off-white, no textured overlays.
2. Use `{colors.ink}` as the single accent colour for all CTAs, active states, and focus rings. Resist introducing any chromatic hue.
3. Set Neue Haas Grotesk Text Pro Regular (400) as the base weight for all body, nav, and caption text; step up to Medium (500) only for buttons, labels, and active states.
4. Apply `{rounded.sm}` (6px) to all interactive affordances; keep containers and cards at `{rounded.none}`.
5. Let photography carry all visual weight — the UI chrome should be invisible against it.
6. Motion: use `0.6s ease` for background-color shifts and media transforms; `0.15s` for fast micro-interactions (opacity, nav transitions). Never go below `0.15s` for hover states.
7. Product labels and overlines live at 10px uppercase Medium (`{typography.overline}`) — this is the system's smallest intentional text and it should not scale up.

---

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