---
version: alpha
name: Capital
description: Warm fintech minimalism — a cream paper canvas (#efece6) with near-black ink, the Muoto grotesk paired with GT America Mono, light 300-weight display type, and a mint-green accent reserved for primary action. Calm, editorial, money-as-craft.
colors:
  # Canvas + ink
  background: "#efece6"
  surface: "#efece6"
  surface-dark: "#1a1a1a"
  surface-darker: "#161616"
  surface-black: "#0a0a0a"
  ink: "#1a1a1a"
  ink-pure: "#040503"
  ink-secondary: "#302f2f"
  ink-muted: "#8e8c87"
  ink-faint: "#bfbcb7"

  # Accent — mint, reserved for primary action
  primary: "#a5efd9"
  accent-teal: "#53b9a5"
  accent-deep: "#093427"
  accent-red: "#ed5145"
  accent-red-soft: "#ff7a70"

  # On-color
  on-primary: "#000000"
  on-dark: "#efece6"
  on-ink: "#efece6"

  # Neutral helpers
  white: "#ffffff"
  black: "#000000"
  border-soft: "#bfbcb7"

typography:
  display-hero:
    fontFamily: "Muoto, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, sans-serif"
    fontSize: 120px
    fontWeight: 300
    lineHeight: 1.00
    letterSpacing: -3px
  display-large:
    fontFamily: "Muoto, -apple-system, sans-serif"
    fontSize: 90px
    fontWeight: 300
    lineHeight: 1.05
    letterSpacing: -2.4px
  section-heading:
    fontFamily: "Muoto, -apple-system, sans-serif"
    fontSize: 72px
    fontWeight: 300
    lineHeight: 1.08
    letterSpacing: -1.8px
  heading:
    fontFamily: "Muoto, -apple-system, sans-serif"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.10
    letterSpacing: -1.2px
  sub-heading:
    fontFamily: "Muoto, -apple-system, sans-serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.20
    letterSpacing: -0.6px
  card-title:
    fontFamily: "Muoto, -apple-system, sans-serif"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: -0.4px
  body-large:
    fontFamily: "Muoto, -apple-system, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  body:
    fontFamily: "Muoto, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-light:
    fontFamily: "Muoto, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 300
    lineHeight: 1.55
    letterSpacing: 0px
  body-medium:
    fontFamily: "Muoto, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.50
    letterSpacing: 0px
  body-small:
    fontFamily: "Muoto, -apple-system, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0px
  button-ui:
    fontFamily: "Muoto, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.00
    letterSpacing: 0px
  mono-label:
    fontFamily: "GT America Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 13.75px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 0px
  mono-caption:
    fontFamily: "GT America Mono, ui-monospace, Menlo, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0.4px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 96px
  5xl: 160px

rounded:
  none: 0px
  micro: 3px
  sm: 6px
  md: 8px
  lg: 12px
  xl: 24px
  pill: 9999px

components:
  # Primary CTA — mint fill, black text
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 14px 24px
  button-primary-hover:
    backgroundColor: "{colors.accent-teal}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 14px 24px

  # Dark CTA — near-black fill, cream text
  button-dark:
    backgroundColor: "{colors.surface-darker}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 14px 24px

  # Ghost / outline button on cream
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 14px 24px
    borderColor: "{colors.border-soft}"

  # Mono tag / eyebrow label
  badge:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.mono-caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
    borderColor: "{colors.border-soft}"

  # Standard card on cream canvas
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border-soft}"

  # Dark feature card
  card-dark:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    rounded: "{rounded.xl}"
    padding: 32px

  # Metric card — large light display number
  card-metric:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.display-large}"
    rounded: "{rounded.lg}"
    padding: 32px
    borderColor: "{colors.border-soft}"

  # Input
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 12px 16px
    borderColor: "{colors.border-soft}"
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    borderColor: "{colors.accent-teal}"

  # Top nav bar
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-medium}"
    padding: 16px 24px
---

# Capital Design System

## Overview

Capital is a fintech platform that styles money management as a craft, and its visual language reflects that calm confidence. The defining move is the canvas: not the default white or near-black of most finance products, but a warm paper cream (`{colors.background}`) — a soft, slightly desaturated off-white with a faint warm undertone. Against it sits near-black ink (`{colors.ink}`), producing a tone that feels printed rather than rendered, closer to a well-set annual report than a SaaS dashboard.

Typography carries the brand. The custom grotesk **Muoto** runs the whole hierarchy, and crucially it leans light — display headlines are set at weight 300, fluid-scaling up to 120px with tight negative tracking. Large, thin, generously-spaced headlines give the page an editorial, almost luxury-goods restraint. Supporting this is **GT America Mono**, used for eyebrows, technical labels, and metadata — a quiet nod to the precision and engineering underneath the calm surface.

Color is disciplined to the point of austerity. The palette is essentially a warm neutral ramp from cream to ink, broken only by a single signature accent: a soft mint green (`{colors.primary}`) reserved almost exclusively for the primary call-to-action, with a deeper teal (`{colors.accent-teal}`) for its pressed and hover states. A warm coral red (`{colors.accent-red}`) appears sparingly for emphasis or alerts. Nothing is decorative — color marks action, not surface.

