---
version: alpha
name: Chime
description: A deep forest-green canvas lit by a single signature mint, where two proprietary typefaces — a wide geometric display and a rounded humanist body — make banking feel approachable, modern, and free of the anxiety that clings to traditional finance brands.

colors:
  # Surface / canvas — the midnight forest
  background: "#082719"              # deep dark-green page canvas, the dominant field
  surface: "#0d4029"                 # lifted panel surface, cards, section dividers on dark
  surface-raised: "#0a3320"          # slightly lighter raised tile over the background
  surface-light: "#ecf9ee"           # /* was rgba(236,249,238) — Google format requires hex */ near-white mint tint for light feature panels
  surface-muted: "#e5e5e5"           # neutral light-gray used in certain section bands

  # Ink / text
  ink: "#ffffff"                     # primary text on dark canvas (was #0d4029 — moved to on-primary for body-contrast lint; deep green is button text on mint CTA via on-primary)
  on-dark: "#ffffff"                 # white headlines, body, nav on the dark canvas
  on-dark-soft: "#ecf9ee"            # /* was rgb(236,249,238) */ soft mint-tinted text on dark — nav links, feature callouts
  on-dark-muted: "#aeaeae"           # muted grey for secondary copy, hover-state links on dark
  on-light: "#0d4029"                # dark green ink on light surfaces

  # Brand accent — Chime green
  primary: "#1ec677"                 # signature Chime green — CTAs, highlights, checkmarks, success indicators
  primary-hover: "#15744a"           # /* was --web-btn-bg-hover: #15744a */ darker forest green on hover, CSS custom property
  primary-dark: "#167a4e"            # mid-range green for hover states on secondary
  on-primary: "#0d4029"              # deep forest green text on the mint CTA (brand-faithful)
  on-primary-hover: "#ecf0ee"        # /* was rgb(236,240,238) */ near-white text on hover state CTA

  # Interaction / states
  link-hover: "#aeaeae"              # muted grey for link hover on dark canvas
  focus-ring: "#1ec677"              # primary green focus ring, 1px solid used on buttons/inputs

  # Semantic
  success: "#1ec677"                 # success indicators share the primary green
  error: "#cc0000"                   # /* estimated */ standard red for error states
  warning: "#cc8800"                 # /* estimated */ amber for caution indicators

  # Borders
  border: "#1ec677"                  # 1px solid primary green — used on outlined/secondary buttons
  border-subtle: "#d0d3d6"           # /* was rgb(208,211,214) */ light grey dividers in footer, section edges
  border-input: "#707376"            # /* was --color-grey-200: rgb(112,115,118) */ medium grey for form inputs

  # Shadow tints (opaque stand-ins)
  shadow-soft: "#999999"             # was rgb(153,153,153) 0 2px 10px -3px — card lift shadow
  shadow-card: "#c7c5c7"             # was rgb(199,197,199) — modal/tooltip shadow tint

  # Gradient midpoint reference
  gradient-glow: "#10643d"           # was rgba(16,100,61,0.67) — radial corner glow on dark hero sections

typography:
  display-hero:
    fontFamily: "chimeDisplayWide, 'DM Sans', Arial, sans-serif"
    fontSize: 80px
    fontWeight: 500
    lineHeight: 1.00
    letterSpacing: -0.4px
  display:
    fontFamily: "chimeDisplayWide, 'DM Sans', Arial, sans-serif"
    fontSize: 50px
    fontWeight: 500
    lineHeight: 1.00
    letterSpacing: -0.25px
  heading-section:
    fontFamily: "chimeDisplayWide, 'DM Sans', Arial, sans-serif"
    fontSize: 48px
    fontWeight: 500
    lineHeight: 1.00
    letterSpacing: -0.24px
  heading-sub:
    fontFamily: "chimeDisplayWide, 'DM Sans', Arial, sans-serif"
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1.00
    letterSpacing: -0.2px
  body-large:
    fontFamily: "chimeSaans, 'DM Sans', Arial, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 0px
  body-large-medium:
    fontFamily: "chimeSaans, 'DM Sans', Arial, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: -0.12px
  body:
    fontFamily: "chimeSaans, 'DM Sans', Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.56
    letterSpacing: 0px
  body-semibold:
    fontFamily: "chimeSaans, 'DM Sans', Arial, sans-serif"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.40
    letterSpacing: 0px
  button-ui:
    fontFamily: "chimeSaans, 'DM Sans', Arial, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: 0px
  nav-link:
    fontFamily: "chimeSaans, 'DM Sans', Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.38
    letterSpacing: 0px
  label:
    fontFamily: "chimeSaans, 'DM Sans', Arial, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.50
    letterSpacing: 0px
  caption:
    fontFamily: "chimeSaans, 'DM Sans', Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.40
    letterSpacing: 0px

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

