Levels — design system & UI screens

Consumer · 1 screen · 10 sections · levels.com

Opens with a near-black cinematic hero over a dim lifestyle photo, a serif headline "See how food affects your health," and an inline lime-green "Join our mailing list" email-capture card pinned top-right. The signature treatment is the alternating dark/cream editorial rhythm where large serif claims sit beside floating dark phone mockups showing glucose-curve dashboards, punctuated by a triptych of oversized testimonial portraits and a three-tier dark/cream pricing comparison ($15 / $41 / $167) at the page bottom.

Open in Mozaika →

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/levels.

Decoded design system

Levels's decoded design system: background #FFFFFF, text #131413, accent #9FC5BC, link #9FC5BC, primary #1D7D6C; type scale h1 102px / h2 56px / body 16px; 4px spacing base; 0px base radius. The single interactive/action color is #131413 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Role	Value
bg	`#FFFFFF`
surface	`#F0F0F0`
border	`#DBDBDB`
text	`#131413`
text_muted	`#6C6D6C`
primary	`#1D7D6C`
accent	`#9FC5BC`
link	`#9FC5BC`
secondary	`#2650CB`
button_bg	`#131413`
button_text	`#FFFFFF`

Using these colors

Action color #131413 — the single interactive color; only on things you click or must notice, never large fills.
accent, link are all #9FC5BC — one role, not several (the action color).
accent #9FC5BC — accent for emphasis — keep it rare on the page.
primary #1D7D6C — a brand color — but the call-to-action uses #131413, not this.
secondary #2650CB — optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.

Typography

Heading: TT Hoves
Body: TT Hoves
h1: 102px
h2: 56px
body: 16px

Spacing

base unit: 4px
scale: 6px, 8px, 10px, 12px, 14px, 16px, 20px, 24px, 32px, 40px

Radii

base: 0px
button: 8px

Shadows (elevation)

card: rgba(0, 0, 0, 0.2) 0px 0px 18px 0px

Motion

Micro-interactions run at 150ms (dominant) with cubic-bezier(0.4, 0, 0.2, 1).

durations: 150ms
easings: cubic-bezier(0.4, 0, 0.2, 1)
animated properties: color, background-color, border-color, outline-color

Native design tokens

Token	Value
`--background`	`#f5f7f7`
`--foreground`	`oklch(14.7% .004 49.25)`
`--card`	`oklch(100% 0 89.876/.8)`
`--card-foreground`	`oklch(14.7% .004 49.25)`
`--popover-foreground`	`oklch(14.7% .004 49.25)`
`--primary`	`oklch(51.5% .09 178.628)`
`--primary-foreground`	`oklch(98.5% .001 106.423)`
`--secondary`	`oklch(90% .043 181.821)`
`--secondary-foreground`	`oklch(31.5% .058 177.077)`
`--muted`	`oklch(97% .001 106.424)`

…and 110 more measured on the page.

Button states (measured)

primary focus: outline 1px solid rgb(222, 222, 222)

Layout (measured)

container max-width: 1280px
nav: 73px fixed, backdrop blur(8px)
common grid: 2 columns

Motion choreography (measured)

Load order: div.otFloatingRounded → button.inline-flex×4 → button.inline-flex×4 → button.inline-flex×4 → button.inline-flex×4 → button.inline-flex×4

Overlay recipe (measured)

dialog panel: rgba(0, 0, 0, 0) · radius 0px

Responsive (measured)

breakpoints: 426px · 550px · 640px · 896px
mobile (390px): hero 56px · nav hamburger

Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →

Screens

Metabolic health app landing with dark cinematic hero and three-tier system pricing