# Hume Design System

> A warm, monochrome foundation anchored by geometric typography and punctuated by soft, atmospheric gradient meshes.

**Source:** https://hume.ai | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Hume operates on a warm, off-white canvas (`#fff9f3`) with stark, near-black charcoal (`#222222`) acting as the primary anchor for text and interactive elements. The UI is strictly monochrome, relying on pill-shaped geometries (`9999px`) for buttons and badges, and sharp edges (`0px`) for structural containers. Color is entirely relegated to atmospheric, decorative gradient meshes (mint, pink, orange, blue, purple) that sit behind content rather than within UI components. Typography pairs the geometric sans Fellix with PP Fraktion Mono for technical details.

## Signature DNA
1. **Warm Monochrome Foundation** (The core UI relies entirely on `#222222` against `#fff9f3` or `#ffffff`. No saturated colors are used for buttons, links, or text, establishing a stark, editorial rhythm across all pages.)
2. **Atmospheric Gradient Meshes** (Saturated colors like `#c094e4` and `#85e4c5` appear exclusively as blurred, decorative background elements, never as functional UI, observed on the About page.)
3. **Pill-and-Sharp Geometry** (The system contrasts extreme pill radii at `9999px` for compact cards and buttons against stark `0px` sharp edges for structural containers.)

## Family Map
Not applicable (no sub-brands exist in this topology).

## Colors

### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--foreground` | `#222222` | text, surface_bg, button_text, button_bg | 246 | 1.0 | `css_variable` |
| `--color-white` | `#ffffff` | surface_bg, text, button_text | 62 | 1.0 | `css_variable` |
| `--background` | `#fff9f3` | text, surface_bg | 13 | 1.0 | `css_variable` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--accent-purple` | `#c094e4` | surface_bg | 1 | 1.0 | `css_variable` *(decorative_only)* |
| `--accent-pink` | `#f7bbe6` | surface_bg | 1 | 1.0 | `css_variable` *(decorative_only)* |
| `--accent-orange` | `#ffb760` | surface_bg | 1 | 1.0 | `css_variable` *(decorative_only)* |
| `--accent-blue` | `#7fb8ef` | surface_bg | 1 | 1.0 | `css_variable` *(decorative_only)* |
| `--accent-mint` | `#85e4c5` | surface_bg | 1 | 1.0 | `css_variable` *(decorative_only)* |

### Semantic
Not captured in source.

## Typography

### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Fellix | 310, 400, 500, 510, 520, 700 | heading, body | Plus Jakarta Sans | Commercial |
| PP Fraktion Mono | 400, 700 | mono, body-sm | JetBrains Mono | Commercial |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `display-lg` | 60px | 60px | -1.5px | 520 | Hero headings | `h1.text-4xl.sm:text-5xl` |
| `display-md` | 48px | 48px | -1.2px | 520 | Secondary hero headings | `h1.font-title.text-3xl` |
| `heading-lg` | 30px | 36px | -0.75px | 520 | Section titles | `p.text-xl.sm:text-3xl` |
| `heading-md` | 24px | 32px | -0.6px | 520 | Sub-section titles | `h2.text-2xl.font-title` |
| `heading-sm` | 20px | 28px | -0.5px | 520 | Card titles | `div.text-xl.font-title` |
| `body-lg` | 18px | 28px | -0.45px | 520 | Lead paragraphs | `span.text-lg.font-title` |
| `body-md` | 16px | 24px | normal | 400 | Default body | `p.mt-6.text-base` |
| `body-sm` | 14px | 20px | normal | 400 | Small body, links | `p.text-center.text-sm` |
| `caption` | 12px | 16px | normal | 400 | Metadata | `span.text-xs.text-foreground/50` |

### Principles
- **Negative tracking on display:** Fellix uses tight letter-spacing (-1.5px at 60px, -1.2px at 48px) for a compact, solid heading presence.
- **Monospace for technicals:** PP Fraktion Mono is used for small interactive labels, links, and technical data.
- **Weight restraint:** Headings peak at 520 weight, avoiding ultra-bold extremes to maintain a clean, geometric aesthetic.

## Spacing
**Base unit:** 4px

