@newtil/design-tokens

Appearance

토큰 레퍼런스 ​

css/primitive 와 css/semantic 소스에서 생성한 전체 목록이다. semantic 141개, primitive 114개.

  • 값 열은 참조(var(--_…))를 끝까지 풀어 실제 hex·rem 을 보여준다. 참조로 정의된 토큰은 원래 참조를 작은 글씨로 함께 적었다.
  • 다크 값 열은 @media (prefers-color-scheme: dark) 블록의 값이다. 다크 블록이 없는 축(간격·글꼴·모서리 등)은 테마와 무관하게 한 값이다.
  • --_ 로 시작하는 primitive 는 내부 저장소다. 앱·컴포넌트 코드에서는 semantic 토큰을 쓰고, primitive 는 브랜드색 교체 때만 덮어쓴다.
  • 제거된 옛 이름의 별칭은 마이그레이션에 있다.

Semantic ​

Spacing — 간격·크기 ​

소스: css/semantic/spacing.css · 15개

토큰값설명
--space-00
var(--_scale-0)		0
--space-10.125rem
var(--_scale-1)		2px
--space-20.25rem
var(--_scale-2)		4px
--space-30.5rem
var(--_scale-3)		8px
--space-40.75rem
var(--_scale-4)		12px
--space-51rem
var(--_scale-5)		16px
--space-61.25rem
var(--_scale-6)		20px
--space-71.5rem
var(--_scale-7)		24px
--space-82rem
var(--_scale-8)		32px
--space-92.5rem
var(--_scale-9)		40px
--space-103rem
var(--_scale-10)		48px
--space-114rem
var(--_scale-11)		64px
--space-125rem
var(--_scale-12)		80px
--space-136rem
var(--_scale-13)		96px
--space-148rem
var(--_scale-14)		128px

Color — 색 ​

소스: css/semantic/color.css · 59개 (다크 값 59개)

Brand — Primary ​

