-
Notifications
You must be signed in to change notification settings - Fork 35
Design Rules Overview
snoo edited this page Apr 7, 2026
·
1 revision
The toss seed defines 69 design rules in DESIGN-LANGUAGE.md. This page organizes them by category for quick reference.
| # | Rule | Key Detail |
|---|---|---|
| 1 | Single accent color for unity |
#721FE5 purple, used only on active/selected states |
| 2 | No pure black (#000) ever | Darkest allowed: #2A2A2A. Default text: #3C3C3C
|
| 3 | Impact colors at minimal size | Status dots (6px) + text (11px) maximum |
| 4 | Status dot and text share the same color |
#22C55E dot + #22C55E text for "completed" |
| Level | Hex | Role |
|---|---|---|
| Strong | #2A2A2A |
Strongest emphasis (donut center, briefing title) |
| Primary | #3C3C3C |
Metrics, section titles |
| Secondary | #6A6A6A |
Labels, captions |
| Tertiary | #7A7A7A |
Subtitles, dates |
| Disabled | #9B9B9B |
Inactive, placeholder |
Allowed: active nav, selected chart segment, progress fill, icon badge, pill toggle
Forbidden: body text, large background areas, borders, gradients
| # | Rule | Key Detail |
|---|---|---|
| 5 | Big number + small unit (2:1 ratio) | 48px number + 24px unit, always ms-0.5 gap |
| 6 | Labels are 12px uppercase + tracking-wide |
tracking-[0.05em], always font-medium
|
| 7 | Only the 5-level grayscale for text | No custom grays, no hex outside the 5 defined levels |
| Context | Number | Unit | Ratio |
|---|---|---|---|
| Hero metric | 48px | 24px | 2:1 |
| KPI metric | 36px | 18px | 2:1 |
| Donut center | 24px | 12px | 2:1 |
| Chart stat | 18px | 10px | 1.8:1 |
| List amount | 17px | 11px | 1.5:1 |
| # | Rule | Key Detail |
|---|---|---|
| 8 |
mx-6 = single card, px-6 = multi-card/carousel |
Controls "floating" vs "full" feel |
| 9 |
space-y-6 section gap everywhere |
24px between all sections, no exceptions |
| 10 | 4 section types only (A/B/C/D) | Full card, Grid, Carousel, Hero |
| 11 | Section separation by card + whitespace only | No <hr>, no border-b between sections |
| Type | Description | Use Case |
|---|---|---|
| A Full Card | Title inside card, mx-6, rounded-2xl p-6
|
Charts, lists, rankings |
| B Grid |
px-6, grid grid-cols-2 gap-4
|
KPI metrics (2x2) |
| C Carousel |
px-6, horizontal scroll, title outside card |
Briefing cards |
| D Hero |
mx-6, p-8, watermark bg, no title |
Primary metric |
| # | Rule | Key Detail |
|---|---|---|
| 12 | Top-down information pyramid | Hero (48px) -> KPI (36px) -> Detail (14px) |
| 13 | Max 4 data items per card | KPI grid 4, donut legend 4, list 3-4 |
| 14 | Cards are for data display, not actions | No CTA buttons, no input fields inside cards |
Top: Hero metric (48px) -- 1 key number
KPI grid (36px) -- 2-4 metrics
Status summary (donut) -- current state
Alerts/briefings -- attention items
Charts -- trends
Bottom: Lists -- detailed data
| # | Rule | Key Detail |
|---|---|---|
| 15 |
whitespace-nowrap on all number+unit combos |
No exceptions: hero, KPI, list, chart, donut |
| 16 | Integers for currency, 1 decimal for rates | 1,870 (won), 68.4 (oil price), 12.4 (percent) |
| Range | Format | Example |
|---|---|---|
| up to 9,999 | comma + won | 3,500 |
| 10K - 99.9M | man (10K) unit | 1,870 man-won |
| 100M+ | eok (100M) unit | 3.8 eok-won |
| # | Rule | Key Detail |
|---|---|---|
| 17 | Only donut/toggle are interactive; cards/list rows are static | No card hover, no row highlight |
| 18 |
transition-all default; donut uses duration-300
|
Buttons/nav use duration-fast (100ms) |
| Element | Interaction | Feedback |
|---|---|---|
| Donut segment | Tap to select/deselect | opacity 0.3 <-> 1 + accent color |
| Period toggle | Tap to switch | bg-brand text-white |
| Bottom nav | Tap to navigate | text-brand |
| TopBar icon | Tap | Shadow change |
- Card hover/click effects
- List row hover highlight
- Swipe gestures (except carousel)
- Long-press / context menu
-
active:scaleon buttons (Toss uses color change only)
| # | Rule | Key Detail |
|---|---|---|
| 19 | Page background #FAFAFA (not pure white) |
Subtle warmth |
| 20 | Shadow opacity 4-8% | shadow-card: 0 1px 3px rgba(0,0,0,0.04) |
| 21 | 6-level opacity system (0.06 to 1.0) | 0.06=watermark, 0.10=badge bg, 0.15=bg chart, 0.3=unselected |
| 22 | Background decorations only on hero cards |
overflow-hidden mandatory |
| # | Rule |
|---|---|
| 23 | No content outside cards (everything in bg-card rounded-2xl) |
| 24 | No accent-colored card backgrounds |
| 25 | No ad-hoc components (use 4 section types) |
| 26 | No card overlapping/stacking |
| 27 | No dividers between sections |
| 28 | No CTA buttons or input fields inside cards |
| 29 | No more than 5 list items in a single card |
- Bottom nav clearance:
pb-24 - Scroll end padding:
h-8 - Fixed TopBar/BottomNav (no hide-on-scroll)
- Skeleton matches final layout shape
- No spinners inside cards
- Skeleton delay: 300ms, min display: 300ms
- Show
0as actual zero (never dash or hide) - Error per-card, not full page
- Friendly tone: "We couldn't load the data" (not "Error 500")
- Down trend:
text-destructive+ TrendingDown icon +-prefix - Minus sign for negative amounts (no parentheses)
-
truncatefor names,line-clamp-2for briefing titles - Never shrink font size; scale the unit instead
- Area chart: gradient fill, no dots, hidden Y axis
- Bar chart: only max value gets accent color
- Donut: selected = accent, unselected = grayscale at 0.3 opacity
- Forbidden: 3D charts, dual Y axis, stacked bars, radar charts
- Card (#1E1E1E) must be brighter than background (#121212)
- Replace shadows with
dark:border dark:border-white/6 - Accent color gets brighter (#721FE5 -> #9B5FFF)
- 7 variants (brandSolid, neutral, secondary, destructive, outline, ghost, brandGhost)
- 4 sizes (xs=pill, sm/md=rounded-lg, lg=rounded-xl)
- Pressed state = one shade darker (no scale transform)
- Touch targets: 44x44px minimum
- Color contrast: WCAG AA (4.5:1 for text, 3:1 for large text)
-
prefers-reduced-motiondisables all animations
- Casual polite tone (Korean haeyo-che)
- Active voice over passive
- Positive framing
- CTA = action verb + clear outcome
- No entry popups
- No exit-prevention sheets
- Always provide a close/dismiss option
- Icon strokeWidth inversely proportional to size
- Custom icons: 24x24 viewBox, stroke-based, currentColor
- Segment control (bg-card active, not bg-brand)
- Drawer: right-side panel for detail views
- Dialog: "Close" on left, action CTA on right
- 375px Toss standard, 430px seed standard
- JSON tokens for cross-platform portability
Color:
[ ] Accent only on active/selected states
[ ] All card backgrounds are bg-card (white)
[ ] Text uses only the 5-level grayscale
[ ] Status colors are dot + text (11px) or smaller
[ ] No pure black (#000)
Layout:
[ ] All sections spaced with space-y-6
[ ] Single cards use mx-6; grids/carousels use px-6
[ ] Card padding is p-6 (hero: p-8)
[ ] Card radius is rounded-2xl
[ ] No overlapping elements
[ ] All content inside cards
Typography:
[ ] Number:unit ratio is 2:1 or close
[ ] All number+unit combos have whitespace-nowrap
[ ] Labels are uppercase + tracking-wide