| Token | Value | Occurrences |
|---|---|---|
| `spacing-1` | 4px | 15 |
| `spacing-2` | 8px | 26 |
| `spacing-3` | 12px | 23 |
| `spacing-4` | 16px | 62 |
| `spacing-6` | 24px | 12 |
| `spacing-7` | 28px | 5 |
| `spacing-8` | 32px | 7 |
| `spacing-12` | 48px | 3 |
| `spacing-16` | 64px | 4 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `sharp` | 0px | Structural containers, pricing table cells | 327 occurrences |
| `panel` | 24px | Large elevated cards | 7 occurrences |
| `pill` | 9999px | Buttons, badges, compact dark cards | 29 occurrences |

## Elevation
Not captured in source.

## Components

*(Note: Only one component met the strict requirement of appearing on >= 2 pages in the validated evidence array).*

### Tier 1: Foundational
Not captured in source across multiple pages.

### Tier 2: Patterns
#### Dark Card
**Role:** High-contrast container for featured content.
**Pages observed:** https://hume.ai, https://hume.ai/about
**Spec:** Background `#222222` / Text `#fff9f3` / Border `#fff9f3` (0px) / Radius `9999px` (pill) / Padding `12px 24px` / Typography `14px`
**States observed:** Default | Hover: not captured | Focus: not captured | Active: not captured | Disabled: not captured

### Tier 3: Surface-specific
Not captured in source across multiple pages.

## Layout
| Property | Value |
|---|---|
| Max-width | Not captured in source |
| Grid | Not captured in source |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| `sm` | Not captured | Typography scales down (e.g., `text-4xl.sm:text-5xl`) |

## Imagery & decoration
The brand uses soft, multi-color gradient meshes (mint, pink, orange, blue, purple) as background atmospheric decoration. It strictly avoids using these saturated colors in functional UI elements like buttons, borders, or text.

## Do's
- Do use `#222222` for all primary text and interactive elements to maintain the monochrome foundation.
- Do use `#fff9f3` as the default warm page background.
- Do apply `9999px` border-radius to compact cards and badges.
- Do use PP Fraktion Mono for technical or secondary metadata.
- Do restrict saturated colors to background atmospheric meshes.

## Don'ts
- **Wrong:** Using `#c094e4` as a button background. **Right:** Using `#222222` for buttons. **Reason:** Hume is a monochrome system; colors are decorative only.
- **Wrong:** Applying a 4px or 8px border radius to buttons. **Right:** Using `9999px` (pill) or `0px` (sharp). **Reason:** The system relies on the contrast between extreme pill shapes and sharp edges.
- **Wrong:** Using `--accent-blue` (`#7fb8ef`) as the primary brand color. **Right:** Using `--foreground` (`#222222`). **Reason:** The parent brand is strictly monochrome; saturated accents belong to specific contexts or sub-brands, not the parent primary.

## Similar brands
- Vercel (monochrome UI with decorative gradient accents)
- Linear (stark geometry, tight typography)
- Stripe (clean surfaces, though Stripe uses more color)

## Quick start

**CSS Variables:**
```css
:root {
  --foreground: #222222;
  --background: #fff9f3;
  --color-white: #ffffff;
  --accent-purple: #c094e4;
  --accent-pink: #f7bbe6;
  --accent-orange: #ffb760;
  --accent-blue: #7fb8ef;
  --accent-mint: #85e4c5;
}
```

**Tailwind v4 @theme:**
```css
@theme {
  --color-foreground: #222222;
  --color-background: #fff9f3;
  --color-white: #ffffff;
  --color-accent-purple: #c094e4;
  --color-accent-pink: #f7bbe6;
  --color-accent-orange: #ffb760;
  --color-accent-blue: #7fb8ef;
  --color-accent-mint: #85e4c5;
  --font-sans: "Fellix", sans-serif;
  --font-mono: "PP Fraktion Mono", monospace;
  --radius-sharp: 0px;
  --radius-panel: 24px;
  --radius-pill: 9999px;
}
```

## Agent prompt examples
- "Generate a hero section using a `#fff9f3` background, a 60px Fellix heading with -1.5px letter spacing, and a decorative gradient mesh behind the text."
- "Create a dark card component with a `#222222` background, `#fff9f3` text at 14px, `9999px` border radius, and 12px 24px padding."
- "Build a pricing table structure using `0px` border radius for the cells, `#ffffff` background, and `#222222` text."

## Known gaps
Shadows, elevation tokens, and layout max-widths were not captured in the source evidence. Interactive states (hover, focus) for components were also not captured.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://hume.ai | Desktop | 2026-06-06T05:01:21.909Z |
| Pricing | https://hume.ai/pricing | Desktop | 2026-06-06T05:01:21.909Z |
| About | https://hume.ai/about | Desktop | 2026-06-06T05:01:21.909Z |