---
version: alpha
name: Garrett Leight
description: California eyewear where warm black canvases meet a condensed-uppercase display face, a semi-mono utility layer, and a single sun-orange CTA — coastal editorial restraint with one vivid, unapologetic punctuation mark.

colors:
  # Surface / canvas
  background: "#ffffff"              # dominant white — product pages, most pages
  surface: "#f5f5f5"                 # light section bands, input fill, footer tonal shift
  surface-dark: "#000000"            # pure-black hero overlays, dark editorial sections

  # Ink / text
  ink: "#000000"                     # primary headings, body, nav — true black
  ink-secondary: "#4c4c4c"          # supporting copy, secondary labels, muted nav items
  on-dark: "#ffffff"                 # text on dark surfaces and dark hero

  # Brand accent
  primary: "#ff6600"                 # sun-orange — primary CTA, promotional tags
  on-primary: "#ffffff"              # text on orange fill
  primary-hover: "#d95700"          # CTA hover deepens to a richer burnt orange

  # Borders
  border: "#cccccc"                  # hairline dividers, input strokes — --color-gray
  border-strong: "#000000"          # outlined-button stroke, active input

  # Shadow tints (opaque approximations — originals were rgba)
  shadow-soft: "#000000"             # was rgba(0,0,0,0.1) — sticky nav / drawer shadow

  # Focus
  focus-ring: "#4a4af4"             # --color-fill-brand-indigo browser-assist focus outline

typography:
  display-hero:
    fontFamily: "Pangram Sans Condensed, Barlow Condensed, Arial Narrow, sans-serif"
    fontSize: 90px
    fontWeight: 700
    lineHeight: 1.00
    letterSpacing: 0px
  display:
    fontFamily: "Pangram Sans Condensed, Barlow Condensed, Arial Narrow, sans-serif"
    fontSize: 60px
    fontWeight: 700
    lineHeight: 1.00
    letterSpacing: 0px
  heading-section:
    fontFamily: "Pangram Sans, Inter, system-ui, sans-serif"
    fontSize: 90px
    fontWeight: 500
    lineHeight: 1.06
    letterSpacing: -1px
  heading-sub:
    fontFamily: "Pangram Sans, Inter, system-ui, sans-serif"
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.22
    letterSpacing: 0px
  body-large:
    fontFamily: "Pangram Sans, Inter, system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.30
    letterSpacing: 0px
  body:
    fontFamily: "Pangram Sans, Inter, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.38
    letterSpacing: 0px
  nav-link:
    fontFamily: "ABC Diatype Semi-Mono, JetBrains Mono, Courier New, monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0.02em
  button-ui:
    fontFamily: "Pangram Sans, Inter, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.63
    letterSpacing: 0.05em
  label-mono:
    fontFamily: "ABC Diatype Semi-Mono, JetBrains Mono, Courier New, monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.00
    letterSpacing: 0px
  caption:
    fontFamily: "Futura Std, Futura, Century Gothic, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  caption-mono:
    fontFamily: "ABC Diatype Semi-Mono, JetBrains Mono, Courier New, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.38
    letterSpacing: 0px

spacing:
  xs: 5px
  sm: 8px
  md: 16px
  lg: 20px
  xl: 30px
  2xl: 45px
  3xl: 85px
  4xl: 160px

rounded:
  none: 0px
  sm: 5px
  md: 10px
  pill: 50px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 13px 20px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 13px 20px
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  button-outline:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 13px 20px
  button-outline-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-dark}"

  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 16px

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 9px 14px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"

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

  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption-mono}"
    rounded: "{rounded.pill}"
    padding: 4px 10px

  link:
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    padding: 0px
  link-hover:
    textColor: "{colors.ink-secondary}"
---

# Garrett Leight Design System

## Overview

Garrett Leight California Optical is a study in editorial minimalism with one deliberate burst of warmth. The canvas is pure white (`{colors.background}`) and the ink is true black (`{colors.ink}`) — a stark, fashion-adjacent pairing that keeps product photography sovereign. Into that monochrome field the brand drops a single accent: a California sun-orange (`{colors.primary}`, `#ff6600`) reserved almost exclusively for the primary CTA. It reads less like a brand color and more like a signal flare, landing with the same casual energy as a neon sign on a Venice Beach storefront.

