---
version: alpha
name: LIM London
description: Editorial fashion minimalism — a near-white gallery canvas, ink-black serif display type paired with a clean grotesque for body, hairline borders, sharp (un-rounded) corners, and restrained black-on-white CTAs that let product imagery carry all the color.
colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#ffffff"
  surface-soft: "#f7f6f4"
  ink: "#141414"
  ink-pure: "#000000"

  # Secondary / muted text
  ink-secondary: "#5c5a57"
  ink-muted: "#8c8a86"

  # Accent — sparingly used warm stone
  primary: "#141414"        # CTAs are ink-on-white; brand accent is type itself
  accent-stone: "#b9aa97"
  accent-sale: "#9a2a2a"

  # Lines + neutrals
  hairline: "#e4e2de"
  border-strong: "#141414"
  gray-100: "#ebe9e5"
  gray-200: "#d8d5d0"
  gray-400: "#a8a5a0"
  gray-600: "#5c5a57"

  # On-color
  on-primary: "#ffffff"
  on-ink: "#ffffff"

  # Status / utility
  badge-bg: "#141414"
  badge-text: "#ffffff"

typography:
  display-hero:
    fontFamily: "Cormorant Garamond, Georgia, serif"
    fontSize: 64px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -1.0px
  display:
    fontFamily: "Cormorant Garamond, Georgia, serif"
    fontSize: 44px
    fontWeight: 500
    lineHeight: 1.10
    letterSpacing: -0.5px
  section-heading:
    fontFamily: "Cormorant Garamond, Georgia, serif"
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: 0px
  eyebrow:
    fontFamily: "Jost, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.40
    letterSpacing: 2.4px
  card-title:
    fontFamily: "Jost, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 0.4px
  body-large:
    fontFamily: "Jost, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 300
    lineHeight: 1.70
    letterSpacing: 0px
  body:
    fontFamily: "Jost, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 300
    lineHeight: 1.65
    letterSpacing: 0.1px
  body-medium:
    fontFamily: "Jost, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0.2px
  price:
    fontFamily: "Jost, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 0.3px
  nav-link:
    fontFamily: "Jost, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.00
    letterSpacing: 1.2px
  button-ui:
    fontFamily: "Jost, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.00
    letterSpacing: 1.6px
  caption:
    fontFamily: "Jost, Arial, sans-serif"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 1.0px

spacing:
  micro: 2px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 96px
  5xl: 140px

rounded:
  none: 0px
  xs: 1px
  sm: 2px
  md: 3px
  pill: 9999px

components:
  # Primary CTA — solid ink, sharp corners, wide tracking
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 16px 36px
  button-primary-hover:
    backgroundColor: "{colors.ink-pure}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 16px 36px

  # Secondary — outlined hairline, ink text
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 16px 36px
    borderColor: "{colors.border-strong}"

  # Quiet text link / underline action
  button-link:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 4px 0px

  # Eyebrow / category badge
  badge:
    backgroundColor: "{colors.badge-bg}"
    textColor: "{colors.badge-text}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 4px 10px

  # Product card — image-forward, borderless
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px
    borderColor: "{colors.hairline}"

  # Quiet surface block (editorial / story)
  card-soft:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 40px

  # Input — underline-only field
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 10px 0px
    borderColor: "{colors.hairline}"
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    borderColor: "{colors.border-strong}"

  # Top navigation bar
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 20px 32px
    borderColor: "{colors.hairline}"

  # Sale price marker
  badge-sale:
    backgroundColor: "{colors.background}"
    textColor: "{colors.accent-sale}"
    typography: "{typography.price}"
    rounded: "{rounded.none}"
    padding: 0px
---

# LIM London Design System

## Overview

LIM London presents itself as an editorial fashion house first and a storefront second. The interface is built almost entirely from a near-pure white canvas (`{colors.background}`) and ink-black text (`{colors.ink}`), the classic gallery palette that lets garment photography supply every trace of color. Nothing on the page competes with the product — chrome is reduced to hairlines, type, and generous negative space.

The typographic pairing is the brand's signature move: a high-contrast serif display face (`{typography.display-hero}`) for headlines and section titles, set against a light, wide-tracked geometric grotesque (`{typography.body}`, `{typography.nav-link}`) for navigation, body, and labels. The serif carries warmth and couture authority; the sans carries the cool, spaced-out precision of a lookbook caption. Eyebrows and nav links lean on letter-spacing (1.2px–2.4px) and uppercase to read as quiet editorial labels rather than buttons.

Geometry is deliberately sharp. Corners are square (`{rounded.none}`) almost everywhere — buttons, cards, inputs, and badges all sit at 0px radius, reinforcing the architectural, print-derived feel. Where softening appears, it is barely perceptible (`{rounded.xs}`–`{rounded.md}`, 1–3px). Borders are hairline-thin (`{colors.hairline}`) for dividers and structural ink (`{colors.border-strong}`) only when an element needs to assert itself.