rounded:
  none: 0px
  sm: 6px
  md: 20px
  lg: 24px
  xl: 32px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
    border: 1px solid transparent
    transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s cubic-bezier(0.4, 0, 0.2, 1)
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary-hover}"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.on-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
    border: 1px solid {colors.border}
  button-secondary-hover:
    backgroundColor: "{colors.primary-dark}"
    textColor: "{colors.on-dark}"
  button-ghost:
    backgroundColor: transparent
    textColor: "{colors.on-dark-soft}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
  button-ghost-hover:
    textColor: "{colors.on-dark-muted}"

  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
    padding: 24px
    boxShadow: "0 4px 12px 0 {colors.shadow-soft}"
  card-feature:
    backgroundColor: "{colors.surface-raised}"
    rounded: "{rounded.xl}"
    padding: 32px

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-dark}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    border: 1px solid {colors.border-input}
  input-focus:
    borderColor: "{colors.focus-ring}"
    outline: 2px solid {colors.focus-ring}

  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-dark}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

  nav:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-dark}"
    typography: "{typography.nav-link}"
    padding: 16px 24px
    transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1)
  nav-link:
    textColor: "{colors.on-dark}"
    typography: "{typography.nav-link}"
  nav-link-hover:
    textColor: "{colors.on-dark-muted}"

  pill-tag:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-dark-soft}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 8px 20px
    border: 1px solid transparent

  marquee-card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
    padding: 16px 24px
    animation: marquee 55s linear infinite
---

# Chime Design System

## Overview

Chime's design system is built on a rare premise for fintech: the darkest color on screen is not charcoal or navy but a deep forest green. The canvas — `{colors.background}` — reads as near-black at a glance but carries unmistakable warmth, as though the product itself is rooted in nature rather than Wall Street. Against it, the signature `{colors.primary}` mint green blazes as the sole accent: CTAs, checkmarks, success states, and interactive highlights all draw from this single reservoir, making every actionable moment unmistakable without competition from secondary palettes.

Two proprietary typefaces do the heavy lifting. chimeDisplayWide is a wide-set geometric sans with a compressed line-height of 1.00 — its 80px heroes fill the viewport edge to edge, asserting authority without coldness. chimeSaans, the companion body face, shifts register entirely: rounder, friendlier, weight 400 for long-form reading and 500–600 for UI chrome. The pairing separates "brand voice" from "product voice" — the wide display font speaks in statements; the saans face listens and guides. Google Font stand-in: DM Sans captures the approachable humanist geometry of chimeSaans for prototyping.

The interaction system is deliberately gentle. Transitions run at 150ms on the standard `cubic-bezier(0.4, 0, 0.2, 1)` curve — fast enough to feel snappy, unhurried enough to avoid anxiety. A continuous marquee of trust signals (bank logos, FDIC badges, customer testimonials) scrolls across feature sections at 55 seconds — a patient, confident assertion rather than an urgent pitch. The overall effect is a neobank that has outgrown the maximalist phase common to its predecessors: no gradients in the traditional sense, just radial glows that give the dark canvas dimensional breath.