The typographic architecture is twin-track. **Pangram Sans Condensed** at weight 700 in uppercase does the display work: wide, compressed letterforms that stack with impact and recall the bold-sans tradition of vintage surf posters. Alongside it, **ABC Diatype Semi-Mono** handles labels, nav, and utility text — its fixed-width regularity lending a spare, catalog-like precision to navigation and tags. **Futura Std** appears as a finishing touch on captions, extending the geometric-sans lineage. The contrast between the wide-impact display face and the tight-mono utility layer is the system's most distinctive typographic move.

Shape language is equally decisive. Buttons are fully rounded — `{rounded.pill}` (50px) — which is the one softness the system permits, and it reads as relaxed and approachable against the otherwise flat, hard-edge chrome. Product photography is presented without card chrome, unshadowed, on white. The overall effect is a coastal boutique translated to screen: relaxed but curated, minimal but not sterile, with that single orange note reminding you this is California and not Copenhagen.

**Key Characteristics:**
- Pure white canvas (`{colors.background}`) with true-black typography (`{colors.ink}`) — no tinted neutrals competing with product color
- Single chromatic accent: sun-orange `{colors.primary}` (`#ff6600`) deployed exclusively on primary CTAs and promotional tags
- **Pangram Sans Condensed** (weight 700, uppercase) for all display — wide-condensed impact, fashion-poster DNA
- **ABC Diatype Semi-Mono** for navigation and utility labels — fixed-pitch precision, catalog-register authority
- **Futura Std** for captions — geometric sans finishing touch that completes the editorial triad
- Fully pill-shaped buttons (`{rounded.pill}`, 50px) — the one intentional softness in an otherwise flat system
- Near-flat elevation: no resting card shadows; only transient overlays (sticky header) receive depth treatment
- Generous whitespace scale (`{spacing.3xl}` = 85px, `{spacing.4xl}` = 160px) — section breathing room that lets photography lead
- Uppercase + condensed display stacks vertically on hero layouts, creating a rhythmic typographic column distinct from typical horizontal hero copy
- Orange CTA hover deepens to burnt orange (`{colors.primary-hover}`) rather than shifting hue — consistent family, higher confidence
- Borders reduced to hairlines (`{colors.border}`) or absent entirely; product cards have no frame
- Semi-mono nav labels carry a subtle `0.02em` tracking — legible at small sizes without shouting

## Colors

### Surface & Canvas
- **White** (`{colors.background}`): The dominant canvas. Product pages, editorial sections, navigation all sit on pure white.
- **Light Gray** (`{colors.surface}`): Quiet section bands and input fill backgrounds — barely perceptible off-white.
- **Pure Black** (`{colors.surface-dark}`): Dark hero overlays and editorial full-bleed sections where photography flips to a dark ground.

### Ink / Text
- **Black** (`{colors.ink}`): All primary type — headings, body copy, nav labels. True black, not a softened near-black.
- **Graphite** (`{colors.ink-secondary}`): Supporting copy, metadata, secondary nav items, muted states.
- **White on Dark** (`{colors.on-dark}`): Text on dark sections and the orange CTA button.

### Brand Accent
- **California Orange** (`{colors.primary}`): The sole chromatic brand signal. Applied to the primary CTA button and promotional badges. Hover state deepens to `{colors.primary-hover}`.

### Borders & Shadow Tints
- **Hairline** (`{colors.border}`): Input strokes, dividers, the structural seam. Sourced from `--color-gray` (`#cccccc`).
- **Strong Border** (`{colors.border-strong}`): Outlined-button stroke and active input border — black-weight frame.
- **Shadow Tint** (`{colors.shadow-soft}`): Opaque stand-in for the sticky-header ambient shadow (original was `rgba(0,0,0,0.1)` — flattened for the Google spec).
- **Focus Ring** (`{colors.focus-ring}`): The blue assist ring from `--color-fill-brand-indigo` — browser accessibility overlay, not a brand signal.

## Typography

