---
version: alpha
name: Quince
description: Affordable-luxury essentials brand built on a warm near-black and white canvas, with a cantaloupe-peach CTA, a two-font pairing of editorial Ivy Headline serif display type and the Grosa grotesque for UI, pill-radius buttons, and photography-led restraint that punches above its price point.

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#f7f6f4"           # warm off-white panels, secondary content zones /* estimated */
  surface-warm: "#f2ede7"      # deeper warm cream — editorial callout backgrounds /* estimated */

  # Ink / text
  ink: "#21201f"               # near-black primary text — rgb(33,32,31) — 5530 count, dominant system value
  ink-secondary: "#757575"     # mid-gray secondary copy — rgb(117,117,117)
  ink-muted: "#9e9e9e"         # captions, placeholder text, helper copy /* estimated */
  on-dark: "#ffffff"           # text on near-black surfaces and the peach CTA button

  # Brand accent — Quince's signature cantaloupe
  primary: "#ffa273"           # cantaloupe peach — rgb(255,162,115) — main CTA background color
  primary-dark: "#d98a62"      # CTA hover — rgb(217,138,98), dembrandt-computed hover for #ffa273
  on-primary: "#21201f"        # near-black label on the peach CTA (not white — brand choice)
  primary-container: "#fde9dc" # tinted peach container — very light cantaloupe tint /* estimated */

  # Interaction / state
  text-hover: "#21201f"        # link and nav hover — stays near-black
  focus-ring: "#21201f"        # keyboard focus outline uses near-black

  # Borders
  border: "#d9d8d7"            # was rgba(33,32,31,0.2) over white — Google format requires hex; 51-count dominant border
  border-strong: "#21201f"     # 1px solid near-black on focused inputs and strong dividers

  # Shadow tints (opaque approximations)
  shadow-soft: "#000000"       # was rgba(0,0,0,0.1) over white — Google format requires hex
  shadow-medium: "#000000"     # was rgba(0,0,0,0.15) over white — Google format requires hex

typography:
  display-hero:
    fontFamily: "ivy-headline, Cormorant Garamond, Georgia, Times New Roman, serif"
    fontSize: 48px
    fontWeight: 300
    lineHeight: 1.2
    letterSpacing: -0.5px
  display:
    fontFamily: "ivy-headline, Cormorant Garamond, Georgia, Times New Roman, serif"
    fontSize: 32px
    fontWeight: 300
    lineHeight: 1.25
    letterSpacing: -0.25px
  heading-section:
    fontFamily: "ivy-headline, Cormorant Garamond, Georgia, Times New Roman, serif"
    fontSize: 27px
    fontWeight: 300
    lineHeight: 1.42
    letterSpacing: 0px
  heading-sub:
    fontFamily: "grosa, Inter, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.15
    letterSpacing: 0.3px
  body-large:
    fontFamily: "grosa, Inter, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.38
    letterSpacing: 0px
  body:
    fontFamily: "grosa, Inter, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.46
    letterSpacing: 0px
  body-medium:
    fontFamily: "grosa, Inter, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.23
    letterSpacing: 0px
  nav-link:
    fontFamily: "grosa, Inter, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: 0px
  button-ui:
    fontFamily: "grosa, Inter, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0.8px
  label-ui:
    fontFamily: "grosa, Inter, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.33
    letterSpacing: 0.8px
  caption:
    fontFamily: "grosa, Inter, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0.5px

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

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

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

  button-outline:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 10px 14px
    borderColor: "{colors.border-strong}"
  button-outline-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border-strong}"

  button-text:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-medium}"
    rounded: "{rounded.none}"
    padding: 0px
  button-text-hover:
    backgroundColor: "transparent"
    textColor: "{colors.ink-secondary}"

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

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.pill}"
    padding: 10px 16px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border-strong}"

  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 10px

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

  promo-bar:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-dark}"
    typography: "{typography.caption}"
    padding: 8px 16px

  swatch:
    rounded: "{rounded.pill}"
    borderColor: "{colors.border}"
    padding: 0px
---

# Quince Design System

## Overview

Quince lands in a peculiar position in the retail landscape: it prices like a value brand and presents like a premium one. The design language does most of that work. On a clean white canvas (`{colors.background}`), the dominant move is a cantaloupe-peach CTA (`{colors.primary}`) that reads warm and approachable rather than urgent — less "BUY NOW" red and more "come closer." It is the only chromatic color in an otherwise near-monochrome palette of near-blacks (`{colors.ink}`), warm mid-grays (`{colors.ink-secondary}`), and off-whites. The orange does not scream; it glows.

