---
version: alpha
name: "Kosas"
description: "Clean-beauty design system built on a warm complexion canvas, graphic black-and-white chrome, and Founders Grotesk's confident grotesk voice — 'comfy' self-expression rendered as editorial restraint."

colors:
  # Surface / canvas
  background: "#fbfaf7"          # warm off-white — rgb(251,250,247); primary page canvas
  surface: "#ffffff"              # pure white for modals, overlays, card tiles
  surface-subtle: "#f0f0d0"      # --color-complexion-400; lightest complexion tint, section wash
  complexion: "#e4e28b"          # --color-complexion; the signature greenish-yellow tint used in hover icons
  complexion-hover: "#eeeec8"    # --interactive-icon-hover-bg; icon hover surface

  # Text / ink
  ink: "#000000"                  # primary text, nav, headings — full black
  ink-secondary: "#424242"        # --color-gray-800; de-emphasized labels and metadata
  ink-tertiary: "#757575"         # --color-gray-600; placeholder text, fine print
  on-background: "#000000"
  on-surface: "#000000"

  # Brand accent
  primary: "#d33167"              # --color-accent; the rose-pink CTA / campaign accent
  on-primary: "#ffffff"
  primary-container: "#f4ccd9"   # --color-accent-25; blush tint for badge surfaces and selected states

  # State / interaction
  text-hover: "#4f4f4f"          # oklab(0.43) — button hover darkening; approximated to #4f4f4f
  focus-ring: "#0018ff"          # --vw-focus-outline-color; bright blue keyboard focus outline
  focus-tint: "#e4e28b"          # complexion tint on interactive icon hover

  # Semantic
  error: "#d33167"               # reuses accent for alert states — estimated from palette

  # Borders
  border: "#dad5c9"              # --color-coconut-milk-600; warm sand hairlines on cards and inputs
  border-strong: "#000000"       # 1px solid black — primary button borders, outline buttons, nav separators

  # Neutrals
  gray-400: "#bdbdbd"            # --color-gray-400; disabled states
  gray-500: "#9e9e9e"            # --color-gray-500; secondary metadata

  # Shadow tints
  shadow-soft: "#000000"         # rgba(0,0,0,0.1–0.25) — Google format requires hex; opaque tint

typography:
  display-hero:
    fontFamily: "'Founders Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 96px
    fontWeight: 400
    lineHeight: 1.00
    letterSpacing: 0px
  display:
    fontFamily: "'Founders Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 60px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 0px
  heading-section:
    fontFamily: "'Founders Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.00
    letterSpacing: 0px
  heading-sub:
    fontFamily: "'Founders Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 30px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: -0.75px
  body-large:
    fontFamily: "'Founders Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.56
    letterSpacing: 0px
  body:
    fontFamily: "'Founders Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  nav-link:
    fontFamily: "'Founders Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 0px
  button-ui:
    fontFamily: "'Founders Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.00
    letterSpacing: 0px
  label-mono:
    fontFamily: "'Founders Grotesk Mono', 'Courier New', Courier, monospace"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.33
    letterSpacing: 0.7px
  caption:
    fontFamily: "'Founders Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 0px
  caption-mono:
    fontFamily: "'Founders Grotesk Mono', 'Courier New', Courier, monospace"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.00
    letterSpacing: 0.4px

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

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

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.surface}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    borderColor: "{colors.ink}"
  button-primary-hover:
    backgroundColor: "{colors.text-hover}"
    textColor: "{colors.surface}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    borderColor: "{colors.text-hover}"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 30px
    borderColor: "{colors.border-strong}"
  button-secondary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.surface}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 30px
    borderColor: "{colors.ink}"
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.surface}"
    typography: "{typography.body-large}"
    rounded: "{rounded.none}"
    padding: 8px 32px
    borderColor: "{colors.surface}"
  button-ghost-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body-large}"
    rounded: "{rounded.none}"
    padding: 8px 32px
    borderColor: "{colors.surface}"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 16px
  card-product:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 8px
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 8px 16px
    borderColor: "{colors.border-strong}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 8px 16px
    borderColor: "{colors.primary}"
  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  badge-promo:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.surface}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.none}"
    padding: 6px 12px
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    borderColor: "{colors.border}"
---

# Kosas Design System

## Overview

