---
version: alpha
name: "Ilia"
description: "Token-first design system reference for Ilia — a skin-first clean beauty brand whose visual language blends warm naturalistic neutrals, a proprietary grotesk, and generous photography-led layouts."

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#f5f3f0"         # warm off-white panel surface — approximated from brand's paper-tone sections
  surface-warm: "#e5e7eb"    # neutral light gray — extracted from site at count 644

  # Text / ink
  ink: "#271f1f"             # deep warm near-black — rgb(39,31,31) — primary text throughout
  ink-secondary: "#5e5047"   # warm brown — rgb(94,80,71) — secondary text, sub-labels, links
  ink-muted: "#756e65"       # soft taupe — rgb(117,110,101) — captions, metadata, placeholders
  on-background: "#271f1f"
  on-surface: "#271f1f"

  # Brand accent
  primary: "#271f1f"         # deep warm near-black — CTAs, key borders, strong emphasis
  on-primary: "#ffffff"
  primary-container: "#f5f3f0"  # warm off-white container for tinted secondary surfaces

  # State / interaction
  text-hover: "#2f2525"      # darkened warm near-black — hover on ink text and links
  focus-ring: "#271f1f"
  focus-tint: "#5e5047"      # warm brown focus accent — used on interactive elements

  # Semantic
  error: "#ef4444"
  success: "#22c55e"
  warning: "#f59e0b"
  info: "#0ea5e9"

  # Borders
  border: "#e5e7eb"          # neutral light gray — primary divider, input borders
  border-strong: "#271f1f"   # deep ink border — strong outline buttons, accent rules

  # Shadow tints
  shadow-soft: "#271f1f"     # warm near-black at low opacity — approx opaque equivalent

typography:
  display-hero:
    fontFamily: "Post Grotesk, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 80px
    fontWeight: 300
    lineHeight: 0.90
    letterSpacing: -3.2px
  display:
    fontFamily: "Post Grotesk, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 60px
    fontWeight: 300
    lineHeight: 0.90
    letterSpacing: -2.56px
  heading-section:
    fontFamily: "Cambon Light, ui-serif, Georgia, Cambria, serif"
    fontSize: 32px
    fontWeight: 300
    lineHeight: 1.00
    letterSpacing: 0px
  heading-sub:
    fontFamily: "Post Grotesk, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 24px
    fontWeight: 300
    lineHeight: 1.25
    letterSpacing: -0.96px
  body-large:
    fontFamily: "Post Grotesk, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 20px
    fontWeight: 300
    lineHeight: 1.50
    letterSpacing: -0.4px
  body:
    fontFamily: "Post Grotesk, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: -0.32px
  nav-link:
    fontFamily: "Post Grotesk, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  button-ui:
    fontFamily: "Post Grotesk, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.50
    letterSpacing: 1.4px
  label:
    fontFamily: "Post Grotesk, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.50
    letterSpacing: 1.2px
  caption:
    fontFamily: "Post Grotesk, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: -0.24px

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

rounded:
  none: 0px
  sm: 4px
  md: 8px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 28px
  button-primary-hover:
    backgroundColor: "{colors.ink-secondary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 28px
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"
    borderColor: "{colors.border-strong}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 28px
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    borderColor: "{colors.border-strong}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 28px
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 28px
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 24px
  card-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 24px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border}"
    typography: "{typography.body}"
    rounded: "{rounded.pill}"
    padding: 12px 20px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus-ring}"
    typography: "{typography.body}"
    rounded: "{rounded.pill}"
    padding: 12px 20px
  badge:
    backgroundColor: "{colors.surface-warm}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
  nav:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    borderColor: "{colors.border}"
---

# Ilia Design System

## Overview

Ilia occupies a precise territory in the clean beauty spectrum: not the austere pharmacy-white minimalism of clinical skincare, and not the plush editorial excess of prestige perfume houses. The canvas opens in pure `{colors.background}` and softens almost imperceptibly into warm off-whites and taupe panels, creating an atmosphere the brand calls "skin-first" — a design language where natural complexion tones inform every surface decision. The signature color, `{colors.ink}`, is not true black but a deep warm near-black pulled from the brownish register of soil and bark, making every headline feel grounded and organic rather than stark.

