Hume — design system & UI screens
Warm cream hero with a flowing pink-to-orange line-wave graphic; open models, datasets and evaluation APIs for emotion in voice, above a research stats row.
This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/hume.
Decoded design system
Hume's decoded design system: background #FFF9F3, text #222222, accent #E8739E, link #E8739E, primary #E8739E; type scale h1 48px / body 16px; 8px spacing base; 0px base radius. The single interactive/action color is #FFFAF4 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.
Color roles
| Role | Value |
|---|---|
| bg | #FFF9F3 |
| surface | #F1ECE6 |
| border | #DDD8D3 |
| text | #222222 |
| text_muted | #757371 |
| primary | #E8739E |
| accent | #E8739E |
| link | #E8739E |
| button_bg | #FFFAF4 |
| button_text | #FFFFFF |
Using these colors
- Action color
#FFFAF4— the single interactive color; only on things you click or must notice, never large fills. primary,accent,linkare all#E8739E— one role, not several (the action color).- accent
#E8739E— accent for emphasis — keep it rare on the page.
Typography
- Heading: Fellix
- Body: Fellix
- Mono: PP Fraktion Mono
- h1: 48px
- body: 16px
Spacing
- base unit: 8px
- scale: 4px, 8px, 12px, 16px, 20px, 24px, 32px, 48px, 64px, 96px
Radii
- base: 0px
- button: 9999px
Motion
Micro-interactions run at 150ms (dominant) with cubic-bezier(0.4, 0, 0.2, 1).
- durations: 150ms · 200ms · 300ms
- easings:
cubic-bezier(0.4, 0, 0.2, 1)·cubic-bezier(0, 0, 0.2, 1) - animated properties: background-color, color, border-color, outline-color
Native design tokens
| Token | Value |
|---|---|
--background | #fff9f3 |
--foreground | #222 |
--accent-pink | #f7bbe6 |
--accent-magenta | #ea93f3 |
--accent-purple | #c094e4 |
--accent-blue | #7fb8ef |
--accent-sky | #9ddbfb |
--accent-mint | #85e4c5 |
--accent-green | #7bd289 |
--accent-lime | #c1d581 |
…and 84 more measured on the page.
Button states (measured)
- primary focus: outline
1px auto rgb(16, 16, 16)
Layout (measured)
- container max-width:
960px - nav: 64px fixed, backdrop
blur(0px) - common grid: 3 columns
Motion choreography (measured)
Scroll reveal: 14 elements rest at opacity 0, translateY(24px).
Input (measured)
height 48px · radius 3.35544e+07px · focus ring rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.999994 0.0000455678 0.0000200868 / 0.3) 0px 0px 0px 2px, rgba(0, 0, 0, 0) 0px 0px 0px 0px
Responsive (measured)
- breakpoints: 640px · 768px · 1024px · 1280px
- mobile (390px): hero 30px · nav hamburger
Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →