---
version: alpha
name: "Staud"
description: "LA contemporary fashion brand with a clean retro-modern system — a stark black-and-white palette, Antique Legacy as the sole editorial typeface, and sun-drenched campaign photography doing the chromatic work the chrome refuses to."

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#f5f5f5"           # light neutral section tint

  # Ink / text
  ink: "#000000"               # primary text, nav, logo wordmark
  ink-muted: "#767676"         # secondary text, sold-out labels — CSS var --color-sold-out
  ink-ghost: "#a5a5a5"         # placeholder, input hint — CSS var --color-input-gray
  ink-fine: "#cccccc"          # tertiary / description color — CSS var --desc-color

  # Brand accent — Staud has no chromatic accent; black IS the CTA
  primary: "#000000"           # CTA fill, add-to-cart button
  on-primary: "#ffffff"        # text on black CTA
  primary-hover: "#333333"     # button hover softens from pure black

  # Interactive states
  text-hover: "#000000"        # nav link hover stays black, opacity shift
  focus-ring: "#6e7281"        # CSS var --outline-color — blue-grey focus outline

  # Semantic
  error: "#c25151"             # form validation — CSS var --color-error
  warning: "#f0b743"           # alert state — CSS var --color-alert

  # Borders
  border: "#000000"            # 1px hairline on buttons and structural dividers
  border-soft: "#e0e0e0"       # input borders, soft dividers

  # Shadow tints (used by elevation table)
  shadow-soft: "#636363"       # was rgba(99,99,99,0.2) — Google format requires hex

typography:
  display-hero:
    fontFamily: "Antique Legacy, Helvetica, Arial, sans-serif"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.5px
  display:
    fontFamily: "Antique Legacy, Helvetica, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.5px
  heading-section:
    fontFamily: "Antique Legacy, Helvetica, Arial, sans-serif"
    fontSize: 25.6px
    fontWeight: 500
    lineHeight: 1.17
    letterSpacing: 0px
  heading-sub:
    fontFamily: "Antique Legacy, Helvetica, Arial, sans-serif"
    fontSize: 21px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: -0.84px
  body-large:
    fontFamily: "Antique Legacy, Helvetica, Arial, sans-serif"
    fontSize: 19.2px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 0px
  body:
    fontFamily: "Antique Legacy, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  nav-link:
    fontFamily: "Antique Legacy, Helvetica, Arial, sans-serif"
    fontSize: 14.4px
    fontWeight: 450
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Poppins, sans-serif"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 1.4px
  product-title:
    fontFamily: "Antique Legacy, Helvetica, Arial, sans-serif"
    fontSize: 14.4px
    fontWeight: 450
    lineHeight: 1.71
    letterSpacing: 0.144px
  caption:
    fontFamily: "Poppins, sans-serif"
    fontSize: 10.5px
    fontWeight: 450
    lineHeight: 1.44
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 10px
  md: 15px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

rounded:
  none: 0px
  pill: 9999px      # no mid-range radii — the system is binary

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
    border: "1px solid {colors.border}"
    textTransform: uppercase
    letterSpacing: 1.4px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
    border: "1px solid {colors.border}"
    textTransform: uppercase
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

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

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 10px 15px
    border: "1px solid {colors.border-soft}"
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus-ring}"
    outline: "2px solid {colors.focus-ring}"

  nav-bar:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.nav-link}"
    padding: 10px 15px

  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 4px 8px
    textTransform: uppercase
---

# Staud Design System

## Overview

Staud's digital presence is built on the confidence of restraint. Where other contemporary fashion labels layer seasonal color, textured backgrounds, or editorial gradients into their UX, Staud strips the interface back to a strict black-and-white architecture — a deep `{colors.primary}` navigation bar running across the top like a hairline, pure `{colors.background}` canvas for the entire product experience, and campaign photography doing every ounce of the chromatic labor. The result is a site that reads immediately as LA contemporary: effortless, sun-lit, and precise.