**Key Characteristics:**
- Gallery-white canvas with ink-black type — product imagery is the only color
- Serif display (`{typography.display-hero}`) paired with a light, wide-tracked grotesque for UI
- Square corners throughout (`{rounded.none}`) — print/architectural rigor
- Hairline dividers (`{colors.hairline}`) instead of boxes or shadows
- Uppercase, letter-spaced eyebrows and nav links as editorial labels
- Ink-on-white CTAs with wide tracking and no rounding
- Underline-only inputs — no boxed fields
- Restrained warm-stone (`{colors.accent-stone}`) and sale-red (`{colors.accent-sale}`) accents, used sparingly

## Colors

### Primary
- **Ink** (`{colors.ink}`): Primary text, headings, CTA fills, structural borders. A soft near-black, not pure black.
- **Pure White** (`{colors.background}`): Page background, card surfaces, button text on dark.
- **True Black** (`{colors.ink-pure}`): Hover-state CTA fill, maximum-contrast accents.

### Secondary Text
- **Ink Secondary** (`{colors.ink-secondary}`): Supporting copy, descriptions.
- **Ink Muted** (`{colors.ink-muted}`): Captions, metadata, disabled labels.

### Accents
- **Stone** (`{colors.accent-stone}`): Warm neutral accent for editorial blocks and subtle highlights.
- **Sale Red** (`{colors.accent-sale}`): Markdown/sale pricing only.

### Lines & Neutrals
- **Hairline** (`{colors.hairline}`): Dividers, card edges, input underlines.
- **Border Strong** (`{colors.border-strong}`): Outlined buttons, focused inputs, assertive rules.
- **Gray 100–600** (`{colors.gray-100}` → `{colors.gray-600}`): Neutral scale for surfaces, separators, and muted text.

### Surface
- **Surface Soft** (`{colors.surface-soft}`): Quiet warm-off-white panel for editorial/story sections.

## Typography

### Font Family
- **Display / Serif**: `Cormorant Garamond`, fallbacks `Georgia, serif` — high-contrast couture serif for headlines and section titles.
- **UI / Body**: `Jost`, fallbacks `Arial, sans-serif` — light geometric grotesque for navigation, body, labels, and prices.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | 64px serif hero — editorial billboard |
| `display` | 44px serif — major section openers |
| `section-heading` | 32px serif — sub-section titles |
| `eyebrow` | 12px uppercase, wide-tracked label above headings |
| `card-title` | 16px product / card title |
| `body-large` | 18px light intro copy |
| `body` | 15px standard reading text |
| `body-medium` | 15px emphasized body |
| `price` | 15px product pricing |
| `nav-link` | 13px uppercase, tracked navigation |
| `button-ui` | 13px uppercase, widest tracking, for CTAs |
| `caption` | 11px metadata, fine print |

### Principles
- **Serif announces, sans organizes**: Cormorant Garamond owns every headline; Jost owns every functional surface.
- **Tracking as hierarchy**: UI labels gain meaning through letter-spacing (1.2px–2.4px), not weight or color.
- **Light by default**: Body copy runs at weight 300 — airy, editorial, never heavy.
- **Uppercase for navigation and CTAs only**: sentence case for reading copy.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base rhythm is 8px, expanding to large editorial gaps (`{spacing.4xl}`–`{spacing.5xl}`) between sections.

### Grid & Container
- Max content width: approximately 1440px, full-bleed product imagery where possible
- Hero: full-width image with serif headline overlaid or stacked
- Product grids: 2–4 columns of borderless image cards
- Editorial sections: asymmetric image + serif-text pairings

### Whitespace Philosophy
- **Gallery emptiness**: Large vertical padding (`{spacing.4xl}`+) frames products like exhibits.
- **Hairlines over boxes**: Structure comes from thin rules and alignment, never shadows or fills.
- **Image-led**: Color and texture live in photography; the chrome stays monochrome.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Page background, product cards, text blocks |
| Hairline (Level 1) | `1px solid {colors.hairline}` | Dividers, card edges, input underlines |
| Strong Rule (Level 2) | `1px solid {colors.border-strong}` | Outlined buttons, focused fields, section breaks |
| Focus (Accessibility) | `2px solid {colors.ink}` outline | Keyboard focus on interactive elements |

**Depth Philosophy**: LIM London uses essentially no shadows. Hierarchy is communicated through whitespace, hairline rules, and the serif/sans contrast. The page reads like a printed editorial spread — flat, precise, and image-forward.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Buttons, cards, inputs, badges — the default |
| `xs` | 1px | Barely-there softening on small chips |
| `sm` | 2px | Optional soft corner on minor controls |
| `md` | 3px | Maximum rounding, rarely used |
| `pill` | 9999px | Reserved for round avatar / dot markers |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — Solid ink fill, white uppercase label, square corners, wide 1.6px tracking. The default CTA ("ADD TO BAG", "SHOP NOW").
- **`button-secondary`** — White surface with a 1px `{colors.border-strong}` outline, ink text.
- **`button-link`** — Underlined quiet text action for secondary navigation.

