Sleep Cycle Mobile — design system & UI screens
Sleep tracking and sleep quality monitoring app showing a night's sleep data. The screen displays sleep quality score (66%), total time in bed (8h 15m), and time asleep (7h 37m) with a prominent circular progress ring. A waveform graph charts sleep stages (Awake, Sleep, Deep sleep) across the night, with event annotations like "Sleep talking" marked inline. Day-of-week navigation appears at top, with an event timeline (snore detection) at the bottom.
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/sleep-cycle-mobile.
Decoded design system
Sleep Cycle Mobile's decoded design system: background #061620, text #FF7000, accent #174A5F, link #174A5F, primary #174A5F; type scale h1 34px / h2 22px / body 17px; 8px spacing base; 12px base radius. The single interactive/action color is #174A5F — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.
Color roles
| Role | Value |
|---|---|
| bg | #061620 |
| surface | #141B1E |
| border | #2B231B |
| text | #FF7000 |
| text_muted | #A04D0C |
| primary | #174A5F |
| accent | #174A5F |
| link | #174A5F |
| button_bg | #174A5F |
| button_text | #061620 |
Using these colors
- Action color
#174A5F— the single interactive color; only on things you click or must notice, never large fills. primary,accent,link,button_bgare all#174A5F— one role, not several (the action color).- accent
#174A5F— THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed.
Typography
- h1: 34px
- h2: 22px
- body: 17px
Spacing
- base unit: 8px
- scale: 3px, 6px, 10px, 12px, 14px, 15px, 16px, 20px, 24px, 32px
Radii
- base: 12px
- button: 12px
Shadows (elevation)
- card:
rgba(0, 0, 0, 0.1) 0px 8px 8px 0px - overlay:
rgba(0, 0, 0, 0.3) 0px 30px 70px 0px
Motion
Micro-interactions run at 300ms (dominant) with cubic-bezier(0.4, 0, 0.2, 1).
- durations: 300ms · 150ms · 280ms
- easings:
cubic-bezier(0.4, 0, 0.2, 1)·linear - animated properties: transform, color, opacity, text-decoration-color
Native design tokens
| Token | Value |
|---|---|
--background | #fff |
--foreground | #0a0a0a |
--card | #fff |
--card-foreground | #0a0a0a |
--popover | #fff |
--popover-foreground | #0a0a0a |
--primary | #171717 |
--primary-foreground | #fafafa |
--secondary | #f5f5f5 |
--secondary-foreground | #171717 |
…and 65 more measured on the page.
Button states (measured)
- primary focus: outline
2px solid rgb(238, 238, 238)
Layout (measured)
- container max-width:
1352px - nav: 80px relative
- common grid: 2 columns
Motion choreography (measured)
Load order: div.animate-ticker×4 → button.xl:min-w-[13.5rem] → span.index-module__jvG1Hq__sa×2 → button.index-module__jvG1Hq__gr
Stagger: span ×4 — 55ms apart.
Overlay recipe (measured)
dialog panel: #F2F2F2 · radius 0px · enter 150ms cubic-bezier(0.4, 0, 0.2, 1)
Themes
dark counterpart: background #2E2E2E, text #D6D6D6.
Responsive (measured)
- breakpoints: 512px · 600px · 768px · 800px · 1000px · 1200px
- mobile (390px): nav inline
Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →