---
version: alpha
name: Bronn
description: Dark, AI-native fintech minimalism — near-black charcoal canvas with crisp off-white ink, a single confident accent for CTAs, hairline borders over solid fills, and a clean geometric sans for accounting clarity. Restraint as trust.
data_quality: low

colors:
  # Canvas + ink
  background: "#0b0d0f"
  surface: "#121417"
  surface-soft: "#181b1f"
  ink: "#f4f5f6"
  ink-secondary: "#a3a9b0"
  ink-muted: "#6b7178"

  # Accent — CTA / focus
  primary: "#5b8cff"
  primary-hover: "#3f74f0"
  accent-soft: "#1c2740"

  # Status
  success: "#3ecf8e"
  warning: "#f5a623"
  danger: "#f0556b"

  # Borders + lines
  border: "#23272c"
  border-soft: "#1a1e22"
  divider: "#202428"

  # On-color
  on-primary: "#ffffff"
  on-surface: "#f4f5f6"

  # Tints
  badge-bg: "#16213a"
  badge-text: "#9bb6ff"
  surface-hover: "#1d2024"

typography:
  display-hero:
    fontFamily: "Inter, -apple-system, Helvetica, Arial, sans-serif"
    fontSize: 56px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -1.6px
  section-heading:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -1.2px
  sub-heading:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.6px
  card-title:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.35
    letterSpacing: -0.3px
  body-large:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-medium:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0px
  caption:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.35
    letterSpacing: 0px
  mono-figure:
    fontFamily: "JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0px
  micro-label:
    fontFamily: "JetBrains Mono, ui-monospace, Menlo, monospace"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0.4px

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

rounded:
  none: 0px
  xs: 4px
  sm: 6px
  md: 10px
  lg: 14px
  xl: 20px
  pill: 9999px

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

  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 12px 20px
    borderColor: "{colors.border}"
  button-secondary-hover:
    backgroundColor: "{colors.surface-hover}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 12px 20px
    borderColor: "{colors.border}"

  badge:
    backgroundColor: "{colors.badge-bg}"
    textColor: "{colors.badge-text}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border}"

  card-soft:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border-soft}"

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 10px 14px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 10px 14px
    borderColor: "{colors.primary}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 16px 24px
    borderColor: "{colors.border-soft}"

  stat-figure:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.mono-figure}"
    rounded: "{rounded.md}"
    padding: 16px
    borderColor: "{colors.border}"
---

# Bronn Design System

## Overview

Bronn presents an AI-native fintech surface where the design recedes so the numbers can speak. The canvas is a near-black charcoal (`{colors.background}`) — not pure black, which keeps the screen from feeling like a void and lets surfaces layer through subtle value shifts rather than borders alone. Crisp off-white ink (`{colors.ink}`) sits on top with strong contrast, and a single restrained blue accent (`{colors.primary}`) carries every call to action. The result reads as serious, modern, and quietly confident — the visual equivalent of a clean ledger.

The system is built on a layered-darkness model. Three surface values — `{colors.background}`, `{colors.surface}`, and `{colors.surface-soft}` — stack to create depth without heavy shadows or glassmorphism. Hairline borders (`{colors.border}`) define card edges where a value shift alone isn't enough. This is the standard dark-fintech move: depth through tone, not drop shadows. Cards feel etched into the surface rather than floating above it.

Typography uses a geometric grotesque sans (Inter as the closest mapping) for everything human-readable, paired with a monospace (JetBrains Mono) reserved for figures, transaction amounts, and small technical labels. The mono is the tell of a finance product — it signals precision and aligns columns of numbers. Headlines use moderate negative tracking for a tightened, engineered feel without going as extreme as developer-tool brands.

Accent discipline is the core principle. Blue appears only on primary CTAs, focus rings, and active states. Status colors (`{colors.success}`, `{colors.warning}`, `{colors.danger}`) appear only in their semantic context — a transaction flagged, a balance positive. Everything else lives in the achromatic charcoal-to-white scale.