The typographic foundation is **Antique Legacy** — a refined grotesque with old-style warmth that sits somewhere between a modernist workhorse and a vintage editorial font. Staud deploy it across every display role (headings, body copy, product names, navigation), while reserving **Poppins** for UI chrome — button labels and micro-captions — where its slightly wider proportions and tracked uppercase adds quiet structure. Antique Legacy at 25.6px weight 500 for section headings and 19.2px weight 400 for product body text creates a generous, unhurried rhythm; the negative letter-spacing at `-0.84px` on sub-headings closes the gaps with editorial confidence. No serif counterpart appears anywhere.

The signature visual moment is the tension between the jet-black navbar and the photograph-first canvas below it. Campaign images — palm-lined streets, resort pools, linen-toned backgrounds — carry warm Mediterranean hues that make the black-and-white chrome feel designed rather than absent. Modals enter on a white card with the STAUD wordmark centered in heavy display type, framed by a photography panel behind: the product as portrait, the modal as editorial spread. Motion is unhurried — 0.3s–0.7s transitions, ease-based color and opacity shifts — matching the brand's sun-drenched, never-rushed character.

**Key Characteristics:**
- Black navbar (`{colors.primary}`) as the dominant brand signal — white site, black header, total contrast
- Pure white canvas (`{colors.background}`) for all product and editorial zones — no tinted page sections
- **Antique Legacy** as the single editorial typeface across headings, body, navigation, and product titles
- **Poppins** restricted to button labels and micro-captions with tracked uppercase at `{typography.button-ui}` (10px, 1.4px tracking)
- Negative letter-spacing (`-0.84px`) on `{typography.heading-sub}` — the typographic signature that closes display lines into editorial density
- All CTAs sharp-cornered (`{rounded.none}`) with pure black fill, uppercase Poppins, and 1.4px tracking
- No mid-range border-radius anywhere — system is binary: `{rounded.none}` or, for tags, `{rounded.pill}`
- Campaign photography saturated with warm color does the entire chromatic job — chrome stays neutral
- Unhurried motion: 0.3s color transitions on links, 0.7s opacity/visibility on media reveals
- CSS variables surface utility tones: `--color-sold-out` (`{colors.ink-muted}`), `--color-input-gray` (`{colors.ink-ghost}`), `--outline-color` (`{colors.focus-ring}`)
- Spring easing (`cubic-bezier(0.74, -0.01, 0.26, 1)`) reserved for nav drawer and modal transforms — tactile without being flashy

## Colors

### Surface & Canvas
- **White** (`{colors.background}`): The only page canvas. Every product zone, editorial section, and layout panel rests on pure white — no off-white, no tinted sections.
- **Light Surface** (`{colors.surface}`): A barely-there step off white used for badge backgrounds and secondary hover fills. Not a brand surface — a utility tint.

### Ink / Text
- **Staud Black** (`{colors.ink}`): Primary text, navigation links, product names, prices. Pure black — the brand pairs it exclusively with white for full graphic impact.
- **Sold-Out Gray** (`{colors.ink-muted}`): Secondary text, sold-out labels, inactive states. CSS variable: `--color-sold-out`. Applied below the action tier where items need presence without priority.
- **Input Gray** (`{colors.ink-ghost}`): Placeholder text, input field hints. CSS variable: `--color-input-gray`. The lightest readable step before ghost text.
- **Description Color** (`{colors.ink-fine}`): Tertiary copy, legal fine print. CSS variable: `--desc-color`. Near-invisible at a glance — intentionally recessive.

### Brand Accent
- **Pure Black CTA** (`{colors.primary}`): Button fill, navbar background, structural anchor. Staud has no chromatic brand accent — black closes the sale and defines the header. Hover steps to `{colors.primary-hover}` to signal response without drama.
- **White on Black** (`{colors.on-primary}`): Navigation text, button labels on the black CTA and navbar.

