---
version: alpha
name: Captions
description: Near-white AI video creator with a custom display serif (Exposure) for headlines, DenimINK for body text, pill-dominant shapes, a cool-tinted gradient canvas, and a vast named-color vocabulary used as dynamic video style accents.

colors:
  # Core canvas — cool near-white with faint teal undertone
  background: "#f5f9fa"             # site canvas, hero bg
  surface: "#eef4f6"               # card wells, upload area backgrounds
  surface-raised: "#ffffff"         # elevated panels, input fields, modal surfaces
  surface-dark: "#1d1f20"          # inverted panels, footer, dark CTA sections

  # Ink
  ink: "#1d1f20"                   # primary text, headlines, icon fills
  ink-secondary: "#595e5e"         # supporting copy, feature labels
  ink-muted: "#7e8486"             # metadata, placeholders, dimmed UI text
  ink-light: "#9fa5a7"             # lowest-emphasis text on light surfaces
  on-dark: "#f5f9fa"               # text on dark/inverted surfaces

  # Brand primary — near-black CTA
  primary: "#1d1f20"               # primary buttons, key UI elements
  on-primary: "#ffffff"            # text on primary buttons
  primary-hover: "#2a2c2d"         # was rgb(42,44,45) — slightly softened dark

  # Named style-accent palette — used for video template color chips
  # These are the Captions video style colors, not UI chrome colors
  accent-green: "#00c67a"          # --color-medium-green: teal CTA tint
  accent-sea: "#00d0ff"            # --color-sea: bright cyan
  accent-violet: "#6c4df7"         # --color-violet: electric purple
  accent-lime: "#aaff4e"           # --color-lime-green: electric lime
  accent-barbie: "#ff1476"         # --color-barbie-pink: hot pink signal
  accent-mustard: "#ffdd33"        # --color-mustard: warm yellow
  accent-orange: "#e07300"         # --color-orange: vivid orange

  # Borders
  border: "#d0d4d5"                # was rgb(208,214,215) — card outlines, inset rings
  border-soft: "#bec3c6"           # secondary dividers, disabled states

  # Shadow tints
  shadow-soft: "#000000"           # was rgba(0,0,0,0.05) — subtle lift under cards
  shadow-ambient: "#1d1f20"        # was rgba(29,31,32,0.08) — card depth

  # Semantic
  error: "#d00000"                 # --color-red
  success: "#00c67a"               # --color-medium-green

  # State
  focus-ring: "#1d1f20"            # keyboard focus outline matches primary
  overlay: "#1d1f20"               # was rgba(29,31,32,0.16) — backdrop overlay

typography:
  display-hero:
    fontFamily: "Exposure, Georgia, 'Times New Roman', serif"
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: -1.28px
  display:
    fontFamily: "Exposure, Georgia, 'Times New Roman', serif"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: -0.48px
  heading-section:
    fontFamily: "DenimINK, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0px
  body-large:
    fontFamily: "DenimINK, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0px
  body:
    fontFamily: "DenimINK, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0px
  body-medium:
    fontFamily: "DenimINK, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0px
  button-ui:
    fontFamily: "DenimINK, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0px
  label:
    fontFamily: "DenimINK, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.71
    letterSpacing: 0.14px
  caption:
    fontFamily: "DenimINK, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.38
    letterSpacing: 0.325px
  caption-medium:
    fontFamily: "DenimINK, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.38
    letterSpacing: 0.3px
  micro:
    fontFamily: "DenimINK, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 11px
    fontWeight: 500
    lineHeight: 1.45
    letterSpacing: 0.22px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  2xl: 40px
  3xl: 60px
  4xl: 80px

rounded:
  sm: 6px
  md: 8px
  lg: 12px
  xl: 15px
  2xl: 20px
  pill: 9999px

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

  button-secondary:
    backgroundColor: "{colors.surface-raised}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 11px 16px
    border: "1px solid {colors.border}"
    boxShadow: "0px 4px 10px {colors.shadow-soft}"
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.pill}"
    padding: 11px 16px

  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.xl}"
    padding: 12px 20px
    border: "1px solid {colors.primary}"
  button-ghost-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 12px 20px

  button-pill-chip:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption-medium}"
    rounded: "{rounded.pill}"
    padding: 0px 14px
    boxShadow: "inset 0 0 0 0.5px {colors.border}"
  button-pill-chip-hover:
    backgroundColor: "{colors.surface-raised}"
    textColor: "{colors.ink}"
    rounded: "{rounded.pill}"
    padding: 0px 14px

  card:
    backgroundColor: "{colors.surface-raised}"
    rounded: "{rounded.lg}"
    padding: 16px
    border: "1px solid {colors.border}"
  card-hover:
    backgroundColor: "{colors.surface-raised}"
    boxShadow: "0 4px 10px {colors.shadow-soft}"
    rounded: "{rounded.lg}"
    padding: 16px

  input:
    backgroundColor: "{colors.surface-raised}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.lg}"
    padding: 12px 16px
    border: "1px solid {colors.border}"
  input-focus:
    border: "1px solid {colors.focus-ring}"
    boxShadow: "0 0 0 2px {colors.border}"

  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption-medium}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
    border: "1px solid {colors.border}"

  nav:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    padding: 0px 20px