**Key Characteristics:**
- Near-black charcoal canvas (`{colors.background}`) — depth through layered surface values, not shadows
- Crisp off-white ink (`{colors.ink}`) for maximum legibility of financial data
- Single restrained blue accent (`{colors.primary}`) reserved for CTAs, focus, and active states
- Hairline borders (`{colors.border}`) etch cards into the surface
- Inter-style geometric sans for reading; JetBrains-style mono for figures and labels
- Moderate negative tracking on headlines (-1.6px at hero)
- Semantic status colors used only in context — no decorative color
- Medium radii (10–14px) — soft but not pill-rounded chrome

## Colors

### Canvas & Ink
- **Charcoal Canvas** (`{colors.background}`): Page background. Near-black, never pure black.
- **Surface** (`{colors.surface}`): Card and panel fills, one step up from canvas.
- **Surface Soft** (`{colors.surface-soft}`): Nested or secondary panels.
- **Ink** (`{colors.ink}`): Primary text, headings, figures.
- **Ink Secondary** (`{colors.ink-secondary}`): Supporting copy, descriptions.
- **Ink Muted** (`{colors.ink-muted}`): Placeholders, disabled labels, captions.

### Accent
- **Primary Blue** (`{colors.primary}`): The single accent — CTAs, focus rings, active states.
- **Primary Hover** (`{colors.primary-hover}`): Deeper blue on CTA hover.
- **Accent Soft** (`{colors.accent-soft}`): Tinted blue surface for highlighted blocks.

### Status
- **Success** (`{colors.success}`): Positive balances, completed transactions.
- **Warning** (`{colors.warning}`): Pending or flagged states.
- **Danger** (`{colors.danger}`): Errors, negative amounts, destructive actions.

### Borders & Lines
- **Border** (`{colors.border}`): Card outlines, input borders, dividers.
- **Border Soft** (`{colors.border-soft}`): Subtle separators, nav underline.
- **Divider** (`{colors.divider}`): Horizontal rules in tables and lists.

### Tints
- **Badge Bg** (`{colors.badge-bg}`): Pill badge background.
- **Badge Text** (`{colors.badge-text}`): Pill badge text.
- **Surface Hover** (`{colors.surface-hover}`): Hover state for secondary surfaces.

## Typography

### Font Family
- **Primary**: `Inter`, with fallbacks `-apple-system, Helvetica, Arial, sans-serif`
- **Monospace**: `JetBrains Mono`, with fallbacks `ui-monospace, SFMono-Regular, Menlo, monospace`

### Hierarchy

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

| Token | Use |
|---|---|
| `display-hero` | 56px hero headline — billboard impact |
| `section-heading` | Feature section titles |
| `sub-heading` | Sub-sections, card group headings |
| `card-title` | Feature and metric cards |
| `body-large` | Hero subtitles, introductions |
| `body` | Standard reading text |
| `body-medium` | Emphasized labels, nav |
| `button-ui` | Buttons and links |
| `caption` | Metadata, tags |
| `mono-figure` | Transaction amounts, figures, aligned numbers |
| `micro-label` | Uppercase technical labels |

### Principles
- **Mono for money**: Figures and amounts render in JetBrains Mono — alignment and precision signal a finance product.
- **Tightened headlines**: Display sizes carry -1.6px tracking; tracking relaxes toward zero at body sizes.
- **Two weights for reading**: 400 (body) and 500 (UI/emphasis); 600 reserved for headings.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with a 4px micro step. The scale jumps from `{spacing.xl}` (24px) to `{spacing.2xl}` (40px) for section rhythm.

### Grid & Container
- Max content width: approximately 1200px
- Hero: centered single column with generous top padding
- Feature sections: 2–3 column card grids
- Tables and ledgers: full-width with `{colors.divider}` rules

### Whitespace Philosophy
- **Breathing dark**: Generous vertical spacing between sections (`{spacing.3xl}`–`{spacing.4xl}`).
- **Etched, not floating**: Separation comes from tone shifts and hairline borders, not shadows.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | `{colors.background}`, no border | Page background |
| Surface (Level 1) | `{colors.surface}` + 1px `{colors.border}` | Cards, panels |
| Nested (Level 2) | `{colors.surface-soft}` + 1px `{colors.border-soft}` | Panels within cards |
| Focus | 2px `{colors.primary}` ring | Keyboard focus, active inputs |

