# Design System Inspiration of Things 3 (iOS)

## 1. Visual Theme & Atmosphere

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

## 2. Color Palette & Roles

### 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** (`#8A8A8E` text 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.

## 3. Typography Rules

### 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

## 4. Component Stylings

### Buttons

**Magic-Plus Button (the signature control)**
- Shape: Circle, 56pt diameter, floating bottom-right (or bottom-center) above content
- Background: `#4F97FF`
- Icon: a `plus` glyph, 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 `#4F97FF` filled 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 `star` glyph, 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 `#4F97FF` with white check; title goes `#C7C7CC` strikethrough; row fades and drops out of the list after a beat

**Circular Checkbox**
- Diameter: 22pt; 1.5pt border `#C7C7CC` when unchecked
- Checked: fills `#4F97FF`, a white `checkmark` scales 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 `#1D1D1F` label, 24pt top padding, followed by a hairline `#ECECEC` divider
- 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 `#FFD60A` star sits beside the title; for "Upcoming", a small calendar glyph
- No background, no divider — the whitespace is the separation

**Quick-Find / Search**
- A `#F5F6F8` rounded field, 10pt radius, 40pt tall
- Leading `magnifyingglass` 16pt `#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 `#4F97FF` check

**Tag Field**
- Tags render as neutral pills (`#F5F6F8` background, 13pt `#8A8A8E` text, 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 `#4F97FF` from 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, `#ECECEC` track + `#4F97FF` fill 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

**Headings + Hairline Dividers**
- Bold 17pt headings with a thin `#ECECEC` rule that segment a long project into serene chunks
- Collapsible: tapping a heading folds its to-dos with a 200ms height ease

**This Evening Section**
- Within "Today", a calm "This Evening" sub-section (12pt w700 UPPER label + divider) separates evening tasks — a uniquely Things organizing device for the daily rhythm

## 5. Layout Principles

### Spacing System
- Base unit: 4pt
- Scale: 4, 8, 12, 16, 20, 24, 32, 44, 56
- Standard margin: 20pt horizontal (more generous than typical 16pt — part of the calm)
- To-do rows: 12pt vertical breathing inside the 44pt min height; 0pt between rows (whitespace + dividers carry it)

### Grid & Container
- Content width: full device width with generous 20pt horizontal margins
- Single column lists; iPad uses sidebar + list (+ optional project detail) panes
- The Magic-Plus floats above the list, bottom-trailing, clearing the safe area

### Whitespace Philosophy
- **Whitespace IS the product**: Things deliberately uses more air than competitors — generous top padding on list titles, roomy rows, wide margins. The calm is the feature.
- **Restraint over information density**: It would be easy to cram more metadata into a row; Things chooses not to. A to-do is mostly its title and a lot of quiet space.
- **Headings create rhythm**: Long projects stay serene because bold headings + hairline dividers chunk them into digestible sections rather than one dense wall.

### Border Radius Scale
- Sharp (0pt): Hairline dividers
- Soft (8pt): Selected-row highlight, segmented controls
- Standard (10pt): Search field, filled buttons, sheets' inner cards
- Comfortable (14pt): Bottom sheets (When picker, tag picker)
- Circle (50%): Checkbox, Magic-Plus button, pie-progress ring

## 6. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | To-do rows, list, canvas — the white room is flat |
| Selection (Level 1) | Background tint only (`rgba(79,151,255,0.10)`), no shadow | The selected to-do row |
| Magic-Plus (Level 2) | `rgba(79,151,255,0.35) 0 8px 20px` (soft blue glow) | The floating + button |
| Sheet (Level 3) | `rgba(0,0,0,0.12) 0 -8px 32px` | When picker, tag picker, modal cards |
| Scrim | `rgba(0,0,0,0.2)` (gentle — Things keeps even dimming soft) | Behind the sidebar and sheets |

**Shadow Philosophy**: Things is almost entirely flat — the white room has no card stacks, no drop shadows on rows, no skeuomorphic depth. The single intentional shadow is the soft blue glow under the Magic-Plus button, which signals "this is the live creation tool." Sheets get a gentle, low-opacity shadow as they rise. Even the modal scrim is unusually light (0.2) because Things never wants to feel heavy or alarming. Elevation is communicated by whitespace and a barely-there tint, not by shadow.

### Motion
- **Checkbox completion**: circle fills center-out ~180ms + white check spring (response 0.3, damping 0.6) + soft haptic; the row then fades + collapses out over 250ms
- **Magic-Plus tap**: scale 0.94 → 1.0 spring (response 0.25, damping 0.7) + `.impactOccurred(.medium)`
- **Magic-Plus drag**: the button lifts (scale 1.05) and a blue insertion line eases to the nearest gap as the finger moves; release drops the new row in with a 200ms settle
- **Heading collapse/expand**: child to-dos animate height over 200ms ease-in-out; chevron rotates
- **Pie-progress**: the fill arc animates forward over 300ms when a project to-do completes
- **Sidebar slide-over**: translateX spring 240ms (response 0.35, damping 0.9) with a soft scrim fade
- **Schedule swipe**: the row reveals a blue action with a rubber-band spring; commit triggers a light haptic

## 7. 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

## 8. Responsive Behavior

### 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)

## 9. Agent Prompt Guide

### Quick Color Reference
- Canvas: `#FFFFFF`
- Surface 1: `#F5F6F8`
- Surface 2 / Divider: `#ECECEC`
- Text primary: `#1D1D1F`
- Text secondary: `#8A8A8E`
- Text tertiary: `#C7C7CC`
- Things Blue (action/selection): `#4F97FF`
- Blue pressed: `#3D7FE0`
- Today yellow (star): `#FFD60A`
- Deadline red: `#FF3B30`

### Example Component Prompts
- "Create a SwiftUI Things to-do row: a 22pt circular checkbox with a 1.5pt #C7C7CC border on the leading side, then the task title 'Email the design feedback' in SF Pro Text 17pt weight 400 #1D1D1F, with a trailing #F5F6F8 'work' tag pill (13pt #8A8A8E, full radius) and a blue 'Today' date pill. The whole row is ≥44pt with 12pt vertical breathing on a pure-white canvas. When checked: fill the circle #4F97FF center-out over 180ms, spring a white checkmark in, dim the title to #C7C7CC with a strikethrough, then fade + collapse the row."
- "Build the Things Magic-Plus button: a 56pt circular button, background #4F97FF, a 24pt white plus glyph, soft blue shadow rgba(79,151,255,0.35) 0 8px 20px, floating bottom-trailing above the list. Tap scales 0.94 with a medium haptic; press-and-drag lifts it (scale 1.05) while a blue insertion line eases to the nearest row gap, and release drops a new editable to-do there."
- "Design the Things 'Today' list header: the word 'Today' in SF Pro Display 28pt weight 700 #1D1D1F with a #FFD60A star beside it, 24pt top padding, 8pt bottom, no divider — surrounded by generous whitespace on white."
- "Create a Things project section heading: a bold SF Pro Text 17pt #1D1D1F label 'Research' with 24pt top padding followed by a 1pt #ECECEC hairline divider; tapping collapses its to-dos with a 200ms height ease and rotates a small chevron."
- "Build the Things project pie-progress ring: a 20pt circle with a #ECECEC track and a #4F97FF arc filled to 60%; when a to-do in the project completes, animate the arc forward over 300ms."

### Iteration Guide
1. Canvas is pure white `#FFFFFF` — protect the generous whitespace, the calm IS the product
2. Things Blue (`#4F97FF`) is the only action color — selection, primary action, checkbox fill
3. The Today-yellow (`#FFD60A`) star is the single warm note — only Today and scheduled-today
4. The circular checkbox fill + spring check (then gentle fade-out) is the signature delight — never make completion abrupt
5. The Magic-Plus is the creation gesture — tap to add, press-drag to insert exactly where you want
6. Chunk long projects with bold 17pt headings + hairline dividers; keep list titles big (28pt w700)
7. The app is flat — the only shadow is the soft blue glow under Magic-Plus; even scrims stay light (≈0.2)
8. Navigation is the sidebar (Inbox / Today / Upcoming / Anytime / Someday) — no bottom tab bar