### Font Family
- **Display**: `Pangram Sans Condensed` (self-hosted `PPPangramSans-CondensedExtrabold.woff`), with fallbacks `Barlow Condensed, Arial Narrow, sans-serif`. Wide, condensed, uppercase — the poster voice.
- **Interface / Body**: `Pangram Sans` (self-hosted `PPPangramSans-Medium.woff`, `PPPangramSans-Semibold.woff`), with fallbacks `Inter, system-ui, sans-serif`. Clean geometric grotesque for body, headings, and UI text.
- **Mono Utility**: `ABC Diatype Semi-Mono` (self-hosted `ABCDiatypeSemi-Mono-Regular.woff`), with fallbacks `JetBrains Mono, Courier New, monospace`. Fixed-pitch semi-mono for navigation labels and utility UI.
- **Caption Serif-adjacent**: `Futura Std` (system), with fallbacks `Futura, Century Gothic, sans-serif`. Geometric sans captions.

### Hierarchy

The full type scale is in the `typography:` token block. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 90px / Condensed / 700 / uppercase — primary hero headline, campaign statements |
| `display` | 60px / Condensed / 700 / uppercase — section-level display, product category titles |
| `heading-section` | 90px / Pangram Sans / 500 — large editorial heading variant, flowing not condensed |
| `heading-sub` | 36px / Pangram Sans / 400 — sub-section headings, feature callout text |
| `body-large` | 20px / 600 — lead copy, prominent feature descriptions |
| `body` | 16px / 400 — standard body copy, product details, prose |
| `nav-link` | 14px / Semi-Mono / 400 / 0.02em tracking — navigation labels, category links |
| `button-ui` | 16px / 600 / uppercase / 0.05em — CTA labels, interactive button text |
| `label-mono` | 14px / Semi-Mono / 400 / uppercase — UI tags, size labels, utility badges |
| `caption` | 12px / Futura Std / 400 — image captions, footnotes |
| `caption-mono` | 12px / Semi-Mono / 400 — price tags, SKU labels, badge text |

### Principles
- **Condensed for impact, regular for legibility**: the system separates campaign voice (Pangram Condensed, uppercase, weight 700) from reading copy (Pangram Sans 400–600). The two never compete — display is always larger, always uppercase.
- **Semi-mono as a register signal**: ABC Diatype Semi-Mono marks the utilitarian layer — navigation, size selectors, price labels. Its fixed-width rhythm tells the eye "this is information, not rhetoric."
- **Uppercase is a scale decision, not a decoration**: uppercase appears only on the condensed display face and utility mono labels. Body and subheadings stay sentence-case.
- **Weight 500–600 for mid-hierarchy**: Pangram Sans Medium and Semibold carry subheadings and large body without resorting to the bold condensed register, maintaining the relaxed California tone.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Base unit: ~5px. Large section padding (`{spacing.3xl}` = 85px, `{spacing.4xl}` = 160px) preserves the airy, boutique-gallery rhythm between major content bands; component internals use the tighter end of the scale (`{spacing.xs}`–`{spacing.md}`).

### Grid & Container
- Max content width: ~1480px, centered
- Common patterns: full-bleed hero photography, 2–4 column product grid, editorial full-width editorial stacks
- Navigation is a fixed-height bar with the Garrett Leight wordmark center-left and compressed utility nav right
- Mobile collapses to a single-column product grid with the pill CTA persisting as the bottom anchor

### Whitespace Philosophy
- **Gallery-grade breathing room**: generous vertical spacing (`{spacing.3xl}`–`{spacing.4xl}`) between sections keeps the experience feeling like a boutique floor, not an e-commerce listing
- **Photography-first**: images live unframed on white — no card borders, no rounded corners around product photos
- **Horizontal density in type, vertical density in space**: condensed uppercase headlines pack into narrow columns; the space between them is expansive

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | Product cards, editorial sections — the default state |
| Hairline (Level 1) | `1px solid {colors.border}` | Input fields, dividers, structural separation |
| Sticky (Level 2) | `0px -2px 5px rgba(0,0,0,0.1)` — `{colors.shadow-soft}` | Sticky navigation bar on scroll |
| Overlay (Level 3) | `0px 0px 20px rgba(0,0,0,0.15)` | Modals, cart drawers, flyout panels |

