Design Tokens

All tokens are defined in packages/tokens/src/tokens.json and generated as CSS custom properties (--nana-*) and an ESM object.

Color

--nana-color-primary-50 #f1f5f4

--nana-color-primary-100 #e7eeec

--nana-color-primary-200 #d7e1df

--nana-color-primary-300 #9fb5b1

--nana-color-primary-400 #668984

--nana-color-primary-500 #0f1f1d

--nana-color-primary-600 #0f1f1d

--nana-color-primary-700 #0b1d1b

--nana-color-primary-800 #0b1d1b

--nana-color-primary-900 #081614

--nana-color-primary-950 #05100f

--nana-color-neutral-0 #ffffff

--nana-color-neutral-50 #f1f5f4

--nana-color-neutral-100 #e7eeec

--nana-color-neutral-200 #d7e1df

--nana-color-neutral-300 #b9c8c5

--nana-color-neutral-400 #94a3b8

--nana-color-neutral-500 #64748b

--nana-color-neutral-600 #475569

--nana-color-neutral-700 #1f3a37

--nana-color-neutral-800 #0f1f1d

--nana-color-neutral-900 #0f1f1d

--nana-color-neutral-950 #0b1d1b

--nana-color-neutral-1000 #000000

--nana-color-success-50 #f0fdf4

--nana-color-success-100 #dcfce7

--nana-color-success-300 #86efac

--nana-color-success-500 #15803d

--nana-color-success-600 #15803d

--nana-color-success-700 #15803d

--nana-color-success-900 #14532d

--nana-color-warning-50 #fffbeb

--nana-color-warning-100 #fef3c7

--nana-color-warning-300 #fcd34d

--nana-color-warning-500 #f59e0b

--nana-color-warning-600 #ca8a04

--nana-color-warning-700 #ca8a04

--nana-color-warning-900 #78350f

--nana-color-danger-50 #fff1f2

--nana-color-danger-100 #ffe4e6

--nana-color-danger-300 #fca5a5

--nana-color-danger-500 #b91c1c

--nana-color-danger-600 #b91c1c

--nana-color-danger-700 #b91c1c

--nana-color-danger-900 #7f1d1d

--nana-color-info-50 #f0fdfa

--nana-color-info-100 #ccfbf1

--nana-color-info-300 #5eead4

--nana-color-info-500 #0f766e

--nana-color-info-600 #0f766e

--nana-color-info-700 #0f766e

--nana-color-info-900 #134e4a

Spacing

--nana-spacing-0 0px

--nana-spacing-1 0.25rem

--nana-spacing-2 0.5rem

--nana-spacing-3 0.75rem

--nana-spacing-4 1rem

--nana-spacing-5 1.25rem

--nana-spacing-6 1.5rem

--nana-spacing-7 1.75rem

--nana-spacing-8 2rem

--nana-spacing-9 2.25rem

--nana-spacing-10 2.5rem

--nana-spacing-12 3rem

--nana-spacing-14 3.5rem

--nana-spacing-16 4rem

--nana-spacing-20 5rem

--nana-spacing-24 6rem

--nana-spacing-32 8rem

--nana-spacing-40 10rem

--nana-spacing-48 12rem

--nana-spacing-64 16rem

--nana-spacing-0-5 0.125rem

--nana-spacing-1-5 0.375rem

--nana-spacing-2-5 0.625rem

--nana-spacing-3-5 0.875rem

Typography

--nana-typography-font-family-sans ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif

--nana-typography-font-family-mono ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, monospace

--nana-typography-font-size-xs 0.75rem

--nana-typography-font-size-sm 0.875rem

--nana-typography-font-size-base 1rem

--nana-typography-font-size-lg 1.125rem

--nana-typography-font-size-xl 1.25rem

--nana-typography-font-size-2xl 1.5rem

--nana-typography-font-size-3xl 1.875rem

--nana-typography-font-size-4xl 2.25rem

--nana-typography-font-weight-normal 400

--nana-typography-font-weight-medium 500

--nana-typography-font-weight-semibold 600

--nana-typography-font-weight-bold 700

--nana-typography-line-height-none 1

--nana-typography-line-height-tight 1.25

--nana-typography-line-height-snug 1.375

--nana-typography-line-height-normal 1.5

--nana-typography-line-height-relaxed 1.625

--nana-typography-line-height-loose 2

--nana-typography-letter-spacing-tight -0.025em

--nana-typography-letter-spacing-normal 0em

--nana-typography-letter-spacing-wide 0.025em

--nana-typography-letter-spacing-wider 0.05em

Radius

--nana-radius-none 0px

--nana-radius-sm 0.125rem

--nana-radius-base 0.25rem

--nana-radius-md 0.375rem

--nana-radius-lg 0.5rem

--nana-radius-xl 0.75rem

--nana-radius-2xl 1rem

--nana-radius-3xl 1.5rem

--nana-radius-full 9999px

Shadow

--nana-shadow-none none

--nana-shadow-xs 0 1px 2px 0 rgb(0 0 0 / 0.05)

--nana-shadow-sm 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)

--nana-shadow-md 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)

--nana-shadow-lg 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)

--nana-shadow-xl 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)

--nana-shadow-2xl 0 25px 50px -12px rgb(0 0 0 / 0.25)

--nana-shadow-inner inset 0 2px 4px 0 rgb(0 0 0 / 0.05)

Z

--nana-z-index-0 0

--nana-z-index-10 10

--nana-z-index-20 20

--nana-z-index-30 30

--nana-z-index-40 40

--nana-z-index-50 50

--nana-z-index-auto auto

--nana-z-index-overlay 100

--nana-z-index-modal 200

--nana-z-index-popover 300

--nana-z-index-toast 400

--nana-z-index-tooltip 500

Transition

--nana-transition-duration-fast 100ms

--nana-transition-duration-base 150ms

--nana-transition-duration-slow 300ms

--nana-transition-duration-slower 500ms

--nana-transition-easing-linear linear

--nana-transition-easing-in cubic-bezier(0.4, 0, 1, 1)

--nana-transition-easing-out cubic-bezier(0, 0, 0.2, 1)

--nana-transition-easing-in-out cubic-bezier(0.4, 0, 0.2, 1)