---
version: alpha
name: Kith
description: Monochromatic New York streetwear retail — charcoal-on-white canvas, Georgia serif headings paired with Proxima Nova uppercase UI labels, hard squared corners on every structure, and product photography as the sole ornament.

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#f5f5f5"           # light section bands, product tile backgrounds
  surface-dark: "#333333"      # dark hero sections, inverted CTAs

  # Ink / text
  ink: "#333333"               # primary text, charcoal — the dominant extracted color
  ink-secondary: "#555555"     # supporting copy, metadata  /* estimated */
  ink-muted: "#888888"         # captions, helper text, disabled  /* estimated */
  on-dark: "#ffffff"           # text on charcoal surface and dark CTAs
  on-primary: "#ffffff"        # text on primary action

  # Accent — Kith uses charcoal as its single action color
  primary: "#333333"           # CTA fill, active states, button-primary background
  primary-hover: "#1a1a1a"     # CTA hover darkens toward black  /* estimated */

  # Borders
  border: "#d9d9d9"            # hairline dividers, panel edges, tabs
  border-strong: "#333333"     # active input border, outlined-button frame

  # Focus
  focus-ring: "#333333"        # outline on interactive elements (from extracted outline color)

  # Shadow tint (opaque approximation for the elevation table)
  shadow-soft: "#01013f"       # was rgba(1,1,63,0.1) — Google format requires hex

typography:
  display:
    fontFamily: "Georgia, Merriweather, Times New Roman, serif"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 1.4px
  heading-section:
    fontFamily: "Georgia, Merriweather, Times New Roman, serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0.9px
  body-large:
    fontFamily: "proxima-nova, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body:
    fontFamily: "proxima-nova, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 300
    lineHeight: 0.94
    letterSpacing: 0.6px
  button-ui:
    fontFamily: "proxima-nova, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 3px
  nav-link:
    fontFamily: "proxima-nova, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: 2.4px
  label:
    fontFamily: "proxima-nova, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 2.4px
  caption:
    fontFamily: "proxima-nova, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 10px
    fontWeight: 300
    lineHeight: 1.5
    letterSpacing: 0.6px

spacing:
  xs: 6px
  sm: 12px
  md: 18px
  lg: 24px
  xl: 30px
  2xl: 42px
  3xl: 55px

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

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

  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}"

  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
  button-ghost-hover:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"

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

  card-dark:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    rounded: "{rounded.none}"
    padding: 12px

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

  select:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px
  select-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"

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

  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.sm}"
    padding: 4px 10px

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

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

# Kith Design System

## Overview

Kith's digital presence operates at the precise intersection of streetwear grit and luxury retail precision. The canvas is white (`{colors.background}`) — not cream, not off-white, but clinical white — and everything that lives on it is either charcoal (`{colors.ink}`) or void. There is no chromatic brand color. The CTA is the same dark `{colors.primary}` as the body text, and the entire accent strategy hinges on that restrained gesture: black (or near-black) does what a branded green or red would do elsewhere, because Kith doesn't need a color to announce itself.

The typographic pairing is where the brand's double identity surfaces. Headings are set in **Georgia** — a browser-native serif that carries a faint old-world authority, like a newspaper masthead or an auction catalogue. Navigation, labels, buttons, and all UI chrome run in **Proxima Nova**, a clean geometric sans at letter-spacings so wide (`{typography.button-ui}` at 3px, `{typography.nav-link}` at 2.4px) that individual uppercase words unfurl like banners. The two typefaces never compete because they never occupy the same layer: Georgia structures content, Proxima Nova controls interaction. Together they read as "street-serious" — editorial enough for a $300 hoodie, clean enough for a sneaker drop page.

Elevation and depth are nearly absent. The shadow extracted from the site is a single ambient whisper (`{colors.shadow-soft}`) on dropdowns — effectively invisible. Structure comes from hairline borders (`{colors.border}`, a pale `#d9d9d9`) and whitespace. Buttons have a 0px radius by default, a hard edge that echoes luxury retail more than casual DTC. Photography — product and campaign — does the decorating; the chrome around it stays out of the way.

**Key Characteristics:**
- **Charcoal primary** (`{colors.ink}`) functions as the sole brand accent — no hue, no chromatic color story
- **Georgia serif** for headings and display text — unexpected, authoritative, slightly old-media
- **Proxima Nova** at extreme letter-spacing (3px on CTAs, 2.4px on nav) — the system's main personality gesture
- **Hard 0px corners** (`{rounded.none}`) on buttons, inputs, and structural elements — luxury-retail precision, not DTC softness
- Pure white canvas (`{colors.background}`) with occasional charcoal dark sections (`{colors.surface-dark}`) for contrast moments
- Hairline borders (`{colors.border}` `#d9d9d9`) do all structural separation; no visible resting shadows
- Pill radius (`{rounded.pill}`) reserved for circular icon buttons and lookbook drawers only
- Full-bleed product and campaign photography as the primary visual ornament
- Spacing built around a tight 6px/12px/18px rhythm — compact, retail-dense, not airy editorial
- Ghost button variant for dark/hero contexts — white outline on charcoal background
- Motion is minimal: 0.15s ease across all interactive transitions
- Breakpoints concentrated in the mobile-through-tablet range (400–750px), collapsing early