What makes the typography unusual is the pairing of two typefaces with very different temperaments. Post Grotesk — a proprietary grotesque self-hosted in Light (300), Book (400), Medium (500), and Bold (700) — handles nearly all UI text, navigation, and CTAs. It runs with aggressive negative tracking on large display sizes (−3.2px at 80px) and loosens to optical neutral at body scale. Cambon Light, a delicate serif with hairline strokes, steps in exclusively for section headings and editorial subheadings, providing a moment of handmade warmth that Post Grotesk, for all its precision, cannot. This dual-voice system signals the brand's self-positioning: scientifically rigorous (the grotesk) but drawn from the natural world (the serif).

The shape language is decisively binary. Pill-shaped buttons and inputs dominate everywhere users touch, their `{rounded.pill}` radius signaling softness and approachability. Product cards and image frames stay at `{rounded.md}` — just enough to shed the clinical hard edge — while the overall layout leans on generous photography and breathing room over decorative flourish. Motion is measured and purposeful: 0.4s on buttons with a standard ease curve, brief 0.15s for overlays. The result is a system that feels like holding a high-quality product in your hand — natural-feeling, quality-confident, without a trace of excess.

**Key Characteristics:**
- Post Grotesk (Light 300 / Book 400 / Medium 500 / Bold 700) as the primary voice — proprietary, self-hosted
- Cambon Light (serif) as editorial accent for section headings only — warmth without weight
- Deep warm near-black `{colors.ink}` in place of pure `#000000` — naturalistic, skin-adjacent palette
- Warm taupe secondary text `{colors.ink-secondary}` for all sub-labels, links, and UI chrome
- Pill-dominant radius `{rounded.pill}` on buttons, inputs, quiz categories, and tags
- 8px-base spacing grid with notable use of 5.6px and 14px sub-units in product chrome
- 23 breakpoints reflecting a highly responsive Shopify/Tailwind implementation
- Aggressive negative letter-spacing on display type (−3.2px at 80px, −2.56px at 60px)
- Uppercase tracked labels (`{typography.button-ui}`, `{typography.label}`) for category and CTA text
- Flat shadow philosophy — soft box shadow on modals; near-invisible depth on cards
- Photography-forward layout: lifestyle and product imagery fills heroes, section panels, and card thumbnails
- Quiz/personalization UI with pill-button categories presented on clean white modal surfaces

## Colors

### Primary
- **Warm Near-Black** (`{colors.ink}`): The primary canvas ink for all headings, body text, nav links, and primary CTAs. A deep brown-black that reads almost like soil — warmer than `#000000` by a noticeable degree, giving all text a slightly organic quality.
- **Pure White** (`{colors.background}`): The default canvas — clean and neutral, allowing product photography to carry the visual richness.

### Brand Accent
- **Warm Near-Black** (`{colors.primary}`): Applied to primary CTA buttons and strong outline borders. The brand uses its ink color as its accent, collapsing the distinction between text and action into a single confident tone.
- **Warm Brown** (`{colors.ink-secondary}`): Secondary text, navigation links with underline, and mid-emphasis labels. Applied to inline links and navigational breadcrumbs.

### Text States
- **Muted Taupe** (`{colors.ink-muted}`): Captions, product metadata, form placeholder text, and fine-print labels. The lightest readable ink tone in the system.
- **Hover Ink** (`{colors.text-hover}`): A slightly deepened version of `{colors.ink}` — used for text link hover states.

### Surfaces
- **Warm Off-White** (`{colors.surface}`): Section panel backgrounds, alternate content zones, sidebar containers. Adds warmth without introducing a distinct brand color.
- **Neutral Gray** (`{colors.surface-warm}`): Badge and tag backgrounds, quiz option surfaces, content divider fills.

