TORICO Design System

Token reference — generated 2026-02-27T01:10:05.103Z

Design Principles

1 Simple

Curate features and information ruthlessly. Fewer elements, clearer purpose. A fundamental principle across all design.

Good — focused

Google

One input, one purpose

Bad — cluttered

Special offer! Upgrade now for 50% off

Search Filter Sort

Tag 1 Tag 2 Tag 3 Tag 4 +5

Tip of the day...

What's new

Everything visible, nothing clear

Can you remove this element without losing meaning?
Is each screen focused on one primary task?
Are you showing information at the right time, not all at once?

2 Consistent

Same experience across products. Follow tokens and patterns.

Good — same tokens

DRAWER

radii.xl + cardPadding

Shunsaku

radii.xl + cardPadding

Bad — inconsistent values

Screen A

radius: 8, pad: 8

Screen B

radius: 20, pad: 16

Does an existing pattern cover this? Use it as-is
Can it be expressed with tokens? Don't create new values
Does it align across DRAWER / Shunsaku / EnglishJournal?

Visual Style

Native Apps

Minimal dark — black base, content stands out
iOS-native — system conventions, gestures, safe areas
Teal accent — used sparingly

#4FD1C5

Web

Clean modern — generous whitespace
Light theme — landing pages, coach dashboard
Web accent — ensures contrast on light backgrounds

#4A9B8E

Animation Policy

Allowed

200ms default duration + ease
Fade in + subtle upward slide (8px max)
Fade out only (150ms fast)
Spring animation for tactile feedback

Forbidden

Rotation effects
Bounce animations
Excessive scale changes
Transitions over 300ms

Colors

Neutral

neutral-0#FFFFFF

neutral-50#FAFAFA

neutral-100#F5F5F5

neutral-200#EBEBEB

neutral-300#E0E0E0

neutral-400#BFBFBF

neutral-500#8E8E8E

neutral-600#666666

neutral-700#444444

neutral-800#282828

neutral-900#141414

neutral-950#0C0C0C

Drawer

drawer-green#4FD1C5

drawer-gray#726E6E

App

app-background#000000

app-secondary#1C1C1E

app-tertiary#2C2C2E

app-surface#2A2A2A

app-gray#1C2A2E

Feedback

success#22C55E

success-light#DCFCE7

success-dark#166534

warning#EAB308

warning-light#FEF9C3

warning-dark#A16207

error#EF4444

error-light#FEE2E2

error-dark#B91C1C

info#3B82F6

info-light#DBEAFE

info-dark#1D4ED8

Typography

Name	Size	Line Height	Preview
`xs`	12px	16px	The quick brown fox
`sm`	14px	20px	The quick brown fox
`base`	16px	24px	The quick brown fox
`lg`	18px	28px	The quick brown fox
`xl`	20px	28px	The quick brown fox
`2xl`	24px	32px	The quick brown fox
`3xl`	28px	36px	The quick brown fox
`4xl`	32px	40px	The quick brown fox
`5xl`	40px	48px	The quick brown fox
`6xl`	48px	56px	The quick brown fox

Spacing

Token	Value	Visual
`1`	4px
`2`	8px
`3`	12px
`4`	16px
`5`	20px
`6`	24px
`7`	28px
`8`	32px
`9`	36px
`10`	40px
`11`	44px
`12`	48px
`14`	56px
`16`	64px
`20`	80px
`24`	96px
`28`	112px
`32`	128px
`0.5`	2px
`1.5`	6px
`2.5`	10px
`3.5`	14px

Border Radius

none0

xs2px

sm4px

md8px

lg12px

xl16px

2xl20px

3xl24px

full9999px

Shadows

none

sm

md

lg

xl

2xl