The depth model is flat and quiet. There are no heavy shadows or glassy effects; separation comes from the warm neutral steps, soft 1px borders (`{colors.border-soft}`), and generous whitespace. Buttons get a subtle custom glow/shine treatment (driven by `--button-shine` and `--button-glow` CSS variables) that animates on interaction, but at rest the interface stays serene.

**Key Characteristics:**
- Warm paper-cream canvas (`{colors.background}`) instead of white or black — printed, not rendered
- Muoto grotesk at light weight 300 for large display headlines with tight negative tracking
- GT America Mono for eyebrows, labels, and metadata — the engineering voice
- A single mint accent (`{colors.primary}`) reserved for primary action only
- Warm neutral ramp from cream to ink — austere, near-monochrome palette
- Flat depth: soft 1px borders and whitespace, no heavy shadows
- Animated button shine/glow on interaction over an otherwise calm surface
- Fluid `clamp()` type scaling from mobile to 120px hero

## Colors

### Canvas & Ink
- **Paper Cream** (`{colors.background}`): The signature canvas — warm off-white for page and most surfaces.
- **Ink** (`{colors.ink}`): Primary text and headings, a near-black with subtle warmth.
- **Ink Pure** (`{colors.ink-pure}`): Deepest text/graphics where maximum contrast is needed.
- **Ink Secondary** (`{colors.ink-secondary}`): Secondary body copy.
- **Ink Muted** (`{colors.ink-muted}`): Captions, metadata, mono labels.
- **Ink Faint** (`{colors.ink-faint}`): Disabled text, faint dividers — doubles as `{colors.border-soft}`.

### Dark Surfaces
- **Surface Dark** (`{colors.surface-dark}`): Dark feature cards and inverted sections.
- **Surface Darker** (`{colors.surface-darker}`): Dark button fill (`--button-background`).
- **Surface Black** (`{colors.surface-black}`): Deepest inverted backgrounds.

### Accent
- **Mint** (`{colors.primary}`): The primary-action accent — mint button fill (`--button-background`).
- **Teal** (`{colors.accent-teal}`): Hover/pressed state, mint button shine-right.
- **Deep Forest** (`{colors.accent-deep}`): Button shine-left, dark-on-mint detail.
- **Coral Red** (`{colors.accent-red}`): Sparing emphasis, alerts.
- **Coral Soft** (`{colors.accent-red-soft}`): Lighter coral for hover/secondary alert.

### On-Color
- **On Primary** (`{colors.on-primary}`): Black text on the mint accent.
- **On Dark** (`{colors.on-dark}`): Cream text on dark surfaces and dark buttons.

## Typography