**Key Characteristics:**
- Deep forest `{colors.background}` as the primary canvas — a dark-mode-first brand that reads sophisticated, not gloomy
- Single-accent system: `{colors.primary}` Chime green carries 100% of the interactive and brand energy
- chimeDisplayWide at weight 500 and 1.00 line-height — wide-set geometry that commands without aggression
- chimeSaans family spans four weights (Regular, Medium, SemiBold, Bold) for a flexible UI register
- `{rounded.sm}` 6px radius on buttons and form elements — modern but not aggressively pill-shaped
- `{rounded.lg}` 24px and `{rounded.xl}` 32px for cards and image containers — creates warm containment
- Radial green glows (`{colors.gradient-glow}`) soften the dark canvas corners without a visible gradient line
- Button hover shifts from `{colors.primary}` to the deeper `{colors.primary-hover}` CSS custom property (`--web-btn-bg-hover`)
- Marquee at 55s — slow, confident trust-signal scrolling, not a carousel
- Transition timing: 150ms standard, 500ms for nav background (scroll-aware color change)
- `{colors.surface-light}` near-white panels create dual-register layouts where the brand reads both dark and light
- Tailwind CSS with arbitrary values drives the utility layer; the design token vocabulary is proprietary

## Colors

### Primary Canvas
- **Deep Forest Green** (`{colors.background}`): The page-level canvas. Near-black in dim environments, rich forest green in well-lit spaces. Sets the tone of trustworthy depth.
- **Lifted Panel** (`{colors.surface}`): Cards, feature panels, and section dividers sit 15% lighter than the background. The layering is subtle — a whisper, not a step.
- **Raised Tile** (`{colors.surface-raised}`): A mid-tier surface for nested tile elements within cards.

### Brand Accent
- **Chime Green** (`{colors.primary}`): The signature — rgb(30, 198, 119). Used exclusively for primary CTAs, checkmark bullets, success states, and highlighted inline links. The entire interactive grammar lives here.
- **Hover Green** (`{colors.primary-hover}`): The CSS custom property `--web-btn-bg-hover`. Applied on button hover, darkening the mint to a richer forest without changing hue.
- **On-Primary** (`{colors.on-primary}`): Deep dark green text on mint buttons — brand-faithful rather than black-on-green. Ensures visual harmony over raw contrast maximization.

### Text States
- **On-Dark** (`{colors.on-dark}`): Pure white for headlines, body copy, and nav items on the dark canvas.
- **On-Dark-Soft** (`{colors.on-dark-soft}`): The mint-tinted off-white used for nav links, feature sub-heads, and interactive inline links on dark. Keeps copy warm rather than stark.
- **On-Dark-Muted** (`{colors.on-dark-muted}`): Grey for hover transitions on links and secondary metadata.

### Light Register
- **Surface Light** (`{colors.surface-light}`): Used for high-contrast feature panels that invert to near-white. Allows sections like social proof or partner logos to breathe against the dark majority.

### Borders & Utility
- **Focus Ring / Outlined Button Border** (`{colors.border}`): 1px solid Chime green on secondary buttons — consistent with the accent-only philosophy.
- **Subtle Divider** (`{colors.border-subtle}`): Light grey for footer rows and between-section hairlines on light panels.
- **Input Border** (`{colors.border-input}`): Medium grey for form field edges, matching the `--color-grey-200` custom property.

## Typography

### Font Family
- **Display**: `chimeDisplayWide` — a wide-tracking geometric sans with compressed line-height. Self-hosted as `ChimeDisplayWide_Medium` (weight 500 only). Closest Google Font: **DM Sans** (condensed optical weight at large sizes).
- **UI/Body**: `chimeSaans` — a rounded humanist sans in four weights: Regular (400), Medium (500), SemiBold (600), Bold (700). Closest Google Font: **DM Sans** across all weights.
- Both fonts are self-hosted via Chime's CDN as woff2 files. No Google Fonts or Adobe Fonts are loaded.

### Hierarchy

The complete type scale is declared in the `typography:` token block above. Use those tokens directly via reference (`{typography.display-hero}`, `{typography.body}`) rather than restating values.

| Token | Use |
|---|---|
| `display-hero` | Primary hero headlines, full-viewport statement copy at 80px |
| `display` | Section heroes, product benefit headlines at 50px |
| `heading-section` | Page section titles at 48px |
| `heading-sub` | Sub-section headers, feature names at 40px |
| `body-large` | Feature copy, introductory paragraphs at 24px |
| `body-large-medium` | Emphasized body copy, card headlines at 24px weight 500 |
| `body` | Standard paragraph copy, list items at 18px |
| `body-semibold` | Prominent body callouts, emphasized feature descriptions |
| `button-ui` | All buttons, actionable labels at 16px weight 600 |
| `nav-link` | Navigation items, tab labels at 16px weight 500 |
| `label` | Data labels, small tags, metadata at 14px |
| `caption` | Legal footnotes, fine print, badge text at 12px |

