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
#2A2A2AStrongest emphasis (donut center, briefing title)
Primary
#3C3C3CMetrics, section titles
Secondary
#6A6A6ALabels, captions
Tertiary
#7A7A7ASubtitles, dates
Disabled
#9B9B9BInactive, placeholder
Allowed: active nav, selected chart segment, progress fill, icon badge, pill toggle
Forbidden: body text, large background areas, borders, gradients
Typography Rules (Rules 5-7)
#
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
Layout Rules (Rules 8-11)
#
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
Information Architecture Rules (Rules 12-14)
#
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
Number Formatting Rules (Rules 15-16)
#
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
Interaction Rules (Rules 17-18)
#
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:scale on buttons (Toss uses color change only)
Visual Detail Rules (Rules 19-22)
#
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
Forbidden Patterns (Rules 23-29)
#
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
Extended Rules (Rules 30-69)
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
Empty & Error States (34-35)
Show 0 as actual zero (never dash or hide)
Error per-card, not full page
Friendly tone: "We couldn't load the data" (not "Error 500")
Negative/Decline Display (36)
Down trend: text-destructive + TrendingDown icon + - prefix
Minus sign for negative amounts (no parentheses)
truncate for names, line-clamp-2 for 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-motion disables 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
Quick Checklist for New Pages 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