The typographic strategy is Quince's most deliberate design choice. Display text is set in **Ivy Headline**, a low-contrast editorial serif at a light weight of 300. It's the typeface of a fashion lookbook, not a warehouse storefront — thin strokes, classical proportions, a slight negative tracking at display scale. Below it, every label, button, nav item, and product detail reverts to **Grosa**, a clean grotesque at weights 400 and 500 with a subtle uppercase transform and letter-spacing on UI copy. The contrast between the literary headings and the efficient sans-serif chrome defines the brand's personality in every scroll: aspirational headline, practical price.

Buttons are the third signal. Every interactive surface — CTAs, outlined toggles, filter chips, search inputs — is **pill-shaped**. The `{rounded.pill}` treatment (88px computed radius) on Quince's buttons is soft and friendly in a category where many minimalist labels use sharp corners for authority. It says: the quality is serious, but so is the welcome. Photography reinforces this: warm natural light, textured linens, skin tones that feel lived-in rather than lit for a magazine. The page is warm without being loud, premium without being cold.

**Key Characteristics:**
- Cantaloupe peach (`{colors.primary}`) is the single chromatic accent — every CTA, every activated state uses it; nothing else gets color
- Near-black `{colors.ink}` (`#21201f`) — not pure black — carries all type, icons, and structural borders
- Ivy Headline at weight 300 for display and editorial headings — light, serif, fashion-adjacent
- Grosa grotesque for all UI copy, labels, navigation, and body — clean mid-weight counterpoint to the serif display
- **Pill-radius everywhere** (`{rounded.pill}`) — buttons, filter chips, inputs, swatches all rounded to full oval
- Warm border color (`{colors.border}`) derived from a 20% transparent near-black — hairline-light but warm-toned
- Flat, shadow-minimal aesthetic: shadows appear only on overlays and modals, never on cards or product tiles
- 0.35s cubic-bezier easing on buttons and nav — the signature transition registers as responsive and considered
- Uppercase with subtle letter-spacing (0.6–0.8px) on all label and button copy
- Photography-forward layout with generous whitespace and a disciplined horizontal navigation

## Colors

### Surface & Canvas
- **White** (`{colors.background}`): The universal page canvas. Product cards, section backgrounds, nav, everything defaults here.
- **Warm Off-White** (`{colors.surface}`): Secondary panels, light section backgrounds, subdued content zones.
- **Warm Cream** (`{colors.surface-warm}`): Deeper editorial callout backgrounds and promotional content bands.

### Ink / Text
- **Near-Black** (`{colors.ink}`): The primary workhorse — headings, body copy, nav labels, icon fills, button borders. `#21201f` at 5530 computed instances, the most-used value in the entire system.
- **Mid-Gray** (`{colors.ink-secondary}`): Supporting product copy, secondary labels, muted metadata.
- **Light Gray** (`{colors.ink-muted}`): Placeholder text, captions, helper text, the quiet register.

### Brand Accent
- **Cantaloupe** (`{colors.primary}`): Quince's signature. Applied to the primary CTA button fill and activated interactive states. Warm, friendly, not aggressive. Hover deepens to `{colors.primary-dark}`.
- **On-Primary** (`{colors.on-primary}`): The near-black label on the peach button — Quince chose dark text over white for contrast on the warm peach, which also keeps the brand cohesion.
- **Peach Container** (`{colors.primary-container}`): Tinted peach for light promotional containers and soft accents.

### Borders
- **Warm Hairline** (`{colors.border}`): The dominant structural border at `#d9d8d7` — derived from the brand's `rgba(33,32,31,0.2)` value, flattened to opaque. Warm enough to feel intentional, light enough to disappear.
- **Strong Border** (`{colors.border-strong}`): Full near-black `#21201f` for focused inputs and strong structural dividers.

### Shadows
- **Soft / Medium** (`{colors.shadow-soft}`, `{colors.shadow-medium}`): Opaque approximations for `rgba(0,0,0,0.1)` and `rgba(0,0,0,0.15)` — used only on overlays and drawers.

## Typography