Kosas belongs to the "comfy beauty" school — the brand that first argued skincare ingredients belong in makeup, and that wearing makeup should feel like not wearing any. That proposition shows up in every design decision on the site. The canvas is a warm, just-off-white complexion tone (`{colors.background}`, rgb(251,250,247)) that settles somewhere between linen and skin: not clinical white, not aggressively beige, but the kind of light that makes photography look unretouched. Against this ground the chrome is aggressively simple — pure black borders, black buttons, black type — and the only chromatic accent is a saturated rose-pink (`{colors.primary}`, `#d33167`) that lives almost exclusively in the CSS variable `--color-accent`, reserved for sale moments and promotional calls-to-action. The system's other signature color family is the complexion palette: a warm yellow-green tint (`{colors.complexion}`, `#e4e28b`) that names itself honestly in the variable `--color-complexion` and surfaces as icon hover backgrounds and interactive feedback. Kosas is a brand that named a color after skin and made it a system token.

Typography is a case study in mono-culture done right. Founders Grotesk runs from 96px hero text down to 10px fine print, with its monospaced sibling Founders Grotesk Mono handling all label, price, and utility roles that need tabular rhythm. The typeface is informal without being casual — its slightly wide strokes read energetic at large sizes but quietly legible at small ones — and the weight vocabulary stays deliberately narrow: 400 for nearly everything, 500 for buttons and emphasis, 700 appearing only in oversized marketing moments. "Alia-Founders-Grotesk" surfaces in the source as a custom variant used for certain campaign display headings, suggesting Kosas has a bespoke optical-size adjustment for their biggest type moments.

Interaction chrome is graphic rather than soft. Buttons default to sharp-edged rectangles — the primary "Add to Bag" is a black-filled pill-adjacent shape at 4px radius, the secondary is a fully sharp 0px-radius outline, and the ghost variant used on photography is a 0-radius white outline. There are no gradients, no blurs, no photographic overlays. Shadows exist (the card system uses a `0px 25px 50px -12px rgba(0,0,0,0.25)` Tailwind shadow on elevated panels) but they read as utilitarian structure rather than decorative depth. The CSS variable `--vw-focus-outline-color: #0018ff` — a Kosas-blue focus ring — is one of the more distinctive accessibility choices in the DTC beauty space: a fully saturated cobalt that nobody could mistake for ambient decoration.

**Key Characteristics:**
- Warm complexion canvas (`{colors.background}`) — the page reads like natural light, not a lab or a lookbook
- Single chromatic accent (`{colors.primary}`, `#d33167`) for CTAs and sale moments — all other chrome is pure black and white
- Complexion color family (`{colors.complexion}`, `#e4e28b`) for interactive icon hover surfaces — named after skin, applied as feedback
- Founders Grotesk for all display, body, and button roles — weight 400 default, 500 for labels, 700 for oversized hero moments
- Founders Grotesk Mono for price labels, UI metadata, and precision-kerned caption contexts
- Binary border-radius system: `{rounded.none}` (0px) for outline buttons and inputs, `{rounded.sm}` (4px) for filled buttons and badges
- 1px solid black borders (`{colors.border-strong}`) as the structural workhorse — outline buttons, input fields, nav separators
- Warm sand hairline (`{colors.border}`, `#dad5c9`) for lower-emphasis dividers between product sections
- 0.6s `cubic-bezier(0.4,0,0.2,1)` transitions on cards — the slowest motion in the system, used for product-image hover scale
- 0.15s button transitions — fast and confident, not labored
- Saturated cobalt focus ring (`{colors.focus-ring}`, `#0018ff`) — the most distinctive accessibility decision in the system
- No gradients. No photographic scrims. No atmospheric drop shadows on primary content.

## Colors

### Primary
- **Off-White Complexion** (`{colors.background}`): The defining canvas. Just warm enough to read as skin-adjacent rather than clinical. Every page starts here.
- **Pure White** (`{colors.surface}`): Modals, cart overlays, email capture panels — functional white that reads as clinical relative to the canvas, signaling "this is a transactional zone."
- **Complexion Wash** (`{colors.surface-subtle}`): The lightest complexion tint for section separators, gentle background variation in editorial rows.

### Brand Accent
- **Kosas Rose** (`{colors.primary}`): The brand's chromatic signature. All primary CTAs on white surfaces, sale badge backgrounds, accent-bar promos, "add to bag" accents on hover. Rationed carefully — its relative scarcity preserves its signal.
- **Blush Container** (`{colors.primary-container}`): The passive face of the primary color — a light blush surface for badge backgrounds and swatch selection rings.

### Text States
- **Primary Black** (`{colors.ink}`): All headings, body copy, navigation, button labels on light surfaces, and the filled surface of primary buttons. The dominant color in the system by count (2,648 raw instances in extraction).
- **Dark Gray** (`{colors.ink-secondary}`): Metadata, product attribute labels, de-emphasized secondary text — warmer than pure black but still reads as near-black.
- **Mid Gray** (`{colors.ink-tertiary}`): Placeholder text in inputs, fine print, legal copy.

### Interactive & Feedback
- **Complexion Tint** (`{colors.complexion}`): The icon hover background — named `--color-complexion` in source CSS. The most Kosas-specific color in the system: a yellow-green that reads warm and slightly sun-kissed rather than lime or acid.
- **Hover Dark** (`{colors.text-hover}`): The filled button's darkened hover state — not black but close.
- **Cobalt Focus** (`{colors.focus-ring}`): `--vw-focus-outline-color: #0018ff` — a fully saturated cobalt focus outline that stands apart from every other element on the page. Keyboard-user accessibility, made unmissable.

### Borders & Structure
- **Coconut Milk Sand** (`{colors.border}`): `--color-coconut-milk-600` — warm sandy hairlines between product sections and on inputs. Carries warmth from the canvas into structural chrome.
- **Black Border** (`{colors.border-strong}`): 1px and 2px solid black — outline buttons, input borders, navigation bottom rule.

## Typography

### Font Family
- **Primary**: `Founders Grotesk` (Klim Type Foundry) — self-hosted as `founders-grotesk-regular.woff2`, `founders-grotesk-medium.woff2`, `founders-grotesk-bold.woff2`. Fallbacks: Helvetica Neue, Helvetica, Arial, sans-serif.
- **Monospace**: `Founders Grotesk Mono` — self-hosted as `FoundersGroteskMono-Regular.woff2`, `FoundersGroteskMono-Medium.woff2`. Used for price labels, uppercase utility tags, ingredient lists.
- **Campaign Variant**: `Alia-Founders-Grotesk` — a custom optical variant of Founders Grotesk for large display headings and campaign moments. Not a separate font family — an adjusted weight/tracking axis at big sizes.
- **OpenType Features**: Standard kern. No stylistic sets called out. Tight negative tracking (`-0.75px`) appears at the 30px heading-sub weight 500 — the only explicit letter-spacing tightening in the system.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | 96px campaign headings, "You've Got a Mystery Discount" hero type — full Founders Grotesk weight 400 |
| `display` | 60px section leads, product launch announces |
| `heading-section` | 48px page-level content headers, editorial moments |
| `heading-sub` | 30px weight 500 with -0.75px tracking — the one tightly set heading in the system; product category labels |
| `body-large` | 18px introductory paragraphs, product description leads, modal copy |
| `body` | 16px standard copy — product names, nav, form labels |
| `nav-link` | 14px navigation items and footer links |
| `button-ui` | 12px weight 500 — CTA labels on filled and outline buttons |
| `label-mono` | 12px Founders Grotesk Mono, 0.7px tracking, uppercase — price display, utility tags, "ADD TO BAG" label treatment |
| `caption` | 12px for metadata, helper text |
| `caption-mono` | 11px Founders Grotesk Mono for ingredient-level micro labels, fine print |

### Principles
- Founders Grotesk does every job — display through caption — with no serif guest appearances.
- Weight 400 is the default for nearly everything. Weight 500 signals precision: buttons, labels, sub-headings. Weight 700 appears only in oversized marketing moments.
- Founders Grotesk Mono handles all numeric and tabular contexts: prices, label codes, ingredient lists. Its fixed-width columns read as scientific precision, consistent with Kosas's skincare-ingredients positioning.
- Negative tracking (`-0.75px`) is reserved for the single heading-sub token — everything else tracks at 0 or positive. The system does not rely on tight tracking as a luxury signal; it uses scale and weight instead.
- Sentence case is the button default ("Add to Bag", "Shop Now") — the brand voice is friendly, not commanding.

## Layout

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

