A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
24tokens
11type steps
2radius steps
8pxspacing base
Sleep Cycle, in one page
Sleep Cycle is a bedside app, and every design decision flows from that single fact: the screen is the last thing you look at before sleeping and the first thing you see at dawn. The entire UI is wrapped in a calm indigo→night gradient — a vertical sweep from #2A2D5A at the top through #3B4371 mid, settling into a deep #14152E canvas at the bottom. There is no pure black and no bright white field anywhere in the core experience; the screen *glows softly* rather than glaring, so it never jolts a half-asleep user at 3am. The aesthetic is "night sky from inside a dark bedroom" — deep, low-glare, quietly luminous.
The signature screen is the sleep-analysis graph: a full-width hypnogram that plots the night as a soft cyan wave riding over color-coded sleep stages (Awake, Light, Deep, REM). The wave is the brand. It is smooth, organic, and slightly glowing — drawn with a 2.5pt aqua stroke (#7FE3F0) over an indigo gradient fill that fades to nothing at the baseline. Around it sits the sleep-quality ring (a circular progress arc with a big numeric score 0–100), the time-asleep hero stat, and the smart-alarm card showing the wake window. These four elements — wave, ring, hero stat, alarm — define a Sleep Cycle screen.
The accent strategy is deliberate restraint. Against the tranquil indigo field there is exactly one bright color: Aqua (#4FD1E6 / soft #7FE3F0). It marks the active sleep wave, the primary score ring, and the active tab — nothing else competes with it. Sleep stages get their own muted-but-distinct hues (Deep #3D4ABF, Light #6C7BFF, REM #4FD1E6, Awake/Rose #FF8FB1). A warm Gold (#FFC56B) appears only as tiny "star" accents and streak badges. The primary button is an indigo→deep-sleep gradient (#6C7BFF → #3D4ABF) with a soft glow shadow.
Typography is Nunito — a rounded humanist sans whose soft terminals feel gentle and unclinical, the opposite of a hard data dashboard. Numbers are heavy (800–900 weight) because the sleep score, hours slept, and alarm time are the emotional payload of the app; supporting copy is light (400) and secondary in a muted lavender (#A6A9D4). The hierarchy is stat-led: a huge hero number, a section label above it, soft metadata below.
Key Characteristics:
- Indigo→night gradient shell (
#2A2D5A → #3B4371 → #14152E) — dark-first, never pure black, soft glow not glare - Signature sleep-analysis graph — a smooth glowing cyan hypnogram wave over color-coded stages
- Sleep-quality ring — circular arc with a big 0–100 numeric score, single aqua accent
- Time-asleep hero stat — the emotional headline (e.g. "7h 36m"), heaviest type on screen
- Smart-alarm card — shows the wake window; "wakes you in your lightest sleep"
- One bright accent only — Aqua
#4FD1E6; everything else is muted indigo/lavender - Sleep-stage color system — Deep
#3D4ABF, Light#6C7BFF, REM#4FD1E6, Awake#FF8FB1 - Rounded soft cards (16–20pt radius) floating on the gradient with low-opacity shadows
- Nunito rounded sans — heavy numerals, light body, gentle and unclinical
- Auto-dimming — brightness drops further during an active tracking session
- Minimal chrome — 5-tab bottom bar (Sleep / Journal / Alarm / Sounds / Profile), no top nav clutter
Do's and don'ts
Do
- Wrap the app in the indigo→night gradient (
#2A2D5A → #3B4371 → #14152E) — dark-first always - Use a deep indigo canvas
#14152E— NEVER pure black#000000 - Make the sleep-analysis graph the hero — a smooth glowing aqua wave over color-coded stages
- Keep exactly one bright accent: Aqua
#4FD1E6— on the wave, the score ring, the active tab - Make hero numbers huge and heavy (Nunito 800–900) — the score and hours are the emotional payload
- Use the sleep-stage color system consistently (Deep
#3D4ABF, Light#6C7BFF, REM#4FD1E6, Awake#FF8FB1) - Float soft rounded cards (16–20pt radius) over the gradient with low, soft shadows
- Give the primary button a colored indigo glow (
rgba(108,123,255,0.35)), not a gray drop shadow - Use muted lavender
#A6A9D4for all secondary copy — quiet, not loud - Auto-dim brightness during an active tracking session
- Keep Nunito's rounded warmth — it's chosen because it feels caring, not clinical
Don't
- Don't use pure black or pure white as the field — the screen must glow softly, never glare at night
- Don't introduce a second bright accent — aqua is alone for a reason; extra brights break the calm
- Don't use a hard-edged geometric/grotesque font — it makes sleep data feel clinical
- Don't draw the hypnogram as hard bars or steps — it's a smooth organic bezier wave
- Don't crowd the graph — it's the focus; give it space, never wrap dense tables around it
- Don't use harsh black drop shadows — soft, large-blur, low-spread only
- Don't color the sleep score ring a single fixed hue — it's score-banded (rose / indigo / aqua)
- Don't make body text bold by default — body is 400; only numbers are heavy
- Don't add bright modal flashes or aggressive transitions — motion is slow, calming, 200–900ms ease-out
- Don't use Material-style tint pills on the tab bar — active state is a color change only
- Don't put a heavy opaque nav bar on the main screen — the title lives in the scroll content
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Sleep Cycle design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Accent Indigo: #6c7bff
- Accent Pressed: #5563e6
- Deep Sleep Indigo: #3d4abf
- Aqua: #4fd1e6
- Aqua Soft: #7fe3f0
- Night Top: #2a2d5a
- Night Mid: #3b4371
- Canvas Deep: #14152e
- Surface 1: #1e2046
- Surface 2: #292c58
Type:
- families: Nunito, Fallback Stack, Numerals, Dynamic Type
- scale: 9, 10, 11, 12, 14, 15, 16, 18, 22
- weights: 400, 600, 700, 800, 900
Shape:
- radius: 14, 20
- elevation: Shadow: `rgba(108,123,255,0.35) 0 8px 20px` (soft indigo glow) | Shadow: `rgba(0,0,0,0.35) 0 8px 24px` — soft, low, never harsh | Thumb: `#F2F3FB`, 50% radius, soft shadow
Spacing: 8, 11, 13, 15, 16
Rules:
- Wrap the app in the indigo→night gradient (`#2A2D5A → #3B4371 → #14152E`) — dark-first always
- Use a deep indigo canvas `#14152E` — NEVER pure black `#000000`
- Make the sleep-analysis graph the hero — a smooth glowing aqua wave over color-coded stages
- Keep exactly one bright accent: Aqua `#4FD1E6` — on the wave, the score ring, the active tab
- Make hero numbers huge and heavy (Nunito 800–900) — the score and hours are the emotional payload
- Use the sleep-stage color system consistently (Deep `#3D4ABF`, Light `#6C7BFF`, REM `#4FD1E6`, Awake `#FF8FB1`)
Avoid:
- Don't use pure black or pure white as the field — the screen must glow softly, never glare at night
- Don't introduce a second bright accent — aqua is alone for a reason; extra brights break the calm
- Don't use a hard-edged geometric/grotesque font — it makes sleep data feel clinical
- Don't draw the hypnogram as hard bars or steps — it's a smooth organic bezier wave
- Don't crowd the graph — it's the focus; give it space, never wrap dense tables around it
- Don't use harsh black drop shadows — soft, large-blur, low-spread only
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary (Interactive)
- Accent Indigo (
#6C7BFF): Primary button gradient start, active controls, light-sleep stage. - Accent Pressed (
#5563E6): Pressed state for primary actions. - Deep Sleep Indigo (
#3D4ABF): Primary button gradient end, deep-sleep stage fill, icon tile gradients. - Aqua (
#4FD1E6): THE accent — active sleep wave node, primary score ring, active tab, links. - Aqua Soft (
#7FE3F0): The sleep-wave stroke itself (slightly brighter than fill for the glow).
Canvas & Surfaces (Dark — default)
- Night Top (
#2A2D5A): Top of the screen gradient. - Night Mid (
#3B4371): Mid gradient stop (the brand-anchor pair). - Canvas Deep (
#14152E): Bottom of gradient / scroll background — never#000000. - Surface 1 (
#1E2046): Card backgrounds (graph card, alarm card, list rows). - Surface 2 (
#292C58): Raised chips, segmented controls, ring track. - Divider (
#353974): Hairline borders and separators.
Canvas & Surfaces (Light — Dawn)
- Dawn Canvas (
#F4F5FC): Pale lavender-white light background. - Dawn Surface (
#FFFFFF): Cards in light mode. - Dawn Divider (
#E3E5F2): Hairlines in light mode.
Text
- Text Primary Dark (
#F2F3FB): Headlines, stat numbers on dark. - Text Secondary Dark (
#A6A9D4): Muted lavender — metadata, body, captions on dark. - Text Tertiary Dark (
#6C70A8): Axis labels, disabled, very low emphasis. - Text Primary Light (
#1B1D3A): Primary text on Dawn light. - Text Secondary Light (
#6C70A8): Secondary text on Dawn light.
Sleep Stage Colors (semantic — used on hypnogram, legend, chips, both modes)
| Stage | Color | Role |
|---|---|---|
| Awake | #FF8FB1 | Brief wake events at the top of the graph |
| Light Sleep | #6C7BFF | The most common band — same as Accent Indigo |
| Deep Sleep | #3D4ABF | Slow-wave troughs at the bottom |
| REM | #4FD1E6 | Dream sleep — same as Aqua accent |
| In Bed (idle) | #6C70A8 | Time in bed not yet asleep |
Semantic
- Success (
#4FD1A0): Goal met, streak continued, good-night badge. - Error (
#FF6B81): Permission errors, missing-data state. - Gold (
#FFC56B): Star accents, streak flames, premium badges (sparingly). - Score Low (
#FF8FB1): Sleep-quality ring when score < 50. - Score Mid (
#6C7BFF): Sleep-quality ring 50–74. - Score High (
#4FD1E6): Sleep-quality ring 75–100.
Type scaleRead the full spec
Font Family
- Primary:
Nunito(by Vernon Adams / Jacques Le Bailly, Google Fonts, SIL OFL) — a well-balanced rounded humanist sans. Its soft, rounded terminals make data feel gentle and human rather than clinical, which suits a wellness/sleep context. - Fallback Stack:
-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif - Numerals: Use Nunito at 800–900 weight for all hero numbers (sleep score, hours slept, alarm time). Tabular figures preferred for time displays so digits don't jitter.
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Screen Title | Nunito | 32pt | 900 | 1.15 | -0.4pt | "Last night", "Statistics" |
| Hero Stat | Nunito | 34pt | 900 | 1.1 | -0.5pt | Sleep score / hours slept / alarm time |
| Section Title | Nunito | 22pt | 800 | 1.25 | -0.2pt | "Sleep stages", "Trends" |
| Card Title | Nunito | 18pt | 700 | 1.3 | -0.1pt | "Smart alarm", "Sleep aid" |
| Body | Nunito | 16pt | 400 | 1.5 | 0pt | Explanatory paragraph copy |
| List Item | Nunito | 15pt | 600 | 1.4 | 0pt | "Time to fall asleep · 31m" |
| Meta | Nunito | 14pt | 400 | 1.4 | 0pt | Date ranges, timestamps |
| Eyebrow | Nunito | 12pt | 700 | 1.0 | 1.4pt | "SLEEP ANALYSIS" — uppercase, tracked, aqua |
| Button | Nunito | 16pt | 800 | 1.0 | 0.2pt | Primary CTA label |
| Pill / Tag | Nunito | 11pt | 800 | 1.0 | 0.2pt | "Good night", stage chips |
| Axis Label | Nunito | 9pt | 700 | 1.0 | 0pt | Graph x/y tick labels (tertiary) |
| Tab Label | Nunito | 10pt | 700 | 1.0 | 0.1pt | Bottom tab labels |
Principles
- Stat-led hierarchy: the biggest, heaviest thing on screen is always the emotional number (score, hours, wake time) — not a title bar.
- Heavy numbers, light prose: numerals at 800–900; explanatory body at 400 in muted lavender. The contrast is the point.
- Rounded warmth over precision: Nunito's soft terminals are chosen *because* they read as caring, not clinical. Don't substitute a geometric grotesque.
- Eyebrows are aqua and tracked: the small uppercase label above a title is the one place tracking and the aqua accent appear in type.
- Dynamic Type: titles, hero stats, body, list items scale; axis labels, tab labels, pill text stay fixed (layout-sensitive).
Components and layoutRead the full spec
Buttons
Primary Button (Start Session / Save Alarm)
- Shape: Rounded rectangle, 16pt corner radius
- Background: linear gradient
#6C7BFF → #3D4ABF(135°) - Text:
#FFFFFF, Nunito 16pt weight 800 - Padding: 15pt vertical, 30pt horizontal
- Shadow:
rgba(108,123,255,0.35) 0 8px 20px(soft indigo glow) - Pressed: solid
#5563E6+ scale 0.98 - Disabled:
#292C58fill,#6C70A8text
Secondary / Outline Button
- Background: transparent
- Text:
#F2F3FB, Nunito 14pt weight 700 - Border: 1.5pt
#353974 - Padding: 13pt vertical, 22pt horizontal
- Corner radius: 14pt
- Pressed: background
#1E2046
Pill / Segment Button (This week / Month)
- Background:
#292C58 - Text:
#4FD1E6(active) /#A6A9D4(inactive), Nunito 14pt weight 700 - Border: 1pt
#353974 - Corner radius: 999pt (full pill)
- Padding: 11pt vertical, 20pt horizontal
Text Button (View full night)
- Font: Nunito 14pt weight 700
- Color:
#4FD1E6 - No underline, no background
- Pressed: opacity 0.6
Core Atoms
Sleep-Quality Ring
- Circular SVG, 92pt default (also 80pt compact)
- Track: 9pt stroke
#292C58 - Progress arc: 9pt stroke,
stroke-linecap: round, starts at -90° (top) - Arc color is score-banded:
#FF8FB1(<50),#6C7BFF(50–74),#4FD1E6(75–100) - Center: big number Nunito 26pt weight 900
#F2F3FB; sublabel 9pt weight 700#A6A9D4uppercase
Card
- Background:
#1E2046 - Border: 1pt
#353974 - Corner radius: 20pt (graph/hero cards), 18pt (list/alarm cards)
- Padding: 16pt
- Shadow:
rgba(0,0,0,0.35) 0 8px 24px— soft, low, never harsh
Icon Tile
- 38pt rounded square, 12pt corner radius
- Background: gradient
#6C7BFF → #3D4ABF - Glyph: 20pt, 2pt stroke,
#FFFFFF
Sleep-Stage Chip
- Pill, 12pt corner radius, Nunito 13pt weight 800
- Fill = stage color; text
#FFFFFFon Deep/Light, dark ink on Awake (#3A1430) and REM (#07303A) for contrast - Padding: 8pt vertical, 14pt horizontal
Navigation
Bottom Tab Bar
- Height: 70pt + safe area
- Background:
rgba(20,21,46,0.92)withbackdrop-filter: blur(20px) saturate(180%), 0.5pt top border#353974 - Tabs (5): Sleep · Journal · Alarm · Sounds · Profile
- Icon size: 22pt, 2pt stroke
- Active:
#4FD1E6(icon fills solid, stroke removed) - Inactive:
#6C70A8 - Label: Nunito 10pt weight 700, always shown
- No tint pill — color change only
Top Zone (no nav bar)
- Sleep Cycle has no traditional UINavigationBar on the main screen
- Instead: an eyebrow + title block in the scroll content (eyebrow 12pt aqua tracked, title 32pt 900)
- Modal screens (Edit Alarm) use a sheet with a centered title, leading "Cancel", trailing "Save"
Input Fields
Time Picker (alarm)
- Large wheel picker with Nunito 28pt weight 800 numerals
- Selected row:
#F2F3FB; adjacent rows:#6C70A8dimmed - Background:
#1E2046, 20pt corner radius
Segmented Control (week / month / year)
- Container:
#292C58, 999pt radius, 4pt inset - Selected segment:
#6C7BFFfill, white text; others: transparent,#A6A9D4 - Slide animation 220ms ease-out between segments
Toggle Switch (smart alarm on/off)
- Track on:
#6C7BFF; off:#353974 - Thumb:
#F2F3FB, 50% radius, soft shadow - 200ms ease-out slide + soft haptic
Distinctive Components
Sleep-Analysis Graph (Hypnogram) — the signature
- Full-width card, 20pt radius,
#1E2046 - Plot area ~110pt tall
- Y-axis labels (left, 8–9pt
#6C70A8): Awake / Light / Deep top→bottom - The wave: a smooth bezier path, 2.5pt stroke
#7FE3F0,stroke-linecap: round - Fill below the wave: vertical gradient
#6C7BFF45% → 2% opacity, fades to baseline - Stage event nodes: 3pt dots colored by stage (
#FF8FB1awake,#3D4ABFdeep) - X-axis: hour ticks 00 / 02 / 04 / 06 / 07, 9pt weight 700
#6C70A8 - Legend row: four
legitems — 9pt color swatch + stage name, 10pt weight 700
Sleep-Quality Ring + Hero Stat (paired)
- Ring on the leading side (92pt), hero stat block trailing
- Stat block: big "7h 36m" 26pt weight 800, sub "Time asleep · 31m to fall asleep" 12pt
#A6A9D4, then a status pill ("Good night", aqua fill, dark text)
Smart-Alarm Card
- Horizontal row: gradient icon tile (alarm-clock glyph) + title/subtitle + big time on the trailing edge
- Title "Smart alarm" 15pt weight 800; subtitle "Wakes you in your lightest sleep" 11pt
#A6A9D4; time 19pt weight 900#F2F3FB
Sleep-Aid / Soundscape Player
- Album-art-style rounded tile (16pt radius) with a gradient cover
- Play/pause circular button in aqua; scrubber line in
#6C7BFFover#353974track - Track title 15pt weight 700, duration 12pt
#A6A9D4
Trend Bar Chart (weekly)
- Vertical bars, 8pt rounded tops, fill
#6C7BFF, the best/selected bar in#4FD1E6 - Baseline grid line
#353974dashed; goal line#FFC56Bdashed
Spacing System
- Base unit: 4pt
- Scale: 4, 8, 12, 14, 16, 20, 24, 32, 40, 48
- Screen horizontal inset: 20pt
- Card internal padding: 16pt
- Vertical gap between cards: 14pt
- Gap between section title and its content: 12pt
Grid & Container
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Score ring 80pt; graph height 96pt; tighter 16pt insets |
| iPhone 13/14/15 | 390pt | Standard layout (reference) |
| iPhone 15/16 Pro | 393pt | Dynamic Island clearance in status zone |
| iPhone 15/16 Pro Max | 430pt | Score ring 100pt; graph height 124pt; larger hero stat |
| iPad (portrait) | 768pt | Content max-width 600pt centered; gradient full-bleed |
| iPad (landscape) | 1024pt+ | Two-column: graph + stats side-by-side, max 900pt centered |
Dynamic Type
- Scales: screen title, hero stat, section title, card title, body, list item
- Fixed: graph axis labels, legend text, tab labels, stage-chip text, ring sublabel
- Hero stat caps at +30% to avoid breaking the ring/stat row layout
Orientation
- Phone: portrait-locked on the main sleep screen (it's a bedside view)
- iPad: supports landscape with the side-by-side graph/stats split
Touch Targets
- Tab bar icons: 22pt glyph, 44pt hit area
- Primary button: 50pt tall
- Toggle switch: 51×31pt standard
- Time-picker rows: 44pt tall
- Segmented control segments: 36pt tall minimum
Safe Area Handling
- Top: status/eyebrow zone respects safe area + Dynamic Island
- Bottom: tab bar respects home indicator (70pt + safe area)
- The gradient extends edge-to-edge including under the status bar and home indicator
- Sheets respect bottom safe area; content scrolls above the keyboard in journal notes
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-sleep-cycle {--page-bg: #14152e;
--page-bg-gradient: none;
--text-color: #a9aada;
--heading-color: #a9aada;
--link-color: #6c7bff;
--link-hover-color: #394dff;
--border-color: #2f304d;
--card-bg: #14152e;
--card-shadow: 0 1px 2px rgba(169,170,218,0.06);
--card-hover-shadow: 0 6px 18px rgba(169,170,218,0.12);
--header-bg: #27283f;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #14152e;
--footer-text-color: #8182a6;
--button-bg: #6c7bff;
--button-text-color: #000000;
--button-hover-bg: #394dff;
--button-border: none;
--button-border-radius: 20px;
--button-secondary-bg: #1d1e38;
--button-secondary-text-color: #a9aada;
--button-secondary-hover-bg: #262743;
--button-secondary-border: 1px solid #2f304d;
--prompt-bg: #1b1c37;
--prompt-text-color: #a9aada;
--base-font: var(--font-sans);
--heading-font: var(--font-sans);
--card-border-radius: 20px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- plenty of fish 82.1%
- sofi 80.9%
- monzo 79.0%
- skyscanner 77.6%
- grammarly 76.7%
Where this came from
- Source document
ios/design-md/fitness/sleep-cycle/DESIGN.md· 23.7 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.