---
title: "Hume AI design system"
variant: extended
source: https://www.hume.ai/
captured_at: 2026-10-12
theme: light
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/hume-ai)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Hume AI · Design System

> Human-centered voice AI, measured in vivid contrast

**Theme:** light · **Industry:** ai · **Source:** https://www.hume.ai/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Hume AI presents voice evaluation as a research-led, measurable discipline, pairing a restrained monochrome interface with expressive audio visualizations. Alternating dark and pale sections keep the product narrative clear while highlighting evidence, benchmarks, and evaluation tools.

## North star

Keep the interface monochrome and editorial; let precise data visualizations—not decorative UI—supply the color and complexity.

## Overview

The page is built around a strong black-and-white contrast: expansive black sections frame the hero, benchmark story, closing CTA, and footer, while Gallery White and cool pale gray carry most informational content. Bright multicolour gradients are used sparingly in announcement and media artwork; colourful dots and diagrams belong to visualizations, not the base interface. Fellix gives headlines and body copy a clean, humanist sans-serif voice. PP Fraktion Mono marks eyebrows and selected section headings, lending research and measurement content a technical register. Large, left-aligned headlines sit above concise explanations, with crisp square buttons and cards. A spacious, centered content area supports alternating full-width bands, split layouts, and compact metric rows. Fine neutral borders define product panels without shadows, keeping the interface flat and analytical while allowing audio waveforms, score bars, and charts to provide visual texture.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main canvas, light-section backgrounds, cards, and the filled primary CTA on dark sections. |
| Stage Black | `#000000` | `--color-stage-black` | brand | Hero and benchmark bands, closing CTA, footer, and dark navigation surfaces. |
| Mist Gray | `#f7f8fa` | `--color-mist-gray` | surface | Alternating pale feature, product, and research section backgrounds. |
| Slate Gray | `#5b6470` | `--color-slate-gray` | semantic | Muted explanatory copy and understated labels on light surfaces. |
| Near Ink | `#0a0a0a` | `--color-near-ink` | neutral | Headings, body text, links, and dark filled buttons on light surfaces. |
| Soft Silver | `#b2b2b2` | `--color-soft-silver` | neutral | Low-emphasis footer and secondary text. |
| Cloud Line | `#e6e8eb` | `--color-cloud-line` | semantic | Hairline borders and subtle card or panel separation. |
| Graphite Line | `#333333` | `--color-graphite-line` | neutral | Measured darker outlines around cards and interface examples. |
| Pale Steel | `#dadde2` | `--color-pale-steel` | neutral | Subtle outlines around badges, cards, and navigation details. |
| Quiet Gray | `#bfbfbf` | `--color-quiet-gray` | neutral | Occasional subdued text, not a primary interface color. |
| Mid Gray | `#999999` | `--color-mid-gray` | neutral | Minor secondary text and isolated interface labels. |
| Stone Gray | `#808080` | `--color-stone-gray` | neutral | Occasional muted text and footer details. |
| Signal Indigo | `#3452aa` | `--color-signal-indigo` | accent | One stop in the multicolour gradient used in artwork and visualizations. |
| Signal Mint | `#4ebc9c` | `--color-signal-mint` | accent | Gradient and visualization accent; not a broad UI fill. |
| Signal Violet | `#6e50aa` | `--color-signal-violet` | accent | Gradient and visualization accent, especially in expressive media. |
| Warm Sand | `#d29c7c` | `--color-warm-sand` | accent | Warm terminal hue in gradients and illustration-only accents. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f7f8fa` (Mist Gray) · `--color-surface-2` → `#000000` (Stage Black) · `--color-surface-3` → `#e6e8eb` (Cloud Line) · `--color-text` → `#0a0a0a` (Near Ink) · `--color-text-muted` → `#5b6470` (Slate Gray) · `--color-text-subtle` → `#b2b2b2` (Soft Silver) · `--color-border` → `#e6e8eb` (Cloud Line) · `--color-accent` → `#3452aa` (Signal Indigo) · `--color-accent-2` → `#4ebc9c` (Signal Mint) · `--color-accent-3` → `#6e50aa` (Signal Violet)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#0a0a0a` | `#ffffff` | 19.8:1 | AAA |
| `#0a0a0a` | `#f7f8fa` | 18.63:1 | AAA |
| `#0a0a0a` | `#000000` | 1.06:1 | fail |
| `#0a0a0a` | `#e6e8eb` | 16.13:1 | AAA |
| `#5b6470` | `#ffffff` | 6:1 | AA |
| `#5b6470` | `#f7f8fa` | 5.64:1 | AA |
| `#5b6470` | `#000000` | 3.5:1 | AA-large |
| `#5b6470` | `#e6e8eb` | 4.89:1 | AA |
| `#b2b2b2` | `#ffffff` | 2.12:1 | fail |
| `#b2b2b2` | `#f7f8fa` | 2:1 | fail |

### Gradients