Kosas spacing operates in two clear registers. Internal chrome (buttons, inputs, badges) uses 8–16px tightly. Section-level pacing jumps to 48px, 80px, and 120px — editorial breathing room that gives each product category its own visual zone on the page. The 120px value appears twice in the extraction and anchors the big transitions between hero and first product row.

### Grid & Container
- Max content width: approximately 1280–1536px based on breakpoints
- Hero: full-bleed photography with overlaid Founders Grotesk headlines and black-outline CTAs
- Product grid: 4 columns at desktop, 2 at tablet, 1 at mobile
- Editorial rows: full-bleed photography alternating with contained copy columns
- Nav: centered wordmark flanked by category links left and utility icons right

### Whitespace Philosophy
- Generous section pacing (80–120px vertical rhythm between zones) signals editorial intent, not discount-bin urgency.
- Product card internal spacing is tight (8px) — the image fills the card, copy sits close beneath it. The density is intentional: Kosas shows many SKUs per category.
- The warm canvas does the heavy lifting of warmth; whitespace can afford to be workmanlike.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | Page canvas, editorial sections, product photography containers |
| Hairline (Level 1) | `1px solid {colors.border-strong}` or `1px solid {colors.border}` | Input borders, outline buttons, nav bottom rule, card separators |
| Card (Level 2) | `rgba(0,0,0,0.1) 0px 4px 6px -1px, rgba(0,0,0,0.1) 0px 2px 4px -2px` | Standard elevated panels — approximated to `{colors.shadow-soft}` |
| Elevated (Level 3) | `rgba(0,0,0,0.25) 0px 25px 50px -12px` | Cart drawer, email capture modal, cookie consent panel |
| Focus Ring | `{colors.focus-ring}` 3px outline offset 2px | Keyboard focus on all interactive elements |

**Shadow Philosophy**: Kosas shadows are invisible most of the time. Product photography and the warm canvas create separation through color rather than depth. When shadows appear — in the cart drawer or the email capture modal — they use the standard Tailwind shadow ladder (shadow-md, shadow-2xl) at near-opaque black. Nothing is tinted or brand-colored. The system is honest in the Klim tradition: what's structural is explicit, what's decorative is absent. The one extravagant shadow (0px 25px 50px -12px at 0.25 alpha) is reserved for the highest-stack panels — it says "this is on top of everything" without ceremony.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Outline buttons ("Shop Now", "Add to Bag" secondary), email inputs, dividers, product photography frames |
| `sm` | 4px | Filled primary buttons ("Continue", "Add to Bag" primary), badges, internal UI chrome |
| `pill` | 9999px | Toggle elements, tag chips, swatch selectors |

Kosas's shape vocabulary is almost binary: the filled interactive layer uses 4px (enough to signal "pressable," not enough to read as soft or rounded), while the outline layer uses 0px (graphic, editorial, confident). The pill appears only in swatches and chips. There are no modals with rounded corners — even full-page overlays keep sharp edges. This restrained radius system matches the brand's positioning between "clinical precision" and "warm approachability" — the corner softening is real but minimal.

## Components

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

### Button variants

- **`button-primary`** — black fill (`{colors.ink}`), white text, 4px radius (`{rounded.sm}`), 12px 16px padding. The default CTA for "Continue," "Add to Bag," sign-up flows. The button that owns the page's one strong black moment. Darkens slightly on hover.
- **`button-secondary`** — transparent fill, 1px solid black border, 0px radius (`{rounded.none}`), 8px 30px padding. "Shop Now," "Add to Bag" on lighter product moments. The outline variant says "editorial" — graphic without filling the frame.
- **`button-ghost`** — transparent fill, 2px solid white border, 0px radius, 8px 32px padding, weight 500 at 18px. Used on full-bleed photography where white-on-dark is the only readable combination.

### Cards

- **`card-product`** — warm off-white background (`{colors.background}`), 0px radius, image flush to top, product name in `{typography.body}`, price in `{typography.label-mono}` below. The background matches the page, creating a frameless grid — products appear to float on the canvas.
- **`card`** — pure white tile (`{colors.surface}`), 0px radius, 16px padding — for editorial content, ingredient spotlights, brand moments where the white tile creates separation from the warm canvas.

### Inputs

- Email, search: white background (`{colors.surface}`), 1px solid black border (`{colors.border-strong}`), 0px radius, 8px 16px padding. Focus state transitions border to `{colors.primary}` (Kosas rose). Keyboard focus shows `{colors.focus-ring}` cobalt 3px outline. The sharp-edged inputs read as forms, not search bars — there's a utilitarian honesty to them.

