Focus: Task Manager App Design System

App · Light · Minimal · Productivity

Focus

A white page, one blue and nothing else between you and the task.

Focus removes everything that isn't the task: a white screen, Instrument Sans, thin dividers instead of cards and one bright blue for the add button and today. Icon-only tabs keep the bottom bar quiet, and a floating add button makes capture instant.

Preview

Rendered live from the tokens below, in the system's own fonts.

9:41

Good morningTodayWeekly goal4 of 5 daysUp nextMorning routine15 minTeam check-in30 minEvening review10 min

HomeStatsPlanMe

9:41

This weekTotal7,842+12% vs last weekStart session

HomeStatsPlanMe

9:41

SettingsNotificationsDaily remindersUnitsMetric

HomeStatsPlanMe

Use it in your project

Paste this into Codex or Claude Code. The agent saves the spec as DESIGN.md and follows it from then on.

This project uses the Focus design system. Its spec is at https://codexdesign.io/design-systems/focus.md. Save it as DESIGN.md in the project root and follow it for every screen from now on.

Tokens

Colors

Light theme

background#FFFFFFoklch(1 0 0)
foreground#16181Doklch(0.209 0.01 268.187)
card#FFFFFFoklch(1 0 0)
card-foreground#16181Doklch(0.209 0.01 268.187)
popover#FFFFFFoklch(1 0 0)
popover-foreground#16181Doklch(0.209 0.01 268.187)
primary#2F5BEAoklch(0.533 0.221 265.795)
primary-foreground#FFFFFFoklch(1 0 0)
secondary#F0F2F7oklch(0.961 0.007 268.547)
secondary-foreground#16181Doklch(0.209 0.01 268.187)
muted#F3F4F6oklch(0.967 0.003 264.542)
muted-foreground#5B616Eoklch(0.492 0.022 265.817)
accent#EEF1F7oklch(0.958 0.009 264.522)
accent-foreground#16181Doklch(0.209 0.01 268.187)
destructive#C8322Boklch(0.551 0.188 27.911)
border#E4E6EBoklch(0.925 0.007 268.545)
input#D5D8DFoklch(0.882 0.01 267.351)
ring#2F5BEAoklch(0.533 0.221 265.795)
chart-1#2F5BEAoklch(0.533 0.221 265.795)
chart-2#E8743Boklch(0.685 0.16 44.716)
chart-3#19A974oklch(0.652 0.139 161.399)
chart-4#B455C8oklch(0.612 0.189 320.372)
chart-5#D4A017oklch(0.735 0.146 84.267)

Dark theme

background#101114oklch(0.178 0.006 271.042)
foreground#EDEEF1oklch(0.949 0.004 271.368)
card#16181Coklch(0.209 0.009 264.373)
card-foreground#EDEEF1oklch(0.949 0.004 271.368)
popover#16181Coklch(0.209 0.009 264.373)
popover-foreground#EDEEF1oklch(0.949 0.004 271.368)
primary#7D9BFFoklch(0.711 0.15 269.685)
primary-foreground#101114oklch(0.178 0.006 271.042)
secondary#1E2026oklch(0.244 0.012 270.896)
secondary-foreground#EDEEF1oklch(0.949 0.004 271.368)
muted#1A1C21oklch(0.227 0.01 268.232)
muted-foreground#9298A5oklch(0.679 0.02 265.92)
accent#22252Coklch(0.264 0.014 267.038)
accent-foreground#EDEEF1oklch(0.949 0.004 271.368)
destructive#FF7B72oklch(0.734 0.163 25.784)
border#272A31oklch(0.285 0.014 267.079)
input#30343Coklch(0.324 0.015 264.337)
ring#7D9BFFoklch(0.711 0.15 269.685)
chart-1#7D9BFFoklch(0.711 0.15 269.685)
chart-2#FF9F6Boklch(0.79 0.133 48.496)
chart-3#4ADE9Coklch(0.806 0.157 160.001)
chart-4#D88BE6oklch(0.747 0.15 321.263)
chart-5#F2CC5Boklch(0.857 0.137 90.603)

Fonts

Headings: Instrument Sans · 600
Body: Instrument Sans · 400
Monospace: JetBrains Mono

Type scale

display · 40/1.05 · -0.02emThe quick brown fox
h1 · 30/1.1 · -0.01emThe quick brown fox
h2 · 22/1.2The quick brown fox
h3 · 18/1.3The quick brown fox
body · 16/1.5The quick brown fox
small · 13/1.4The quick brown fox

Radius, spacing and shadow

Corner radiussm 8pxmd 10pxlg 12pxxl 16px

Spacingxs 4pxsm 8pxmd 16pxlg 24pxxl 48px

ShadowNone: depth comes from borders and color.

Layout

Touch targets: 48px
Tab bar: 60px, 4 items, icons only with active label
Screen padding: 16px
Navigation: bottom tab bar; floating add button
Numerals: proportional

Focus: Task Manager App Design System

Preview

Use it in your project

Tokens

Colors

Light theme

Dark theme

Fonts

Type scale

Radius, spacing and shadow

Layout

Best for

Do's and don'ts

More design systems for apps