### Font Family
- **Display**: `ivy-headline` — a low-contrast editorial serif, self-hosted. Weight 300, the defining lightness. Closest Google approximation: Cormorant Garamond. Fallback: `Cormorant Garamond, Georgia, Times New Roman, serif`.
- **UI / Body**: `grosa` — a clean contemporary grotesque, self-hosted as `Grosa-Regular` and `Grosa-Medium`. Fallback: `Inter, Helvetica Neue, Helvetica, Arial, sans-serif`.
- No variable fonts, no Google Fonts in production — both families are entirely self-hosted.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | 48px Ivy Headline Light — hero campaign headlines, seasonal landing titles |
| `display` | 32px Ivy Headline Light — section titles, editorial intros |
| `heading-section` | 27px Ivy Headline Light — product category heads, feature section titles |
| `heading-sub` | 18px Grosa Medium — sub-section labels, filter group headers |
| `body-large` | 18px Grosa Regular — editorial copy, pull quotes, featured product descriptions |
| `body` | 16px Grosa Regular — standard product descriptions, cart copy, form instructions |
| `body-medium` | 16px Grosa Medium — inline links, emphasis within body copy |
| `nav-link` | 16px Grosa Regular — primary navigation items |
| `button-ui` | 13px Grosa Medium, uppercase, 0.8px tracking — CTA labels, button copy |
| `label-ui` | 13px Grosa Medium, uppercase, 0.8px tracking — filter labels, tag copy |
| `caption` | 12px Grosa Regular — metadata, size guides, helper text |

### Principles
- The serif/sans split is strict: Ivy Headline for editorial voice, Grosa for functional UI. They do not trade roles.
- Display weight stays at 300 — the lightness of the serif is the brand's premium signal. Never raise it to 400 or 700 for display.
- Uppercase with positive letter-spacing on all UI labels and button copy: 0.6–0.8px. Body copy stays sentence-case.
- Grosa weight 500 for interactive labels; 400 for reading copy. The weight distinction is functional, not decorative.
- Line height on the serif display is loose (1.2–1.42) for editorial breathing room; Grosa UI tightens to 1.15–1.23.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px. Component interiors use `{spacing.sm}` through `{spacing.lg}` (8–24px); section rhythms scale to `{spacing.2xl}`–`{spacing.3xl}` (48–64px).

### Grid & Container
- Max content width: approximately 1280–1440px centered
- Product grid: 4 columns desktop, 2 tablet, 1 mobile with generous gutters
- Navigation: sticky top bar with centered logo wordmark, categories left-to-right, utility icons right; promo announcement bar above
- Hero: full-bleed editorial photography with an overlaid serif headline and a single peach CTA

### Whitespace Philosophy
- Whitespace is used generously to support the premium perception — products breathe in the grid, section bands have height
- The flat, shadow-free card surface means whitespace does the work that elevation would do elsewhere
- Grid gutters are proportionally wider than a discount retailer; closer to a specialty boutique

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | Product cards, page canvas, all primary content surfaces |
| Hairline (Level 1) | `1px solid {colors.border}` | Nav separators, grid dividers, card edges when present |
| Strong (Level 2) | `1px solid {colors.border-strong}` | Focused input borders, strong section dividers |
| Overlay (Level 3) | `0 3px 6px rgba(0,0,0,0.15)` (`{colors.shadow-soft}`) | Dropdown menus, promo modal |
| Dialog (Level 4) | `0 4px 18px rgba(0,0,0,0.15)` (`{colors.shadow-medium}`) | Drawers, overlays, cart sidebar |
| Focus Ring | `{colors.focus-ring}` 2px outline | Keyboard accessibility |

**Shadow Philosophy**: Quince is essentially flat on its product and content surfaces. No product card has a resting shadow, no hover produces a lift. The peach CTA gets depth from color contrast, not elevation. Shadows appear only in transient overlay surfaces — drawers and modals — where user focus needs a physical metaphor. This flat-first approach is deliberate: it keeps the page clean and lets photography own the visual weight.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Structural dividers, image frames |
| `sm` | 4px | Rare — occasional small badge or thumbnail trim |
| `pill` | 9999px | **All interactive elements**: primary CTA, outlined button, filter chips, search input, swatches, color selectors |

Quince's shape language is essentially binary: image frames and structural elements are square; everything interactive is a pill. The pill radius on buttons and inputs creates a rounded, inviting feel that contrasts with the more austere editorial serif above it. It is the brand's version of approachability — accessible luxury communicated through a circle.

## Components

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

### Button Variants

- **`button-primary`** — Cantaloupe fill (`{colors.primary}`) with near-black label (`{colors.on-primary}`). Full pill radius, uppercase Grosa Medium at 0.8px tracking. The primary CTA across the site. Hover deepens to `{colors.primary-dark}`.
- **`button-outline`** — White fill with `1px solid {colors.border-strong}` near-black border. Pill radius. Used for secondary actions, "Shop Now" editorial variants, and outlined toggle states.
- **`button-text`** — No fill, no border. Near-black Grosa Medium body copy with an underline animation (the `linear-gradient(#21201f, #21201f)` gradient at 49 uses is the animated underline technique). Used for editorial text links and "View All" callouts.