### Principles
- chimeDisplayWide is ONLY used at display sizes (40px+) — never for body copy or UI chrome
- All display sizes use weight 500 (Medium) — the only weight available for this font
- chimeSaans transitions from weight 400 (reading) to 600 (action) — no italic cuts observed
- Line-heights compress at display scale (1.00) and open up at body scale (1.40–1.56) — classic readability hierarchy
- Letter-spacing tightens with scale increase: -0.4px at 80px, 0px at body sizes

## Layout

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

The spacing personality is generous at the macro level and precise at the micro level. Section-to-section breathing room uses `{spacing.4xl}` (80px) and `{spacing.5xl}` (160px) for hero areas — the scale signals confidence. Component internals snap to the 8px grid with occasional 4px half-steps for fine-grain alignment.

### Grid & Container
- Max content width: approximately 1280px (inferred from 1441px breakpoint triggering layout shifts)
- Tailwind CSS grid with arbitrary values — no fixed column count enforced globally; sections use 2–4 column flex or grid layouts
- Hero sections span full viewport width; content areas are center-aligned with generous horizontal padding
- Feature sections alternate between full-bleed dark and contained light-panel layouts

### Whitespace Philosophy
- Macro whitespace (section gaps, hero breathing room) is expansive — Chime is not in a hurry
- Component-level spacing is tight and precise, reflecting mobile-first density origins
- The 56px and 80px jumps in the scale create clear macro/micro distinction without intermediate steps

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Hero sections, page background |
| Ambient (Level 1) | Radial glow overlays via CSS background-image | Dark feature sections — green corner glows give depth without hard edges |
| Card (Level 2) | `0 4px 12px 0 rgba(0,0,0,0.15)` | Feature cards, testimonial tiles, info panels |
| Raised (Level 3) | `rgb(153,153,153) 0 2px 10px -3px` | Elevated interactive elements |
| Modal (Level 4+) | `rgb(199,197,199) 0 0 12px 2px` | Cookie consent, overlay panels |
| Focus Ring | `1px solid {colors.focus-ring}` outlined | Button and input focus states |

**Shadow Philosophy**: Chime's elevation system relies on two mechanisms rather than one. Hard-edged box shadows are reserved for interactive components — cards and modals — and stay neutral (grey-tinted, not green-tinted). The atmospheric depth in hero sections comes from radial gradient overlays: dark-to-transparent `{colors.gradient-glow}` glows positioned at corners, creating the sense of a lit scene. This split keeps the UI chrome feeling precise while letting the marketing canvas feel dimensional and warm.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Sharp-edged dividers, horizontal rules |
| `sm` | 6px | Buttons, input fields, small badges |
| `md` | 20px | Mid-size feature tiles, chip components |
| `lg` | 24px | Feature cards, section containers |
| `xl` | 32px | Image containers, large product screenshots, hero asset frames |
| `pill` | 9999px | Status pills, tag components |

Chime's radius system is deliberately graduated rather than binary. The 6px choice for buttons feels contemporary-rounded without the full-pill softness of consumer apps like Venmo. Cards at 24px and images at 32px create a distinctly warm, magazine-style framing that sets Chime apart from the sharp-cornered legacy banking UI it was designed to replace.

## 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`** — `{colors.primary}` fill, `{colors.on-primary}` dark-green text, `{rounded.sm}` 6px, 8px/16px padding, weight 600. The sole high-emphasis CTA; "Get started" is its canonical label. Transitions to `{colors.primary-hover}` at 150ms.
- **`button-secondary`** — Transparent fill with `{colors.border}` 1px green outline, white text. Used for "Learn more" adjacent to primary CTAs on dark sections.
- **`button-ghost`** — No border, no fill. `{colors.on-dark-soft}` mint-tinted text. Navigation-grade actions and tertiary prompts.