### Borders & Focus
- **Light Gray Border** (`{colors.border}`): Default input borders, divider lines, card outlines. Neutral without being cold.
- **Strong Border** (`{colors.border-strong}`): Outline button borders, strong rule separators — uses the primary ink for authority.
- **Focus Ring** (`{colors.focus-ring}`): Accessibility focus outlines — warm near-black, matching the ink system.

## Typography

### Font Family
- **Primary**: `Post Grotesk` — proprietary grotesque, self-hosted as PostGrotesk-Light.woff2, PostGrotesk-Medium.woff2, PostGrotesk-Book.woff2, PostGrotesk-Book.woff, PostGrotesk-Bold.woff. The closest Google Font substitute is DM Sans or Plus Jakarta Sans. No Adobe Fonts or variable font instances detected.
- **Serif Accent**: `Cambon Light` — self-hosted as Cambon-ExtraLight.woff. Used only at section heading sizes. No standard Google Font equivalent; Cormorant Garamond Light or EB Garamond are reasonable substitutes.
- **OpenType Features**: Standard ligatures. No stylistic alternates or swashes detected.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Campaign heroes, landing-page wordmark moments — 80px Post Grotesk Light with −3.2px tracking |
| `display` | Large section headlines on collection pages — 60px Post Grotesk Light |
| `heading-section` | Editorial section titles set in Cambon Light — the single serif moment on each page |
| `heading-sub` | Sub-section heads in Post Grotesk Light — intermediate level |
| `body-large` | Intro paragraphs, product description leads, quiz instructions |
| `body` | Default reading text — product details, editorial body, form copy |
| `nav-link` | Navigation bar links, footer link columns |
| `button-ui` | All CTA labels — uppercase, tracked at 1.4px, Medium 500 weight |
| `label` | Category tags, badge text, form labels — uppercase, 1.2px tracked |
| `caption` | Product metadata, ingredient notes, legal fine print |

### Principles
- **Light 300 as the display default**: All large-scale type uses weight 300, communicating refinement over force. The brand trusts legibility at large sizes rather than compensating with weight.
- **Uppercase tracked labels**: CTAs and category labels run uppercase at 1.2–1.4px letter-spacing. This creates a clear category distinction between "editorial prose" (lowercase) and "interactive UI" (uppercase), without requiring visual separation by size alone.
- **Negative tracking tightens with scale**: Display type goes as tight as −3.2px at 80px. Body type at 16px stays near-neutral (−0.32px). The system tracks toward tighter as size grows, a contemporary grotesque convention that Ilia follows precisely.
- **Serif as punctuation**: Cambon Light appears at exactly one tier of the hierarchy — `heading-section`. It doesn't substitute for Post Grotesk in body or UI contexts. This restraint makes its appearance land as intentional warmth, not typeface confusion.
- **Never use Bold 700 at display size**: The heavy weight is reserved for small-scale emphasis within body paragraphs. Display hierarchies live entirely in Light and Book.

## Layout

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

The site shows a notable 5.6px micro-unit (likely `rem`-derived at 0.35rem) appearing at count 210 — used in product card chrome, price metadata, and image caption gutters. This sub-grid precision reflects a Tailwind-driven implementation where the base `rem` scale creates non-integer multiples. Treat 5.6px as the tight product-chrome unit; the canonical scale above covers all editorial and UI contexts.

### Grid & Container
- Max content width: approximately 1440px with a 1280px inner content rail
- Hero: full-bleed photography or video with centered text overlay
- Product grid: 4 columns at desktop, 2 at tablet, 1 at mobile
- Section panels: full-width color blocks with centerd or split content at 1280px
- Footer: multi-column link grid in warm off-white, full-bleed
- 23 breakpoints used in practice — notably responsive across 414px through 1536px range