## Colors

### Surface & Canvas
- **White** (`{colors.background}`): The dominant canvas. Nearly the entire site.
- **Light Gray** (`{colors.surface}`): Quiet background for product grid sections and alternating bands.
- **Charcoal** (`{colors.surface-dark}`): Dark hero and campaign sections; also the fill for inverted CTAs in hero contexts.

### Ink / Text
- **Charcoal** (`{colors.ink}`): The workhorse — headings, body copy, CTA fills, link color. `#333333` rather than pure black.
- **Medium Gray** (`{colors.ink-secondary}`): Supporting copy and metadata.
- **Muted Gray** (`{colors.ink-muted}`): Captions, placeholder text, disabled states.
- **White** (`{colors.on-dark}`): Text on charcoal surfaces and dark hero sections.

### Brand Accent
- **Charcoal-as-Accent** (`{colors.primary}`): Kith has no chromatic brand color. The same charcoal that writes body text fills the CTA, draws active borders, and marks selected states. Hover darkens toward pure black (`{colors.primary-hover}`).

### Borders & Focus
- **Hairline** (`{colors.border}`): Panel dividers, tab underlines, card edges. Pale `#d9d9d9` — structural but unobtrusive.
- **Strong Border** (`{colors.border-strong}`): Active input and outlined-button borders; matches the charcoal ink.
- **Focus Ring** (`{colors.focus-ring}`): On interactive elements, the focus outline inherits the charcoal color — no injection of a contrasting hue.

### Shadow
- **Shadow Soft** (`{colors.shadow-soft}`): The opaque stand-in for the single extracted dropdown shadow (originally `rgba(1,1,63,0.1)` — nearly invisible; flattened for spec compliance).

## Typography

### Font Family
- **Primary Display**: `Georgia`, with self-hosted fallback `Merriweather` and final fallback `Times New Roman, serif`. Used for section headings and content titles.
- **Primary UI**: `proxima-nova`, with fallbacks `Helvetica Neue, Helvetica, Arial, sans-serif`. Used for all navigation, labels, buttons, and body copy.
- **Self-hosted**: `Georgia.woff2`, `merriweather_n4`, `merriweather_n7` (dembrandt detected these as the custom/self-hosted fonts).
- **Transform strategy**: UI elements are uniformly **uppercase** with wide letter-spacing. Content copy stays sentence-case.

### Hierarchy

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

| Token | Use |
|---|---|
| `display` | 28px / Georgia 400 / 1.4px tracking — section and product headings |
| `heading-section` | 18px / Georgia 400 / 0.9px tracking — sub-section titles, editorial callouts |
| `body-large` | 16px / Proxima Nova 400 / 0px tracking — standard marketing body |
| `body` | 16px / Proxima Nova 300 / 0.6px — lighter body and descriptive copy |
| `button-ui` | 12px / Proxima Nova 500 / 3px uppercase — CTA labels, primary actions |
| `nav-link` | 12px / Proxima Nova 700 / 2.4px uppercase — navigation, bold UI labels |
| `label` | 12px / Proxima Nova 500 / 2.4px uppercase — badges, tags, status labels |
| `caption` | 10px / Proxima Nova 300 / 0.6px — price subcopy, metadata, size labels |

### Principles
- **Serif for content, sans for interaction**: Georgia announces editorial gravity; Proxima Nova handles operational chrome. These roles never blur.
- **Tracking is the voice**: Proxima Nova's extreme letter-spacing (3px on CTAs) does the same work that bold weight does in other systems — it commands without raising its size.
- **Weight restraint at the top**: Georgia headings sit at regular weight 400; the display is quiet. Urgency comes from scale and uppercase, not from bold punch.
- **10px floor for captions**: the caption token (`{typography.caption}`) bottoms out at 10px — the minimum for retail metadata like size markers and availability notes.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Base unit is 6px, stepping through the dominant extracted values (6, 12, 18, 24, 30, 42, 55). The system is retail-dense — 12px (`{spacing.sm}`) and 18px (`{spacing.md}`) were the two most-used values on the page, giving product tiles a tight, information-rich cadence rather than the airy breathing room of fashion editorials.

### Grid & Container
- Max content width: approximately 1280px, centered
- Navigation drawer system with tabbed panels (detected Headless UI components)
- Product grid: typically 2–4 columns on desktop, collapsing to 1–2 on mobile
- Full-bleed campaign hero banners break the container

