Design Tokens
Source of truth synced from Figma. Edit source/*.json then run pnpm tokens:generate
Primary
Neutrals for backgrounds and text
Accent
Brand accent colors
Coral and Lagoon are the only colors used in marketing surfaces.
Product UI / Status palette
Available in product UI for status and data-viz. Do NOT use in marketing surfaces.
Semantic
UI intent mappings (light/dark adaptive)
Core
Actions & State
Tokens in Action
How semantic colors apply to components
primary
Main brand
secondary
Alternative
accent
Highlights
muted
Backgrounds
Secondary text
destructive
Errors
Buttons
Badges
Inputs
background
Default
muted
Secondary
dark
Contrast
backdrop-blur
Typography
Everyday Sans primary, Rhymes Display decorative
Primary — Everyday Sans
Better Air. Everyday.
Display — Rhymes Display
Healthy life at home.
Mono — System
0123456789 — const air = true;
Size Scale
Wordmark
Weight & rhythm
Two weights. Three colors. That’s the rhythm.
With Everyday Sans, almost everything is regular or medium. Hierarchy comes from color and size first, weight second.
Weights
Color rhythm
In context
Safety
Know what you breathe
Safety means knowing when something invisible might be harmful. We monitor key toxins like carbon monoxide and formaldehyde to detect threats early — providing peace of mind.
Freshness
Air that moves freely
Freshness is about how air moves and renews itself. By tracking CO₂ levels, air exchange rates, and thermal layering, we help users understand how well-ventilated their environment is.
Cleanliness
Clarity you can feel
We interpret cleanliness not just as the absence of dust, but as a feeling of clarity and calm. By measuring key air quality indicators we translate invisible data into intuitive insights.
Spacing
Base scale for gaps and padding
Border Radius
Rounded corners for UI elements
Effects
Blur, shadow, and opacity values
Blur
Shadow
Opacity
Better Air. Everyday.