### Cards

- **`card`** — White background, zero radius, product photography flush to the top. Product name in `{typography.heading-sub}` Grosa Medium, price in `{typography.body}` Grosa Regular. Flat, no resting shadow. Hover may reveal quick-add affordances.

### Inputs

- Search and form inputs use `{rounded.pill}` with a warm hairline default border (`{colors.border}`), transitioning to `{colors.border-strong}` on focus. Grosa Regular body text; placeholder in `{colors.ink-muted}`. The pill form factor matches button shapes across the system.

### Badges / Tags

- Promotional and filter chip badges: `{colors.surface}` fill, `{colors.ink}` text, `{typography.caption}` Grosa, full `{rounded.pill}`. Used for "New", "Best Seller", size filter chips. When activated, may use `{colors.ink}` background with `{colors.on-dark}` text.

### Navigation

- **`nav-bar`** — White background, `1px solid {colors.border}` bottom separator. Quince logo wordmark centered or left; category links in `{typography.nav-link}` Grosa Regular; utility icons (search, account, cart) right-aligned. Sticky on scroll. `{colors.ink}` near-black throughout.
- **`promo-bar`** — Near-black (`{colors.ink}`) background strip above the nav for announcements. White (`{colors.on-dark}`) caption-size Grosa text. Persistent.

### Swatches

- Color swatches use `{rounded.pill}` circular format. `1px solid {colors.border}` default; active state gets a `2px solid {colors.border-strong}` ring.

## Do's and Don'ts

### Do
- Use the cantaloupe `{colors.primary}` for primary CTAs only — it is the sole accent color; preserve its warmth by not overusing it
- Keep all interactive elements — buttons, chips, filter tags, inputs, swatches — at `{rounded.pill}`; the pill shape is the interactive signature
- Set display and editorial headings in Ivy Headline at weight 300; the lightness and serif character is the brand's luxury marker
- Default all UI, nav, and button copy to Grosa with uppercase transformation and 0.8px letter-spacing
- Use `{colors.on-primary}` near-black for text on the peach CTA — not white; the brand intentionally pairs dark text on cantaloupe
- Keep product cards flat with no resting shadow; let whitespace and the photography do the separation
- Apply `{colors.border}` warm hairline for structural dividers — it is derived from the brand's near-black and reads warm, not cold gray
- Use the 0.35s `cubic-bezier(0.645, 0.045, 0.355, 1)` easing on buttons and nav interactions — the transition curve is part of the brand feel

### Don't
- Don't use a blue, green, or cool-gray accent — the cantaloupe orange is the only brand hue; introducing another color breaks the palette entirely
- Don't square the corners of buttons or inputs — `{rounded.pill}` is unconditional for interactive elements
- Don't use Ivy Headline for body copy or UI labels — it is exclusively for editorial display use
- Don't set display headings in Grosa — the serif/sans role split is strict
- Don't add shadows to product cards or page content — the system is flat by design; elevation is for overlays only
- Don't use pure black (`#000000`) for text — `{colors.ink}` (`#21201f`) is the near-black the brand chose; it reads warmer at scale
- Don't introduce a dark theme — Quince is a white-canvas brand; the warmth comes from photography and the peach accent, not a dark background
- Don't increase the Ivy Headline weight to 400 or higher at display scale — the light weight is the signal; heavier would read as a different brand

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <380px | Single column; hero stacks; type reduces to ~28px display |
| Mobile | 380–599px | Single column product grid; nav collapses to hamburger; promo bar persists |
| Mobile Large | 600–767px | Transition zone; 2-up product grid begins |
| Tablet | 768–1023px | 2-column product grid; abbreviated nav; hero photography resizes |
| Desktop | 1024–1280px | Full 4-column grid; sticky nav with all categories visible; editorial hero |
| Large Desktop | >1280px | Max container ~1440px; full editorial scale; generous section rhythm |

### Touch Targets
- Pill buttons have generous vertical padding (`10px 14px`) and minimum 40px touch height
- Filter chips and swatch selectors have 36–44px tap targets
- Nav icons are minimum 44×44px on mobile

### Collapsing Strategy
- **Navigation**: Full horizontal → hamburger menu drawer on mobile; logo stays visible; promo bar stays at all sizes
- **Product grid**: 4-col → 2-col → 1-col; gutter proportionally reduces
- **Hero**: Full-bleed editorial photography at all sizes; CTA persists; display type scales down while keeping the serif weight
- **Typography**: Ivy Headline scales from 48px → 28px mobile display; tracking reduces proportionally