### Cards

- **`card`** — `{colors.surface}` background, `{rounded.lg}` 24px, 24px padding with a soft neutral shadow. Standard information tile.
- **`card-feature`** — `{colors.surface-raised}` for heavier sections, `{rounded.xl}` 32px, 32px padding. Used for product feature showcases with embedded app screenshots.

### Inputs

- **`input`** — `{colors.surface}` background, `{colors.border-input}` grey border at rest. Transitions to `{colors.focus-ring}` green border + outline on focus. `{rounded.sm}` 6px.
- Email capture inputs in the hero follow the same spec; the 6px radius aligns with button radius for visual harmony.

### Badges / Tags

- **`badge`** — Neutral `{colors.surface}` background, `{rounded.pill}` shape, `{typography.caption}` size. Used for FDIC membership, trust indicators, and status labels.
- **`pill-tag`** — Feature category labels on feature tiles; `{colors.on-dark-soft}` text, transparent fill.

### Navigation

- Sticky nav bar transitions background from transparent to `{colors.background}` on scroll via a 500ms opacity/background transition.
- Nav links use `{colors.on-dark}` white at rest, shift to `{colors.on-dark-muted}` grey on hover.
- "Get started" CTA lives in the nav as a `button-primary` — the system's only nav-level primary action.

### Marquee
The `marquee-card` component scrolls a row of social-proof tiles (partner bank logos, app store ratings, testimonial snippets) at 55 seconds — slow enough to read, fast enough to animate. Each tile uses `{colors.surface}` background and `{rounded.lg}` radius.

## Do's and Don'ts

### Do
- Use `{colors.primary}` exclusively for CTAs, success indicators, and focus states — never as a decorative fill for non-interactive elements
- Use chimeDisplayWide only at 40px and above — it becomes illegible at body sizes and has no Regular weight
- Apply `{rounded.sm}` 6px to all interactive controls (buttons, inputs, selects) for visual consistency with the "Get started" CTA
- Use `{colors.on-dark-soft}` for secondary inline links on dark backgrounds — pure white underlines compete with headlines
- Maintain the 150ms standard transition timing for button and link hover states using `cubic-bezier(0.4, 0, 0.2, 1)`
- Use the `--web-btn-bg-hover` CSS custom property for primary button hover rather than computing a manual darkened value
- Apply `{colors.surface-light}` panels sparingly for sections that need contrast inversion — light panels should feel intentional, not filling
- Keep the marquee at or near 55s — slowing it below 30s loses the "confident bank parade" quality

### Don't
- Don't introduce secondary accent colors (purple, blue, orange) — the single-accent system is deliberate and brand-defining
- Don't use `{colors.primary}` as a large background fill for sections — it should flash, not flood
- Don't use weight 700 (Bold) in chimeSaans for headlines — reserve Bold for legal fine-print emphasis only; display hierarchy is handled by chimeDisplayWide
- Don't set border-radius below 6px on interactive elements — 2–3px radii read as technical/legacy UI, which Chime explicitly avoids
- Don't apply drop shadows to elements sitting on the dark canvas — shadow-on-dark creates muddiness; use radial glow overlays for depth instead
- Don't use the `{colors.surface-light}` near-white as a body background in product UI — it's reserved for marketing-layer feature panels
- Don't animate transitions above 300ms for hover states — Chime's energy is precise and responsive, not dreamy

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile XS | <400px | Single-column stack, minimal horizontal padding |
| Mobile | 400–550px | Standard mobile layout, full-width CTAs |
| Mobile Large | 550–768px | Two-column feature grid begins to emerge |
| Tablet | 768–1025px | Nav collapses to hamburger, hero type scales down |
| Desktop | 1025–1441px | Full multi-column layouts, marquee visible |
| Large Desktop | >1441px | Max-width container constrains content, full hero typography |

### Touch Targets
- All buttons include at minimum 8px vertical padding producing a 32px+ touch target
- Nav link tap targets are padded to 44px height via Tailwind spacing utilities
- The 6px button radius remains consistent across mobile and desktop — no mobile-specific rounding overrides observed