- `linear-gradient(to right, rgb(0, 0, 0) 0%, oklab(0 0 0 / 0.7) 50%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(90deg, rgb(78, 188, 156), rgb(52, 82, 170), rgb(110, 80, 170), rgb(210, 156, 124))`
- `linear-gradient(rgba(138, 148, 166, 0.55), rgb(138, 148, 166) 25%, rgb(196, 201, 209) 75%, rgba(196, 201, 209, 0.55))`
- `linear-gradient(rgba(10, 10, 10, 0.55), rgb(10, 10, 10) 25%, rgb(91, 100, 112) 75%, rgba(91, 100, 112, 0.55))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Fellix | `--font-body` | webfont | 400, 500, 600 | Display and body sans-serif for navigation, headlines, copy, buttons, and links. | Inter |
| PP Fraktion Mono | `--font-mono` | webfont | 400, 500 | Monospaced eyebrow labels and technical or research-style section headings. | IBM Plex Mono |

- **Fellix:** Use mostly regular weights; reserve medium and semibold for controls or short labels. Headline tracking is tight.
- **PP Fraktion Mono:** Use uppercase, lightly expanded tracking, and restrained weights for compact technical labels.

### Type scale — Golden Ratio (ratio ≈ 1.587, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 400 | 1 | -0.05em | — | Fellix | Oversized hero and closing CTA headline. |
| h1 | 48px | 400 | 1.25 | -0.025em | — | Fellix | Primary section and page headlines. |
| h2 | 36px | 400 | 1 | -0.05em | — | PP Fraktion Mono | Technical section headings and research-led feature titles. |
| body | 18px | 400 | 1.63 | 0 | — | Fellix | Explanatory paragraphs and product descriptions. |
| caption | 16px | 400 | 1.63 | 0 | — | Fellix | Supporting notes, card copy, and small descriptions. |
| button | 14px | 500 | 1.43 | 0 | — | Fellix | Compact CTA labels. |
| nav | 14px | 400 | 1.43 | 0 | — | Fellix | Top navigation labels. |
| link | 14px | 500 | 1.43 | 0 | — | Fellix | Text links and product exploration actions. |
| eyebrow | 12px | 500 | 1.33 | 0.1em | uppercase | PP Fraktion Mono | Uppercase section and category labels. |
| code | 12px | 500 | 1.33 | 0.1em | uppercase | PP Fraktion Mono | Compact technical labels and measurement-style annotations. |

OpenType features in use: `"calt" 0, "liga" 0`.

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 1, 4, 6, 8, 10, 12, 16, 20, 24, 28, 32, 36, 40, 144 px.
- Section rhythm 144px · element gap 1px · card padding 20px · max content width 1216px.

Use a centered content frame with a measured maximum width of 1216px, while letting major color bands run full bleed. The homepage alternates black, pale gray, and white sections to establish a clear reading rhythm. Most content is left aligned, with feature areas arranged as split panels or multi-column cards and metrics distributed in a horizontal row. Keep density spacious: broad section breaks, compact controls, and generous breathing room around headlines. Maintain crisp alignment across headings, body copy, panels, and CTAs.

## Shape & elevation

- Radius: badge `9999px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is predominantly flat, with no measured shadow system. Use thin, neutral outlines to separate panels and card groups, and rely on alternating section backgrounds rather than floating layers. Square-corner buttons and cards reinforce the direct, research-oriented presentation; reserve rounded styling for compact pill-like badges.

## Imagery

The hero uses a dark, abstract field of glowing colored dots that suggests voice data rather than literal product photography. Across the page, product imagery is mostly interface diagrams: waveforms, score bars, sample cards, and benchmark tables. Keep these graphics clean and contained within panels; reserve vibrant gradients and colors for visualizations, avoiding unrelated stock photography.

## Components

### Announcement strip

A narrow top message with a white NOW LIVE badge, concise update copy, and a linked action, backed by a multicolour gradient.

### Primary CTA

Square-corner button with compact Fellix medium text; white with black text on dark sections, or near-black with white text on light sections.

### Benchmark panel

Dark bordered data table with model rows, evaluation dimensions, and horizontal score bars.

### Feature card

Flat white or pale-gray card with a thin #e6e8eb outline, concise title, explanatory copy, and a small interface visualization.

### Metric row

Four aligned evidence metrics on white, each pairing a prominent figure with a short muted caption.

### Technical badge

Uppercase PP Fraktion Mono label with expanded tracking, muted text, and a subtle outlined or pill-shaped treatment.

### Footer columns

Black footer with a newsletter field, grouped link lists, subdued separators, and low-contrast utility links.

### Measured component styles