### Badges / Tags

- Promo badge: black fill (`{colors.ink}`), white text, Founders Grotesk Mono uppercase, 0px radius. Used in site-wide announcement bars.
- Category badge: blush fill (`{colors.primary-container}`), rose text (`{colors.primary}`), Founders Grotesk Mono uppercase, 4px radius. Used for "NEW," "BESTSELLER" product tags.

### Navigation

- Sticky top bar on warm off-white canvas (`{colors.background}`), centered "Kosas" SVG wordmark. Category links left, cart/account/search icons right. 14px Founders Grotesk weight 400 in pure black. Hover states use text-decoration underline. Icon hover backgrounds shift to complexion tint (`{colors.complexion}`).

## Do's and Don'ts

### Do
- Use `{colors.background}` (`#fbfaf7`) as the page canvas — the system's warmth comes from this canvas, not from added colors
- Default every button and UI element to Founders Grotesk weight 400; reserve weight 500 for labels and weight 700 for hero-scale moments only
- Use `{colors.ink}` (black) for the filled primary button — this is the brand's default interactive signal, not `{colors.primary}`
- Apply `{colors.primary}` (Kosas rose) for promotional CTAs, sale badges, and accent-bar moments — not for every button on the page
- Keep outline buttons at `{rounded.none}` (0px) — the sharp outline is the editorial signal; rounding it makes it look like a different brand
- Use `{rounded.sm}` (4px) on filled buttons and badges only — the minimal softening signals "interactive" without reading as rounded or friendly
- Apply `{colors.border-strong}` (black) for input borders and outline buttons — the system's structural separator is always explicit
- Use Founders Grotesk Mono for all numeric and price contexts — fixed-width columns signal precision
- Show `{colors.focus-ring}` (`#0018ff`) cobalt on all keyboard focus states — it is visible by design, not an oversight
- Scale section spacing to 80–120px between major content zones — Kosas pages breathe at editorial cadence

### Don't
- Don't soften inputs or outline buttons to 4px or 8px radius — the sharp corners are intentional and brand-defining
- Don't add mid-range border-radius values (6px, 8px, 12px) — the system has exactly three radius values: 0, 4, and pill
- Don't use `{colors.primary}` (rose) as the default button color on white surfaces — it appears on promotional moments only
- Don't introduce a second typeface — Founders Grotesk and its Mono sibling handle everything; no serifs, no scripts
- Don't gradient-tint the canvas or photography — the system is gradient-free and the complexion warmth comes from flat hex, not blends
- Don't drop shadows on product cards or navigation — card elevation exists only in overlays and drawers
- Don't neutralize the cobalt focus ring to the brand palette — `#0018ff` was chosen for maximum contrast, not brand harmony
- Don't use weight 700 below 48px — bold Founders Grotesk at small sizes reads commercial and off-brand
- Don't substitute the off-white canvas with pure white for page backgrounds — `#fbfaf7` is the brand's skin tone, not a compromise
- Don't use the complexion tint (`{colors.complexion}`) as a text or button color — it is an icon hover surface and nothing else

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <550px | Single-column, hero text scales to 36–48px, stacked nav |
| Mobile | 550–767px | Single-column product grid, hamburger nav, full-bleed hero |
| Tablet Small | 768–899px | 2-column grid, condensed nav, reduced section spacing |
| Tablet | 900–1023px | 2–3 column grid, horizontal nav restored |
| Desktop | 1024–1280px | 4-column product grid, full editorial split layouts |
| Large Desktop | >1280px | Centered max-width container, 120px section pacing |

### Touch Targets
- Primary black-fill buttons use minimum 44px height on mobile — padding expands to compensate
- Nav icon targets (cart, account, search) padded to 44×44px minimum
- Product cards are fully tappable to PDP
- Swatch selectors maintain 24px minimum diameter with visible `{colors.focus-ring}` outline

### Collapsing Strategy
- Navigation: horizontal category links collapse to hamburger drawer at mobile; wordmark remains centered
- Hero: full-bleed photography with overlaid text stacks vertically at mobile; headline scales from 96px → 36–48px
- Product grid: 4-col → 2-col at tablet → 1-col at mobile
- Section spacing scales: 120px desktop → 48px mobile — maintains editorial rhythm at reduced scale
- Announcement bar: full-width, text wraps to two lines on mobile rather than truncating

