---
version: alpha
name: Savee
description: A near-total-black design system where a proprietary grotesque typeface and a single electric-blue CTA cut through deep darkness, positioning Savee as the curator's dark room — intimate, focused, and deliberately removed from the noise of the open web.

colors:
  # Surface / canvas
  background: "#050505"            # near-total black page base (logo background confirmed)
  surface: "#151515"               # slightly lifted dark surface for cards, containers
  surface-elevated: "#1e1e1e"      # hover-state elevation surface — was rgba(30,30,30,0.984) — Google format requires hex
  surface-overlay: "#2f2f2f"       # deep overlay, active drawer states — was rgba(30,30,30,0.97) approx — Google format requires hex

  # Ink / text
  ink: "#fdfdfd"                   # near-white primary text on dark canvas (rgb 253,253,253)
  ink-secondary: "#a3a3a3"         # medium gray supporting copy and metadata
  ink-muted: "#737373"             # muted gray for nav links at rest, placeholder text
  ink-faint: "#e5e5e5"             # lighter neutral — hover state text color on nav links
  on-primary: "#fdfdfd"            # text on the electric-blue primary button

  # Brand accent
  primary: "#1019ed"               # electric blue CTA — the only saturated color in the system
  primary-hover: "#131eff"         # animated CTA hover, lifted blue
  on-background: "#fdfdfd"         # generic on-dark text alias

  # Secondary / outline button
  secondary: "#fdfdfd"             # off-white fill for secondary button (Join the community)
  on-secondary: "#151515"          # near-black text on the white secondary button

  # Borders
  border: "#404040"                # rgb(64,64,64) — outline border for interactive elements
  border-subtle: "#2f2f2f"         # footer top border, separator (rgb 47,47,47)
  border-faint: "#191919"          # was rgba(253,253,253,0.1) — Google format requires hex /* estimated, approximated to fdfdfd at ~10% over #050505 → #191919 */

  # Shadow tints
  shadow-soft: "#000000"           # was rgba(0,0,0,0.35) 0px 18px 70px — Google format requires hex

  # Focus ring (Tailwind ring default — present in CSS vars)
  focus-ring: "#3b82f6"            # was rgb(59 130 246/0.5) — Google format requires hex /* estimated */

typography:
  display-hero:
    fontFamily: "saveeFont, saveeFont Fallback, Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 60px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: -3.3px
  display:
    fontFamily: "saveeFont, saveeFont Fallback, Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 60px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: -2.4px
  heading-section:
    fontFamily: "saveeFont, saveeFont Fallback, Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 36px
    fontWeight: 500
    lineHeight: 1.11
    letterSpacing: -1.44px
  heading-sub:
    fontFamily: "saveeFont, saveeFont Fallback, Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: -0.48px
  body-large:
    fontFamily: "saveeFont, saveeFont Fallback, Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 21px
    fontWeight: 400
    lineHeight: 1.29
    letterSpacing: -0.42px
  body:
    fontFamily: "saveeFont, saveeFont Fallback, Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.38
    letterSpacing: -0.24px
  body-medium:
    fontFamily: "saveeFont, saveeFont Fallback, Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.38
    letterSpacing: -0.16px
  nav-link:
    fontFamily: "saveeFont, saveeFont Fallback, Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: -0.16px
  button-ui:
    fontFamily: "saveeFont, saveeFont Fallback, Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.38
    letterSpacing: -0.24px
  caption:
    fontFamily: "saveeFont, saveeFont Fallback, Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: -0.14px

spacing:
  xs: 6px
  sm: 12px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 64px
  3xl: 80px
  4xl: 112px

rounded:
  none: 0px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 20px 40px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.pill}"
    padding: 20px 40px
  button-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-secondary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
    border: "1px solid {colors.border}"
  button-secondary-hover:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.ink}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.pill}"
    padding: 8px 16px
  button-ghost-hover:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.ink-faint}"
    rounded: "{rounded.pill}"
    padding: 8px 16px
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.none}"
    padding: 16px
  card-hover:
    backgroundColor: "{colors.surface-elevated}"
    rounded: "{rounded.none}"
    padding: 16px
  nav:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.pill}"
    padding: 8px 6px
  nav-item-hover:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.ink-faint}"
    rounded: "{rounded.pill}"
    padding: 8px 16px
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.pill}"
    border: "1px solid {colors.border}"
    padding: 12px 20px
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    border: "2px solid {colors.border}"
    rounded: "{rounded.pill}"
    padding: 12px 20px
  badge:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
  platform-pill:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.ink}"
    typography: "{typography.body-medium}"
    rounded: "{rounded.pill}"
    padding: 16px 24px
    border: "1px solid {colors.border-subtle}"
