w.woosignPAPER & INK
GitHub ↗

THE FOUNDATION

Paper, Ink
& everything between.

색상부터 여백까지. 같은 언어로 화면을 연결하는 디자인 토큰.

팔레트

Cream

100#F4EFE6
200#EAE4D8
300#F9F3E6

Ink

700#3F3A34
800#2A2622
900#171513

Ember

300#F0C79E
500#D35B1F
600#B84C17

Forest

300#B8CFC4
500#1F4435
700#163328

시맨틱 컬러 / light

오른쪽 위 테마 버튼으로 실제 색상 매핑을 비교하세요.

background#F4EFE6
foregroundrgba(0,0,0,0.87)
card#FFFFFF
cardForegroundrgba(0,0,0,0.87)
popover#FFFFFF
popoverForegroundrgba(0,0,0,0.87)
primary#D35B1F
primaryForeground#FFFFFF
secondary#EAE4D8
secondaryForegroundrgba(0,0,0,0.87)
muted#EAE4D8
mutedForegroundrgba(0,0,0,0.58)
accent#F9F3E6
accentForeground#2A2622
destructive#B02818
destructiveForeground#FFFFFF
borderrgba(0,0,0,0.12)
inputrgba(0,0,0,0.12)
ring#D35B1F
canvas#F4EFE6
section#EAE4D8
reward#F9F3E6
inverse#171513
inverseForeground#FFFFFF
inverseForegroundSecondaryrgba(255,255,255,0.70)
brand#2A2622
actionPrimary#D35B1F
actionPrimaryHover#B84C17
actionDark#171513
actionDanger#B02818
actionForest#1F4435
actionForestHover#163328
forestTint#B8CFC4
gold#C98A3C
successTinthsla(30, 28%, 82%, 0.40)
errorTinthsla(8, 66%, 40%, 0.06)
textPrimaryrgba(0,0,0,0.87)
textSecondaryrgba(0,0,0,0.58)
textTertiaryrgba(0,0,0,0.38)
textInverse#FFFFFF
textInverseSecondaryrgba(255,255,255,0.70)
textBrand#2A2622
borderDefaultrgba(0,0,0,0.12)
borderStrongrgba(0,0,0,0.87)
borderInverse#FFFFFF
borderFocus#D35B1F

타이포그래피

xs · 12/16Good things.
sm · 14/20Good things.
base · 16/24Good things.
lg · 18/28Good things.
xl · 20/28Good things.
2xl · 24/32Good things.
3xl · 30/36Good things.
4xl · 36/40Good things.
5xl · 48/48Good things.
displayLg · 80/96Good things.
displayMd · 58/70Good things.
headingLg · 45/54Good things.
headingMd · 24/36Good things.
bodyLg · 19/33Good things.
bodyMd · 16/24Good things.
bodySm · 14/21Good things.
caption · 13/20Good things.

여백

wbSpace.14px
wbSpace.28px
wbSpace.316px
wbSpace.424px
wbSpace.532px
wbSpace.640px
wbSpace.748px
wbSpace.856px
wbSpace.964px

모서리

none · 0px
sm · 8px
DEFAULT · 12px
md · 12px
lg · 16px
xl · 16px
2xl · 24px
3xl · 32px
pill · 999px
full · 9999px
circle · 9999px

그림자

card
0 0 0.5px rgba(0,0,0,0.14), 0 1px 1px rgba(0,0,0,0.24)
navigation
0 1px 3px rgba(0,0,0,0.10), 0 2px 2px rgba(0,0,0,0.06), 0 0 2px rgba(0,0,0,0.07)
floating
0 0 6px rgba(0,0,0,0.24), 0 8px 12px rgba(0,0,0,0.14)
modal
0 0 1px rgba(0,0,0,0.14), 0 10px 24px rgba(0,0,0,0.18)