### Whitespace Philosophy
- **Dense over airy**: spacing clusters at 12–18px, not 32–64px; this is a product catalog, not a lookbook
- **Hairlines separate**: borders, not padding, define structure between panels
- **Photography as visual relief**: full-bleed imagery gives the eye a pause that the chrome doesn't

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, hairline `{colors.border}` only | The default — all product tiles, inputs, buttons |
| Hairline (Level 1) | `1px solid {colors.border}` | Panel edges, tab underlines, section dividers |
| Dropdown (Level 2) | `0px 2px 19px -4px` at ~10% `{colors.shadow-soft}` | Navigation drawer, lookbook overlay |
| Dialog (Level 3) | Solid dark overlay, no additional shadow | Cart drawer, size-selector sheet |

**Shadow Philosophy**: Kith is effectively shadowless at rest. The single detected shadow value is a soft ambient blur on the dropdown/drawer system — understated enough to read as functional depth, not decorative. Retail hierarchy comes from the charcoal-on-white contrast and hairline borders, not from z-axis separation. Nothing rests with a permanent shadow.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Buttons, inputs, select elements, structural cards — the default |
| `sm` | 6px | Filter chips, small badge variants |
| `pill` | 9999px | Circular icon buttons (lookbook drawer trigger), avatar images |

The system is nearly binary. Hard 0px corners are the rule for anything structural. `{rounded.sm}` (6px) appears only on small utility chips. `{rounded.pill}` serves circular icon buttons and circular imagery. Mid-range radii (8–16px) are absent — there is no soft-friendly middle register.

## Components

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

### Button Variants

- **`button-primary`** — Charcoal (`{colors.primary}`) fill, white text, **0px radius**, `12px 24px` padding, uppercase 12px Proxima Nova at 3px tracking. Hover deepens toward pure black.
- **`button-outline`** — White fill, charcoal text, `{colors.border-strong}` 1px border, **0px radius**. Hover fills `{colors.surface}`.
- **`button-ghost`** — Transparent fill, white text, white 1px border, **0px radius**. Used on dark/hero sections over `{colors.surface-dark}`. Hover fills the charcoal surface.

### Cards

- **`card`** — White surface, **0px radius**, no resting shadow, `12px` padding. Product tiles sit in this container — flat and functional.
- **`card-dark`** — Charcoal surface with white text. Used for campaign or editorial feature blocks that break the white canvas rhythm.

### Inputs

- **`input`** — White fill, charcoal 1px border, **0px radius**, `12px 16px` padding. Focus keeps the square frame with the charcoal outline tightening to 2px.
- **`select`** — Transparent fill variant; shares the charcoal border and 0px radius. Focus adds the white fill.

### Badges / Tags

- **`badge`** — Charcoal fill, white text, `{rounded.sm}` (6px) radius, uppercase label. Used for product status ("New", "Limited").
- **`badge-pill`** — Same colors, `{rounded.pill}` radius. Used for category filter chips.

### Navigation

- **`nav-bar`** — White background, charcoal uppercase Proxima Nova Bold at 2.4px tracking. Sticky header with hairline bottom border. Drawer expands on category hover.

## Do's and Don'ts

### Do
- Use `{colors.primary}` (charcoal) as the sole action color — it does the work a brand hue does elsewhere
- Set all CTAs and UI labels in uppercase Proxima Nova with letter-spacing of 2.4–3px (`{typography.button-ui}`, `{typography.nav-link}`)
- Reserve Georgia (`{typography.display}`, `{typography.heading-section}`) for content headings only — never for buttons or navigation
- Keep corners at `{rounded.none}` (0px) for all buttons, inputs, cards, and structural containers
- Use `{rounded.pill}` only for circular icon buttons and avatar images
- Separate sections with hairline `{colors.border}` borders rather than shadows or fills
- Let product photography dominate — the charcoal chrome should recede, not compete
- Use the `card-dark` variant sparingly for campaign moments; white is the overwhelmingly default canvas

### Don't
- Don't introduce any chromatic accent color — Kith's entire system is achromatic
- Don't use Georgia for UI chrome, navigation, or CTAs — serif headings and sans UI labels must not cross over
- Don't add mid-range border-radius (4–16px) to structural elements; the system only acknowledges 0px and pill
- Don't apply resting shadows to product cards or navigation — the site is committedly flat
- Don't crowd the spacing below 6px (`{spacing.xs}`) — even the compact retail cadence has a minimum gap
- Don't reduce letter-spacing on uppercase labels below 2px — the tracking is the personality; compressed uppercased sans loses the voice
- Don't introduce a second serif typeface; Merriweather is a self-hosted fallback, not a secondary editorial face
- Don't present heading copy in Proxima Nova; Georgia's serif authority establishes the content hierarchy