---

# Savee Design System

## Overview

Savee occupies a chromatic extreme that very few product companies commit to. The canvas is near-total black — `{colors.background}` — a deliberate refusal of the neutral white or warm gray that defines most design-tool-adjacent products. The darkness is not a mode to toggle on; it is the product's natural state, treating visual curation the way a photographer treats a darkroom: controlled, intimate, stripped of ambient distraction. Against this void, imagery does all the speaking. Saved screenshots and mood-board tiles glow as objects under glass, given full stage presence by the absence of any competing UI chrome.

The typography is equally uncompromising. Savee ships a custom proprietary typeface — "saveeFont" — that the dembrandt extraction records as self-hosted across 12 woff2 files covering a full weight range. Its optical behavior at large sizes resembles a tightly-tracked contemporary grotesque: 60px display type set at weight 500 and −3.3px letter-spacing produces text that sits dense and confident without heaviness. The system applies universal negative tracking across every size, from display down to 14px captions at −0.14px, a choice that tightens the type color and reads as intentional rather than corrective.

The sole chromatic intervention is `{colors.primary}`, an electric blue (#1019ed) used exclusively for the primary CTA. It functions like a neon sign in an otherwise monochrome room: you cannot miss it, and it means exactly one thing. The secondary action is an off-white pill, `{colors.secondary}`, which provides clear hierarchy without reaching for color. Everything else in the interface — borders, muted text, container fills — lives in the achromatic corridor between `{colors.background}` and `{colors.ink}`.

**Key Characteristics:**
- Near-total-black canvas at `{colors.background}` (#050505) — not dark gray, not neutral; a deliberate near-void
- Single proprietary typeface "saveeFont" — self-hosted across 12 woff2 files, covers display through caption
- Universal negative letter-spacing at every scale: −3.3px at 60px, −0.14px at 14px
- Binary border-radius vocabulary: `{rounded.none}` (0px) for content surfaces, `{rounded.pill}` (9999px) for all interactive UI
- One saturated accent color, `{colors.primary}` (#1019ed) — reserved exclusively for the primary action
- Nav links rest at `{colors.ink-muted}` and shift to `{colors.ink-faint}` on hover with a dark background fill, 150ms transition
- Animated CTA uses custom cubic-bezier(0.22, 0.86, 0, 1) easing for character-by-character text animation
- Content images and screenshots shown with no border-radius, no drop shadows, no decorative frames
- Platform-availability pills (iPhone, Browser Extension, Figma Plugin, Android) use `{rounded.pill}` with a `{colors.border-subtle}` outline
- Spacing base is 6px (observed xs), extending to a generous 4xl at 112px for section rhythm
- `{colors.primary}` button uses oversized 20px 40px padding — the CTA is physically large, hard to miss
- Achromatic grays `{colors.ink-secondary}` and `{colors.ink-muted}` carry all secondary information without hue variation

## Colors

### Primary

- **Near-void black** (`{colors.background}`): The page base and dominant canvas. At #050505, this is two steps from absolute black — distinct from flat #000000 but reads as total darkness in any ambient lighting condition.
- **Dark surface** (`{colors.surface}`): Card and container background at #151515. Provides a perceptible lift above the canvas without breaking the overall dark identity.
- **Hover elevation** (`{colors.surface-elevated}`): #1e1e1e — the interactive response surface. Nav item backgrounds and card hover states settle here.
- **Near-white** (`{colors.ink}`): Primary text at #fdfdfd, one notch from pure white. Not blindingly bright against the near-black ground — a deliberate warmth reduction.

### Brand Accent

- **Electric blue** (`{colors.primary}`): #1019ed is the only hue in the system. Applied exclusively to the primary CTA button (padding 20px 40px, `{rounded.pill}`). Its animated hover state is `{colors.primary-hover}` (#131eff), a marginal shift that acknowledges the interaction without disrupting the color signal.

### Text States

- **Secondary text** (`{colors.ink-secondary}`): #a3a3a3 — medium neutral gray for supporting copy, metadata, and badge labels.
- **Muted text** (`{colors.ink-muted}`): #737373 — nav links at rest, placeholder copy, tertiary information. Shifts to `{colors.ink-faint}` (#e5e5e5) on hover.
- **On-secondary** (`{colors.on-secondary}`): #151515 — the near-dark text for the white secondary button, ensuring legibility without reverting to true black.

### Borders

- **Interactive border** (`{colors.border}`): #404040 — used on interactive outline elements, the secondary button ring, and input strokes.
- **Structural border** (`{colors.border-subtle}`): #2f2f2f — the footer top divider and platform pill outlines. Barely visible against `{colors.surface}`.

### Shadow

- **Deep shadow** (`{colors.shadow-soft}`): was rgba(0,0,0,0.35) at 0px 18px 70px — Google format requires hex. Applied sparingly, used on elevated overlays or modals.

## Typography

### Font Family

- **Primary**: `saveeFont`, with fallbacks: `saveeFont Fallback, Inter, ui-sans-serif, system-ui, sans-serif`
- **Hosting**: Self-hosted via 12 woff2 files (no Google Fonts, no Adobe Fonts, not a variable font). The font covers at minimum weight 400, 500, and 600 — confirmed across extracted styles.
- **OpenType Features**: None explicitly observed in the extraction, but the tight negative tracking and geometric character shapes suggest a contemporary grotesque with optically corrected spacing.

### 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` | Hero headline — 60px/500/−3.3px, the dominant text object on the marketing page |
| `display` | Secondary hero variant — 60px/500/−2.4px, slightly looser tracking for sub-headings at the same size |
| `heading-section` | Section titles — 36px/500/−1.44px for "Designed to inspire" and comparable feature headers |
| `heading-sub` | Feature card titles — 24px/500/−0.48px, e.g. "Smart boards", "Powerful discovery" |
| `body-large` | Mid-range prose or callout statements — 21px/400/−0.42px |
| `body` | Standard copy, UI text, paragraph content |
| `body-medium` | Medium-weight variant for labels and platform names — 16px/500 |
| `nav-link` | Navigation items at rest — 16px/400, tighter single-line layout |
| `button-ui` | CTA label text — 16px/400, used in both primary and secondary buttons |
| `caption` | Smallest text tier — 14px/600/−0.14px, used for tags and supplementary labels |

### Principles

- Negative tracking throughout — every size is tighter than default, pulling letters together for a dense, editorial feel
- Weight 500 is the primary emphasis mode; weight 400 handles narrative prose; 600 appears only at 14px captions
- No italic, no serif, no decorative variant — saveeFont is a single-family system with weight variation only
- Large display type (60px) is set with extreme tightness (−3.3px) that requires a custom typeface to execute without collisions; the fallback stack (Inter) will approximate but not match

## Layout

### Spacing System

The complete spacing scale is in the `spacing:` token block above. Base unit: 6px.

The system is generous at the top end — 112px section gaps (`{spacing.4xl}`) create long breathing room between content sections on the marketing page, while the internal component grid tightens to 6–12px for icon-label pairs and inline elements. This contrast between intimate component spacing and expansive section rhythm reinforces the gallery-like atmosphere.

### Grid & Container

- Max content width: approximately 1280px (standard wide layout)
- Single breakpoint at 600px — mobile is the only responsive step
- Content areas appear as centered columns with generous horizontal padding; the dark canvas fills any overflow margin without visual cost
- Feature sections use a three-column grid at desktop (Smart boards / Powerful discovery / Community Driven)

### Whitespace Philosophy

- Whitespace is dark space — generous gaps read as "no competing elements" rather than airy lightness
- Section padding at 80–112px creates distinct visual chapters without visual dividers
- Component internals are compact: nav pills, platform pills, and caption labels are tightly contained within their pill containers

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, `{colors.background}` base | Content image grids, base page layer |
| Surface (Level 1) | `{colors.surface}` (#151515) fill | Cards, content containers |
| Hover (Level 2) | `{colors.surface-elevated}` (#1e1e1e) fill | Interactive hover state on cards and nav items |
| Overlay (Level 3) | `{colors.surface-overlay}` (#2f2f2f) fill | Active state containers, drawers |
| Modal (Level 4+) | `rgba(0,0,0,0.35) 0px 18px 70px` | Elevated dialogs or sheets; shadow-soft tint |
| Focus Ring | 2px `{colors.border}` inset shadow | Input focus; Tailwind ring color `{colors.focus-ring}` present in CSS vars |

**Shadow Philosophy**: Savee's elevation system relies entirely on background-color shifts rather than drop shadows. The achromatic palette makes this possible — a 10-lightness-point jump from #050505 to #151515 reads as a clear surface layer without any shadow. Traditional box-shadows appear only in the data at very low confidence (1 instance at 0px 18px 70px) and are reserved for the deepest elevated layer. This flat-elevation approach keeps the interface clean against a dark ground, where shadows would be invisible anyway.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | All content surfaces — image tiles, cards, content blocks |
| `pill` | 9999px | Every interactive UI element — buttons, nav bar, input fields, badges, platform pills |

Savee's shape vocabulary is strictly binary. Content has no radius (images, tiles, and information blocks meet hard edges), while interactive controls are fully rounded. This enforces a strong perceptual distinction between "things to look at" and "things to touch/click" — the pill mark is legibility via shape rather than color.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly rather than reconstructing them.

### Button variants

- **`button-primary`** — Electric blue (`{colors.primary}`) pill with 20px 40px padding. Exceptionally large target. Used exclusively for the primary conversion action ("Join the community", "Start"). Features animated text swap on hover via `animatedCtaIn` / `animatedCtaOut` keyframes.
- **`button-secondary`** — Off-white (`{colors.secondary}`) pill, `{colors.on-secondary}` text, `{colors.border}` outline ring via box-shadow. The secondary register without reaching for color.
- **`button-ghost`** — Transparent background, `{colors.ink-muted}` text. Used for nav items at rest. Fills to `{colors.surface-elevated}` on hover with a smooth 150ms color-shift.

### Cards

All content cards use `{rounded.none}` — hard rectangular edges that let imagery meet imagery without gaps. The background lifts from `{colors.background}` to `{colors.surface}` on hover (`{colors.surface-elevated}`).

### Inputs

Input fields (when present) follow the pill pattern with `{rounded.pill}`, a `{colors.border}` stroke, and `{colors.surface}` background. On focus, the border advances to 2px weight.

### Platform Pills

A distinctive compound component: a wide pill (using `{rounded.pill}`, `{colors.surface-elevated}`, `{colors.border-subtle}` outline) that contains an icon + label for iOS, browser extension, Figma plugin, and Android. Displayed in a horizontal group, these pills function as a platform-availability indicator rather than a clickable nav.

### Navigation

A floating pill-shaped nav bar pinned to the bottom of the viewport. Background: `{colors.surface-elevated}`, `{rounded.pill}`. Nav items rest at `{colors.ink-muted}` and transition to `{colors.ink-faint}` with a `{colors.surface-elevated}` background fill in 150ms (cubic-bezier(0.4, 0, 0.2, 1)). The CTA within the nav is the `button-primary` (blue pill).

## Do's and Don'ts

### Do

- Use `{colors.background}` (#050505) as the true page base — never substitute a dark gray that would break the near-void identity
- Apply `{rounded.pill}` to every interactive element and `{rounded.none}` to every content surface; the distinction is structural
- Reserve `{colors.primary}` strictly for the primary CTA — one blue element, one action, one signal
- Set large display text with strong negative tracking matching `{typography.display-hero}` letterSpacing values; the saveeFont is designed for this
- Use `{colors.ink-muted}` (#737373) for secondary nav items and let them shift to `{colors.ink-faint}` on hover — the color difference is the animation
- Maintain 80–112px (`{spacing.3xl}` / `{spacing.4xl}`) between major content sections; the dark ground can absorb this space gracefully
- Let images fill their containers without radius or shadow decoration — the content is the design
- Use the animated CTA keyframes (animatedCtaIn 0.52s, animatedCtaOut 0.42s) with cubic-bezier(0.22, 0.86, 0, 1) for the primary button text transitions

### Don't

- Don't introduce a light mode or neutral-gray canvas — `{colors.background}` is the system, not a preference
- Don't add rounded corners to image tiles or content cards — `{rounded.none}` on content is non-negotiable
- Don't use `{colors.primary}` (#1019ed) on any element other than the primary action button; adding blue borders, links, or secondary buttons would collapse the color hierarchy
- Don't use sans-serif fallback fonts for large display type without adjusting letter-spacing — Inter at −3.3px will clip glyphs; reduce to −1.5px maximum in fallback contexts
- Don't add drop shadows to cards or containers — background-color elevation is the system; shadows are invisible against the near-black canvas and break the flat-elevation model
- Don't use medium border-radius values (4–16px, 24px, 40px) — the one 40px radius in the data is a one-off; the system is strictly binary (`{rounded.none}` or `{rounded.pill}`)
- Don't place secondary text below `{colors.ink-muted}` contrast threshold — #737373 on #050505 reads at approximately 6.4:1, meeting WCAG AA
- Don't introduce warm tints, accent colors, or gradients — the monochromatic palette is the brand's restraint signal

---

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile | <600px | Single-column layout; feature grid stacks vertically; nav bar adapts to full-width pill |
| Desktop | ≥600px | Three-column feature grid; wide hero text at 60px; platform pills in horizontal row |

*Note: Savee uses a single 600px breakpoint — the simplest possible responsive model for a product-focused marketing page.*

### Touch Targets

- All interactive elements use `{rounded.pill}` with explicit padding; the primary CTA at 20px 40px is generously oversized for touch
- Nav items within the floating pill bar are at minimum 44px tall when accounting for their internal padding

### Collapsing Strategy

- Below 600px: three-column feature grid collapses to a single stacked column
- Navigation bar narrows to fit viewport width, maintaining the pill shape
- Hero display text reduces in size proportionally — the tight negative tracking remains constant, not zeroed out on mobile

### Image Behavior

- Images fill their parent containers at 100% width with no radius applied at any breakpoint
- Gallery and mood-board tiles maintain their rectangular grid structure at all sizes; columns reduce from many to fewer as viewport narrows

---

## Agent Prompt Guide

### Quick Color Reference

- Background: `{colors.background}` (#050505)
- Text: `{colors.ink}` (#fdfdfd)
- Secondary text: `{colors.ink-secondary}` (#a3a3a3)
- Muted text: `{colors.ink-muted}` (#737373)
- Brand accent: `{colors.primary}` (#1019ed)
- Border: `{colors.border}` (#404040)
- Surface: `{colors.surface}` (#151515)
- CTA: `{colors.primary}`

### Example Component Prompts

- "Create a hero section using Savee's design system. Canvas background: `{colors.background}`. Headline: 60px `{typography.display-hero}` font (saveeFont or Inter fallback at weight 500), near-white `{colors.ink}`, letter-spacing −3.3px. Sub-headline: 36px `{typography.heading-section}`, same family, weight 500, −1.44px tracking. Below the headline: one primary CTA button with `{colors.primary}` background, `{colors.on-primary}` text, 20px 40px padding, `{rounded.pill}` border-radius, and one secondary pill in `{colors.secondary}` with `{colors.border}` ring and `{colors.on-secondary}` text."

- "Create a floating navigation pill bar for Savee. Background: `{colors.surface-elevated}`, border-radius: `{rounded.pill}`, padding: 8px 6px. Nav links use `{typography.nav-link}`, color `{colors.ink-muted}` at rest, transition to `{colors.ink-faint}` with `{colors.surface-elevated}` background fill on hover in 150ms cubic-bezier(0.4, 0, 0.2, 1). Far-right item is the `button-primary` with `{colors.primary}` fill."

- "Build a platform-availability strip using Savee tokens. Each platform entry is a horizontal pill: `{colors.surface-elevated}` background, 1px `{colors.border-subtle}` outline, `{rounded.pill}`, 16px 24px padding. Icon left + label text using `{typography.body-medium}`, `{colors.ink}`. Arrange four pills (iPhone App, Browser Extension, Figma Plugin, Android App) in a row centered on `{colors.background}`."

- "Create a dark image gallery grid in Savee's style. Outer container: `{colors.background}`. Image tiles: rectangular with `{rounded.none}` — no border-radius, no drop shadow, no frame. On hover, lift the tile background to `{colors.surface}`. Caption text below each tile: `{typography.caption}`, `{colors.ink-secondary}`, weight 600."

- "Generate a feature section for Savee. Section background: `{colors.background}`. Section heading: `{typography.heading-section}` (36px, 500, −1.44px), `{colors.ink}`, centered. Three-column grid below. Each column: heading in `{typography.heading-sub}` (24px/500/−0.48px), `{colors.ink}`; supporting copy in `{typography.body}` (16px/400), `{colors.ink-muted}`. No card chrome, no borders, no background fills on columns — pure typography on black."

### Iteration Guide

1. Start with `{colors.background}` as the literal page background — commit to the near-void; do not soften to a dark gray
2. Place only `{colors.primary}` as the saturated accent; everything else is drawn from the achromatic scale between `{colors.background}` and `{colors.ink}`
3. Set display type with the full negative tracking from `{typography.display-hero}` or `{typography.display}` — the density is intentional
4. Apply `{rounded.pill}` to every interactive element (buttons, nav, inputs, badges) and strictly `{rounded.none}` to every content container or image tile
5. Use background-color lifts (surface → surface-elevated) for hover states, not shadows — shadows are invisible on this dark ground
6. Reserve `{colors.primary}` for exactly one CTA per view; if a second action is needed, use `{colors.secondary}` (white pill with border)
7. Signature motion: the primary button text animates character-by-character using `animatedCtaIn` (0.52s) and `animatedCtaOut` (0.42s) with cubic-bezier(0.22, 0.86, 0, 1) — replicate this for any primary CTA

---

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