Hume AI

/ Hume AI — Inferred CSS Custom Properties / / Source: hume.ai (Next.js SSR) — tokens derived from visual analysis / / Confidence: medium — no public stylesheet extracted directly /

:root { / === Brand Colors === / --color-brand-orange: #f97316; / Primary CTA / accent (orange-500 equiv) / --color-brand-orange-hover: #ea6c08; / CTA hover state / --color-brand-amber: #fb923c; / Secondary warm accent /

/ === Background === / --color-bg-primary: #09090b; / Near-black / charcoal hero bg / --color-bg-secondary: #0f0f12; / Slightly lighter dark section bg / --color-bg-surface: #18181b; / Card / surface background / --color-bg-elevated: #27272a; / Elevated card / hover state / --color-bg-light: #ffffff; / Light mode / docs bg /

/ === Text === / --color-text-primary: #fafafa; / Primary text on dark bg / --color-text-secondary: #a1a1aa; / Muted / secondary text / --color-text-tertiary: #71717a; / Placeholder / disabled / --color-text-inverse: #09090b; / Text on light/orange bg / --color-text-accent: #f97316; / Accent / highlighted text /

/ === Borders === / --color-border-default: #27272a; / Subtle divider / card border / --color-border-muted: #3f3f46; / Slightly visible border / --color-border-accent: #f97316; / Accent border (active states) /

/ === Typography === / --font-family-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; --font-family-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

--font-size-xs: 0.75rem; / 12px / --font-size-sm: 0.875rem; / 14px / --font-size-base: 1rem; / 16px / --font-size-lg: 1.125rem; / 18px / --font-size-xl: 1.25rem; / 20px / --font-size-2xl: 1.5rem; / 24px / --font-size-3xl: 1.875rem; / 30px / --font-size-4xl: 2.25rem; / 36px / --font-size-5xl: 3rem; / 48px / --font-size-6xl: 3.75rem; / 60px /

--font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700;

--line-height-tight: 1.2; --line-height-snug: 1.375; --line-height-normal: 1.5; --line-height-relaxed: 1.625;

/ === Spacing === / --spacing-1: 0.25rem; / 4px / --spacing-2: 0.5rem; / 8px / --spacing-3: 0.75rem; / 12px / --spacing-4: 1rem; / 16px / --spacing-5: 1.25rem; / 20px / --spacing-6: 1.5rem; / 24px / --spacing-8: 2rem; / 32px / --spacing-10: 2.5rem; / 40px / --spacing-12: 3rem; / 48px / --spacing-16: 4rem; / 64px / --spacing-20: 5rem; / 80px / --spacing-24: 6rem; / 96px / --spacing-32: 8rem; / 128px /

/ === Border Radius === / --radius-none: 0; --radius-sm: 0.125rem; / 2px / --radius-md: 0.375rem; / 6px / --radius-lg: 0.5rem; / 8px / --radius-xl: 0.75rem; / 12px / --radius-2xl: 1rem; / 16px / --radius-full: 9999px; / pill / badge shape /

/ === Shadows === / --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -2px rgba(0, 0, 0, 0.4); --shadow-glow-orange: 0 0 20px rgba(249, 115, 22, 0.25); / CTA glow effect /

/ === Layout === / --container-max-width: 1200px; --container-padding-x: 1.5rem; / 24px / --section-padding-y: 5rem; / 80px / --nav-height: 64px; }

/ Light mode overrides (docs site / potential light variant) / @media (prefers-color-scheme: light) { :root { --color-bg-primary: #ffffff; --color-bg-secondary: #f4f4f5; --color-bg-surface: #fafafa; --color-bg-elevated: #e4e4e7; --color-text-primary: #09090b; --color-text-secondary: #52525b; --color-text-tertiary: #71717a; --color-border-default: #e4e4e7; --color-border-muted: #d4d4d8; } }

Hume AI — Design Token Reference

Color Tokens

Spacing Tokens

Typography Tokens

Border Radius Tokens

Shadow Tokens

Hume AI — Design System Notes

Framework \- Web framework: Next.js (App Router) — confirmed via \_next/static/ asset URL patterns \- UI library: React (inferred from Next.js usage and SDK references to React components) \- Docs platform: Fern () — separate design system for dev.hume.ai \- CSS approach: Likely Tailwind CSS (common with Next.js App Router pattern, spacing scale matches Tailwind defaults, class-based dark mode pattern) \- Styling confidence: Medium — no raw stylesheet was extractable from the SSR-rendered page

Theme Support \- Primary site (hume.ai): Dark-first design; light mode not explicitly confirmed for marketing site \- Docs site (dev.hume.ai): Light mode confirmed via meta-theme-color: #fff; Fern's own theming system applies \- Dark mode mechanism: Likely Tailwind's dark: class variant or Next.js class-based theming

Data Source Confidence \- Layout & hierarchy: High — extracted from full page HTML across 3 pages (home, about, kairos) \- Color values: Medium — derived from visual brand conventions and common Next.js/Tailwind palettes; not extracted from a stylesheet directly \- Font identification: Medium — Inter is the dominant choice for Next.js/Tailwind sites; not confirmed from a font-face declaration \- Spacing/radius values: Medium — inferred from Tailwind's default scale which aligns with observed component density

Notable Patterns \- Numbered product sections: "01 · Build", "02 · Simulate", "03 · Measure", "04 · Rate" — consistent editorial numbering system \- Category badge labels: Monospace, bracketed tags [ emotionally-intelligent ], [ expressive ], [ reliable ] — reusable label component \- Stat callouts: Large bold numerals with + suffix (50+, 48+, 600+) — used as social proof / data highlights \- Dual CTA pattern: Primary filled button ("Contact Research") + secondary link; consistent across all pages \- Announcement banner: Top-of-page "New" pill + text bar linking to product updates \- Leaderboard data tables: Score-by-model charts with named rows — suggests a custom chart/table component \- Footer pattern: Logo + tagline + social icon row + 4-column link grid + legal row — standard marketing footer \- Image optimization: All images served via Next.js /\_next/image with w=3840&q=75 params \- CMS: Directus (confirmed via directus.hume.ai image URLs on about page) for content management