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
21tokens
8type steps
2radius steps
12pxspacing base
Things 3, in one page
Things 3's iOS app is a study in calm. Where most task managers are dense, colorful dashboards, Things is a quiet white room: a pure white canvas (#FFFFFF), a single restrained blue accent, and acres of generous whitespace that let a to-do list feel like a calm sheet of paper rather than an anxiety machine. The design philosophy is "serene productivity" — the interface should disappear so that the user's own intentions are the only thing on screen. Surfaces lift only barely (#F5F6F8), dividers are whisper-thin (#ECECEC), and there is essentially no chrome: no toolbars crowding the top, no badges screaming for attention. The app feels expensive precisely because it withholds.
The accent is Things Blue #4F97FF — a soft, friendly blue used with monastic discipline for exactly three things: the active selection, the primary action, and the checkbox fill on completion. The one other color the app allows is the Today-yellow #FFD60A star, the single warm note in an otherwise cool, neutral palette — it marks the "Today" list, the heart of the app, and the star a task earns when scheduled for today. Everything else is ink-black text, soft gray metadata, and white. The restraint is the brand: when something turns blue, it is the one thing you should look at; when the yellow star appears, it means *today*.
Typography is San Francisco (SF Pro) — Apple's system face — used at 400 / 600 / 700 across a 13–28pt range, closely approximated by Inter where SF is unavailable. The hierarchy is built for reading a list like prose: list titles at 28pt bold (the "Today" headline feels like a chapter heading), task titles at 17pt regular, notes at 15pt regular gray. Headings *within* a project are a signature device — a bold 17pt heading with a hairline divider that visually chunks a long project into calm sections. The most expressive typographic moment is simply the generous line height and the air around each task; type here is about breathing room, not density.
Key Characteristics:
- Pure white canvas (
#FFFFFF) with serene, generous whitespace — the calm is the product - Things Blue (
#4F97FF) as the single accent — selection, primary action, checkbox fill - Today-yellow (
#FFD60A) star — the one warm note, marking the "Today" list and scheduled tasks - Circular checkbox with a satisfying fill-and-check spring animation on completion
- Magic-Plus button — a floating blue "+" that can be dragged to insert a to-do exactly where you want
- Project pie-progress — a small circular ring that fills as a project's to-dos are completed
- Headings within projects — bold section labels with hairline dividers that chunk long lists calmly
- Sidebar / list navigation (no bottom tab bar) — Inbox, Today, Upcoming, Anytime, Someday, Projects
Do's and don'ts
Do
- Use a pure white canvas (
#FFFFFF) and protect the generous whitespace — the calm is the product - Reserve Things Blue (
#4F97FF) for selection, primary action, and the checkbox fill - Use the Today-yellow (
#FFD60A) star only for the Today list and scheduled-today markers - Animate the circular checkbox fill + check spring on completion — it is the signature delight
- Provide the Magic-Plus button with press-and-drag insertion (blue line tracks the finger)
- Chunk long projects with bold 17pt headings and hairline dividers
- Keep list titles big (28pt w700) with roomy top padding so they read like chapter headings
- Show project progress as a quiet circular pie ring that animates forward on completion
- Keep the app flat — the only shadow is the soft blue glow under Magic-Plus
Don't
- Don't crowd the canvas — resist adding metadata, badges, or chrome that breaks the calm
- Don't introduce extra accent colors — blue for action, the single yellow star for "today"
- Don't color-code tags or projects by default — color is structure here, not decoration
- Don't make completion abrupt — the fill + check spring (and gentle fade-out) is the moment
- Don't add card shadows or skeuomorphic depth — the white room is flat
- Don't shrink the whitespace to fit more rows — density is explicitly not the goal
- Don't use a bottom tab bar — navigation is the sidebar (Inbox / Today / Upcoming / …)
- Don't use heavy modal scrims — even dimming stays soft (≈0.2)
- Don't use light font weights — SF Pro here is 400/600/700 only
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 Things 3 design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Things Blue: #4f97ff
- Blue Pressed: #3d7fe0
- Today Yellow: #ffd60a
- Yellow Pressed: #e6be00
- Canvas: #ffffff
- Surface 1: #f5f6f8
- Surface 2: #ececec
- Divider: #ececec
- Text Primary: #1d1d1f
- Text Secondary: #8a8a8e
Type:
- families: SF Pro, Fallback Stack, SF Pro Display, SF Pro Text
- scale: 12, 13, 14, 15, 16, 17, 24, 28
- weights: 400, 600, 700
Shape:
- radius: 8, 10
- elevation: Shadow: `rgba(79,151,255,0.35) 0 8px 20px` — a soft blue glow | Keep the app flat — the only shadow is the soft blue glow under Magic-Plus
Spacing: 12
Rules:
- Use a pure white canvas (`#FFFFFF`) and protect the generous whitespace — the calm is the product
- Reserve Things Blue (`#4F97FF`) for selection, primary action, and the checkbox fill
- Use the Today-yellow (`#FFD60A`) star only for the Today list and scheduled-today markers
- Animate the circular checkbox fill + check spring on completion — it is the signature delight
- Provide the Magic-Plus button with press-and-drag insertion (blue line tracks the finger)
- Chunk long projects with bold 17pt headings and hairline dividers
Avoid:
- Don't crowd the canvas — resist adding metadata, badges, or chrome that breaks the calm
- Don't introduce extra accent colors — blue for action, the single yellow star for "today"
- Don't color-code tags or projects by default — color is structure here, not decoration
- Don't make completion abrupt — the fill + check spring (and gentle fade-out) is the moment
- Don't add card shadows or skeuomorphic depth — the white room is flat
- Don't shrink the whitespace to fit more rows — density is explicitly not the goal
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary
- Things Blue (
#4F97FF): Active selection, primary action, the Magic-Plus button, checkbox fill on completion, links. - Blue Pressed (
#3D7FE0): Active/pressed state for blue controls. - Blue Tint (
rgba(79,151,255,0.10)): Selected-row wash, subtle highlight behind the active item.
Today
- Today Yellow (
#FFD60A): The "Today" list star, the star badge on a task scheduled for today — the single warm accent. - Yellow Pressed (
#E6BE00): Pressed state for the Today star control.
Canvas & Surface (Light — primary)
- Canvas (
#FFFFFF): Pure white app background — the serene room. - Surface 1 (
#F5F6F8): Grouped section backgrounds, search field, the barely-there lift. - Surface 2 (
#ECECEC): Pressed rows, segmented controls. - Divider (
#ECECEC): Whisper-thin hairline dividers between groups and under headings. - Text Primary (
#1D1D1F): Task titles, list headlines, primary text — near-black ink, not pure black. - Text Secondary (
#8A8A8E): Notes, dates, metadata, project subtitles. - Text Tertiary (
#C7C7CC): Disabled, placeholder, completed-task strike text, very low emphasis.
Semantic
- Checkbox Border (
#C7C7CC): The unchecked circular checkbox outline. - Completed Check (
#4F97FF): The filled checkbox + white checkmark on completion. - Deadline Red (
#FF3B30): A task past its deadline; the deadline flag when overdue. - Today Star (
#FFD60A): Scheduled-for-today indicator (shared with Today yellow). - Tag Pill (
#8A8A8Etext on#F5F6F8): Neutral tag chips — tags are not color-coded by default. - Area Accent: Areas use a subtle neutral; color is structure, not decoration.
Dark Mode
Things ships a true dark mode for users who prefer it; the primary identity is the white room.
- Dark Canvas (
#1C1C1E) - Dark Surface (
#2C2C2E) - Dark Divider (
#38383A) - Dark Text Primary (
#F2F2F7) - Dark Text Secondary (
#98989F) - Things Blue and Today yellow stay identical — they read well on both.
Type scaleRead the full spec
Font Family
- Primary:
SF Pro(Apple system) — Text and Display optical variants, used at 400 / 600 / 700 - Fallback Stack:
-apple-system, BlinkMacSystemFont, 'Inter', 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif - Optical sizing: SF Pro Display at 20pt+ (titles), SF Pro Text below 20pt (rows, notes)
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| List Title (Large) | SF Pro Display | 28pt | 700 | 1.2 | 0.3pt | "Today", "Upcoming" — feels like a chapter title |
| Project Title | SF Pro Display | 24pt | 700 | 1.2 | 0.3pt | Project detail screen hero title |
| Section Heading | SF Pro Text | 17pt | 700 | 1.3 | -0.2pt | A heading inside a project (with hairline divider) |
| Task Title | SF Pro Text | 17pt | 400 | 1.35 | -0.2pt | A to-do row's primary text |
| Task Title (done) | SF Pro Text | 17pt | 400 | 1.35 | -0.2pt | Completed — color tertiary, strikethrough |
| Body / Notes | SF Pro Text | 15pt | 400 | 1.45 | -0.1pt | To-do notes, descriptions |
| List Row Subtitle | SF Pro Text | 14pt | 400 | 1.35 | -0.1pt | Project name under a to-do, area subtitles |
| Metadata | SF Pro Text | 13pt | 400 | 1.3 | 0pt | Date, "3 to-dos", tag text |
| Button (Primary) | SF Pro Text | 17pt | 600 | 1.0 | -0.2pt | "Add to-do", confirm actions |
| Sidebar Item | SF Pro Text | 16pt | 400 | 1.3 | -0.1pt | "Inbox", "Today" sidebar rows (active = 600) |
| Date Pill | SF Pro Text | 13pt | 600 | 1.0 | 0pt | "Today", "Tomorrow" scheduled-date chip |
| Tag Pill | SF Pro Text | 13pt | 400 | 1.0 | 0pt | Tag chip text |
| Count / Meta | SF Pro Text | 15pt | 400 | 1.0 | 0pt | Sidebar count badge, tabular |
| Tiny Label (UPPER) | SF Pro Text | 12pt | 700 | 1.2 | 0.5pt | "THIS EVENING", small caps section labels |
Principles
- Weights concentrated at 400 / 600 / 700: Regular for tasks and notes, semibold for buttons and active sidebar, bold for titles and headings — no light, no black
- Titles breathe: List titles at 28pt with positive 0.3pt tracking feel like calm chapter headings, not UI labels
- Tasks read like prose: 17pt regular with 1.35 line height and lots of vertical air — this is a reading surface
- Headings chunk, dividers separate: A bold 17pt heading + a hairline divider is how a long project stays serene
- Completed = quiet, not gone: Done tasks dim to tertiary with a strikethrough — present but receded
Components and layoutRead the full spec
Buttons
Magic-Plus Button (the signature control)
- Shape: Circle, 56pt diameter, floating bottom-right (or bottom-center) above content
- Background:
#4F97FF - Icon: a
plusglyph, 24pt,#FFFFFF - Shadow:
rgba(79,151,255,0.35) 0 8px 20px— a soft blue glow - Pressed: scale 0.94, background
#3D7FE0, medium haptic - Drag behavior: press-and-drag lifts the button; a blue insertion line follows the finger so a new to-do drops exactly where released
Primary Text Button ("Add", confirm)
- Background: transparent (text-only) or
#4F97FFfilled for modal confirms - Text:
#4F97FF(text) /#FFFFFF(filled), SF Pro Text 17pt weight 600 - Filled padding: 12pt vertical, 24pt horizontal; corner radius 10pt
- Pressed: text
#3D7FE0/ filled#3D7FE0, no scale on text buttons
Icon Button (toolbar — search, more, calendar)
- Size: 22pt glyph, 44pt hit target
- Default:
#8A8A8E - Active/pressed:
#4F97FF - No background; the generous hit area is the affordance
Today Star Toggle
- A
starglyph, 18pt - Off: outline
#C7C7CC; On: filled#FFD60A - Tapping animates a quick fill + 1.0 → 1.15 → 1.0 bounce
Cards & Containers
To-Do Row (the unit)
- Min height: 44pt (expands with notes/subtitle)
- Layout: 22pt circular checkbox (leading) → task title (17pt w400) → optional subtitle (14pt) / tag pills / date pill (trailing)
- Background: transparent (canvas
#FFFFFF) - Selected: background
rgba(79,151,255,0.10), corner radius 8pt, title color unchanged - Swipe actions: swipe-right to schedule (blue), swipe-left for "when"/move
- Completed: checkbox fills
#4F97FFwith white check; title goes#C7C7CCstrikethrough; row fades and drops out of the list after a beat
Circular Checkbox
- Diameter: 22pt; 1.5pt border
#C7C7CCwhen unchecked - Checked: fills
#4F97FF, a whitecheckmarkscales in with a spring (the signature micro-interaction) - Tapping anywhere on the checkbox or its 44pt hit area toggles completion with a soft haptic
Section Heading (inside a project)
- A bold 17pt
#1D1D1Flabel, 24pt top padding, followed by a hairline#ECECECdivider - Tap to collapse/expand the heading's to-dos; a small chevron rotates
- The signature device that keeps long projects calm and scannable
Project Row (in a list)
- 56pt row: a pie-progress ring (leading) → project name (17pt w400) → area / count subtitle (14pt secondary)
- The ring fills proportionally to completed to-dos; a fully-complete project shows a solid blue ring with a check
List Title Header
- The big 28pt w700 list name ("Today", "Upcoming") with generous 24pt top / 8pt bottom padding
- For "Today", a
#FFD60Astar sits beside the title; for "Upcoming", a small calendar glyph - No background, no divider — the whitespace is the separation
Quick-Find / Search
- A
#F5F6F8rounded field, 10pt radius, 40pt tall - Leading
magnifyingglass16pt#8A8A8E; placeholder "Quick Find" 16pt w400#8A8A8E - Focus: subtle, no heavy border; caret
#4F97FF
Navigation
Sidebar (no bottom tab bar)
- A slide-over / left panel listing: Inbox, Today (★), Upcoming, Anytime, Someday, Logbook, then Areas & Projects
- Item height: 40pt; icon 18pt + label 16pt w400
- Active item: background
rgba(79,151,255,0.10), label 16pt w600, icon#4F97FF; trailing count in 15pt#8A8A8E - Inactive: label
#1D1D1F, icon#8A8A8E - Opened via the top-left back/menu affordance or an edge swipe; canvas dims
rgba(0,0,0,0.2)behind
Top Bar
- Height: 44pt + safe area
- Leading: back / sidebar affordance ; Trailing: search + more (22pt
#8A8A8E) - No center title (the big 28pt list title lives in the scroll content, not the bar)
- Fully transparent over white; on scroll the list title shrinks toward the bar gently
Input Fields
To-Do Title Field (composer)
- Appears inline as a new row or in a card sheet
- Text: 17pt w400
#1D1D1F; placeholder "New To-Do" 17pt w400#C7C7CC - No border, no box — it is just text on white; the checkbox sits to its left
- Below: a notes line (15pt), then a row of quick controls (When, tag, deadline, checklist)
When / Schedule Picker
- A calm sheet: "Today" (★ yellow), "This Evening", "Tomorrow", "Upcoming" (calendar), "Someday", "Clear"
- Each row a 44pt tappable item with a leading glyph; the chosen option gets a
#4F97FFcheck
Tag Field
- Tags render as neutral pills (
#F5F6F8background, 13pt#8A8A8Etext, full-pill radius) - Add-tag opens a calm list of existing tags with a search field
Distinctive Components
Magic-Plus
- The signature creation gesture: a floating 56pt blue "+" that you can tap to add a to-do at the top, or press-and-drag to drop a new to-do precisely between existing rows (a blue insertion line tracks the finger)
- On release it morphs into an inline editable to-do row with the keyboard rising
Circular Checkbox Fill Animation
- On completion the 22pt circle fills with
#4F97FFfrom center outward over ~180ms, and a white checkmark draws/scales in with a spring (response 0.3, damping 0.6) - A soft haptic fires on toggle; the completed row then gently fades + collapses out of the list
Project Pie-Progress
- A small (18–22pt) circular ring,
#ECECECtrack +#4F97FFfill arc proportional to completed to-dos - It animates the arc forward whenever a to-do in the project is completed — a quiet sense of momentum
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | 20pt margins kept; subtitle may truncate before tags |
| iPhone 13/14/15 | 390pt | Standard roomy rows, full 28pt title |
| iPhone 15/16 Pro | 393pt | Dynamic Island clears the transparent top bar |
| iPhone 15/16 Pro Max | 430pt | Slightly larger title (30pt), more notes preview |
| iPad | 768pt+ | Sidebar + list (+ project detail) panes; Magic-Plus per pane |
Dynamic Type
- List titles, task titles, notes: scale fully with Dynamic Type (this is a reading app — honor it)
- Checkbox: fixed 22pt (interaction target, not text)
- Sidebar count badges: tabular, scale modestly
- Tiny section labels ("THIS EVENING"): scale but clamp so the divider rhythm holds
Orientation
- All lists: portrait and landscape
- iPad: landscape unlocks the persistent multi-pane (sidebar + list + detail)
- The Magic-Plus stays bottom-trailing in both orientations
Touch Targets
- Checkbox: 22pt visual, 44pt hit area
- To-do row: full row tappable (min 44pt)
- Magic-Plus: 56pt — generous and unmissable
- Toolbar icons: 22pt glyph, 44pt hit area
- Sidebar rows: full 40pt height
Safe Area Handling
- Top: transparent bar respects Dynamic Island / notch; the big title scrolls under it
- Bottom: the Magic-Plus floats above the home indicator with a comfortable inset
- Sides: 20pt content insets (the generous margin is intentional)
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-things-3 {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #1d1d1f;
--heading-color: #1d1d1f;
--link-color: #0067fe;
--link-hover-color: #0052cb;
--border-color: #d6d6d7;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(29,29,31,0.06);
--card-hover-shadow: 0 6px 18px rgba(29,29,31,0.12);
--header-bg: #1d1d1f;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #6c6c6d;
--button-bg: #4f97ff;
--button-text-color: #000000;
--button-hover-bg: #1c79ff;
--button-border: none;
--button-border-radius: 10px;
--button-secondary-bg: #f1f1f2;
--button-secondary-text-color: #1d1d1f;
--button-secondary-hover-bg: #e4e4e4;
--button-secondary-border: 1px solid #d6d6d7;
--prompt-bg: #f4f4f4;
--prompt-text-color: #1d1d1f;
--base-font: var(--font-helvetica);
--heading-font: var(--font-helvetica);
--card-border-radius: 10px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- trello 81.8%
- coffee meets bagel 81.7%
- lovable 81.6%
- apple maps 80.8%
- dropbox 80.5%
Where this came from
- Source document
ios/design-md/productivity/things-3/DESIGN.md· 22.0 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.