### Interactive & States
- **Focus Ring** (`{colors.focus-ring}`): A blue-grey accessibility outline from CSS variable `--outline-color`. The only hue in the system that isn't black, white, or gray.
- **Error** (`{colors.error}`): Form validation text. A muted rose-red via `--color-error` — functional, not alarming.
- **Warning** (`{colors.warning}`): Alert state via `--color-alert`. A warm amber used sparingly for stock or shipping notices.

### Borders
- **Hairline Black** (`{colors.border}`): 1px solid on CTAs and structural dividers.
- **Soft Border** (`{colors.border-soft}`): 1px on inputs and low-emphasis dividers — gray, not black, for reading comfort.

## Typography

### Font Family
- **Editorial**: `Antique Legacy`, with fallbacks `Helvetica, Arial, sans-serif`. Self-hosted. Carries all display, heading, body, nav-link, and product title roles.
- **UI Chrome**: `Poppins`, fallback `sans-serif`. Google Font. Reserved for button labels, micro-captions, and the 10px tracked uppercase chrome layer.
- **Occasional fallback**: `Helvetica` and `Arial` appear in the extracted CSS for system form elements — not intentional brand choices.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Campaign hero headlines, hero modal wordmark — 48px Antique Legacy |
| `display` | Section openers, editorial moments — 32px, weight 400 |
| `heading-section` | Primary section titles — 25.6px, weight 500 |
| `heading-sub` | Product category heads, sub-section titles — 21px, `-0.84px` tracking |
| `body-large` | Product descriptions, editorial body copy — 19.2px |
| `body` | Standard running text, navigation — 16px, weight 500 |
| `nav-link` | Desktop and mobile navigation — 14.4px, weight 450 |
| `button-ui` | CTA labels (Poppins) — 10px, 1.4px tracking, uppercase |
| `product-title` | Product card name and metadata — 14.4px, 0.144px tracking |
| `caption` | Micro-labels, promo tags (Poppins) — 10.5px |

### Principles
- **Two typefaces, clear territory**: Antique Legacy owns every editorial and reading role; Poppins handles the mechanical uppercase chrome of buttons and micro-labels. They never overlap.
- **Weight as signal, not ornament**: 400 for reading, 450 for subheads and nav, 500 for section titles and body emphasis, 700 for occasional utility headings. No decorative bold moments.
- **Negative letter-spacing at display scale**: `-0.84px` on `{typography.heading-sub}` and `-0.5px` on `{typography.display}` — editorial density without condensing the font.
- **Poppins uppercase as badge of action**: `1.4px` tracking at `10px` turns button labels into tight architectural marks — nothing decorative about them.
- **Generous line-height in body**: `{typography.body}` at `1.5` and `{typography.body-large}` at `1.25` — copy breathes at resort pace, never cramped.

## Layout

### Spacing System
The complete scale is in the `spacing:` token block. Base unit: 10px (the most common spacing value at 897 occurrences), with a secondary cluster at 6px and 15px.

Staud pages read with a consistent mid-density spacing personality — tight enough to feel like a curated catalog, open enough to let photography breathe. Section breaks lean toward 32–48px rather than editorial excess; the brand trusts the photography to provide visual pacing rather than whitespace alone.

### Grid & Container
- Max content width: approximately 1440px; standard container at 1200–1280px
- Desktop product grid: 3–4 columns with uniform gutters (10px–15px)
- Hero sections: full-bleed photography with overlaid modal or text
- Navigation: full-width black bar at top; STAUD wordmark centered or left-anchored; utility icons (search, account, bag) right-aligned