토큰라이트 값다크 값설명
--color-primaryoklch(from #398526 min(l, 0.53) c h)
oklch(from var(--_hue-green-500) min(l, 0.53) c h)		oklch(from oklch(from #398526 calc(l + (1 - l) * 0.4) calc(c * 1.1) h) max(l, 0.72) c h)
oklch(from var(--_hue-green-400) max(l, 0.72) c h)
--color-primary-hoveroklch(from oklch(from #398526 min(l, 0.53) c h) calc(l * 0.86) calc(c * 0.95) h)
oklch(from var(--color-primary) calc(l * 0.86) calc(c * 0.95) h)		oklch(from oklch(from oklch(from #398526 calc(l + (1 - l) * 0.4) calc(c * 1.1) h) max(l, 0.72) c h) calc(l * 1.06) calc(c * 0.9) h)
oklch(from var(--color-primary) calc(l * 1.06) calc(c * 0.9) h)
--color-primary-activeoklch(from oklch(from #398526 min(l, 0.53) c h) calc(l * 0.71) calc(c * 0.75) h)
oklch(from var(--color-primary) calc(l * 0.71) calc(c * 0.75) h)		oklch(from oklch(from oklch(from #398526 calc(l + (1 - l) * 0.4) calc(c * 1.1) h) max(l, 0.72) c h) calc(l * 1.12) calc(c * 0.8) h)
oklch(from var(--color-primary) calc(l * 1.12) calc(c * 0.8) h)
--color-primary-subtleoklch(from #398526 calc(l + (1 - l) * 0.88) calc(c * 0.32) h)
var(--_hue-green-100)		oklch(from #398526 calc(l * 0.55) calc(c * 0.58) h)
var(--_hue-green-900)
--color-on-primaryoklch(from oklch(from #398526 min(l, 0.53) c h) 0.97 min(calc(c * 0.15), 0.03) h)
oklch(from var(--color-primary) 0.97 min(calc(c * 0.15), 0.03) h)		oklch(from oklch(from oklch(from #398526 calc(l + (1 - l) * 0.4) calc(c * 1.1) h) max(l, 0.72) c h) 0.22 calc(c * 0.5) h)
oklch(from var(--color-primary) 0.22 calc(c * 0.5) h)

Brand — Secondary ​

토큰라이트 값다크 값설명
--color-secondary #3b82f6
var(--_hue-blue-500)		 #60a5fa
var(--_hue-blue-400)
--color-secondary-hover #2563eb
var(--_hue-blue-600)		 #93c5fd
var(--_hue-blue-300)
--color-secondary-active #1d4ed8
var(--_hue-blue-700)		 #bfdbfe
var(--_hue-blue-200)
--color-secondary-subtle #dbeafe
var(--_hue-blue-100)		 #1e3a8a
var(--_hue-blue-900)
--color-on-secondary #ffffff
var(--_hue-white)		 #0a0a0a
var(--_hue-gray-950)		대비 3.68 — 큰 글자 AA. 본문 AA 가 필요하면 secondary 를 600 으로

Brand — Tertiary ​

토큰라이트 값다크 값설명
--color-tertiary #f59e0b
var(--_hue-amber-500)		 #fbbf24
var(--_hue-amber-400)
--color-tertiary-hover #d97706
var(--_hue-amber-600)		 #fcd34d
var(--_hue-amber-300)
--color-tertiary-active #b45309
var(--_hue-amber-700)		 #fde68a
var(--_hue-amber-200)
--color-tertiary-subtle #fef3c7
var(--_hue-amber-100)		 #78350f
var(--_hue-amber-900)
--color-on-tertiary #171717
var(--_hue-gray-900)		 #0a0a0a
var(--_hue-gray-950)

Surface ​

토큰라이트 값다크 값설명
--color-surface #ffffff
var(--_hue-white)		 #171717
var(--_hue-gray-900)
--color-surface-1 #fafafa
var(--_hue-gray-50)		 #0a0a0a
var(--_hue-gray-950)
--color-surface-2 #f5f5f5
var(--_hue-gray-100)		 #262626
var(--_hue-gray-800)
--color-surface-3 #e5e5e5
var(--_hue-gray-200)		 #404040
var(--_hue-gray-700)
--color-surface-4 #d4d4d4
var(--_hue-gray-300)		 #525252
var(--_hue-gray-600)
--color-surface-inverse #171717
var(--_hue-gray-900)		 #fafafa
var(--_hue-gray-50)
--color-surface-hover #f5f5f5
var(--_hue-gray-100)		 #262626
var(--_hue-gray-800)
--color-surface-active #e5e5e5
var(--_hue-gray-200)		 #404040
var(--_hue-gray-700)
--color-surface-disabled #f5f5f5
var(--_hue-gray-100)		 #262626
var(--_hue-gray-800)

Text ​

토큰라이트 값다크 값설명
--color-text #171717
var(--_hue-gray-900)		 #f5f5f5
var(--_hue-gray-100)
--color-text-muted #525252
var(--_hue-gray-600)		 #a3a3a3
var(--_hue-gray-400)
--color-text-subtle #737373
var(--_hue-gray-500)		 #737373
var(--_hue-gray-500)		0.2.1: 400(대비 2.52) → 500(4.75) / 다크: 0.2.1: 600(대비 2.53) → 500(4.17)
--color-text-inverse #ffffff
var(--_hue-white)		 #171717
var(--_hue-gray-900)
--color-text-disabled #a3a3a3
var(--_hue-gray-400)		 #525252
var(--_hue-gray-600)
토큰라이트 값다크 값설명
--color-link #2563eb
var(--_hue-blue-600)		 #60a5fa
var(--_hue-blue-400)		blue-500 은 흰 바탕 대비 3.68 로 본문 AA 미달
--color-link-hover #1d4ed8
var(--_hue-blue-700)		 #93c5fd
var(--_hue-blue-300)

Border ​

토큰라이트 값다크 값설명
--color-border #e5e5e5
var(--_hue-gray-200)		 #262626
var(--_hue-gray-800)
--color-border-strong #a3a3a3
var(--_hue-gray-400)		 #525252
var(--_hue-gray-600)
--color-border-subtle #f5f5f5
var(--_hue-gray-100)		 #171717
var(--_hue-gray-900)

Code ​

토큰라이트 값다크 값설명
--color-code-bg #171717
var(--_hue-gray-900)		 #0a0a0a
var(--_hue-gray-950)
--color-code-fg #f5f5f5
var(--_hue-gray-100)		 #f5f5f5
var(--_hue-gray-100)
--color-code-border #262626
var(--_hue-gray-800)		 #262626
var(--_hue-gray-800)

Scrim ​

토큰라이트 값다크 값설명
--color-scrim color-mix(in srgb, #0a0a0a 32%, transparent)
color-mix(in srgb, var(--_hue-gray-950) 32%, transparent)		 color-mix(in srgb, #0a0a0a 60%, transparent)
color-mix(in srgb, var(--_hue-gray-950) 60%, transparent)

Status — Success ​

토큰라이트 값다크 값설명
--color-success #10b981
var(--_hue-emerald-500)		 #34d399
var(--_hue-emerald-400)
--color-success-hover #059669
var(--_hue-emerald-600)		 #6ee7b7
var(--_hue-emerald-300)
--color-success-active #047857
var(--_hue-emerald-700)		 #a7f3d0
var(--_hue-emerald-200)
--color-success-subtle #d1fae5
var(--_hue-emerald-100)		 #064e3b
var(--_hue-emerald-900)
--color-on-success #0a0a0a
var(--_hue-gray-950)		 #0a0a0a
var(--_hue-gray-950)		0.2.1: 흰색(대비 2.54) → 검정(7.8)

Status — Warning ​

토큰라이트 값다크 값설명
--color-warning #f59e0b
var(--_hue-amber-500)		 #fbbf24
var(--_hue-amber-400)
--color-warning-hover #d97706
var(--_hue-amber-600)		 #fcd34d
var(--_hue-amber-300)
--color-warning-active #b45309
var(--_hue-amber-700)		 #fde68a
var(--_hue-amber-200)
--color-warning-subtle #fef3c7
var(--_hue-amber-100)		 #78350f
var(--_hue-amber-900)
--color-on-warning #171717
var(--_hue-gray-900)		 #0a0a0a
var(--_hue-gray-950)

Status — Danger ​

토큰라이트 값다크 값설명
--color-danger #ef4444
var(--_hue-red-500)		 #f87171
var(--_hue-red-400)
--color-danger-hover #dc2626
var(--_hue-red-600)		 #fca5a5
var(--_hue-red-300)
--color-danger-active #b91c1c
var(--_hue-red-700)		 #fecaca
var(--_hue-red-200)
--color-danger-subtle #fee2e2
var(--_hue-red-100)		 #7f1d1d
var(--_hue-red-900)
--color-on-danger #ffffff
var(--_hue-white)		 #0a0a0a
var(--_hue-gray-950)		대비 3.76 — 큰 글자 AA

Status — Info ​

토큰라이트 값다크 값설명
--color-info #0ea5e9
var(--_hue-sky-500)		 #38bdf8
var(--_hue-sky-400)
--color-info-hover #0284c7
var(--_hue-sky-600)		 #7dd3fc
var(--_hue-sky-300)
--color-info-active #0369a1
var(--_hue-sky-700)		 #bae6fd
var(--_hue-sky-200)
--color-info-subtle #e0f2fe
var(--_hue-sky-100)		 #0c4a6e
var(--_hue-sky-900)
--color-on-info #0a0a0a
var(--_hue-gray-950)		 #0a0a0a
var(--_hue-gray-950)

Focus ring ​

토큰라이트 값다크 값설명
--color-focus-ring #60a5fa
var(--_hue-blue-400)		 #93c5fd
var(--_hue-blue-300)

Radius — 모서리 ​

소스: css/semantic/radius.css · 8개

토큰값설명
--radius-00
var(--_radius-scale-0)
--radius-10.125rem
var(--_radius-scale-1)
--radius-20.25rem
var(--_radius-scale-2)
--radius-30.5rem
var(--_radius-scale-3)
--radius-40.75rem
var(--_radius-scale-4)
--radius-51rem
var(--_radius-scale-5)
--radius-61.5rem
var(--_radius-scale-6)
--radius-full9999px

Border width — 선 굵기 ​

소스: css/semantic/border.css · 5개

토큰값설명
--border-width-00
--border-width-10.0625rem1px
--border-width-20.125rem2px
--border-width-30.25rem4px
--border-width-40.5rem8px

Typography — 글꼴 ​

소스: css/semantic/typography.css · 21개

토큰값설명
--font-size-caption0.75rem
var(--_font-scale-1)		12px
--font-size-body-sm0.875rem
var(--_font-scale-2)		14px
--font-size-body1rem
var(--_font-scale-3)		16px
--font-size-body-lg1.125rem
var(--_font-scale-4)		18px
--font-size-heading-sm1.25rem
var(--_font-scale-5)		20px
--font-size-heading-md1.5rem
var(--_font-scale-6)		24px
--font-size-heading-lg2rem
var(--_font-scale-7)		32px
--font-size-heading-xl2.5rem
var(--_font-scale-8)		40px
--font-size-display3rem
var(--_font-scale-9)		48px
--font-family-sanssystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif
--font-family-monoui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace
--font-weight-regular400
--font-weight-medium500
--font-weight-semibold600
--font-weight-bold700
--line-height-tight1.2
--line-height-normal1.5
--line-height-loose1.75
--letter-spacing-tight-0.02em
--letter-spacing-normal0
--letter-spacing-wide0.02em

Z-index — 층 ​

소스: css/semantic/z-index.css · 9개

토큰값설명
--z-base0
--z-dropdown100
--z-sticky200
--z-fixed250
--z-overlay300
--z-modal400
--z-popover500
--z-toast600
--z-tooltip700

Opacity — 불투명도 ​

소스: css/semantic/opacity.css · 11개

토큰값설명
--opacity-00
--opacity-100.1
--opacity-200.2
--opacity-300.3
--opacity-400.4
--opacity-500.5
--opacity-600.6
--opacity-700.7
--opacity-800.8
--opacity-900.9
--opacity-1001

Shadow — 그림자 ​

소스: css/semantic/shadow.css · 5개

토큰값설명
--shadow-sm0 0.0625rem 0.125rem rgba(0, 0, 0, 0.05)
var(--_shadow-elev-1)
--shadow-md0 0.125rem 0.25rem rgba(0, 0, 0, 0.1)
var(--_shadow-elev-2)
--shadow-lg0 0.25rem 0.5rem rgba(0, 0, 0, 0.12)
var(--_shadow-elev-3)
--shadow-xl0 0.5rem 1rem rgba(0, 0, 0, 0.15)
var(--_shadow-elev-4)
--shadow-2xl0 1rem 2rem rgba(0, 0, 0, 0.2)
var(--_shadow-elev-5)

Transition — 시간·가속 ​

소스: css/semantic/transition.css · 7개

토큰값설명
--duration-fast150ms
--duration-normal250ms
--duration-slow400ms
--ease-linearlinear
--ease-incubic-bezier(0.4, 0, 1, 1)
--ease-outcubic-bezier(0, 0, 0.2, 1)
--ease-in-outcubic-bezier(0.4, 0, 0.2, 1)

Primitive ​

Scale — 길이 계단 ​

소스: css/primitive/scale.css · 15개

토큰값설명
--_scale-00
--_scale-10.125rem2px
--_scale-20.25rem4px
--_scale-30.5rem8px
--_scale-40.75rem12px
--_scale-51rem16px
--_scale-61.25rem20px
--_scale-71.5rem24px
--_scale-82rem32px
--_scale-92.5rem40px
--_scale-103rem48px
--_scale-114rem64px
--_scale-125rem80px
--_scale-136rem96px
--_scale-148rem128px

Hue — 색상 팔레트 ​

소스: css/primitive/hue.css · 79개

토큰값설명
--_hue-gray-50 #fafafa
--_hue-gray-100 #f5f5f5
--_hue-gray-200 #e5e5e5
--_hue-gray-300 #d4d4d4
--_hue-gray-400 #a3a3a3
--_hue-gray-500 #737373
--_hue-gray-600 #525252
--_hue-gray-700 #404040
--_hue-gray-800 #262626
--_hue-gray-900 #171717
--_hue-gray-950 #0a0a0a
--brand #3985260.2.4: 흰 글자가 올라가는 깊이(대비 4.6). 전엔 #8cba35 연두라 글자가 검정이었다
--_hue-green-50oklch(from #398526 calc(l + (1 - l) * 0.95) calc(c * 0.2) h)
oklch(from var(--brand) calc(l + (1 - l) * 0.95) calc(c * 0.2) h)
--_hue-green-100oklch(from #398526 calc(l + (1 - l) * 0.88) calc(c * 0.32) h)
oklch(from var(--brand) calc(l + (1 - l) * 0.88) calc(c * 0.32) h)
--_hue-green-200oklch(from #398526 calc(l + (1 - l) * 0.75) calc(c * 0.7) h)
oklch(from var(--brand) calc(l + (1 - l) * 0.75) calc(c * 0.7) h)
--_hue-green-300oklch(from #398526 calc(l + (1 - l) * 0.58) calc(c * 0.95) h)
oklch(from var(--brand) calc(l + (1 - l) * 0.58) calc(c * 0.95) h)
--_hue-green-400oklch(from #398526 calc(l + (1 - l) * 0.4) calc(c * 1.1) h)
oklch(from var(--brand) calc(l + (1 - l) * 0.4) calc(c * 1.1) h)
--_hue-green-500 #398526
var(--brand)
--_hue-green-600oklch(from #398526 calc(l * 0.86) calc(c * 0.95) h)
oklch(from var(--brand) calc(l * 0.86) calc(c * 0.95) h)
--_hue-green-700oklch(from #398526 calc(l * 0.71) calc(c * 0.75) h)
oklch(from var(--brand) calc(l * 0.71) calc(c * 0.75) h)
--_hue-green-800oklch(from #398526 calc(l * 0.62) calc(c * 0.65) h)
oklch(from var(--brand) calc(l * 0.62) calc(c * 0.65) h)
--_hue-green-900oklch(from #398526 calc(l * 0.55) calc(c * 0.58) h)
oklch(from var(--brand) calc(l * 0.55) calc(c * 0.58) h)
--_hue-green-950oklch(from #398526 calc(l * 0.38) calc(c * 0.4) h)
oklch(from var(--brand) calc(l * 0.38) calc(c * 0.4) h)
--_hue-blue-50 #eff6ff
--_hue-blue-100 #dbeafe
--_hue-blue-200 #bfdbfe
--_hue-blue-300 #93c5fd
--_hue-blue-400 #60a5fa
--_hue-blue-500 #3b82f6
--_hue-blue-600 #2563eb
--_hue-blue-700 #1d4ed8
--_hue-blue-800 #1e40af
--_hue-blue-900 #1e3a8a
--_hue-blue-950 #172554
--_hue-red-50 #fef2f2
--_hue-red-100 #fee2e2
--_hue-red-200 #fecaca
--_hue-red-300 #fca5a5
--_hue-red-400 #f87171
--_hue-red-500 #ef4444
--_hue-red-600 #dc2626
--_hue-red-700 #b91c1c
--_hue-red-800 #991b1b
--_hue-red-900 #7f1d1d
--_hue-red-950 #450a0a
--_hue-amber-50 #fffbeb
--_hue-amber-100 #fef3c7
--_hue-amber-200 #fde68a
--_hue-amber-300 #fcd34d
--_hue-amber-400 #fbbf24
--_hue-amber-500 #f59e0b
--_hue-amber-600 #d97706
--_hue-amber-700 #b45309
--_hue-amber-800 #92400e
--_hue-amber-900 #78350f
--_hue-amber-950 #451a03
--_hue-emerald-50 #ecfdf5
--_hue-emerald-100 #d1fae5
--_hue-emerald-200 #a7f3d0
--_hue-emerald-300 #6ee7b7
--_hue-emerald-400 #34d399
--_hue-emerald-500 #10b981
--_hue-emerald-600 #059669
--_hue-emerald-700 #047857
--_hue-emerald-800 #065f46
--_hue-emerald-900 #064e3b
--_hue-emerald-950 #022c22
--_hue-white #ffffff
--_hue-sky-50 #f0f9ff
--_hue-sky-100 #e0f2fe
--_hue-sky-200 #bae6fd
--_hue-sky-300 #7dd3fc
--_hue-sky-400 #38bdf8
--_hue-sky-500 #0ea5e9
--_hue-sky-600 #0284c7
--_hue-sky-700 #0369a1
--_hue-sky-800 #075985
--_hue-sky-900 #0c4a6e
--_hue-sky-950 #082f49

Radius scale — 모서리 계단 ​

소스: css/primitive/radius-scale.css · 7개

토큰값설명
--_radius-scale-00
--_radius-scale-10.125rem2px
--_radius-scale-20.25rem4px
--_radius-scale-30.5rem8px
--_radius-scale-40.75rem12px
--_radius-scale-51rem16px
--_radius-scale-61.5rem24px

Font scale — 글꼴 크기 계단 ​

소스: css/primitive/font-scale.css · 9개

토큰값설명
--_font-scale-10.75rem12px
--_font-scale-20.875rem14px
--_font-scale-31rem16px
--_font-scale-41.125rem18px
--_font-scale-51.25rem20px
--_font-scale-61.5rem24px
--_font-scale-72rem32px
--_font-scale-82.5rem40px
--_font-scale-93rem48px

Shadow elevation — 그림자 계단 ​

소스: css/primitive/shadow-elev.css · 5개

토큰값설명
--_shadow-elev-10 0.0625rem 0.125rem rgba(0, 0, 0, 0.05)y=1px, blur=2px
--_shadow-elev-20 0.125rem 0.25rem rgba(0, 0, 0, 0.1)y=2px, blur=4px
--_shadow-elev-30 0.25rem 0.5rem rgba(0, 0, 0, 0.12)y=4px, blur=8px
--_shadow-elev-40 0.5rem 1rem rgba(0, 0, 0, 0.15)y=8px, blur=16px
--_shadow-elev-50 1rem 2rem rgba(0, 0, 0, 0.2)y=16px, blur=32px

Copyright © 2026 newlecture