.webp)
Hume AI
Hume AI — Design System Overview
Source & Stack
\- Site:
Typography \- Clean, modern sans-serif system — likely Inter or a geometric sans (common Next.js default) \- Hierarchy: large hero display headings (H1 ~4–5rem), section H2 (~2–2.5rem), H3 card titles (~1.25rem) \- Body text is compact and readable (~1rem / 16px base) \- Numbered labels ("01 ·", "02 ·") used as stylistic section markers \- Italic used sparingly for captions and emphasis \- Monospace tags used for category labels: [ emotionally-intelligent ], [ reliable ]
Color Philosophy \- Dark-first aesthetic: deep navy/charcoal background with white text for hero and marketing sections \- Accent: orange/amber used for CTAs ("Contact Research" buttons, announcement banners) \- Neutral grays for body text, dividers, and secondary content \- Docs site uses a light theme (#fff base, confirmed via meta-theme-color) \- Subtle gradient or textured backgrounds implied by the brand's emotional/scientific positioning
Spacing \- Generous section padding (~80–120px vertical) typical of Next.js marketing sites \- Card grids with moderate gaps (~24–32px) \- Tight internal padding on tags/labels (~4px 12px)
Component Defaults \- Pill/badge labels for content categories (bordered, monospace font) \- Numbered cards for product sections (01–04 pattern) \- Stat callouts with large numerals (50+, 48+, 600+) \- CTA buttons: primary filled (orange/amber), secondary outlined or ghost \- Footer: multi-column link grid with social icons \- Nav: horizontal top bar with dropdown menus, right-aligned CTA + login
Layout \- Max content width ~1200px, centered \- Single-column hero, transitioning to 2–4 column grids for features/products \- Leaderboard section uses data table / chart patterns \- Mobile-responsive with hamburger menu ("Open menu" text present in source)
/ 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
| Token | Value | Usage |
|---|---|---|
| --color-brand-orange | #f97316 | Primary CTA buttons, key accent |
| --color-brand-orange-hover | #ea6c08 | Button hover state |
| --color-brand-amber | #fb923c | Secondary warm accent |
| --color-bg-primary | #09090b | Page / hero background |
| --color-bg-secondary | #0f0f12 | Alternate section bg |
| --color-bg-surface | #18181b | Card backgrounds |
| --color-bg-elevated | #27272a | Elevated / hover cards |
| --color-text-primary | #fafafa | Main body text (dark mode) |
| --color-text-secondary | #a1a1aa | Muted / supporting text |
| --color-text-tertiary | #71717a | Disabled / placeholder |
| --color-border-default | #27272a | Card and section dividers |
| --color-border-muted | #3f3f46 | Slightly visible borders |
Spacing Tokens
| Token | rem | px | Usage |
|---|---|---|---|
| --spacing-1 | 0.25rem | 4px | Micro gaps, icon padding |
| --spacing-2 | 0.5rem | 8px | Badge internal padding |
| --spacing-3 | 0.75rem | 12px | Tag / pill padding |
| --spacing-4 | 1rem | 16px | Base component spacing |
| --spacing-6 | 1.5rem | 24px | Card internal padding |
| --spacing-8 | 2rem | 32px | Grid gap |
| --spacing-12 | 3rem | 48px | Section sub-gaps |
| --spacing-16 | 4rem | 64px | Large section spacing |
| --spacing-20 | 5rem | 80px | Section vertical padding |
| --spacing-24 | 6rem | 96px | Hero vertical padding |
Typography Tokens
| Token | Value | Usage |
|---|---|---|
| --font-family-sans | Inter, system-ui | All UI text |
| --font-family-mono | JetBrains Mono / Fira Code | Code labels, category tags |
| --font-size-base | 1rem / 16px | Body copy |
| --font-size-sm | 0.875rem / 14px | Captions, metadata |
| --font-size-xl | 1.25rem / 20px | Card headings |
| --font-size-3xl | 1.875rem / 30px | Section headings |
| --font-size-5xl | 3rem / 48px | Page headings |
| --font-size-6xl | 3.75rem / 60px | Hero display |
| --font-weight-medium | 500 | UI labels |
| --font-weight-semibold | 600 | Card titles |
| --font-weight-bold | 700 | Hero headlines |
| --line-height-tight | 1.2 | Display / hero text |
| --line-height-normal | 1.5 | Body paragraphs |
Border Radius Tokens
| Token | Value | Usage |
|---|---|---|
| --radius-sm | 0.125rem / 2px | Subtle rounding |
| --radius-md | 0.375rem / 6px | Input fields |
| --radius-lg | 0.5rem / 8px | Cards |
| --radius-xl | 0.75rem / 12px | Feature blocks |
| --radius-2xl | 1rem / 16px | Modals, large cards |
| --radius-full | 9999px | Pill badges, tags, category labels |
Shadow Tokens
| Token | Value | Usage |
|---|---|---|
| --shadow-sm | 0 1px 2px rgba(0,0,0,0.4) | Subtle elevation |
| --shadow-md | 0 4px 6px rgba(0,0,0,0.5) | Cards |
| --shadow-lg | 0 10px 15px rgba(0,0,0,0.6) | Modals, overlays |
| --shadow-glow-orange | 0 0 20px rgba(249,115,22,0.25) | CTA button glow |
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 (
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
Biggest SaaS library.
.webp)
.webp)
Desktop & mobile versions.
Access the Figma files.
Advanced filtering.
Let it flow.
Save design inspirations.
research
How do you process payment?
SaaSFrame subscriptions are sold on Lemon Squeezy, a secured online selling platform for creators.
What about future updates and versions?
SaaSFrame gets updated all the time! Every new update and version will immediately be made available to all SaaSFrame users.
Can you send me an invoice?
You can generate an invoice on your Lemon Squeezy portal once you purchased SaaSFrame. You will find the link in the order confirmation email.
How can I cancel my membership subscription?
You can cancel your membership subscription at any moment on your profile page.
Can I get a refund?
If you're not satisfied, you can ask for a refund within 7 days. Just send me an email at antoine[at]unmake[dot]io
I have another question.
You can send me an email at antoine[at]unmake[dot]io, I'll be happy to help with any questions.