### Badges
- **`badge`** — Ink background, white uppercase caption. Used for "NEW" / category tags.
- **`badge-sale`** — Sale-red price marker on white.

### Cards
- **`card`** — Borderless, image-forward product card. Image, then title, then price stacked beneath with hairline separation where needed.
- **`card-soft`** — Warm off-white editorial panel for story/lookbook content.

### Inputs
- **`input`** — Underline-only field (1px `{colors.hairline}`), no box. Focus deepens the underline to `{colors.border-strong}`.

### Navigation
- **`nav-bar`** — White header, uppercase tracked links, hairline bottom border. Logo centered, utilities (search/bag/account) right-aligned.

### Distinctive Components
- **Serif-over-image hero**: Large Cormorant Garamond headline atop or beside full-bleed campaign photography.
- **Editorial split block**: Asymmetric image paired with a serif title + light body and an underlined text link.
- **Borderless product grid**: Image tiles separated by whitespace alone, titles in tracked Jost beneath.

## Do's and Don'ts

### Do
- Keep the canvas white and let product photography carry all color
- Pair Cormorant Garamond (display) with Jost (UI) — never mix in a third family
- Use square corners (`{rounded.none}`) on buttons, cards, inputs, and badges
- Build structure from hairlines (`{colors.hairline}`) and whitespace, not shadows
- Use letter-spacing (1.2px–2.4px) and uppercase for nav links and CTAs
- Run body copy light (weight 300) for an editorial feel
- Reserve sale-red (`{colors.accent-sale}`) for markdown pricing only

### Don't
- Don't introduce rounded buttons or pill CTAs — corners stay sharp
- Don't add drop shadows or boxed cards — the system is flat
- Don't set body copy bold; weight 400 is the practical maximum for UI
- Don't color the chrome — accents belong to imagery and pricing
- Don't box inputs; keep them underline-only
- Don't lowercase nav links or remove their tracking

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single-column product grid, hamburger nav, stacked hero |
| Tablet | 600–1024px | 2-column product grid, condensed nav |
| Desktop | 1024–1440px | 3–4 column grid, full editorial layouts |
| Large Desktop | >1440px | Centered max width, generous margins |

### Touch Targets
- CTAs use comfortable padding (16px vertical) for tap comfort
- Nav links spaced with adequate gaps despite small type
- Underline inputs given 10px+ vertical padding for tap area

### Collapsing Strategy
- Hero: serif headline scales down, image goes full-bleed
- Navigation: tracked horizontal links → hamburger drawer
- Product grid: 4-column → 2-column → single column
- Editorial split blocks: side-by-side → stacked image-over-text
- Section spacing: `{spacing.5xl}` → `{spacing.3xl}` on mobile

### Image Behavior
- Product and campaign imagery stays edge-to-edge at all sizes
- Aspect ratios preserved; cards never crop awkwardly
- Serif overlays reflow below the image on narrow screens

---

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: Ink `{colors.ink}` fill, white text
- Background: Pure White `{colors.background}`
- Heading text: Ink `{colors.ink}` in Cormorant Garamond serif
- Body text: Ink Secondary `{colors.ink-secondary}` in Jost weight 300
- Divider / border: Hairline `{colors.hairline}`
- Sale price: Sale Red `{colors.accent-sale}`

### Example Component Prompts
- "Create a fashion hero on white. Headline 64px Cormorant Garamond weight 500, line-height 1.05, letter-spacing -1px, color `{colors.ink}`. Eyebrow above it 12px Jost uppercase, letter-spacing 2.4px. Square ink CTA `{colors.ink}` with white 13px Jost uppercase label, 1.6px tracking, 16px 36px padding, 0px radius."
- "Design a product card: borderless, white. Full-bleed image, then 16px Jost title, then 15px price beneath. No shadow, no rounding."
- "Build navigation: white sticky header, uppercase 13px Jost links with 1.2px tracking, centered logo, hairline bottom border `{colors.hairline}`."
- "Create an editorial split block: full-bleed image left, 32px Cormorant Garamond section heading right with 15px Jost weight 300 body and an underlined text link."

### Iteration Guide
1. Keep corners square — `{rounded.none}` is the system default
2. Serif for display, Jost for everything functional — never a third family
3. Structure with hairlines and whitespace, never shadows or boxes
4. Tracking + uppercase signal navigation and CTAs; reading copy stays sentence case, weight 300
5. The page chrome is monochrome; color enters only through photography and sale pricing

---

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