latticeui

Token explorer

Tokens are W3C design-token JSON compiled into two CSS tiers: reference (raw values on :root) and semantic (per-theme aliases that flip with data-theme). Toggle the theme switcher in the header - the semantic swatches below re-resolve live because they render from CSS variables.

Semantic tier (32)

Components consume only this tier. Each swatch shows its dark/light alias targets.

bg.canvasdark: {color.slate.950}light: {color.white}
bg.surfacedark: {color.slate.900}light: {color.slate.50}
bg.raiseddark: {color.slate.800}light: {color.white}
bg.subtledark: {color.slate.800}light: {color.slate.100}
bg.muteddark: {color.slate.700}light: {color.slate.200}
bg.inverteddark: {color.slate.50}light: {color.slate.900}
fg.defaultdark: {color.slate.100}light: {color.slate.900}
fg.muteddark: {color.slate.400}light: {color.slate.600}
fg.subtledark: {color.slate.500}light: {color.slate.500}
fg.inverteddark: {color.slate.900}light: {color.slate.50}
fg.onAccentdark: {color.slate.950}light: {color.white}
accent.defaultdark: {color.teal.400}light: {color.teal.600}
accent.emphasisdark: {color.teal.300}light: {color.teal.700}
accent.muteddark: {color.teal.600}light: {color.teal.500}
accent.subtledark: {color.teal.950}light: {color.teal.50}
accent.fgdark: {color.teal.300}light: {color.teal.700}
danger.defaultdark: {color.coral.500}light: {color.coral.600}
danger.emphasisdark: {color.coral.400}light: {color.coral.700}
danger.subtledark: {color.coral.950}light: {color.coral.50}
danger.fgdark: {color.coral.300}light: {color.coral.700}
success.defaultdark: {color.emerald.400}light: {color.emerald.600}
success.subtledark: {color.emerald.950}light: {color.emerald.50}
success.fgdark: {color.emerald.300}light: {color.emerald.700}
warning.defaultdark: {color.amber.400}light: {color.amber.500}
warning.subtledark: {color.amber.950}light: {color.amber.50}
warning.fgdark: {color.amber.300}light: {color.amber.700}
border.defaultdark: {color.slate.700}light: {color.slate.300}
border.muteddark: {color.slate.800}light: {color.slate.200}
border.strongdark: {color.slate.600}light: {color.slate.400}
border.accentdark: {color.teal.400}light: {color.teal.600}
ring.colordark: {color.teal.300}light: {color.teal.500}
backdrop.colordark: rgb(2 6 23 / 0.7)light: rgb(15 23 42 / 0.4)

Reference tier - colors (68)

color.white#ffffff
color.black#000000
color.slate.50#f8fafc
color.slate.100#f1f5f9
color.slate.200#e2e8f0
color.slate.300#cbd5e1
color.slate.400#94a3b8
color.slate.500#64748b
color.slate.600#475569
color.slate.700#334155
color.slate.800#1e293b
color.slate.900#0f172a
color.slate.950#0b1120
color.teal.50#f0fdfa
color.teal.100#ccfbf1
color.teal.200#99f6e4
color.teal.300#5eead4
color.teal.400#2dd4bf
color.teal.500#14b8a6
color.teal.600#0d9488
color.teal.700#0f766e
color.teal.800#115e59
color.teal.900#134e4a
color.teal.950#042f2e
color.emerald.50#ecfdf5
color.emerald.100#d1fae5
color.emerald.200#a7f3d0
color.emerald.300#6ee7b7
color.emerald.400#34d399
color.emerald.500#10b981
color.emerald.600#059669
color.emerald.700#047857
color.emerald.800#065f46
color.emerald.900#064e3b
color.emerald.950#022c22
color.coral.50#fff4f2
color.coral.100#ffe5e1
color.coral.200#ffccc5
color.coral.300#ffa79c
color.coral.400#ff8678
color.coral.500#ff6b5e
color.coral.600#ed4b3c
color.coral.700#c83a2d
color.coral.800#a53127
color.coral.900#882e26
color.coral.950#4a1410
color.red.50#fef2f2
color.red.100#fee2e2
color.red.200#fecaca
color.red.300#fca5a5
color.red.400#f87171
color.red.500#ef4444
color.red.600#dc2626
color.red.700#b91c1c
color.red.800#991b1b
color.red.900#7f1d1d
color.red.950#450a0a
color.amber.50#fffbeb
color.amber.100#fef3c7
color.amber.200#fde68a
color.amber.300#fcd34d
color.amber.400#fbbf24
color.amber.500#f59e0b
color.amber.600#d97706
color.amber.700#b45309
color.amber.800#92400e
color.amber.900#78350f
color.amber.950#451a03

Reference tier - dimensions, motion, type (49)

TokenCSS variableValue
font.family.sans--ts-font-family-sansui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif
font.family.mono--ts-font-family-monoui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace
font.size.xs--ts-font-size-xs0.75rem
font.size.sm--ts-font-size-sm0.875rem
font.size.md--ts-font-size-md1rem
font.size.lg--ts-font-size-lg1.125rem
font.size.xl--ts-font-size-xl1.25rem
font.size.2xl--ts-font-size-2xl1.5rem
font.size.3xl--ts-font-size-3xl1.875rem
font.size.4xl--ts-font-size-4xl2.25rem
font.weight.regular--ts-font-weight-regular400
font.weight.medium--ts-font-weight-medium500
font.weight.semibold--ts-font-weight-semibold600
font.weight.bold--ts-font-weight-bold700
font.leading.tight--ts-font-leading-tight1.25
font.leading.normal--ts-font-leading-normal1.5
font.leading.relaxed--ts-font-leading-relaxed1.7
space.0--ts-space-00
space.1--ts-space-10.25rem
space.2--ts-space-20.5rem
space.3--ts-space-30.75rem
space.4--ts-space-41rem
space.5--ts-space-51.25rem
space.6--ts-space-61.5rem
space.8--ts-space-82rem
space.10--ts-space-102.5rem
space.12--ts-space-123rem
space.16--ts-space-164rem
radius.none--ts-radius-none0
radius.sm--ts-radius-sm0.25rem
radius.md--ts-radius-md0.375rem
radius.lg--ts-radius-lg0.5rem
radius.xl--ts-radius-xl0.75rem
radius.full--ts-radius-full9999px
shadow.sm--ts-shadow-sm0 1px 2px 0 rgb(0 0 0 / 0.25)
shadow.md--ts-shadow-md0 4px 8px -2px rgb(0 0 0 / 0.35), 0 2px 4px -2px rgb(0 0 0 / 0.25)
shadow.lg--ts-shadow-lg0 12px 24px -6px rgb(0 0 0 / 0.45), 0 4px 8px -4px rgb(0 0 0 / 0.3)
duration.fast--ts-duration-fast120ms
duration.normal--ts-duration-normal200ms
duration.slow--ts-duration-slow320ms
easing.standard--ts-easing-standardcubic-bezier(0.2, 0, 0, 1)
easing.enter--ts-easing-entercubic-bezier(0, 0, 0.2, 1)
easing.exit--ts-easing-exitcubic-bezier(0.4, 0, 1, 1)
z.dropdown--ts-z-dropdown50
z.overlay--ts-z-overlay100
z.modal--ts-z-modal110
z.popover--ts-z-popover120
z.tooltip--ts-z-tooltip130
z.toast--ts-z-toast140