### Whitespace Philosophy
- **Photography-paced rhythm**: section breaks sized to echo the proportions of editorial photography rather than strict geometric multiples
- **Dense chrome, open canvas**: the black navbar is the most visually heavy element — everything below it is light, open, and image-led
- **No decorative chrome**: no alternating section backgrounds, no card borders, no hover-lift shadows in the primary product grid

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | All product surfaces, the default page state |
| Hairline (Level 1) | `1px solid {colors.border}` | CTA buttons, structural dividers |
| Card (Level 2) | `rgba(99,99,99,0.2) 0px 2px 8px 0px` (opaque approx: `{colors.shadow-soft}`) | Cart flyout, product quick-view overlays |
| Modal (Level 3) | `rgba(0,0,0,0.2) 0px 4px 16px 0px` | Full overlays — newsletter signup, confirm dialogs |
| Focus Ring | `2px solid {colors.focus-ring}` | Keyboard focus — the blue-grey `--outline-color` |

**Shadow Philosophy**: Staud's elevation system is minimal by design. The primary product experience is completely flat — no card hover-lift, no subtle drop shadows on the grid. Shadows appear only when an element genuinely floats above the canvas: cart drawers, modals, and flyout panels. Even then the shadows are low-confidence utility treatments (count 1–2 in the source), not a crafted elevation system. The brand depth comes from photography contrast, not CSS atmosphere.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Buttons, cards, inputs, modals, image frames — the entire primary UI |
| `pill` | 9999px | Promotional tags, filter chips if present |

Staud runs a binary radius system. Every UI element the user interacts with — the black CTA, the newsletter input, the product card, the modal — is sharp-cornered at `{rounded.none}`. The square geometry reads as precise and modern without the austerity of, say, Jacquemus. There are no mid-range values (4px, 8px, 12px) in the intentional design; any soft radius seen in the source comes from framework defaults (DaisyUI, PrimeReact) that aren't part of the brand language.

## Components

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

### Button Variants
- **`button-primary`** — Pure black (`{colors.primary}`) fill, white text in `{typography.button-ui}` (Poppins 10px, 1.4px tracking, uppercase), `{rounded.none}`, 12px×24px padding, `1px solid {colors.border}`. The definitive Staud CTA: architectural, direct, no flourish.
- **`button-primary-hover`** — Fill shifts to `{colors.primary-hover}` — a barely-lifted charcoal. The label stays white; no scale, no shadow, no glow.
- **`button-secondary`** — White fill, black text, same geometry and border as primary. Used for secondary actions like "Continue browsing" or wishlist.

### Cards
- **`card`** — Pure white surface, no border, no shadow, `{rounded.none}`. Product photography sits full-width flush to the card edge; `{typography.product-title}` below in Antique Legacy. Cards are light boxes for photography, not chrome containers.

### Inputs
- **`input`** — White fill, `{colors.border-soft}` 1px border on all sides, `{rounded.none}`. `{typography.body}` (Antique Legacy 16px). Placeholder in `{colors.ink-ghost}`. Focus shifts border to `{colors.focus-ring}` with a 2px outline — the blue-grey appearing as the only hue in an otherwise monochrome form.

### Navigation
- **`nav-bar`** — Full black (`{colors.primary}`) background, white text (`{colors.on-primary}`), `{typography.nav-link}` (Antique Legacy 14.4px weight 450). Link hover transitions via 0.3s ease on color and background. Nav drawer animates with spring easing (`cubic-bezier(0.74, -0.01, 0.26, 1)`) at 0.45s — a planted, physical feel.

### Badges / Tags
- **`badge`** — Light surface (`{colors.surface}`) fill, `{colors.ink-muted}` text, `{typography.caption}` (Poppins 10.5px), uppercase. Used for availability flags ("SOLD OUT"), category labels, and promotional callouts.

## Do's and Don'ts