**Shadow Philosophy**: Garrett Leight is nearly flat. Product photography lives on white with no card chrome or resting shadow — the imagery needs no architectural frame to assert itself. The only depth treatment that appears is on the sticky nav header and transient overlays, and both are soft and minimal. The absence of shadows in product presentation is a boutique signal: considered negative space rather than UI scaffolding.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Image frames, card containers, dividers — all structural |
| `sm` | 5px | Input fields — the single subtle rounding on form elements |
| `md` | 10px | Secondary interactive elements, search inputs |
| `pill` | 50px | **All buttons** — the signature softness of the system |

The system is binary at its core: product frames and page structure are hard-cornered (`{rounded.none}`), while every button receives the full pill treatment (`{rounded.pill}`). This contrast is intentional — square imagery and soft CTAs read as craft + warmth, the California boutique formula. Inputs get a small `{rounded.sm}` that feels modern without committing to the fully-soft register of the buttons.

## Components

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

### Button Variants
- **`button-primary`** — California orange (`{colors.primary}`) fill, white text, 50px pill radius, `13px 20px` padding. The sole orange element on most pages; it stands out without shouting. Hover deepens to `{colors.primary-hover}`.
- **`button-secondary`** — White fill, black text, pill radius — a softer alternative for secondary actions. Hover fills `{colors.surface}`.
- **`button-outline`** — White fill with black border, pill radius — ghost variant for editorial layouts. Hover inverts to black fill / white text.

### Cards
- **`card`** — White surface, no border-radius, no resting shadow. Product cards are clean image-plus-label presentations; the image carries all the visual weight.

### Inputs
- **`input`** — White fill, `{colors.border}` hairline stroke, `{rounded.sm}` subtle radius. Focus state keeps the frame and border — no dramatic color shift. Inputs stay quiet so the orange CTA reads clearly.

### Badges / Tags
- **`badge`** — Orange fill (`{colors.primary}`), white monospaced label, pill-shaped. Used for promotional callouts ("New", "Sale") where the orange is contextually expected.

### Navigation
- **`nav-bar`** — White background, black wordmark, ABC Diatype Semi-Mono nav labels at 14px with slight tracking. The mono face sets navigation apart from body copy — functional, catalog-register authority.

### Links
- **`link`** — Black text, no underline at rest; hover dims to graphite (`{colors.ink-secondary}`). Inline links stay invisible until interacted with, preserving the clean editorial surface.

## Do's and Don'ts

### Do
- Use `{colors.primary}` (orange) only for the primary CTA and promotional badges — its power comes from scarcity
- Set all display headlines in Pangram Sans Condensed (`{typography.display-hero}`, `{typography.display}`) at weight 700, uppercase — the poster DNA of the brand
- Give every button the full pill radius (`{rounded.pill}` = 50px) — the signature soft-CTA contrast against square image frames
- Square all image frames and product card containers (`{rounded.none}`) — photography should feel like gallery prints, not app cards
- Keep navigation in ABC Diatype Semi-Mono (`{typography.nav-link}`) — the fixed-pitch register separates functional labels from editorial prose
- Use the generous section spacing (`{spacing.3xl}` / `{spacing.4xl}`) between major content blocks — the breathing room IS the luxury signal
- Let photography sit directly on white (`{colors.background}`) without card borders or lift shadows — unframed imagery reads as confidence
- Deepen the orange CTA hover to `{colors.primary-hover}` (`#d95700`) — same family, not a hue shift

### Don't
- Don't introduce a second chromatic accent — the system has exactly one non-neutral color (`{colors.primary}` orange); a second one dilutes the brand signal
- Don't use Pangram Sans Condensed for body copy or at sentence case — the condensed face only works uppercase and at display scale
- Don't round image frames or product cards — `{rounded.none}` on structural containers is non-negotiable; rounded photos clash with the editorial photography register
- Don't set buttons below pill radius — half-rounded or slightly-rounded buttons feel accidental beside the full `{rounded.pill}` commitment
- Don't add resting drop shadows to product cards — flat presentation is the gallery standard here
- Don't mix ABC Diatype Semi-Mono into body prose — it belongs in the utility layer (nav, labels, badges), not in reading flow
- Don't shrink section spacing below `{spacing.xl}` between major bands — compressed layout removes the boutique-gallery signal that justifies the premium positioning