### Whitespace Philosophy
- **Photography-paced rhythm**: Large editorial photography panels serve as breathing breaks between dense product grids — imagery earns the optical space, not whitespace alone.
- **Generous vertical padding on sections**: 64–96px section padding at desktop, compressing to 32–48px on mobile.
- **Tight product chrome**: Inside product cards, spacing tightens to 5.6–8px between label and price, 14px for inset padding — creating dense but legible product tiles.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | Page canvas, product photography, editorial text |
| Subtle (Level 1) | `rgba(0,0,0,0.08) -1px 4px 7px 0px` — approximated opaque: `#e8e8e8` | Card subtle hover state |
| Card (Level 2) | `rgba(0,0,0,0.15) 0px 10px 20px 0px` — approximated opaque: `#d6d6d6` | Modals, quiz overlays, sticky cart panels |
| Focus Ring | `rgba(0,56,255,0.22) 0px 0px 0px 4px` — approximated opaque: `#c7d6ff` | Accessibility focus indicator on interactive inputs |

**Shadow Philosophy**: Ilia's depth system is restrained but not invisible. The primary canvas and product cards stay flat, trusting photography and color-surface zones to create spatial hierarchy. The single meaningful shadow appears on modal and overlay elements (the quiz personalization modal, cart drawer) at 0px 10px 20px with a 0.15 opacity black — a soft, diffuse lift that separates UI layers without competing with the warm naturalistic palette. The focus ring uses a blue-shifted shadow (`rgba(0,56,255,0.22)`) that is deliberately off-brand in hue — an accessibility override that doesn't attempt to match the warm palette.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Occasionally for full-bleed image frames, promo banner containers |
| `sm` | 4px | Small image thumbnails, icon containers, chip-style metadata |
| `md` | 8px | Product cards, quiz modal container, image carousels |
| `pill` | 9999px | All buttons, all text inputs, quiz category selectors, badge chips — the dominant radius |

The system is weighted almost entirely toward `{rounded.pill}`. The pill dominates at count 553 across interactive elements — buttons of every weight, inputs, swatch selectors, navigation tags. This is the clearest single brand signature in the shape language: every point of human contact is soft-edged. The `{rounded.md}` provides the intermediate tier for non-interactive containers. A `20px` radius appears in video player controls and a handful of product selectors, but this is a soft variant between `{rounded.md}` and `{rounded.pill}` that sits outside the canonical token scale.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly (`{components.button-primary}`, `{components.input}`) rather than reconstructing them.

### Button variants

- **`button-primary`** — Deep warm near-black pill button. Used for all primary commerce actions: "Add to Bag," "Shop Now," quiz submit. Uppercase tracked text at `{typography.button-ui}`.
- **`button-secondary`** — White background with strong ink border, pill shaped. Secondary actions and navigation CTAs where context is already dark.
- **`button-ghost`** — Fully transparent, pill shaped, ink text. Used within photography panels and hero zones where a hard fill would compete with imagery.

### Cards

Product cards use `{rounded.md}` with no shadow on the default state. Photography fills the top of the card flush to the container edge. On hover, the surface warms slightly to `{colors.surface}` — a chromatic shift, not an elevation change. Padding stays at `{spacing.md}` to `{spacing.lg}` for the content zone below the image.

### Inputs

All form inputs use `{rounded.pill}` — including search fields, email capture, newsletter signup. This carries the soft-touch brand language into functional UI. Focus state changes border from `{colors.border}` to `{colors.focus-ring}`, with no outer glow except the accessibility ring (`rgba(0,56,255,0.22)` 4px).

### Badges / Tags

Badges use `{rounded.pill}` with `{colors.surface-warm}` background and `{colors.ink-secondary}` text. Uppercase, tracked at 1.2px. Category selectors in the quiz UI use the same pill shape at slightly larger padding, presented as large tappable tile-buttons on white modal surface.

### Navigation

Sticky white navigation bar with `{colors.border}` bottom rule. Logo (wordmark or mark) left-aligned or centered depending on viewport. Nav links at `{typography.nav-link}` in `{colors.ink}`, hover state adds underline and deepens to `{colors.text-hover}`. Cart, search, and account icons right-aligned. Mobile collapses to hamburger with full-screen drawer.

## Do's and Don'ts