### Do
- Keep the navbar pure black (`{colors.primary}`) — it is the brand's most visible chromatic commitment and anchors the whole page
- Use `{colors.background}` white as the only page canvas — photography provides all the color; the chrome must stay neutral
- Set all CTA labels in uppercase Poppins at `{typography.button-ui}` with `1.4px` tracking — the button voice is mechanical, not editorial
- Apply negative letter-spacing (`-0.84px`) to `{typography.heading-sub}` display moments — the density is intentional
- Keep all interactive UI at `{rounded.none}` — buttons, inputs, cards, modals are square; no mid-range rounding permitted
- Use `{colors.ink-muted}` (`{colors.ink-muted}`) consistently for sold-out states and secondary metadata — below-action but still readable
- Match motion timing to product category: 0.3s for link color shifts, 0.7s for image reveals, spring easing for panel/drawer entry
- Apply `{colors.focus-ring}` (blue-grey) as the sole focus treatment — it is accessible and the only hue break in an otherwise achromatic system

### Don't
- Don't introduce a chromatic brand accent — Staud has none; campaign photography carries all warmth and hue
- Don't add mid-range border-radius (4–16px) — the binary system is `{rounded.none}` everywhere that matters
- Don't vary the page canvas with tinted sections or alternating backgrounds — white is absolute below the black nav
- Don't use Antique Legacy for button labels — Poppins at tracked uppercase is the CTA voice; keeping them separated maintains typographic clarity
- Don't add hover lifts or drop shadows to product cards — the grid is flat; elevation appears only on floating overlays
- Don't set display headings in weight 700 — Antique Legacy weight 400–500 is the editorial ceiling; heavier weights import a different brand character
- Don't let shadows slip into the primary product grid — `{colors.shadow-soft}` is for drawers and modals only, never card hover states
- Don't use `{colors.ink-fine}` for interactive text — it exists for fine print and legal copy; interactive elements need at least `{colors.ink-muted}`

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <375px | Single-column; nav collapses to hamburger; hero photography fills viewport |
| Mobile | 375–767px | Single-column product grid; black nav bar remains; type scales down ~15% |
| Tablet | 768–1023px | Two-column product grid; nav may expose partial links; section spacing tightens |
| Desktop | 1024–1279px | Three-column grid; full horizontal nav; standard spacing rhythm |
| Large Desktop | ≥1440px | Four-column grid; max-width container centered; full editorial pacing |

### Touch Targets
- CTA buttons: minimum 44px tap height from 12px×24px padding + 10px line-height at `{typography.button-ui}`
- Nav links: full-row tap targets in mobile drawer, 15px vertical padding
- Product tiles: entire card region is tappable — not just the title link
- Close icons and icons in modal: minimum 44×44px hit area

### Collapsing Strategy
- **Navigation**: Full horizontal black bar with utility icons → hamburger drawer on mobile; drawer slides in at 0.45s spring easing
- **Type scale**: `{typography.display-hero}` scales from 48px to approximately 28–32px on mobile; body scales slightly down but maintains reading comfort
- **Product grid**: 4-column desktop → 2-column tablet → 1-column mobile; gutters stay at 10–15px regardless of breakpoint
- **Spacing**: Section breaks compress from 48px to 24px on mobile; the photography-paced rhythm holds even at smaller gaps