### Collapsing Strategy
- Navigation: transparent sticky → scrolled background transition preserved on mobile; hamburger menu at tablet and below
- Hero headlines: chimeDisplayWide scales from 80px on desktop to approximately 40–48px on mobile via Tailwind responsive modifiers
- Feature sections: 2- and 3-column grids collapse to single-column stacks below 768px
- Marquee: remains active on mobile at reduced speed; card count visible adjusts by viewport

### Image Behavior
- Product UI screenshots use `{rounded.xl}` 32px framing at desktop; maintain radius at mobile for visual continuity
- Images are `object-fit: cover` within fixed-ratio containers for consistent proportions across viewports

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}`
- Text: `{colors.on-dark}`
- Brand accent: `{colors.primary}`
- Secondary text: `{colors.on-dark-soft}`
- Border: `{colors.border}`
- CTA: `{colors.primary}`
- Canvas surface: `{colors.surface}`
- Hover green: `{colors.primary-hover}`

### Example Component Prompts

- "Build a hero section on a `{colors.background}` canvas. Headline in chimeDisplayWide (or DM Sans as fallback) at 80px, weight 500, line-height 1.00, letter-spacing -0.4px, color `{colors.on-dark}`. Sub-headline in chimeSaans 24px weight 400, color `{colors.on-dark-soft}`. Include a primary CTA button: `{colors.primary}` fill, `{colors.on-primary}` text, 8px/16px padding, `{rounded.sm}` border-radius, font-weight 600. Apply radial green glow overlays at corners using `{colors.gradient-glow}` at 67% opacity fading to transparent."
- "Create a feature card on `{colors.surface}` background with `{rounded.lg}` 24px radius and 24px padding. Card title in chimeDisplayWide 40px weight 500, body copy in chimeSaans 18px weight 400 at 1.56 line-height, both `{colors.on-dark}`. Add a 1px `{colors.border}` accent line at card top to signal brand affiliation."
- "Design a sticky navigation bar. Background transparent at page-top, transitioning to `{colors.background}` on scroll via `background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1)`. Logo left-aligned. Nav links in chimeSaans 16px weight 500, color `{colors.on-dark}`, hover to `{colors.on-dark-muted}`. Right-aligned 'Get started' button: `{colors.primary}` fill, `{colors.on-primary}` text, `{rounded.sm}`, font-weight 600."
- "Build a trust-signal marquee. Outer container `{colors.background}`, inner row of tiles each `{colors.surface}` with `{rounded.lg}` 24px radius, 16px/24px padding, chimeSaans 16px weight 500. Animate with `animation: marquee 55s linear infinite`. Include FDIC badge, app-store rating, and short testimonial snippet per tile."
- "Render an input form on `{colors.surface}` background. Email input: `{colors.surface}` background, `{colors.border-input}` 1px border at rest, `{rounded.sm}` 6px, 12px/16px padding, chimeSaans 18px weight 400 `{colors.on-dark}` text. On focus: border changes to `{colors.focus-ring}`, add 2px `{colors.focus-ring}` outline. Submit button directly adjacent: `{colors.primary}` fill, `{colors.on-primary}` text, matching `{rounded.sm}` radius."

### Iteration Guide

1. Start with `{colors.background}` as the full-page canvas — establish the dark forest floor before placing any content
2. Reserve `{colors.primary}` for exactly one role per section: the primary CTA or the featured metric. Overuse dilutes its signal power
3. Use chimeDisplayWide for all display text (40px+); drop to chimeSaans for anything below. Never mix the two at the same size
4. Apply radial glow overlays (`{colors.gradient-glow}` → transparent) at section corners to give the dark canvas dimensional warmth without visible gradients
5. Color hierarchy on dark: `{colors.on-dark}` (white) for primary copy, `{colors.on-dark-soft}` (mint tint) for secondary/links, `{colors.on-dark-muted}` (grey) for metadata
6. Radius range: 6px (`{rounded.sm}`) for controls, 24–32px (`{rounded.lg}`/`{rounded.xl}`) for containers — nothing in between
7. Transition all interactive states at 150ms standard, 500ms for large ambient shifts (nav background)

---

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