### Font Family
- **Primary**: `Muoto`, with system fallbacks (`-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, sans-serif`)
- **Monospace**: `GT America Mono`, with fallbacks `ui-monospace, SFMono-Regular, Menlo, monospace`
- **Weights in use**: 200, 300, 400, 500, 600 — the system leans on 300 (light) for display and 400/500 for UI.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`).

| Token | Use |
|---|---|
| `display-hero` | Largest hero — fluid up to 120px, weight 300 |
| `display-large` | Big section/metric numerals at 90px |
| `section-heading` | Feature section titles, 72px |
| `heading` | Standard headings, 48px weight 400 |
| `sub-heading` | Sub-section titles, 32px |
| `card-title` | Card and feature headings |
| `body-large` | Lead paragraphs, intros |
| `body` | Standard reading text |
| `body-light` | Light-weight supporting body |
| `body-medium` | Nav, emphasized UI text |
| `body-small` | Compact UI text, captions |
| `button-ui` | Button labels, weight 500 |
| `mono-label` | GT America Mono eyebrows/labels |
| `mono-caption` | Tiny mono metadata |

### Principles
- **Light as identity**: Display headlines use weight 300, not bold — thin, wide, confident. The size does the shouting, not the weight.
- **Tight display tracking**: Negative letter-spacing tightens as size grows (up to ~-3px at hero), keeping large light type cohesive.
- **Mono for precision**: GT America Mono labels signal the engineering underneath the calm marketing surface.
- **Fluid scaling**: `clamp()` drives every display size, scaling smoothly from mobile to a 120px hero.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Roughly an 8px base, with large jumps (`{spacing.4xl}`, `{spacing.5xl}`) reserved for the generous vertical rhythm between sections.

### Grid & Container
- Centered single-column hero with large top padding
- Feature sections use 2–3 column grids on cream
- Dark feature cards (`{components.card-dark}`) break the cream rhythm for emphasis
- Max content width roughly 1200–1280px

### Whitespace Philosophy
- **Editorial calm**: Large empty margins frame the light display type — whitespace is the luxury signal.
- **Quiet separation**: Sections divide by warm neutral steps and soft 1px borders, not heavy shadows or strong color blocks.
- **Accent restraint**: The mint accent appears once or twice per view — it stays special by staying rare.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Page background, text blocks |
| Hairline (Level 1) | 1px solid `{colors.border-soft}` | Cards, inputs, badges |
| Inverted (Level 2) | Dark surface (`{colors.surface-dark}`) on cream | Feature/highlight cards |
| Button Shine (Level 3) | Animated glow/shine via `--button-shine`/`--button-glow` vars | Interactive buttons |
| Focus | `{colors.accent-teal}` border/outline | Keyboard focus on inputs and buttons |

**Depth Philosophy**: Capital is deliberately flat. Hierarchy comes from the warm neutral ramp and whitespace rather than shadow. The one expressive flourish is the button shine — a subtle animated highlight that sweeps the CTA on hover/press, giving the otherwise serene interface a moment of life precisely where the user is about to act.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved |
| `micro` | 3px | Tiny inline elements |
| `sm` | 6px | Small functional elements |
| `md` | 8px | Buttons, inputs |
| `lg` | 12px | Cards |
| `xl` | 24px | Large dark feature cards |
| `pill` | 9999px | Mono badges, tags, avatars |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — Mint (`{colors.primary}`) fill, black text, 8px radius. The signature CTA; hover deepens to teal.
- **`button-dark`** — Near-black fill, cream text, for secondary-prominent actions on cream.
- **`button-ghost`** — Cream surface with a soft 1px border — quiet tertiary action.

### Badges
- **`badge`** — Pill with GT America Mono caption text, muted ink, soft border — used for eyebrows and tags.

### Cards
- **`card`** — Cream surface, 1px soft border, 12px radius. The flat default.
- **`card-dark`** — Dark surface with cream text and a larger 24px radius — the inverted highlight card.
- **`card-metric`** — Large light display numeral (Muoto 90px weight 300) over a supporting label.

### Inputs
- **`input`** — Cream surface, 1px soft border, 8px radius. Focus shifts the border to teal.

### Navigation
- **`nav-bar`** — Cream header, ink links in Muoto medium, mint CTA right-aligned.

## Do's and Don'ts

### Do
- Use the warm cream canvas (`{colors.background}`) — it is the brand
- Set display headlines in Muoto weight 300 with tight negative tracking
- Use GT America Mono for eyebrows, labels, and metadata
- Reserve the mint accent (`{colors.primary}`) for the primary action only
- Keep depth flat — hairline borders and whitespace over shadows
- Let whitespace breathe; the editorial calm is the luxury cue

### Don't
- Don't swap the cream canvas for plain white — the warmth is intentional
- Don't set display type bold — weight 300/400 is the maximum at large sizes
- Don't spread the mint accent across surfaces — it marks action, not decoration
- Don't add heavy drop shadows or glassmorphism
- Don't use coral red decoratively — it is for sparing emphasis/alerts
- Don't tighten body text tracking — negative tracking is for display only

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, hero clamps to ~48–64px |
| Tablet | 600–1024px | 2-column grids, expanded padding |
| Desktop | 1024–1280px | Full multi-column layout |
| Large | >1280px | Centered, generous margins, hero up to 120px |

### Touch Targets
- Buttons use comfortable 14px vertical padding
- Nav links at 16px Muoto medium with adequate spacing
- Pill badges have 12px horizontal padding for tap comfort

### Collapsing Strategy
- Hero: `clamp(48px,7vw,90px)` / `clamp(64px,8vw,120px)` — scales fluidly, never reflows abruptly
- Feature cards: 3-column → 2-column → single column
- Dark feature cards maintain radius and padding at all sizes
- Section spacing compresses on mobile but keeps the editorial rhythm

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Paper Cream `{colors.background}`
- Heading/body text: Ink `{colors.ink}`
- Muted/labels: Ink Muted `{colors.ink-muted}`
- Primary CTA: Mint `{colors.primary}` with black text
- CTA hover: Teal `{colors.accent-teal}`
- Borders: Border Soft `{colors.border-soft}`

### Example Component Prompts
- "Create a hero on cream (`{colors.background}`). Headline in Muoto weight 300, `clamp(64px,8vw,120px)`, letter-spacing -3px, color `{colors.ink}`. Eyebrow above in GT America Mono 13.75px, `{colors.ink-muted}`. Mint CTA button (`{colors.primary}`, black text, 8px radius, 14px 24px padding)."
- "Design a card: cream background, 1px solid `{colors.border-soft}`, 12px radius, 24px padding. Title in Muoto 28px weight 400, body 16px weight 400 in `{colors.ink-secondary}`."
- "Build a dark feature card: `{colors.surface-dark}` fill, cream text, 24px radius, 32px padding, with a mint detail accent."
- "Create a mono badge: cream surface, soft border, GT America Mono 12px, `{colors.ink-muted}`, pill radius, 4px 12px padding."

### Iteration Guide
1. Start on the warm cream canvas — never plain white
2. Display type is light (300) and large; tighten tracking as it grows
3. Mono (GT America Mono) for eyebrows and labels only
4. The mint accent appears once or twice per view — keep it rare
5. Depth is flat — hairline borders and whitespace, no shadows
6. Reserve coral red for sparing emphasis/alerts

---

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