### Image Behavior
- Campaign photography is full-bleed on hero sections — no max-width caps
- Product tile images maintain consistent square or portrait aspect ratio
- All image frames are `{rounded.none}` — photography never clips to rounded containers
- Media reveal transitions run at 0.7s ease on opacity and visibility — unhurried even on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` (pure white)
- Navbar: `{colors.primary}` (pure black)
- Primary text: `{colors.ink}` (pure black)
- CTA fill: `{colors.primary}` with `{colors.on-primary}` text
- Secondary text: `{colors.ink-muted}`
- Input placeholder: `{colors.ink-ghost}`
- Focus ring: `{colors.focus-ring}` (blue-grey)
- Error: `{colors.error}`
- Border (structural): `{colors.border}`
- Border (input): `{colors.border-soft}`

### Example Component Prompts

- "Create a Staud-style primary CTA: background `{colors.primary}` (black), text `{colors.on-primary}` (white), font Poppins 10px, `text-transform: uppercase`, `letter-spacing: 1.4px`, `border-radius: 0`, `padding: 12px 24px`, `border: 1px solid {colors.border}`. Hover darkens fill to `{colors.primary-hover}` (#333333) — no shadow, no scale, no glow. `transition: background-color 0.3s ease`."

- "Design a Staud product card: white (`{colors.background}`) surface, `border-radius: 0`, no shadow, no card border. Product photography fills full card width edge-to-edge in square aspect ratio. Below: product name in Antique Legacy 14.4px weight 450, `letter-spacing: 0.144px`, `{colors.ink}`; price in the same face at `{colors.ink-muted}`. 10px bottom padding. No card chrome — photography is the container."

- "Build the Staud black navigation bar: full-width, `background: {colors.primary}` (black), `color: {colors.on-primary}` (white). STAUD wordmark centered or left in Antique Legacy 16px weight 500. Nav links in Antique Legacy 14.4px weight 450, white. Hover: `color` and `background-color` transition at `0.3s ease`. Utility icons (search, account, bag) right-aligned as SVG, `fill: {colors.on-primary}`. Height: 44–52px."

- "Create a Staud newsletter modal: white card (`{colors.background}`), `border-radius: 0`, `box-shadow: rgba(0,0,0,0.2) 0px 4px 16px 0px`. Centered STAUD wordmark in Antique Legacy 32px weight 400. Below: one-line headline in `{typography.heading-sub}` (21px, weight 400, -0.84px tracking), `{colors.ink}`. Email input with `{colors.border-soft}` 1px border, `border-radius: 0`, Antique Legacy 16px, placeholder `{colors.ink-ghost}`. Black primary CTA button below. `Close` icon top-right, 44×44px hit area."

- "Build a product badge / availability tag: background `{colors.surface}` (#f5f5f5), text `{colors.ink-muted}`, font Poppins 10.5px weight 450, `text-transform: uppercase`, `border-radius: 0`, `padding: 4px 8px`. Used for SOLD OUT, NEW, and category labels absolute-positioned over product photography."

- "Create a Staud-style text input: background `{colors.background}`, border `1px solid {colors.border-soft}`, `border-radius: 0`, Antique Legacy 16px weight 500, `color: {colors.ink}`, placeholder `color: {colors.ink-ghost}`, `padding: 10px 15px`. Focus: `border-color: {colors.focus-ring}`, `outline: 2px solid {colors.focus-ring}` — the only moment of hue in an otherwise monochrome form."

### Iteration Guide

1. Start with the black navbar (`{colors.primary}`) — it is the brand's visual anchor. Everything below it rests on pure white (`{colors.background}`). If a section has a non-white, non-image background, remove it.
2. Set editorial text in Antique Legacy; set button labels in Poppins at tracked uppercase. Never swap — the split maintains clarity between reading and action.
3. Apply `border-radius: 0` to every interactive element. If a corner is rounded beyond the pill exception, flatten it.
4. Use negative letter-spacing (`-0.84px`) on sub-headings set in `{typography.heading-sub}`. At display scale, the closed gaps are the voice — leave tracking at 0 or positive on body and nav.
5. Campaign photography carries all warmth and color. Chrome must not compete — keep colors to black, white, and the three neutral gray tones (`{colors.ink-muted}`, `{colors.ink-ghost}`, `{colors.ink-fine}`).
6. Transition color and background-color at 0.3s ease on links and buttons. Reveal media (images, panels) at 0.7s ease. Animate nav and modal transforms with spring (`cubic-bezier(0.74, -0.01, 0.26, 1)`) at 0.45s.
7. There is no chromatic brand accent. If you introduced a hue beyond `{colors.focus-ring}` (for accessibility) or `{colors.error}` / `{colors.warning}` (for semantic state), replace it with black or a neutral gray.

---

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