### Do
- Use Post Grotesk Light (300) for all display and editorial headings — the thinness is the brand's confidence signal
- Apply `{rounded.pill}` to every user-facing interactive element: buttons, inputs, quiz selectors, tags
- Pair Post Grotesk with Cambon Light at exactly one hierarchy level — `{typography.heading-section}` — for controlled editorial warmth
- Use `{colors.ink}` (`#271f1f`) instead of true black for all primary text — the warm near-black shifts the mood from stark to naturalistic
- Set CTA labels in uppercase with 1.2–1.4px letter-spacing using `{typography.button-ui}`
- Let photography do the visual work — prioritize large, quality imagery over decorative UI elements
- Use `{colors.ink-secondary}` for links, sub-labels, and navigation to create a clear ink hierarchy without introducing a separate accent color
- Maintain flat cards at `{rounded.md}` without shadows — elevation appears only at modal/overlay tier
- Apply generous section padding (64–96px desktop) between editorial zones for the natural, unrushed pacing

### Don't
- Don't use Post Grotesk Bold (700) at display sizes — it conflicts with the light, skin-first aesthetic; reserve Bold for small-scale inline emphasis only
- Don't apply `{rounded.none}` to interactive elements — sharp-cornered buttons break the core tactile softness of the brand
- Don't substitute pure `#000000` for `{colors.ink}` — the warm near-black is a deliberate identity choice, not a default
- Don't add gradients, heavy shadows, or multi-layer depth effects — the system's credibility rests on its naturalistic restraint
- Don't use Cambon at UI scale (buttons, labels, body copy) — the serif is specifically an editorial accent that loses its power if overused
- Don't introduce colors outside the warm neutral palette (blues, greens, purples) except for semantic states (error, success) and the accessibility focus ring
- Don't use all-caps for body or product description text — uppercase is reserved for `{typography.button-ui}` and `{typography.label}` only
- Don't place multiple competing pill elements side-by-side at the same visual weight — use secondary/ghost variants to create clear action hierarchy

---

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <414px | Single column, display text drops to 32–40px, pill buttons become full-width |
| Mobile | 414–660px | Single column, 2-up product grid possible, nav collapses to hamburger |
| Mobile Large | 660–768px | 2-column grid, quiz modals expand to near-full screen |
| Tablet | 768–1024px | 2–3 column product grid, nav links begin appearing inline |
| Tablet Large | 1024–1280px | 3–4 column product grid, full horizontal nav visible |
| Desktop | 1280–1440px | Full 4-column grid, 80px display type, editorial section panels at full scale |
| Large Desktop | ≥1440px | Maximum scale — 80px display text, section panels constrained at 1440px |

*Note: 23 distinct breakpoints are active in the implementation — a Tailwind-driven responsive grid that smoothly adapts across the full 414–1536px range.*

### Touch Targets
- Primary CTAs: 44px minimum tap height; pill buttons widen to full viewport width on mobile
- Quiz category selectors: large pill tiles, minimum 48px height, full-row tap target
- Nav icons (cart, search, hamburger): 44×44px minimum hit area
- Product cards: full card tappable, no separate "add to bag" micro-target on mobile

### Collapsing Strategy
- **Nav**: Full horizontal link bar collapses to hamburger left + wordmark center + cart right on mobile
- **Product grid**: 4-col → 2-col → 1-col maintaining `{spacing.sm}` gutters throughout
- **Section spacing**: 96px desktop → 48px tablet → 32px mobile — compresses but maintains natural pacing
- **Quiz modal**: Full-screen on mobile; centered panel at 560px max-width on tablet and above
- **Photography**: Switches from landscape editorial to portrait or square crop on mobile; no cropping of key face/product moments