### Image Behavior
- Product photography: aspect-ratio locked, object-fit cover, scales within container
- Hero images: full viewport width, sharp-edge containers at all breakpoints
- Editorial split rows: image column collapses below text column at tablet

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` (warm off-white `#fbfaf7`)
- Text: `{colors.ink}` (pure black `#000000`)
- Brand accent: `{colors.primary}` (Kosas rose `#d33167`)
- Secondary text: `{colors.ink-secondary}` (`#424242`)
- Border: `{colors.border}` (coconut milk `#dad5c9`)
- Strong border / primary button: `{colors.ink}` (`#000000`)
- Focus ring: `{colors.focus-ring}` (cobalt `#0018ff`)
- Icon hover: `{colors.complexion}` (`#e4e28b`)

### Example Component Prompts

- "Build a Kosas-style product hero on `{colors.background}` (`#fbfaf7`). Full-bleed photography right half, left half: brand wordmark in Founders Grotesk weight 400, a 96px campaign headline in `{colors.ink}` at line-height 1.0, a 16px body paragraph in `{typography.body}`, and a `{components.button-primary}` labeled 'Shop Now' — black fill, white text, `{rounded.sm}` (4px) radius, 12px 16px padding. No gradient scrim on the photo."
- "Design a Kosas product card on `{colors.background}`. Image flush to top, no border, `{rounded.none}` container. Below: product name in `{typography.body}` `{colors.ink}`, price in `{typography.label-mono}` (Founders Grotesk Mono, uppercase, 12px). Card has no drop shadow. On hover, product image scales 1.03 over 0.6s `cubic-bezier(0.4,0,0.2,1)`."
- "Create a Kosas outline CTA button in `{components.button-secondary}` style: transparent background, `1px solid {colors.border-strong}` border, `{rounded.none}` shape, 8px 30px padding, 12px Founders Grotesk weight 500 text in `{colors.ink}`. Hover state fills to black (`{colors.ink}`) with white text. Transition all over 0.15s `cubic-bezier(0.4,0,0.2,1)`."
- "Build a Kosas site-wide promo bar: full-width strip, `{colors.ink}` background, `{typography.label-mono}` text in `{colors.surface}` (white), uppercase Founders Grotesk Mono weight 500 at 12px with 0.7px tracking. Single line. Sticky above the main nav."
- "Design a Kosas email capture modal: `{colors.surface}` white background, `{rounded.none}` corners, `rgba(0,0,0,0.25) 0px 25px 50px -12px` shadow. 32px padding. Headline in `{typography.display}` Founders Grotesk at 60px, body in `{typography.body-large}`, email `{components.input}` with sharp black border and rose focus state (`{colors.primary}`), `{components.button-primary}` labeled 'Continue'. Keyboard focus shows cobalt `{colors.focus-ring}` outline."
- "Create a Kosas navigation bar: `{colors.background}` background, `1px solid {colors.border}` bottom border, centered SVG wordmark. Left side: category links in `{typography.nav-link}` `{colors.ink}`. Right side: search, account, cart SVG icons, each with 44×44px hit target and complexion tint (`{colors.complexion}`) hover background. Hover links add underline `text-decoration: underline`."

### Iteration Guide

1. Start with `{colors.background}` (`#fbfaf7`) as the canvas — the warmth is baked into the page, not layered on top.
2. Default all buttons to black fill (`{colors.ink}`) with 4px radius (`{rounded.sm}`). Reserve `{colors.primary}` rose for promotional moments and sale accents only.
3. Set all type in Founders Grotesk weight 400. Use Founders Grotesk Mono for prices and uppercase utility labels.
4. Outline buttons and inputs always use `{rounded.none}` — sharp corners are the graphic signature of the outline layer.
5. Icon hover states shift to `{colors.complexion}` (`#e4e28b`) — warm complexion tint, not gray.
6. Keyboard focus always shows cobalt `{colors.focus-ring}` (`#0018ff`) — never suppress or neutralize it.
7. Cards have no drop shadows. Shadows live only in overlays and drawers.
8. Section breaks require 80–120px vertical space — Kosas pages breathe editorially, they don't cram.

---

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