---

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <400px | Single column; hero text stacks; nav collapses to hamburger |
| Mobile | 400–599px | Single column product grid; condensed header; touch-optimized tap targets |
| Mobile Large | 600–699px | Two-column product grid begins; minor spacing increases |
| Tablet Small | 700–749px | Navigation tabs become scrollable; horizontal product carousels |
| Tablet | 750–999px | Two–three column grid; campaign images full-bleed; drawer panels expand |
| Desktop | ≥1000px | Full four-column grid; persistent mega-nav drawer; max ~1280px container |

### Touch Targets

- Primary buttons use `12px 24px` padding — full-width on mobile for easy thumb access
- Navigation links at 12px uppercase get additional line-height (1.25) for comfortable tap height
- Product card images are large tap targets by default — no additional padding needed

### Collapsing Strategy

- **Navigation**: horizontal mega-nav → drawer-based tabbed panels on mobile; the KITH wordmark stays centered
- **Product Grid**: 4 → 2 → 1 column; product images maintain aspect ratio
- **Typography**: Georgia display (`{typography.display}`) scales down to approximately 20px on mobile; Proxima Nova UI labels hold size, tracking preserved
- **Spacing**: the tight 12–18px rhythm compresses minimally; section padding steps from `{spacing.2xl}` toward `{spacing.lg}`

### Image Behavior

- Campaign heroes go full-bleed at all breakpoints, breaking the centered container
- Product tiles maintain square or portrait crop with object-fit cover
- The lookbook drawer slides in from the right edge on all screen sizes

---

## Agent Prompt Guide

### Quick Color Reference

- Background: White (`{colors.background}`)
- Text: Charcoal (`{colors.ink}`)
- Brand accent: Charcoal (`{colors.primary}`) — no chromatic color
- Secondary text: Medium gray (`{colors.ink-secondary}`)
- Border: Hairline (`{colors.border}`)
- CTA: Charcoal (`{colors.primary}`), hover darkens to `{colors.primary-hover}`
- Dark surface: Charcoal (`{colors.surface-dark}`)

### Example Component Prompts

- "Create a Kith hero section: full-bleed campaign photography, a 28px Georgia 400 heading (`{colors.ink}`) at 1.4px letter-spacing, and a single charcoal CTA using `{typography.button-ui}` (uppercase, 3px tracking, `{rounded.none}`) below — keep the canvas pure white (`{colors.background}`) and the chrome invisible"
- "Build a primary button using Kith's system: charcoal (`{colors.primary}`) fill, white text (`{colors.on-primary}`), `{typography.button-ui}` (12px / 500 / uppercase / 3px tracking), **0px border-radius** (`{rounded.none}`), `12px 24px` padding; hover darkens fill to `{colors.primary-hover}`"
- "Design a product card: white (`{colors.background}`) surface, **0px radius** (`{rounded.none}`), no shadow, full-width product image with `{rounded.none}` image corners, a 18px Georgia heading (`{typography.heading-section}`) below, and a 10px Proxima Nova caption (`{typography.caption}`) for price — tight `{spacing.sm}` between elements"
- "Create a ghost button for a dark hero overlay: transparent fill, white text and white 1px border using `{colors.on-dark}`, `{typography.button-ui}` uppercase 3px tracking, **0px radius**, `12px 24px` padding; hover fills with `{colors.surface-dark}`"
- "Design a site navigation bar: white (`{colors.background}`) background with a hairline `{colors.border}` bottom border, the KITH wordmark centered, and navigation links in `{typography.nav-link}` (12px / Proxima Nova 700 / uppercase / 2.4px tracking / `{colors.ink}`) — no hover color change, only underline on focus"
- "Build an email input: white fill (`{colors.background}`), 1px `{colors.border-strong}` border, **0px border-radius** (`{rounded.none}`), `12px 16px` padding, `{typography.body}` text; on focus the charcoal outline tightens to 2px — never round the corners"

### Iteration Guide

1. Start on pure white (`{colors.background}`). If you reached for a tinted canvas, stop — Kith is flat white except for deliberate charcoal sections.
2. **Apply 0px radius to every structural element.** If any button, card, input, or image frame has a border-radius above 0px, reset it to `{rounded.none}`.
3. There is no chromatic brand color. If you reached for a hue, recolor it charcoal (`{colors.primary}`).
4. Use Georgia (`{typography.display}`, `{typography.heading-section}`) only for content headings. Everything else — buttons, nav, labels, body — is Proxima Nova.
5. Set all UI labels and CTAs in uppercase with wide tracking. If Proxima Nova text reads as sentence-case or compressed, it has lost the voice.
6. Separate with hairline borders (`{colors.border}`) and whitespace — no card shadows, no resting elevation.
7. Reserve photography for the visual doing. Let the typography and layout grid carry structure; let full-bleed imagery deliver emotion.

---

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