---

# Captions Design System

## Overview

Captions arrives on a cool, almost-white canvas, `{colors.background}` a faint blue-gray that reads clean without the harsh sterility of pure white. The page feels like a well-lit mobile studio: fresh, modern, and slightly airy. Two custom typefaces do all the heavy lifting. Exposure, a high-contrast display serif from 205TF, handles the big moments, its bracketed wedge serifs and tight negative tracking giving headlines a confident editorial weight. DenimINK, a purposeful humanist sans, takes over immediately below, carrying body copy, labels, and UI text in a register that is readable but not generic. The pairing is deliberate: editorial authority at the top, approachable clarity everywhere else.

What sets Captions apart from the usual AI SaaS playbook is its relationship with color. The primary UI chrome is essentially monochromatic — near-black `{colors.primary}` on near-white `{colors.background}`, with neutral grays rounding out the surface and ink hierarchy. There are no gradient brands, no electric primaries in the CTA buttons. Instead, Captions banks 24 named colors (`{colors.accent-green}`, `{colors.accent-violet}`, `{colors.accent-barbie}`, and more) as a vocabulary reserved entirely for video content: the style chips, template thumbnails, and dynamic preview cards that populate the product's gallery. It is a clean separation — UI stays neutral, content stays vivid. The canvas recedes; the creator's work pops.

The shape language reinforces this editorial restraint. Pill forms dominate interactive elements. Primary CTAs, tag chips, nav buttons, and filter badges all share `{rounded.pill}` radii, creating a soft, rounded consistency. Cards and containers use a gentler `{rounded.lg}` for 12px corners, with subtle inset-ring shadows (`border-soft`) keeping surfaces articulated without depth drama. Motion is economical: 150–200ms ease transitions on background-color, opacity, and hover states, with a single 20s marquee keyframe for scrolling feature rows.

