Focus: 할 일 관리 앱 디자인 시스템
App · Light · Minimal · ProductivityFocus
흰 화면, 파랑 하나, 그리고 할 일을 가로막는 것은 없음.
Focus는 할 일이 아닌 모든 것을 걷어 냅니다. 흰 화면, Instrument Sans, 카드 대신 얇은 구분선, 추가 버튼과 오늘에만 쓰는 밝은 파랑 하나. 아이콘만 있는 탭이 하단 바를 조용하게 하고, 플로팅 추가 버튼이 기록을 즉시 가능하게 합니다.
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
HomeStatsPlanMe9:41
This weekTotal7,842+12% vs last weekStart session
HomeStatsPlanMe9:41
SettingsNotificationsDaily remindersUnitsMetric
HomeStatsPlanMeUse 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/ko/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
Best for
- 투두·할 일 관리 앱
- 플래너와 캘린더
- 메모와 빠른 기록
- 팀 작업·프로젝트 앱
Do's and don'ts
- 탭 한 번과 한 줄로 할 일을 추가할 수 있게 하세요.
- 끝낸 할 일은 바로 지우지 말고 회색으로 흐려지게 하세요.
- 모든 할 일을 카드나 그림자로 감싸지 마세요.
- 프로젝트에 색을 두 가지 이상 주지 마세요.