### Image Behavior
- Product photography is square (1:1) in the grid and portrait (3:4) in editorial contexts
- Hero images are full-bleed at all breakpoints, art-directed for mobile
- Lazy loading with gentle opacity fade-in; no skeleton loader in the base system

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` (#ffffff)
- Text: `{colors.ink}` (#21201f near-black)
- Brand accent / CTA: `{colors.primary}` (#ffa273 cantaloupe)
- CTA hover: `{colors.primary-dark}` (#d98a62)
- On peach button: `{colors.on-primary}` (#21201f — near-black, not white)
- Secondary text: `{colors.ink-secondary}` (#757575)
- Border: `{colors.border}` (#d9d8d7 warm hairline)
- Strong border: `{colors.border-strong}` (#21201f)
- Default radius: `{rounded.pill}` (9999px — all interactive elements)

### Example Component Prompts

- "Create a Quince primary CTA button: `{colors.primary}` (#ffa273) cantaloupe background, `{colors.on-primary}` (#21201f) near-black label, Grosa Medium 13px uppercase letter-spacing 0.8px, `{rounded.pill}` full pill radius, padding 10px 14px. Hover transitions background to `{colors.primary-dark}` (#d98a62) over 0.35s cubic-bezier(0.645, 0.045, 0.355, 1)."
- "Build a Quince product card: `{colors.background}` (#ffffff) white surface, zero radius, product photography flush top edge-to-edge. Below: product name in Ivy Headline Light 18px `{colors.ink}` (#21201f); price in Grosa Regular 16px same color; add-to-cart pill button in `{colors.primary}` peach below. No card shadow — flat surface only."
- "Design a Quince editorial hero: full-bleed warm-light product photography behind a centered overlay. Headline text 48px Ivy Headline weight 300 `{colors.on-dark}` (#ffffff) letter-spacing -0.5px. Subtitle 18px Grosa Regular white below. Single cantaloupe `{colors.primary}` pill CTA labeled 'SHOP NOW' in uppercase Grosa Medium 13px."
- "Style a Quince navigation bar: `{colors.background}` (#ffffff) fill, `1px solid {colors.border}` (#d9d8d7) bottom separator. Logo wordmark centered. Nav links in Grosa Regular 16px `{colors.ink}` (#21201f) — hover underlines via animated gradient. Right: search, account, cart icons in `{colors.ink}`. Promo announcement bar above: `{colors.ink}` (#21201f) fill, `{colors.on-dark}` white Grosa caption text 12px uppercase."
- "Create Quince filter chips: `{colors.surface}` light fill, `{colors.ink}` (#21201f) Grosa Medium 13px uppercase 0.8px tracking, `{rounded.pill}` full pill radius, padding 4px 10px, `1px solid {colors.border}` default border. Active/selected state: `{colors.ink}` fill with `{colors.on-dark}` white text."
- "Build a Quince email input: `{rounded.pill}` pill radius, `1px solid {colors.border}` (#d9d8d7) default border transitions to `1px solid {colors.border-strong}` (#21201f) on focus. Grosa Regular 16px `{colors.ink}` text, placeholder `{colors.ink-muted}`. Padding 10px 16px. Paired inline with a cantaloupe `{colors.primary}` pill submit button."

### Iteration Guide

1. Start on `{colors.background}` (#ffffff) white. Quince is a white-canvas brand — any warm tint belongs in photography, not in the page chrome.
2. Reach for `{colors.primary}` cantaloupe (#ffa273) only for the primary CTA. It is the lone accent; using it on more than one element class per view dilutes it.
3. Label the peach button with `{colors.on-primary}` near-black (#21201f), not white. This is the brand's own color decision — dark on warm reads correctly here.
4. Apply `{rounded.pill}` to every interactive element unconditionally — buttons, chips, inputs, swatches. If a UI element has a function, it has a pill.
5. Set display and editorial headings in Ivy Headline at weight 300, with slight negative tracking (-0.25 to -0.5px at display scale). Any heavier or any different face is a brand deviation.
6. Use Grosa for everything below editorial scale — nav, labels, body, captions, buttons. Keep it uppercase with 0.8px tracking on all button and label instances.
7. Keep product cards and content surfaces shadow-free. Flatness is the rule; elevation appears only in drawer/modal overlays.
8. Use `{colors.border}` (#d9d8d7) warm hairline for structural separators — it is warmer than a cool gray and quieter than near-black.

---

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