**Key Characteristics:**
- Cool near-white `{colors.background}` (#f5f9fa) canvas — not pure white, gives depth without darkness
- Near-black `{colors.primary}` (#1d1f20) for all primary CTAs and text — no branded accent color in UI chrome
- Custom display serif Exposure (205TF) at `{typography.display-hero}` with tight −1.28px tracking for all hero/section headlines
- Custom humanist sans DenimINK for all body, UI, and label text — self-hosted, no Google Fonts dependency
- Pill radius (`{rounded.pill}`) dominant on all interactive controls — buttons, chips, nav tags
- 24 named video accent colors reserved strictly for content/preview contexts, never UI chrome
- `{colors.border}` (#d0d4d5) inset ring shadows on button states — texture without elevation
- Pastel gradient backdrop on hero: cool blueish-teal to warm peach blend (not a brand color, purely decorative)
- 8px base spacing grid; content max-width ~1140px with 1000/800/640px breakpoints
- DenimINK caption track (`{typography.caption}`) uses positive +0.325px letter-spacing — expands micro text for legibility
- Video style thumbnails carry the full color vocabulary; the neutral shell amplifies them by contrast
- Accessibility-forward hover states: all interactive elements have explicit bg-color transitions at 150–200ms ease

## Colors

### Primary
- **Near-Black** (`{colors.ink}`): Primary text color at #1d1f20, used for headlines, body text, icon fills
- **Cool Near-White** (`{colors.background}`): Marketing canvas and hero at #f5f9fa, carries a subtle teal undertone
- **Surface** (`{colors.surface}`): Card wells and upload areas at #eef4f6, slightly deeper than canvas
- **White Panel** (`{colors.surface-raised}`): Elevated panels, input fields, modal surfaces at #ffffff

### Brand Accent
- **Primary CTA** (`{colors.primary}`): Near-black #1d1f20 is the sole brand CTA color — understated authority rather than vivid contrast
- **Primary Hover** (`{colors.primary-hover}`): Softened to #2a2c2d on hover, a subtle shift that preserves the dark register

### Text Hierarchy
- **Ink Secondary** (`{colors.ink-secondary}`): #595e5e — supporting copy, feature labels
- **Ink Muted** (`{colors.ink-muted}`): #7e8486 — metadata, placeholders, dimmed UI text
- **Ink Light** (`{colors.ink-light}`): #9fa5a7 — lowest-emphasis text on light surfaces
- **On Dark** (`{colors.on-dark}`): #f5f9fa — text on inverted/dark sections

### Named Video Style Accents
These 24 named CSS variables (`--color-medium-green`, `--color-violet`, etc.) power video style chips. They are content colors, not UI chrome. `{colors.accent-green}` (#00c67a), `{colors.accent-violet}` (#6c4df7), `{colors.accent-barbie}` (#ff1476), `{colors.accent-lime}` (#aaff4e), and `{colors.accent-mustard}` (#ffdd33) represent the range: from electric teals to neon pinks.

### Borders and States
- **Border** (`{colors.border}`): #d0d4d5 — standard card outlines and inset button rings
- **Border Soft** (`{colors.border-soft}`): #bec3c6 — secondary dividers, disabled states
- **Focus Ring** (`{colors.focus-ring}`): #1d1f20 — matches primary to keep keyboard focus legible

## Typography

### Font Family
- **Display**: `Exposure` (205TF, variable weight −30 axis), with fallbacks: `Georgia, 'Times New Roman', serif`
- **UI / Body**: `DenimINK` (self-hosted, two weights: Regular and Medium), with fallbacks: `ui-sans-serif, system-ui, -apple-system, sans-serif`
- No Google Fonts dependency — both families are self-hosted as WOFF2

### Hierarchy

The complete type scale is declared in the `typography:` token block above. Use those tokens directly via reference rather than restating values.

| Token | Use |
|---|---|
| `display-hero` | Page-level hero statements, primary section headline |
| `display` | Section-level subheadings, feature callouts |
| `heading-section` | Tertiary titles, card headers, feature list headings |
| `body-large` | Lead paragraphs, hero sub-copy |
| `body` | Standard body text, descriptions |
| `body-medium` | Medium-weight body text, nav links |
| `button-ui` | CTA and action button labels |
| `label` | Feature labels, pill chip text |
| `caption` | Metadata, helper text, timestamps |
| `caption-medium` | Medium-weight captions, filter chip labels |
| `micro` | Fine print, video style credit, footers |

### Principles
- Two families only: Exposure for editorial weight, DenimINK for everything else — no third typeface
- Exposure is tight and serif-driven at large sizes; negative tracking widens the optical color
- DenimINK captions gain positive letter-spacing (+0.325px) to compensate for small size — a legibility detail
- Weight vocabulary is intentional: DenimINK appears in 400 (Regular) and 500 (Medium) only; no Bold
- Display-hero at 64px with −1.28px tracking creates a dense, magazine-editorial presence atop the neutral canvas

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 4px (with primary steps at 8px multiples).

Captions uses generous whitespace above the fold and tighter density in product UI. The hero breathes with `{spacing.3xl}` (60px) vertical padding; card grids tighten to `{spacing.lg}` (16px) gaps. The overall impression is airy at the marketing level, functional at the product level.

### Grid & Container
- Max content width: 1140px (breakpoint trigger)
- 12-column grid with ~20px gutters implied by consistent 20px horizontal padding on nav
- Responsive breakpoints: 1140 → 1000 → 800 → 640 → 600 → 480px

### Whitespace Philosophy
- Hero areas absorb oversized spacing — the near-white canvas needs breathing room or it compresses into a loading screen
- Product UI tightens the scale: form inputs, chip rows, and thumbnail grids use `{spacing.md}` and `{spacing.lg}` gaps
- Section transitions use visible whitespace rather than dividers — the canvas color provides enough rhythm on its own

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Body text, inline labels, nav links |
| Inset Ring (Level 1) | `inset 0 0 0 0.5px {colors.border}` | Pill chips, ghost inputs, secondary buttons |
| Card (Level 2) | `0px 4px 10px {colors.shadow-soft}` | Feature cards, upload dropzone |
| Elevated (Level 3) | `0px 10px 30px {colors.shadow-soft}` | Popover panels, tooltip overlays |
| Inverted Surface | `background: {colors.surface-dark}` | Footer, dark CTA block, inverted feature sections |
| Focus Ring | `0 0 0 2px {colors.border}` | Keyboard focus on inputs and buttons |

**Shadow Philosophy**: Captions prefers inset ring shadows over external drop shadows for interactive controls. Buttons and chips use a `0.5px inset {colors.border}` that gives them articulation without perceived elevation — appropriate for a product that lives on a near-flat canvas. External drop shadows appear only at card and popover levels. The overall system is nearly flat; depth comes from surface-color contrast rather than shadow volume.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `sm` | 6px | Fine-grain corner detail, rarely used directly |
| `md` | 8px | Scroll buttons, secondary UI elements |
| `lg` | 12px | Cards, upload dropzones, tooltip containers |
| `xl` | 15px | Ghost/outline buttons, navigation link hover states |
| `2xl` | 20px | Large panels, sheet/modal corners |
| `pill` | 9999px | All primary buttons, chip tags, nav badge labels, filter buttons |

Pill forms dominate the interactive surface. Primary CTAs, chip filters, and nav items are all `{rounded.pill}`, which softens the near-black primary color into something approachable rather than severe. Cards and containers step down to `{rounded.lg}`, creating clear visual hierarchy between interactive controls and passive containers.

## 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`** — Near-black pill CTA; full `{rounded.pill}` radius; `{typography.button-ui}` label; the only action that reads as "primary" on the light canvas
- **`button-secondary`** — White pill with `{colors.border}` border and a subtle `{colors.shadow-soft}` drop shadow; appears in nav and as a softened alternative CTA
- **`button-ghost`** — Transparent fill with `{colors.primary}` border and `{rounded.xl}` corners; used for secondary sign-in and download actions
- **`button-pill-chip`** — Compact inset-ring chip; `{rounded.pill}` with `{typography.caption-medium}` label; used as video style and template filter selectors

### Cards
Feature tiles use `{components.card}` with `{rounded.lg}` corners and a 1px `{colors.border}` outline. On hover, a `{colors.shadow-soft}` lift is added. Video thumbnail cards override the background with the brand's named accent colors, letting the content set its own chromatic identity.

### Inputs
Upload and text inputs use `{components.input}` — white surface, `{rounded.lg}` corners, `{colors.border}` stroke. On focus, the border shifts to `{colors.focus-ring}` with a soft outer glow using `{colors.border}` for the expanded ring.

### Badges / Tags
Filter and label badges use `{components.badge}` — `{colors.surface}` fill, `{rounded.pill}`, `{typography.caption-medium}` text. The inset-ring variant (`{components.button-pill-chip}`) is preferred for interactive filters.

### Navigation
Fixed header on `{colors.background}` with `{typography.body-medium}` nav link text. Logo sits left, navigation links centered with dropdown chevrons, sign-up CTA button right-aligned as a `{components.button-secondary}` pill. Nav links transition color on hover at 200ms ease.

## Do's and Don'ts

### Do
- Use `{colors.primary}` (#1d1f20) for all primary CTAs — the near-black anchors the near-white canvas without requiring a branded accent color
- Reserve the 24 named video accent colors (`{colors.accent-green}`, `{colors.accent-violet}`, etc.) exclusively for content/preview contexts — never as UI chrome
- Favor `{rounded.pill}` on all interactive controls (buttons, chips, tags) to maintain the soft, modern interaction language
- Use Exposure (`{typography.display-hero}`) only for display-scale headlines (48px+); switch to DenimINK immediately below
- Set positive letter-spacing on small DenimINK text (`{typography.caption}` at +0.325px) to preserve legibility at fine sizes
- Apply inset ring shadows (0.5px `{colors.border}`) on pill chips and secondary buttons rather than drop shadows — keeps the UI feeling flat and editorial
- Derive surface depth from color contrast (`{colors.background}` → `{colors.surface}` → `{colors.surface-raised}`) rather than elevation shadows
- Honor the 150–200ms ease transition timing on all hover states for background-color and opacity properties

### Don't
- Don't use any named accent color (`{colors.accent-violet}`, `{colors.accent-barbie}`, etc.) for navigation, buttons, or form states — they belong to video content
- Don't introduce a third typeface — the two-family system (Exposure + DenimINK) is self-contained
- Don't use Exposure below 48px — at smaller sizes the high-contrast serifs lose their editorial presence and DenimINK should take over
- Don't add multi-tier elevation stacks to card components — one drop shadow level per card is the ceiling
- Don't use inline-only `{rounded.md}` (8px) for primary buttons — pill vs card-corner are the two radius registers; mixing breaks the shape vocabulary
- Don't introduce new border-radius values outside the declared `rounded:` scale — the current 6 steps cover all use cases
- Don't center the hero headline at narrow viewports if it exceeds two lines — tight negative tracking makes centered long text feel crowded
- Don't override the `{colors.background}` canvas with a pure `#ffffff` white — the faint teal tint is part of the brand's "clean but not clinical" positioning

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <480px | Single-column layout, hero stack to full-width |
| Mobile | 480–640px | Reduced hero font size, simplified nav (hamburger) |
| Tablet Small | 640–800px | 2-column feature grid, reduced display-hero size |
| Tablet | 800–1000px | 3-column feature grid, full nav visible |
| Desktop | 1000–1140px | Full 12-column grid, full feature grid |
| Large Desktop | >1140px | Content constrained at 1140px max-width, canvas bleeds |

### Touch Targets
All interactive elements use pill forms with minimum height ~40px to accommodate touch. Chip buttons include 10–14px horizontal padding ensuring a tap area equivalent to ~44px wide for short labels.

### Collapsing Strategy
- Navigation: hamburger/sheet overlay below 800px; full horizontal nav above
- Hero: Exposure display-hero scales down from 64px; body copy switches to 16px minimum
- Feature grids: 3-column → 2-column → single-column as breakpoints collapse
- Video thumbnail carousels: horizontally scrollable single row on mobile

### Image Behavior
Video thumbnail previews maintain aspect ratio (9:16 portrait for mobile content) and scale proportionally. Background gradient on the hero is purely CSS and adapts without image assets.

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}`
- Text: `{colors.ink}`
- Secondary text: `{colors.ink-secondary}`
- Brand CTA: `{colors.primary}`
- Surface: `{colors.surface}`
- Border: `{colors.border}`
- On dark: `{colors.on-dark}`

### Example Component Prompts

- "Build a hero section using `{colors.background}` as the page canvas, Exposure serif at `{typography.display-hero}` (64px, weight 400, tracking −1.28px) for the headline, DenimINK at `{typography.body-large}` for the subtitle, and a `{components.button-primary}` pill CTA in `{colors.primary}` with `{colors.on-primary}` label text."

- "Create a video style filter chip row. Each chip uses `{components.button-pill-chip}`: `{colors.surface}` background, inset 0.5px `{colors.border}` ring, `{typography.caption-medium}` label text in `{colors.ink-secondary}`, `{rounded.pill}` radius, 0px 14px padding. Active chip gets `{colors.surface-dark}` background with `{colors.on-dark}` text."

- "Design a feature card with `{components.card}`: `{colors.surface-raised}` white background, 1px `{colors.border}` border, `{rounded.lg}` corners, 16px padding. Heading in DenimINK `{typography.heading-section}` at `{colors.ink}`. Supporting copy in `{typography.body}` at `{colors.ink-secondary}`. On hover add `box-shadow: 0px 4px 10px {colors.shadow-soft}`."

- "Render a navigation bar with `{colors.background}` background, `{typography.body-medium}` nav link text at `{colors.ink}`. Logo left. Links centered with 200ms ease color-shift to `{colors.ink-secondary}` on hover. Right-aligned `{components.button-secondary}` pill with `{colors.surface-raised}` fill, `{colors.border}` 1px border, and `{typography.button-ui}` 'Sign up' label at `{colors.ink}`."

- "Build an upload drop zone card: `{colors.surface-raised}` background, `{rounded.lg}` corners, 1px dashed `{colors.border-soft}` outline, centered `{typography.body}` placeholder text at `{colors.ink-muted}`. On drag-over, border shifts to solid `{colors.focus-ring}` and background shifts to `{colors.surface}`."

### Iteration Guide

1. Start with `{colors.background}` — the cool near-white canvas sets the register; everything else responds to it
2. Near-black `{colors.primary}` is the sole CTA accent; never substitute a named accent color for buttons or links
3. Exposure handles all type at 48px and above; DenimINK takes every context below that threshold
4. Shadows are inset rings for interactive elements, single-depth drop shadows for cards — no stacking
5. Text hierarchy uses only `{colors.ink}`, `{colors.ink-secondary}`, `{colors.ink-muted}`, `{colors.ink-light}` — four levels, no more
6. Radius hierarchy: `{rounded.pill}` on interactive controls, `{rounded.lg}` on containers, `{rounded.xl}` on ghost buttons
7. Named accent colors are content slots, not UI slots — if you're building UI, stay within the neutral palette

---

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