디자인 토큰
쓸 수 있는 값 283개의 전체 목록이다. 카테고리별 설명은 각 문서에 있고 여기에는 전량이 모여 있다.
이름을 읽는 법
이름 방식이 두 가지다. 값의 성격이 다르기 때문이다.
| 방식 | 예 | 쓰는 곳 |
|---|
| 숫자 | space-4 radius-2 font-size-3 | 등간격 스케일 — 간격 · 모서리 · 글자 크기 · 시간 |
|---|
| 역할 | control-bg size-control-md | 의미가 있는 값(색), 불규칙한 실측값(크기) |
|---|
숫자를 쓰면 값이 이름에서 계산되고(space-4 = 4 × 4px) 중간값을 넣어도 기존 이름이 바뀌지 않는다(space-1 과 space-2 사이는 space-1_5).
아이콘 크기는 14, 16, 20, 24px 로 불규칙해서 숫자의 두 이점이 모두 없다.
색만 한 겹을 더 둔다
색 color-brand-9 ─→ action-primary ─→ .nui-button--primary
팔레트 역할 컴포넌트가 참조하는 것
그 외 radius-2 ─────────────────→ .nui-textfield
스케일 역할 층 없음
컴포넌트는 action-primary 를 참조한다. 브랜드 색을 바꿔도 컴포넌트가 따라오게 하기 위해서다.
간격과 모서리, 크기, 시간, 선 두께에는 역할 층이 없다. 이름이 이미 역할이다.
전량 283개
이 목록은 packages/ui/src/styles/tokens/_seed.scss 에서 자동 생성한다.
팔레트 117개
| 토큰 | 값 | 비고 |
|---|
| --nui-color-white | #fff | — |
| --nui-color-brand-1 | #f9fefd | — |
| --nui-color-brand-2 | #f2fbfa | — |
| --nui-color-brand-3 | #def8f4 | — |
| --nui-color-brand-4 | #c9f3ed | — |
| --nui-color-brand-5 | #b3ebe3 | — |
| --nui-color-brand-6 | #9cdfd5 | — |
| --nui-color-brand-7 | #7ecec4 | — |
| --nui-color-brand-8 | #4dbaad | — |
| --nui-color-brand-9 | #01796f | — |
| --nui-color-brand-10 | #006b61 | — |
| --nui-color-brand-11 | #00776d | — |
| --nui-color-brand-12 | #18423d | — |
| --nui-color-brand-a4 | #00c7aa36 | — |
| --nui-color-brand-a5 | #00bca24c | — |
| --nui-color-brand-a6 | #00ad9363 | — |
| --nui-color-brand-a7 | #009f8b81 | — |
| --nui-color-secondary-1 | #fafdfd | — |
| --nui-color-secondary-2 | #f4fbfa | — |
| --nui-color-secondary-3 | #e6f5f2 | — |
| --nui-color-secondary-4 | #d8eeeb | — |
| --nui-color-secondary-5 | #cae7e2 | — |
| --nui-color-secondary-6 | #bcded9 | — |
| --nui-color-secondary-7 | #a9d1cb | — |
| --nui-color-secondary-8 | #8cbfb7 | — |
| --nui-color-secondary-9 | #33615b | — |
| --nui-color-secondary-10 | #24524c | — |
| --nui-color-secondary-11 | #406e68 | — |
| --nui-color-secondary-12 | #172e2b | — |
| --nui-color-secondary-a4 | #00907d27 | — |
| --nui-color-secondary-a5 | #008c7435 | — |
| --nui-color-secondary-a6 | #00826f43 | — |
| --nui-color-secondary-a7 | #00776556 | — |
| --nui-color-gray-1 | #fcfdfc | — |
| --nui-color-gray-2 | #f8f9f8 | — |
| --nui-color-gray-3 | #eff1ef | — |
| --nui-color-gray-4 | #e7e9e7 | — |
| --nui-color-gray-5 | #e0e1e0 | — |
| --nui-color-gray-6 | #d8dad8 | — |
| --nui-color-gray-7 | #cdcfcd | — |
| --nui-color-gray-8 | #b9bcba | — |
| --nui-color-gray-9 | #898d8a | — |
| --nui-color-gray-10 | #7f8380 | — |
| --nui-color-gray-11 | #616462 | — |
| --nui-color-gray-12 | #1c201d | — |
| --nui-color-gray-a3 | #00200010 | — |
| --nui-color-gray-a4 | #00160018 | — |
| --nui-color-gray-a5 | #0009001f | — |
| --nui-color-gray-a6 | #000e0027 | — |
| --nui-color-gray-a7 | #000b0032 | — |
| --nui-color-danger-1 | #fffcfc | — |
| --nui-color-danger-2 | #fff7f7 | — |
| --nui-color-danger-3 | #feebe9 | — |
| --nui-color-danger-4 | #ffdcd7 | — |
| --nui-color-danger-5 | #ffcec8 | — |
| --nui-color-danger-6 | #fdbeb7 | — |
| --nui-color-danger-7 | #f5aaa3 | — |
| --nui-color-danger-8 | #eb8f88 | — |
| --nui-color-danger-9 | #ce2c31 | — |
| --nui-color-danger-10 | #be1523 | — |
| --nui-color-danger-11 | #ce2c31 | — |
| --nui-color-danger-12 | #641818 | — |
| --nui-color-danger-a4 | #ff200028 | — |
| --nui-color-danger-a5 | #ff1c0037 | — |
| --nui-color-danger-a6 | #f8190048 | — |
| --nui-color-danger-a7 | #e414005c | — |
| --nui-color-warning-1 | #fefdfb | — |
| --nui-color-warning-2 | #fffaea | — |
| --nui-color-warning-3 | #fff2c3 | — |
| --nui-color-warning-4 | #ffe9a0 | — |
| --nui-color-warning-5 | #ffde7f | — |
| --nui-color-warning-6 | #fcd27a | — |
| --nui-color-warning-7 | #e9c16e | — |
| --nui-color-warning-8 | #d7a944 | — |
| --nui-color-warning-9 | #ffca2f | — |
| --nui-color-warning-10 | #fac137 | — |
| --nui-color-warning-11 | #9b6f00 | — |
| --nui-color-warning-12 | #463a20 | — |
| --nui-color-warning-a5 | #ffbe0080 | — |
| --nui-color-warning-a6 | #faa90085 | — |
| --nui-color-warning-a7 | #d9920091 | — |
| --nui-color-success-1 | #fbfefc | — |
| --nui-color-success-2 | #f5fbf7 | — |
| --nui-color-success-3 | #e7f6ed | — |
| --nui-color-success-4 | #d9f0e2 | — |
| --nui-color-success-5 | #c8e7d5 | — |
| --nui-color-success-6 | #b3dcc4 | — |
| --nui-color-success-7 | #97ccae | — |
| --nui-color-success-8 | #6eb68f | — |
| --nui-color-success-9 | #218358 | — |
| --nui-color-success-10 | #06754b | — |
| --nui-color-success-11 | #1a7f54 | — |
| --nui-color-success-12 | #223a2d | — |
| --nui-color-success-a5 | #00903d37 | — |
| --nui-color-success-a6 | #008a3a4c | — |
| --nui-color-success-a7 | #00823968 | — |
| --nui-color-info-1 | #fbfdff | — |
| --nui-color-info-2 | #f5f9fe | — |
| --nui-color-info-3 | #eaf3fd | — |
| --nui-color-info-4 | #dcecff | — |
| --nui-color-info-5 | #cbe3fe | — |
| --nui-color-info-6 | #b7d5f9 | — |
| --nui-color-info-7 | #9dc4f1 | — |
| --nui-color-info-8 | #78ade9 | — |
| --nui-color-info-9 | #0d74ce | — |
| --nui-color-info-10 | #0066bf | — |
| --nui-color-info-11 | #0e75cf | — |
| --nui-color-info-12 | #0d355c | — |
| --nui-color-info-a5 | #0076fb34 | — |
| --nui-color-info-a6 | #006bea48 | — |
| --nui-color-info-a7 | #0066db62 | — |
| --nui-color-brand-contrast | #ffffff | — |
| --nui-color-secondary-contrast | #ffffff | — |
| --nui-color-danger-contrast | #ffffff | — |
| --nui-color-warning-contrast | #2b2009 | — |
| --nui-color-success-contrast | #ffffff | — |
| --nui-color-info-contrast | #ffffff | — |
글자색 7개
| 토큰 | 값 | 비고 |
|---|
| --nui-text-primary | var(--nui-color-gray-12) | 별칭 |
| --nui-text-secondary | var(--nui-color-gray-11) | 별칭 |
| --nui-text-disabled | var(--nui-color-gray-9) | 별칭 |
| --nui-text-danger | var(--nui-color-danger-11) | 별칭 |
| --nui-text-info | var(--nui-color-info-11) | 별칭 |
| --nui-text-on-inverse | var(--nui-color-white) | 별칭 |
| --nui-text-on-accent | var(--nui-color-white) | 별칭 |
면 8개
| 토큰 | 값 | 비고 |
|---|
| --nui-layer-basement | var(--nui-color-gray-2) | 별칭 |
| --nui-layer-default | var(--nui-color-gray-1) | 별칭 |
| --nui-layer-floating | var(--nui-color-gray-1) | 별칭 |
| --nui-layer-inverse | var(--nui-color-gray-12) | 별칭 |
| --nui-layer-overlay | rgb(0 0 0 / 50%) | — |
| --nui-surface-neutral-soft | var(--nui-color-gray-a3) | 별칭 |
| --nui-surface-neutral-subtle | var(--nui-color-gray-a4) | 별칭 |
| --nui-surface-toast-error | var(--nui-color-danger-12) | 별칭 |
선 7개
| 토큰 | 값 | 비고 |
|---|
| --nui-border-form | var(--nui-color-gray-6) | 별칭 |
| --nui-border-section | var(--nui-color-gray-a5) | 별칭 |
| --nui-border-divider | var(--nui-color-gray-a3) | 별칭 |
| --nui-border-brand | var(--nui-color-brand-7) | 별칭 |
| --nui-border-brand-subtle | var(--nui-color-brand-6) | 별칭 |
| --nui-border-width-1 | 1px | — |
| --nui-border-width-2 | 2px | — |
입력 컨트롤 26개
| 토큰 | 값 | 비고 |
|---|
| --nui-control-text | var(--nui-color-gray-12) | 별칭 |
| --nui-control-text-muted | var(--nui-color-gray-11) | 별칭 |
| --nui-control-text-placeholder | var(--nui-color-gray-10) | 별칭 |
| --nui-control-text-disabled | var(--nui-text-disabled) | 별칭 |
| --nui-control-text-error | var(--nui-color-danger-11) | 별칭 |
| --nui-control-icon | var(--nui-color-gray-10) | 별칭 |
| --nui-control-icon-disabled | var(--nui-color-gray-9) | 별칭 |
| --nui-control-icon-strong | var(--nui-color-gray-12) | 별칭 |
| --nui-control-bg | var(--nui-layer-default) | 별칭 |
| --nui-control-bg-disabled | var(--nui-color-gray-3) | 별칭 |
| --nui-control-bg-readonly | var(--nui-color-gray-2) | 별칭 |
| --nui-control-bg-subtle | var(--nui-color-gray-3) | 별칭 |
| --nui-control-bg-hover | var(--nui-color-gray-a4) | 별칭 |
| --nui-control-bg-active | var(--nui-color-gray-a5) | 별칭 |
| --nui-control-border | var(--nui-color-gray-9) | 별칭 |
| --nui-control-border-hover | var(--nui-color-gray-10) | 별칭 |
| --nui-control-border-disabled | var(--nui-color-gray-8) | 별칭 |
| --nui-control-border-error | var(--nui-color-danger-8) | 별칭 |
| --nui-control-accent | var(--nui-color-brand-9) | 별칭 |
| --nui-control-accent-soft | var(--nui-color-brand-3) | 별칭 |
| --nui-control-accent-error | var(--nui-color-danger-9) | 별칭 |
| --nui-control-selection-disabled | var(--nui-color-gray-8) | 별칭 |
| --nui-control-track | var(--nui-color-gray-9) | 별칭 |
| --nui-control-thumb | var(--nui-color-white) | 별칭 |
| --nui-control-selection-text | var(--nui-color-brand-11) | 별칭 |
| --nui-focus-color | var(--nui-color-brand-9) | 별칭 |
액션 26개
| 토큰 | 값 | 비고 |
|---|
| --nui-action-neutral | var(--nui-color-gray-12) | 별칭 |
| --nui-action-primary | var(--nui-color-brand-9) | 별칭 |
| --nui-action-secondary | var(--nui-color-secondary-9) | 별칭 |
| --nui-action-danger | var(--nui-color-danger-9) | 별칭 |
| --nui-action-warning | var(--nui-color-warning-9) | 별칭 |
| --nui-action-neutral-fg | var(--nui-color-gray-1) | 별칭 |
| --nui-action-primary-fg | var(--nui-color-brand-contrast) | 별칭 |
| --nui-action-secondary-fg | var(--nui-color-secondary-contrast) | 별칭 |
| --nui-action-danger-fg | var(--nui-color-danger-contrast) | 별칭 |
| --nui-action-warning-fg | var(--nui-color-warning-contrast) | 별칭 |
| --nui-action-neutral-hover | color-mix( in oklab, var(--nui-color-gray-12), var(--nui-color-white) 14% ) | — |
| --nui-action-neutral-active | color-mix( in oklab, var(--nui-color-gray-12), var(--nui-color-white) 26% ) | — |
| --nui-action-primary-hover | var(--nui-color-brand-10) | 별칭 |
| --nui-action-primary-active | color-mix( in oklab, var(--nui-color-brand-10), #000 12% ) | — |
| --nui-action-secondary-hover | var(--nui-color-secondary-10) | 별칭 |
| --nui-action-secondary-active | color-mix( in oklab, var(--nui-color-secondary-10), #000 12% ) | — |
| --nui-action-danger-hover | var(--nui-color-danger-10) | 별칭 |
| --nui-action-danger-active | color-mix( in oklab, var(--nui-color-danger-10), #000 12% ) | — |
| --nui-action-warning-hover | var(--nui-color-warning-10) | 별칭 |
| --nui-action-warning-active | color-mix( in oklab, var(--nui-color-warning-10), #000 12% ) | — |
| --nui-action-bg-hover | var(--nui-color-gray-a4) | 별칭 |
| --nui-action-bg-active | var(--nui-color-gray-a5) | 별칭 |
| --nui-action-bg-disabled | var(--nui-color-gray-3) | 별칭 |
| --nui-action-fg-disabled | var(--nui-color-gray-9) | 별칭 |
| --nui-action-border-disabled | var(--nui-color-gray-6) | 별칭 |
| --nui-action-fg-line-disabled | var(--nui-color-gray-9) | 별칭 |
상태 표시 4개
| 토큰 | 값 | 비고 |
|---|
| --nui-status-error-soft | var(--nui-color-danger-3) | 별칭 |
| --nui-status-success-soft | var(--nui-color-success-3) | 별칭 |
| --nui-status-warning-soft | var(--nui-color-warning-3) | 별칭 |
| --nui-status-info-soft | var(--nui-color-info-3) | 별칭 |
타이포그래피 18개
| 토큰 | 값 | 비고 |
|---|
| --nui-font-family-base | inherit | 라이브러리는 폰트를 배포하지 않는다 |
| --nui-font-size-1 | 0.8125rem | 13px |
| --nui-font-size-3 | 0.875rem | 14px |
| --nui-font-size-4 | 1rem | 16px |
| --nui-font-size-5 | 1.125rem | 18px |
| --nui-font-size-6 | 1.25rem | 20px |
| --nui-line-height-1 | 1.5 | 13 → 19.5px |
| --nui-line-height-3 | 1.5 | 14 → 21px |
| --nui-line-height-4 | 1.5 | 16 → 24px |
| --nui-line-height-5 | 1.5 | 18 → 27px |
| --nui-line-height-6 | 1.5 | 20 → 30px |
| --nui-letter-spacing-1 | 0 | — |
| --nui-letter-spacing-3 | 0 | — |
| --nui-letter-spacing-4 | 0 | — |
| --nui-letter-spacing-5 | 0 | — |
| --nui-letter-spacing-6 | 0 | — |
| --nui-font-weight-regular | 400 | — |
| --nui-font-weight-bold | 700 | — |
간격 8개
| 토큰 | 값 | 비고 |
|---|
| --nui-space-1 | 0.25rem | 4px |
| --nui-space-2 | 0.5rem | 8px |
| --nui-space-3 | 0.75rem | 12px |
| --nui-space-4 | 1rem | 16px |
| --nui-space-6 | 1.5rem | 24px |
| --nui-space-component-gap | var(--nui-space-3) | 별칭 |
| --nui-space-panel-compact | var(--nui-space-4) | 별칭 |
| --nui-space-panel-card | var(--nui-space-6) | 별칭 |
크기 16개
| 토큰 | 값 | 비고 |
|---|
| --nui-size-icon-md | 0.875rem | 14px |
| --nui-size-icon-lg | 1rem | 16px |
| --nui-size-icon-2xl | 1.25rem | 20px |
| --nui-size-icon-3xl | 1.5rem | 24px |
| --nui-size-dot-xs | 0.375rem | 6px |
| --nui-size-dot-sm | 0.5rem | 8px |
| --nui-size-dot-md | 0.625rem | 10px |
| --nui-size-selector | 1.5rem | 24px |
| --nui-size-switch-track-w | 2.5rem | 40px |
| --nui-size-switch-track-h | 1.5rem | 24px |
| --nui-size-control-sm | 2rem | 32px |
| --nui-size-control-md | 2.25rem | 36px |
| --nui-size-control-lg | 2.5rem | 40px |
| --nui-size-control-xl | 3rem | 48px |
| --nui-size-field | 3.5rem | 56px |
| --nui-size-control-option | 2.75rem | 44px |
모서리 7개
| 토큰 | 값 | 비고 |
|---|
| --nui-radius-1 | 0.25rem | 4px — chip · checkbox · tag (small) |
| --nui-radius-1_5 | 0.375rem | 6px — button · input · select (medium 40~48) |
| --nui-radius-2 | 0.5rem | 8px — toast (medium 56~64) |
| --nui-radius-2_5 | 0.625rem | 10px — accordion box · card (large) |
| --nui-radius-3 | 0.75rem | 12px — dialog · menu · bottom sheet (xlarge, max) |
| --nui-radius-full | 9999px | — |
| --nui-radius-circle | 50% | — |
그림자 9개
| 토큰 | 값 | 비고 |
|---|
| --nui-shadow-1 | 0 0.75rem 1.75rem rgb(17 24 39 / 6%) | 카드·인라인 드롭다운 |
| --nui-shadow-2 | 0 1.125rem 2.5rem rgb(17 24 39 / 8%) | 팝오버·메뉴·달력 |
| --nui-shadow-3 | 0 1.125rem 3rem rgb(17 24 39 / 14%) | 모달·토스트 |
| --nui-shadow-ring-brand | 0 0 0 0.25rem var(--nui-color-brand-a4) | — |
| --nui-shadow-ring-error | 0 0 0 0.25rem var(--nui-color-danger-a4) | — |
| --nui-shadow-press | 0 0.5rem 1rem rgb(17 24 39 / 12%) | — |
| --nui-shadow-thumb | 0 0.125rem 0.375rem rgb(15 23 42 / 18%) | — |
| --nui-shadow-inset-soft | inset 0 1px 0 rgb(255 255 255 / 76%) | — |
| --nui-shadow-inset-inverse | inset 0 1px 0 rgb(255 255 255 / 8%) | — |
포커스 6개
| 토큰 | 값 | 비고 |
|---|
| --nui-focus-width | 2px | — |
| --nui-focus-offset | 0.25rem | — |
| --nui-focus-ring | 0 0 0 0.25rem var(--nui-color-brand-a5) | — |
| --nui-focus-ring-sm | 0 0 0 0.1875rem var(--nui-color-brand-a5) | — |
| --nui-focus-ring-strong | 0 0 0 0.25rem var(--nui-color-brand-a6) | — |
| --nui-focus-ring-error | 0 0 0 0.25rem var(--nui-color-danger-a5) | — |
모션 16개
| 토큰 | 값 | 비고 |
|---|
| --nui-duration-1 | 50ms | — |
| --nui-duration-2 | 100ms | — |
| --nui-duration-3 | 150ms | — |
| --nui-duration-4 | 200ms | — |
| --nui-duration-5 | 250ms | — |
| --nui-duration-6 | 300ms | — |
| --nui-duration-7 | 350ms | — |
| --nui-duration-8 | 400ms | — |
| --nui-easing-standard | cubic-bezier(0.2, 0, 0, 1) | 기능적 마이크로 |
| --nui-easing-enter | cubic-bezier(0, 0, 0.15, 1) | ease-out 계열 |
| --nui-easing-exit | cubic-bezier(0.35, 0, 1, 1) | ease-in 계열 |
| --nui-easing-enter-emphasized | cubic-bezier(0.16, 1, 0.3, 1) | — |
| --nui-easing-exit-emphasized | cubic-bezier(0.35, 0, 0.95, 0.55) | — |
| --nui-easing-expand | cubic-bezier(0.5, 1, 0.89, 1) | — |
| --nui-duration-pressed | var(--nui-duration-3) | 별칭 |
| --nui-easing-pressed | cubic-bezier(0, 0, 0.15, 1) | — |
배율 3개
| 토큰 | 값 | 비고 |
|---|
| --nui-scale-94 | 0.94 | 작은 요소 — 아이콘 버튼 · 칩 |
| --nui-scale-96 | 0.96 | 중간 |
| --nui-scale-98 | 0.98 | 큰 요소 — 전면 버튼 · 카드 |
쌓임 순서 5개
| 토큰 | 값 | 비고 |
|---|
| --nui-z-tooltip | 20 | 제자리 툴팁 — 자기 부모 안에서만 |
| --nui-z-overlay-layer | 1030 | — |
| --nui-z-portal-menu | 1031 | portal 로 body 에 붙는 드롭다운·달력 — 팝업(1030) 안에서도 보여야 한다 |
| --nui-z-toast | 1031 | 팝업보다 위 — 팝업 안에서 띄운 토스트도 보여야 한다 |
| --nui-z-tooltip-portal | 1032 | — |
--nui-_ 로 시작하는 변수는 이 목록에 없다. 공개 API 가 아니고 덮어쓰면 variant 가 깨진다.