### Image Behavior
- Product photography maintains portrait aspect ratio (3:4) across all breakpoints
- Hero panels serve mobile-specific art direction alternates
- Lifestyle photography crops gracefully — no critical content in edges
- Images load with subtle opacity transition (0.15s ease) matching `{typography.caption}` chrome

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}`
- Primary text: `{colors.ink}`
- Secondary text / links: `{colors.ink-secondary}`
- Muted / captions: `{colors.ink-muted}`
- Primary CTA: `{colors.primary}` (same as ink)
- CTA text: `{colors.on-primary}`
- Surface panel: `{colors.surface}`
- Border: `{colors.border}`
- Strong border: `{colors.border-strong}`
- Focus ring: `{colors.focus-ring}`

### Example Component Prompts

- "Create an Ilia-style hero on `{colors.background}` with a full-bleed lifestyle photograph filling the background. Overlay: headline in Post Grotesk Light 80px, color `{colors.ink}`, letter-spacing −3.2px, line-height 0.90. Below: 'Shop Now' CTA button with background `{colors.primary}`, text `{colors.on-primary}`, `{rounded.pill}` radius, 12px 28px padding, Post Grotesk Medium 500 14px uppercase tracked at 1.4px."

- "Design an Ilia product card with no shadow, `{rounded.md}` radius, `{colors.background}` surface. Top: product photography in 3:4 portrait ratio, flush to card edges. Below: product name in Post Grotesk Book 400 16px `{colors.ink}`, shade name in Post Grotesk Light 300 14px `{colors.ink-secondary}`, price in Post Grotesk Medium 500 16px `{colors.ink}`. Hover shifts card background to `{colors.surface}`."

- "Build an Ilia-style editorial section heading. Title in Cambon Light 32px, weight 300, color `{colors.ink}`, line-height 1.0, letterSpacing 0px. Below: body paragraph in Post Grotesk Book 400 16px, `{colors.ink}`, line-height 1.50, letterSpacing −0.32px. Background: `{colors.surface}` warm panel, full-width, 64px top/bottom padding."

- "Create an email capture input field: `{rounded.pill}` radius, border `1px solid {colors.border}`, background `{colors.background}`, Post Grotesk Book 400 16px, placeholder text in `{colors.ink-muted}`. Inline pill CTA at right edge: background `{colors.primary}`, text `{colors.on-primary}`, 12px 24px padding, `{rounded.pill}`. Focus state: border changes to `{colors.focus-ring}`."

- "Design Ilia-style quiz category buttons: large pill tiles, background `{colors.surface-warm}`, text `{colors.ink}` in Post Grotesk Medium 500 14px uppercase, letterSpacing 1.4px. `{rounded.pill}` radius, 14px 24px padding. Selected state: background `{colors.primary}`, text `{colors.on-primary}`. White modal container with `{rounded.md}` at 560px max-width, 10px 20px shadow."

- "Style an Ilia navigation bar: sticky, `{colors.background}` background, `1px solid {colors.border}` bottom rule. Left: 'ILIA' wordmark in Post Grotesk Medium 500 16px `{colors.ink}`. Center: nav links in Post Grotesk Book 400 16px `{colors.ink}`, hover adds underline `{colors.ink-secondary}`. Right: search + cart SVG icons in `{colors.ink}`, 44×44px hit area."

### Iteration Guide

1. Start with `{colors.background}` pure white canvas and `{colors.ink}` warm near-black — never substitute true `#000000` for the ink tone.
2. Apply `{rounded.pill}` to every interactive element first; only use `{rounded.md}` for non-interactive card containers.
3. Set display type in Post Grotesk Light 300 with aggressive negative tracking; step up to Book 400 for body, Medium 500 for buttons and labels only.
4. Reserve Cambon Light exclusively for section headings (`{typography.heading-section}`) — one serif moment per page at most.
5. Keep depth flat on cards and page surfaces; introduce `0px 10px 20px rgba(0,0,0,0.15)` shadow only at modal/overlay tier.
6. Use uppercase tracking (`{typography.button-ui}`, `{typography.label}`) to distinguish interactive/categorical text from editorial prose — never uppercase body paragraphs.
7. Let brand photography carry visual richness — resist adding gradients, decorative icons, or illustration to compensate for sparse color.
8. Warm neutrals (`{colors.surface}`, `{colors.surface-warm}`) define zone separation; never introduce saturated color accents outside semantic states.

---

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