디자인 보드 · 21st.dev

디자인 토큰 시각화

🎨 색상 팔레트

#ffffff×24

rgb(0 0 0/0.1)×24

rgb(255 255 255/.2)×15

#fafafa×13

#0a0a0a×13

rgb(255 255 255/.1)×12

rgb(255 255 255/.05)×12

rgb(0 0 0/0.05)×11

rgba(255,255,255,0.06)×10

#000000×9

#09090b×9

rgba(0,0,0,0.06)×9

rgba(255,255,255,0.12)×9

#e5e7eb×8

#171717×8

#0033ff×8

rgb(255 255 255/.3)×8

rgb(0 0 0/0)×8

#111827×7

rgba(0,0,0,0.32)×7

rgb(255 255 255/.15)×7

#9ca3af×6

#374151×6

#e5e5e5×6

#3b82f6×6

#008fe9×6

rgba(255,255,255,0.03)×6

#d1d5db×5

#a1a1aa×5

#d4d4d4×5

🔤 타이포그래피

Averia Serif Libre ×7ABC Diatype ×6Georgia ×3GeistMono ×2GeistPixelSquare ×2GeistPixelGrid ×2

Ag 가나다 100%×1

Ag 가나다 80%×1

Ag 가나다 75%×1

Ag 가나다 3.75rem×1

Ag 가나다 3rem×1

Ag 가나다 2.25em×1

Ag 가나다 2.25rem×1

Ag 가나다 2.1428571em×1

📐 간격 스케일

0px×6

1px×31

.125rem×31

2px×15

.1428571em×2

.1875em×2

3px×5

4px×6

.25rem×41

.2857143em×3

5px×2

.3571429em×2

모서리 (radius)

1px

2px

3px

4px

.25rem

.3125rem

5px

6px

.375rem

8px

✨ 그림자

var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-…

var(--tw-ring-offset-shadow),var(--tw-ring-shado…

var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-…

var(--tw-ring-offset-shadow),var(--tw-ring-shado…

0 0 0 3px hsl(var(--ring)/.24)

0 0 0 4px hsl(var(--primary)/.5)!important

🧩 컴포넌트 인벤토리

100

버튼

입력

링크

199

이미지

1164

전체 요소

.lucide.items-center.flex.w-full.text-sm.text-muted-foreground.transition-colors.flex-1.h-4.py-1.5.rounded-md.w-4.px-2.gap-2.5.hover:text-foreground.hover:bg-foreground/5.text-left.h-3.5

🧮 CSS 변수 (디자인 토큰)

`--font-geist-mono`	"GeistMono",ui-monospace,SFMono-Regular,Roboto Mono,Menlo,Mo
`--font-geist-pixel-square`	"GeistPixelSquare",Geist Mono,ui-monospace,SFMono-Regular,Ro
`--font-geist-pixel-grid`	"GeistPixelGrid",Geist Mono,ui-monospace,SFMono-Regular,Robo
`--font-geist-pixel-circle`	"GeistPixelCircle",Geist Mono,ui-monospace,SFMono-Regular,Ro
`--font-geist-pixel-triangle`	"GeistPixelTriangle",Geist Mono,ui-monospace,SFMono-Regular,
`--font-geist-pixel-line`	"GeistPixelLine",Geist Mono,ui-monospace,SFMono-Regular,Robo
`--font-geist-sans`	"GeistSans","GeistSans Fallback"
`--font-averia-serif`	"Averia Serif Libre","Averia Serif Libre Fallback"
`--tw-border-spacing-x`	0
`--tw-border-spacing-y`	0
`--tw-translate-x`	0
`--tw-translate-y`	0
`--tw-rotate`	0
`--tw-skew-x`	0
`--tw-skew-y`	0
`--tw-scale-x`	1
`--tw-scale-y`	1
`--tw-pan-x`
`--tw-pan-y`
`--tw-pinch-zoom`
`--tw-scroll-snap-strictness`	proximity
`--tw-gradient-from-position`
`--tw-gradient-via-position`
`--tw-gradient-to-position`
`--tw-ordinal`
`--tw-slashed-zero`
`--tw-numeric-figure`
`--tw-numeric-spacing`
`--tw-numeric-fraction`
`--tw-ring-inset`
`--tw-ring-offset-width`	0px
`--tw-ring-offset-color`	#fff
`--tw-ring-color`	rgb(59 130 246/0.5)
`--tw-ring-offset-shadow`	0 0 #0000
`--tw-ring-shadow`	0 0 #0000
`--tw-shadow`	0 0 #0000
`--tw-shadow-colored`	0 0 #0000
`--tw-blur`
`--tw-brightness`
`--tw-contrast`

전문가 분석 리포트

🧮

토큰 추출가

디자인 토큰 · CSS 변수 정규화

명시적 CSS 변수 60개 발견 — 토큰화 수준 높음