**Depth Philosophy**: Bronn builds depth through layered tone, not shadow. Each surface value is a measured step lighter than the one beneath it; borders appear only where adjacent surfaces share a value. No glassmorphism, no heavy drop shadows — the darkness does the work.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved, full-bleed |
| `xs` | 4px | Small inline elements |
| `sm` | 6px | Compact controls |
| `md` | 10px | Buttons, inputs |
| `lg` | 14px | Cards, panels |
| `xl` | 20px | Large feature containers |
| `pill` | 9999px | Badges, status pills |

## Components

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

### Buttons
- **`button-primary`** — Blue fill, white text, 10px radius. The default CTA ("Book a meeting").
- **`button-secondary`** — Surface fill with hairline border, ink text.

### Pills & Badges
- **`badge`** — Tinted blue surface, blue text, full pill.

### Cards
- **`card`** — Surface fill, hairline border, 14px radius.
- **`card-soft`** — Nested softer surface for panels within cards.

### Inputs
- **`input`** — Surface fill, hairline border. Focus swaps the border to `{colors.primary}`.

### Navigation
- **`nav-bar`** — Charcoal header with hairline bottom border. Inter 15px weight 500 links, blue pill CTA right.

### Distinctive Components
- **Stat / Figure tile** (`stat-figure`) — Renders amounts in JetBrains Mono for column alignment and numeric precision.

## Do's and Don'ts

### Do
- Build depth through layered surface values, not shadows
- Reserve `{colors.primary}` blue for CTAs, focus, and active states only
- Render figures and amounts in the monospace
- Use hairline `{colors.border}` to etch cards into the surface
- Keep status colors strictly semantic

### Don't
- Don't use pure black — `{colors.background}` is charcoal for a reason
- Don't add decorative color outside the blue accent and semantic statuses
- Don't reach for drop shadows or glassmorphism — tone layering is the system
- Don't render amounts in the proportional sans — use the mono
- Don't pill-round cards or buttons; pills are for badges only

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, tightened padding |
| Tablet | 600–1024px | 2-column grids begin |
| Desktop | 1024–1200px | Full card grids |
| Large | >1200px | Centered, max content width |

### Collapsing Strategy
- Hero: 56px → scales down, maintains negative tracking proportionally
- Navigation: horizontal links → hamburger menu
- Feature cards: 3-column → 2-column → single column
- Tables: maintain mono alignment, horizontal scroll on mobile
- Section spacing: 64px+ → 40px on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: Primary Blue `{colors.primary}`
- Background: Charcoal `{colors.background}`
- Card surface: `{colors.surface}` + 1px `{colors.border}`
- Heading text: Ink `{colors.ink}`
- Body text: Ink Secondary `{colors.ink-secondary}`
- Focus ring: Primary Blue `{colors.primary}`

### Example Component Prompts
- "Create a hero on charcoal `{colors.background}`. Headline 56px Inter weight 600, line-height 1.05, letter-spacing -1.6px, color `{colors.ink}`. Subtitle 18px weight 400, `{colors.ink-secondary}`. Blue CTA (`{colors.primary}`, 10px radius, 12px 20px padding) and secondary button (surface fill, 1px `{colors.border}`)."
- "Design a card: `{colors.surface}` background, 1px `{colors.border}`, 14px radius, 24px padding. Title 20px Inter weight 600, body 16px `{colors.ink-secondary}`. Any figure in JetBrains Mono `{typography.mono-figure}`."
- "Build a status badge: `{colors.badge-bg}` background, `{colors.badge-text}` text, pill radius, 4px 12px padding, 13px weight 500."

### Iteration Guide
1. Depth comes from layered surface values, never shadows
2. Blue is the only accent — everything else is charcoal-to-white or semantic status
3. Figures and amounts always render in the monospace
4. Hairline borders etch cards; focus swaps border to blue
5. Headlines tighten with negative tracking; body sits at zero

---

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