---

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <480px | Single column; pill CTAs full-width; condensed headline scales to ~48px |
| Mobile | 480–767px | Single-column product grid; hamburger nav; hero copy stacks below image |
| Tablet | 768–1199px | Two-column product grid; navigation bar switches to horizontal |
| Desktop | 1200–1479px | Three–four column grid; full horizontal nav; editorial side-by-side layouts |
| Large Desktop | ≥1480px | Max ~1480px container centered; full-bleed hero sections break the container |

### Touch Targets
- Pill-shaped CTAs at `13px 20px` padding provide a comfortable touch height on mobile
- Product image cards carry generous tap area; image is the tap target, not just a label
- Semi-mono nav labels at 14px stay legible at mobile font-size thresholds

### Collapsing Strategy
- **Navigation**: full horizontal Diatype Semi-Mono nav → hamburger drawer on mobile; wordmark persists center
- **Display headlines**: Pangram Condensed scales from 90px → ~48px on mobile while staying uppercase and wide
- **Grid**: product grid steps 4 → 2 → 1 column; pill CTAs stack below images
- **Spacing**: section padding compresses from ~160px toward ~48px on mobile; the boutique breathing room scales with viewport

### Image Behavior
- Product photography is full-bleed on mobile, gridded at larger sizes, always on white and always unframed
- Hero images switch from side-by-side to stacked on tablet and below

---

## Agent Prompt Guide

### Quick Color Reference
- Background: White (`{colors.background}`)
- Text: Black (`{colors.ink}`)
- Brand accent: California Orange (`{colors.primary}`)
- Secondary text: Graphite (`{colors.ink-secondary}`)
- Border: Hairline Gray (`{colors.border}`)
- CTA: Orange (`{colors.primary}`), hover deepens to `{colors.primary-hover}`

### Example Component Prompts

- "Create a hero section: full-bleed product photography on white (`{colors.background}`), a 90px uppercase Pangram Sans Condensed headline in weight 700 in black (`{colors.ink}`), and a single orange (`{colors.primary}`) pill-shaped CTA below (`{rounded.pill}`, `13px 20px` padding) — no card border around the image, no shadow."
- "Build a primary button: California orange (`{colors.primary}`) fill, white text (`{colors.on-primary}`), fully pill-shaped (`{rounded.pill}`), `13px 20px` padding, Pangram Sans 600 weight, uppercase with 0.05em tracking (`{typography.button-ui}`); hover deepens to `{colors.primary-hover}`."
- "Design a product card: white surface (`{colors.background}`), zero border-radius (`{rounded.none}`), no shadow, full-width product image on top, a 14px ABC Diatype Semi-Mono name label below in black (`{colors.ink}`) with slight tracking — no card border, no lift."
- "Create a navigation bar: white background (`{colors.background}`), Garrett Leight wordmark left-aligned in Pangram Sans Condensed, navigation links in ABC Diatype Semi-Mono 14px (`{typography.nav-link}`) in black (`{colors.ink}`) with 0.02em tracking; hover dims to graphite (`{colors.ink-secondary}`)."
- "Build a promotional badge: orange fill (`{colors.primary}`), white monospaced label in ABC Diatype Semi-Mono 12px (`{typography.caption-mono}`), fully pill-shaped (`{rounded.pill}`), `4px 10px` padding — used for 'New' and 'Sale' tags."
- "Design an email input field: white fill (`{colors.background}`), 1px hairline border (`{colors.border}`), 5px radius (`{rounded.sm}`), Pangram Sans body text, `9px 14px` padding; focus state keeps the frame and border color — no dramatic color shift, no orange ring."

### Iteration Guide

1. Start on pure white (`{colors.background}`). If you're on a tinted or colored background, reset — Garrett Leight is white-first, every page.
2. **The orange rule**: `{colors.primary}` appears exactly once per view, on the primary CTA. Every other accent use depletes its impact.
3. Condensed Pangram for display, regular Pangram for body, Diatype Semi-Mono for nav — three voices, three purposes, never interchanged.
4. Every button is pill-shaped (`{rounded.pill}`). Every structural container is square (`{rounded.none}`). The contrast is the design.
5. Photography is unframed on white — no card borders, no lift shadows. Trust the image.
6. Color hierarchy: black ink → hairline gray borders → orange CTA. No additional hues.
7. Use the generous section spacing scale (`{spacing.3xl}`–`{spacing.4xl}`); the breathing room is what makes the layout feel premium.

---

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