- **Primary button** (“Evaluate your system”): background #ffffff · text #000000 · radius 0px · padding 0px 20px · 500 14px Fellix
- **Secondary button** (“View benchmarks”): transparent background · text #ffffff · border 1px solid #666666 · radius 0px · padding 0px 20px · 500 14px Fellix
- **Link** (“Explore model development evaluation”): transparent background · text #0a0a0a · radius 0px · padding 0px 0px 2px 0px · 500 14px Fellix
- **Input**: transparent background · text #ffffff · border 1px solid #666666 · radius 0px · padding 0px 16px · 400 14px Fellix
- **Card** (“TTS BASELINE 0.62 CANDIDATE 0.81”): background #ffffff · text #0a0a0a · radius 0px · padding 20px · 400 16px Fellix
- **Badge** (“NOW LIVE”): background #ffffff · text #000000 · radius 0px · padding 4px 8px · 600 12px Fellix · uppercase
- **Navigation item** (“Emotion Science Products Solutions Bench”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px Fellix

## Do

- Alternate full-width dark and pale section bands.
- Use Fellix for readable headlines, copy, and controls.
- Reserve PP Fraktion Mono for technical labels and eyebrows.
- Keep cards flat and outline them with measured neutral colors.
- Use vivid gradients only in announcement or data artwork.
- Show product capability through waveforms, tables, and score bars.

## Don't

- Do not add drop shadows or decorative elevation.
- Do not turn the interface into a colorful dashboard.
- Do not round standard buttons and feature cards.
- Do not use gradients as broad section backgrounds.
- Do not add stock photography or unrelated illustrations.
- Do not crowd the spacious section rhythm with excess copy.

## Agent prompt

Build a new page in Hume AI’s measured visual style. Use Stage Black (#000000), Gallery White (#ffffff), and Mist Gray (#f7f8fa) as alternating full-width section surfaces; set primary text in Near Ink (#0a0a0a) or white according to contrast. Use Fellix or Inter for headlines, copy, and controls, with PP Fraktion Mono or IBM Plex Mono for uppercase technical eyebrows. Keep a centered content frame, spacious section rhythm, left-aligned editorial headings, and crisp square buttons. Outline product panels with Cloud Line (#e6e8eb) instead of shadows. Make the visual content feel voice-native through waveforms, evaluation tables, score bars, and compact metrics. Keep colorful accents—Signal Mint (#4ebc9c), Signal Indigo (#3452aa), and Signal Violet (#6e50aa)—inside data visuals or restrained gradient artwork, not as large interface fills.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed black hero beneath the header; left-aligned headline, copy, and paired CTAs over dark abstract media. | Primary and secondary CTA, Direct value proposition | Black canvas, White headline, Colored data-like dots, Square buttons |
| 2 | feature-split | Pale gray band with an evaluation visualization beside a left-aligned text block and short question list. | Explain evaluation scope, Use illustrative metrics | Pale gray surface, Voice-analysis diagram, Muted text, Hairline divider |
| 3 | stats | White horizontal strip divided into four evenly aligned metric columns. | Scan proof points, Quantify credibility | Large figures, Muted captions, Fine top rules, White surface |
| 4 | product-showcase | Pale gray feature section with heading, short introduction, tabs, and a wide bordered interface panel. | Switch evaluation steps, Explore platform CTA | Product interface preview, Tabs, Thin panel outline, Dark CTA |
| 5 | comparison | Black section with introductory text above a wide two-part benchmark panel and compact actions. | Compare model results, View leaderboard, Read methodology | Black surface, Dark bordered table, Horizontal score bars, White CTA |
| 6 | feature-grid | Pale gray section with heading followed by two large bordered side-by-side panels, each containing category examples. | Choose model or agent path, Explore workflow | Two-column cards, Compact category comparisons, Near-black text, Thin borders |
| 7 | feature-grid | White section with heading, brief introduction, three horizontally arranged product cards, and a dark CTA. | Explore infrastructure, Scan capability cards | Three-column cards, Audio and data diagrams, Pale card surfaces, Dark CTA |
| 8 | content-feed | Pale gray section with a left-aligned heading and three research or resource cards in a row. | Open benchmark overview, Read technical report, Explore research | Three-column resource cards, Small chart previews, Muted captions, Light backgrounds |
| 9 | cta | Full-width black CTA band with centered headline, supporting copy, paired buttons, and restrained gradient artwork. | Contact CTA, Return to benchmark | Centered white type, Dark background, Colorful lower-band artwork, Paired buttons |
| 10 | footer | Black multi-column footer with newsletter row, grouped navigation links, and a narrow legal and social bar. | Subscribe to research updates, Navigate product categories, Open social links | Black canvas, Outlined email field, Multiple link columns, Subdued separators |

## Source CSS custom properties (selected)

```css
--background: #fff;
--foreground: #0a0a0a;
--font-sans: "Fellix",system-ui,sans-serif;
--font-mono: "PP Fraktion Mono",ui-monospace,monospace;
--font-japanese: "M PLUS 1",sans-serif;
--accent-pink: #f7bbe6;
--accent-magenta: #ea93f3;
--accent-purple: #c094e4;
--accent-blue: #7fb8ef;
--accent-sky: #9ddbfb;
--accent-mint: #85e4c5;
--accent-green: #7bd289;
--accent-lime: #c1d581;
--accent-orange: #ffb760;
--accent-coral: #f89d6b;
--accent-salmon: #ff8d87;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/hume-ai