Foundation Tokens

Smallest decision first

Dependencies move in one direction: primitive → semantic → component decision → component → composition → template.

Primitives

Complete color ramps and raw foundation values. Never consumed by product code.

Semantics + materials

Light and Dark assign meaning to color, surface, light, and CMF.

Component decisions

Every component owns color, type, radius, size, spacing, and state aliases.

Components

React and CSS consume only their decision contract; compositions never recreate a control.

Foundation / geometry

Dimensions, type, and physical effects

Width and height are explicit contracts: controls, touch targets, icons, fields, knobs, content measures, containers, and rails do not reuse one ambiguous size scale.

corner profilesFive system-wide corner personalities from square to fully rounded.28

TokenLightDark

radius.sm4px4px

radius.md8px8px

radius.lg12px12px

radius.xl20px20px

radius.full9999px9999px

radius.button8px8px

radius.input8px8px

radius.pill9999px9999px

radius.profile.square.sm0px0px

radius.profile.square.md0px0px

radius.profile.square.lg0px0px

radius.profile.square.xl0px0px

radius.profile.precise.sm2px2px

radius.profile.precise.md4px4px

radius.profile.precise.lg6px6px

radius.profile.precise.xl10px10px

radius.profile.balanced.sm4px4px

radius.profile.balanced.md8px8px

radius.profile.balanced.lg12px12px

radius.profile.balanced.xl20px20px

radius.profile.soft.sm8px8px

radius.profile.soft.md12px12px

radius.profile.soft.lg18px18px

radius.profile.soft.xl28px28px

radius.profile.full.sm9999px9999px

radius.profile.full.md9999px9999px

radius.profile.full.lg9999px9999px

radius.profile.full.xl9999px9999px

dimensionsControl heights, touch targets, icons, indicators, fields, knobs, content widths, containers, and rails.53

TokenLightDark

size.control.xs24px24px

size.control.sm32px32px

size.control.md40px40px

size.control.lg48px48px

size.control.xl56px56px

size.target.minimum44px44px

size.target.comfortable48px48px

size.target.spacious56px56px

size.icon.xs12px12px

size.icon.sm16px16px

size.icon.md20px20px

size.icon.lg24px24px

size.icon.xl32px32px

size.icon.2xl40px40px

size.indicator.xs4px4px

size.indicator.sm6px6px

size.indicator.md8px8px

size.indicator.lg12px12px

size.indicator.xl16px16px

size.selection.sm16px16px

size.selection.md18px18px

size.selection.lg20px20px

size.thumb.sm16px16px

size.thumb.md20px20px

size.thumb.lg24px24px

size.thumb.xl32px32px

size.track.xs2px2px

size.track.sm4px4px

size.track.md6px6px

size.track.lg8px8px

size.track.xl12px12px

size.field.multiline-sm80px80px

size.field.multiline-md120px120px

size.field.multiline-lg160px160px

size.knob.sm40px40px

size.knob.md48px48px

size.knob.lg64px64px

size.knob.xl80px80px

size.content.compact320px320px

size.content.form480px480px

size.content.dialog512px512px

size.content.reading672px672px

size.content.panel768px768px

size.content.wide960px960px

size.container.sm640px640px

size.container.md768px768px

size.container.lg1024px1024px

size.container.xl1280px1280px

size.container.2xl1440px1440px

size.container.3xl1600px1600px

size.rail.compact64px64px

size.rail.default240px240px

size.rail.wide288px288px

densityCoordinated compact, comfortable, and touch geometry profiles.39

TokenLightDark

density.profile.compact.control.xs22px22px

density.profile.compact.control.sm28px28px

density.profile.compact.control.md32px32px

density.profile.compact.control.lg40px40px

density.profile.compact.control.xl48px48px

density.profile.compact.space.xs2px2px

density.profile.compact.space.sm4px4px

density.profile.compact.space.md8px8px

density.profile.compact.space.lg12px12px

density.profile.compact.space.xl16px16px

density.profile.compact.selection16px16px

density.profile.compact.thumb16px16px

density.profile.compact.track4px4px

density.profile.comfortable.control.xs24px24px

density.profile.comfortable.control.sm32px32px

density.profile.comfortable.control.md40px40px

density.profile.comfortable.control.lg48px48px

density.profile.comfortable.control.xl56px56px

density.profile.comfortable.space.xs4px4px

density.profile.comfortable.space.sm8px8px

density.profile.comfortable.space.md12px12px

density.profile.comfortable.space.lg16px16px

density.profile.comfortable.space.xl24px24px

density.profile.comfortable.selection18px18px

density.profile.comfortable.thumb20px20px

density.profile.comfortable.track4px4px

density.profile.touch.control.xs32px32px

density.profile.touch.control.sm40px40px

density.profile.touch.control.md48px48px

density.profile.touch.control.lg56px56px

density.profile.touch.control.xl64px64px

density.profile.touch.space.xs4px4px

density.profile.touch.space.sm8px8px

density.profile.touch.space.md12px12px

density.profile.touch.space.lg20px20px

density.profile.touch.space.xl32px32px

density.profile.touch.selection20px20px

density.profile.touch.thumb24px24px

density.profile.touch.track6px6px

layoutSpacing, breakpoints, aspect ratios, layers, strokes, opacity, and blur.60

TokenLightDark

breakpoint.sm640px640px

breakpoint.md768px768px

breakpoint.lg1024px1024px

breakpoint.xl1280px1280px

breakpoint.2xl1536px1536px

aspect.square11

aspect.portrait0.750.75

aspect.landscape1.51.5

aspect.wide1.7777781.777778

aspect.golden1.6180341.618034

layer.base00

layer.raised1010

layer.sticky4040

layer.overlay5050

layer.toast6060

layer.maximum100100

stroke.hairline0.5px0.5px

stroke.default1px1px

stroke.strong2px2px

stroke.focus2px2px

opacity.disabled0.480.48

opacity.muted0.640.64

opacity.scrim0.560.56

opacity.glass0.820.82

blur.none0px0px

blur.sm8px8px

blur.md16px16px

blur.lg24px24px

blur.xl40px40px

space.scale.00px0px

space.scale.12px2px

space.scale.24px4px

space.scale.36px6px

space.scale.48px8px

space.scale.512px12px

space.scale.616px16px

space.scale.720px20px

space.scale.824px24px

space.scale.932px32px

space.scale.1040px40px

space.scale.1148px48px

space.scale.1264px64px

space.scale.1380px80px

space.scale.1496px96px

space.scale.15128px128px

space.component.xs4px4px

space.component.sm8px8px

space.component.md12px12px

space.component.lg16px16px

space.component.xl24px24px

space.layout.xs8px8px

space.layout.sm16px16px

space.layout.md24px24px

space.layout.lg40px40px

space.layout.xl64px64px

space.stack.xs4px4px

space.stack.sm8px8px

space.stack.md12px12px

space.stack.lg20px20px

space.stack.xl32px32px

typographyUI and technical type roles with explicit size, line height, tracking, family, and weight.51

TokenLightDark

typography.font.sans["var(--font-ux-sans)","IBM Plex Sans","system-ui","-apple-system","Segoe UI","sans-serif"]["var(--font-ux-sans)","IBM Plex Sans","system-ui","-apple-system","Segoe UI","sans-serif"]

typography.font.mono["var(--font-ux-mono)","IBM Plex Mono","ui-monospace","SFMono-Regular","Menlo","monospace"]["var(--font-ux-mono)","IBM Plex Mono","ui-monospace","SFMono-Regular","Menlo","monospace"]

typography.weight.regular400400

typography.weight.medium500500

typography.weight.semibold600600

typography.weight.bold700700

typography.display.lg.font-size48px48px

typography.display.lg.line-height56px56px

typography.display.lg.letter-spacing-0.02em-0.02em

typography.display.md.font-size36px36px

typography.display.md.line-height44px44px

typography.display.md.letter-spacing-0.01em-0.01em

typography.heading.lg.font-size24px24px

typography.heading.lg.line-height32px32px

typography.heading.lg.letter-spacing-0.01em-0.01em

typography.heading.md.font-size20px20px

typography.heading.md.line-height28px28px

typography.heading.md.letter-spacing00

typography.heading.sm.font-size16px16px

typography.heading.sm.line-height24px24px

typography.heading.sm.letter-spacing00

typography.body.lg.font-size16px16px

typography.body.lg.line-height24px24px

typography.body.lg.letter-spacing00

typography.body.md.font-size14px14px

typography.body.md.line-height22px22px

typography.body.md.letter-spacing00

typography.body.sm.font-size13px13px

typography.body.sm.line-height20px20px

typography.body.sm.letter-spacing00

typography.label.md.font-size13px13px

typography.label.md.line-height18px18px

typography.label.md.letter-spacing0.01em0.01em

typography.label.sm.font-size11px11px

typography.label.sm.line-height16px16px

typography.label.sm.letter-spacing0.04em0.04em

typography.caption.font-size12px12px

typography.caption.line-height16px16px

typography.caption.letter-spacing00

typography.technical.sm.font-size8px8px

typography.technical.sm.line-height12px12px

typography.technical.sm.letter-spacing0.08em0.08em

typography.technical.md.font-size10px10px

typography.technical.md.line-height14px14px

typography.technical.md.letter-spacing0.06em0.06em

typography.button.md.font-size14px14px

typography.button.md.line-height20px20px

typography.button.md.letter-spacing0.01em0.01em

typography.button.lg.font-size16px16px

typography.button.lg.line-height24px24px

typography.button.lg.letter-spacing0.01em0.01em

physical effectsFinish, assembly, depth, edge, seam, light, shadow, control mechanics, timing, and easing.83

TokenLightDark

finish.roughness.polished0.080.08

finish.roughness.satin0.240.24

finish.roughness.bead-blasted0.420.42

finish.roughness.anodized0.580.58

finish.roughness.matte0.760.76

finish.roughness.rubber0.920.92

finish.specularity.low0.120.12

finish.specularity.medium0.320.32

finish.specularity.high0.620.62

finish.specularity.optical0.860.86

finish.grain.opacity.none00

finish.grain.opacity.subtle0.0250.025

finish.grain.opacity.visible0.050.05

finish.grain.size.fine1px1px

finish.grain.size.medium2px2px

finish.texture.tile.fine64px64px

finish.texture.tile.medium96px96px

finish.texture.tile.coarse128px128px

assembly.fastener.diameter.xs4px4px

assembly.fastener.diameter.sm6px6px

assembly.fastener.diameter.md8px8px

assembly.fastener.inset.sm8px8px

assembly.fastener.inset.md12px12px

assembly.fastener.inset.lg16px16px

assembly.perforation.diameter.sm2px2px

assembly.perforation.diameter.md3px3px

assembly.perforation.diameter.lg4px4px

assembly.perforation.pitch.compact6px6px

assembly.perforation.pitch.default8px8px

assembly.perforation.pitch.open10px10px

assembly.bezel.hairline1px1px

assembly.bezel.narrow3px3px

assembly.bezel.default6px6px

assembly.bezel.wide10px10px

assembly.well.shallow2px2px

assembly.well.default4px4px

assembly.well.deep8px8px

surface.body#E4E5E4#07090A

surface.panel#F7F8F8#0E1214

surface.raised#FCFDFD#171C1F

surface.inset#D5D7D6#000000

surface.glassrgba(255, 255, 255, 0.64)rgba(255, 255, 255, 0.08)

depth.flush{"offsetX":"0px","offsetY":"0px","blur":"0px","spread":"0px","color":"transparent","inset":false}{"offsetX":"0px","offsetY":"0px","blur":"0px","spread":"0px","color":"transparent","inset":false}

depth.raised[{"offsetX":"0px","offsetY":"2px","blur":"0px","spread":"0px","color":"var(--edge-shadow)","inset":false},{"offsetX":"0px","offsetY":"-1px","blur":"0px","spread":"0px","color":"var(--edge-highlight)","inset":false}][{"offsetX":"0px","offsetY":"2px","blur":"0px","spread":"0px","color":"var(--edge-shadow)","inset":false},{"offsetX":"0px","offsetY":"-1px","blur":"0px","spread":"0px","color":"var(--edge-highlight)","inset":false}]

depth.recessed{"offsetX":"0px","offsetY":"1px","blur":"2px","spread":"0px","color":"var(--edge-shadow)","inset":true}{"offsetX":"0px","offsetY":"1px","blur":"2px","spread":"0px","color":"var(--edge-shadow)","inset":true}

edge.highlightrgba(255, 255, 255, 0.80)rgba(255, 255, 255, 0.16)

edge.shadowrgba(0, 0, 0, 0.24)rgba(0, 0, 0, 0.64)

seam.xs1px1px

seam.sm2px2px

seam.md4px4px

seam.panel-gap12px12px

control.travel1px1px

control.resistance0.180.18

control.knurl.ridge1px1px

control.knurl.pitch3px3px

control.knurl.depth3px3px

control.knurl.ridge-angle22

control.knurl.pitch-angle66

control.marker.width2px2px

control.marker.length0.280.28

control.marker.inset6px6px

control.rotation.sweep270270

control.rotation.step1515

light.angle135135

light.strength0.720.72

light.ambient0.380.38

light.rim0.220.22

shadow.elevated{"offsetX":"0px","offsetY":"1px","blur":"3px","spread":"0px","color":"#BEC1C0","inset":false}{"offsetX":"0px","offsetY":"1px","blur":"3px","spread":"0px","color":"#30373C","inset":false}

shadow.raised{"offsetX":"0px","offsetY":"4px","blur":"12px","spread":"-2px","color":"#5A656D","inset":false}{"offsetX":"0px","offsetY":"4px","blur":"12px","spread":"-2px","color":"#77838C","inset":false}

shadow.inset{"offsetX":"0px","offsetY":"1px","blur":"2px","spread":"0px","color":"#5A656D","inset":true}{"offsetX":"0px","offsetY":"1px","blur":"2px","spread":"0px","color":"#77838C","inset":true}

shadow.focus{"offsetX":"0px","offsetY":"0px","blur":"0px","spread":"3px","color":"#FF5A1F","inset":false}{"offsetX":"0px","offsetY":"0px","blur":"0px","spread":"3px","color":"#FF5A1F","inset":false}

shadow.assembly[{"offsetX":"0px","offsetY":"18px","blur":"42px","spread":"0px","color":"rgba(0, 0, 0, 0.25)","inset":false},{"offsetX":"0px","offsetY":"2px","blur":"4px","spread":"0px","color":"rgba(0, 0, 0, 0.46)","inset":false}][{"offsetX":"0px","offsetY":"18px","blur":"42px","spread":"0px","color":"rgba(0, 0, 0, 0.25)","inset":false},{"offsetX":"0px","offsetY":"2px","blur":"4px","spread":"0px","color":"rgba(0, 0, 0, 0.46)","inset":false}]

shadow.control[{"offsetX":"0px","offsetY":"1px","blur":"0px","spread":"0px","color":"rgba(255, 255, 255, 0.22)","inset":true},{"offsetX":"0px","offsetY":"2px","blur":"4px","spread":"0px","color":"rgba(0, 0, 0, 0.34)","inset":false}][{"offsetX":"0px","offsetY":"1px","blur":"0px","spread":"0px","color":"rgba(255, 255, 255, 0.22)","inset":true},{"offsetX":"0px","offsetY":"2px","blur":"4px","spread":"0px","color":"rgba(0, 0, 0, 0.34)","inset":false}]

shadow.contact{"offsetX":"1px","offsetY":"2px","blur":"3px","spread":"-1px","color":"rgba(0, 0, 0, 0.32)","inset":false}{"offsetX":"1px","offsetY":"2px","blur":"3px","spread":"-1px","color":"rgba(0, 0, 0, 0.80)","inset":false}

shadow.cap[{"offsetX":"0px","offsetY":"1px","blur":"0px","spread":"0px","color":"rgba(255, 255, 255, 0.48)","inset":true},{"offsetX":"1px","offsetY":"3px","blur":"5px","spread":"-1px","color":"rgba(0, 0, 0, 0.32)","inset":false}][{"offsetX":"0px","offsetY":"1px","blur":"0px","spread":"0px","color":"rgba(255, 255, 255, 0.08)","inset":true},{"offsetX":"1px","offsetY":"3px","blur":"5px","spread":"-1px","color":"rgba(0, 0, 0, 0.80)","inset":false}]

shadow.bezel[{"offsetX":"0px","offsetY":"2px","blur":"5px","spread":"0px","color":"rgba(0, 0, 0, 0.48)","inset":true},{"offsetX":"0px","offsetY":"-1px","blur":"0px","spread":"0px","color":"rgba(255, 255, 255, 0.48)","inset":true}][{"offsetX":"0px","offsetY":"2px","blur":"5px","spread":"0px","color":"rgba(0, 0, 0, 0.80)","inset":true},{"offsetX":"0px","offsetY":"-1px","blur":"0px","spread":"0px","color":"rgba(255, 255, 255, 0.08)","inset":true}]

shadow.well[{"offsetX":"0px","offsetY":"2px","blur":"4px","spread":"0px","color":"rgba(0, 0, 0, 0.48)","inset":true},{"offsetX":"0px","offsetY":"-1px","blur":"0px","spread":"0px","color":"rgba(255, 255, 255, 0.48)","inset":true}][{"offsetX":"0px","offsetY":"2px","blur":"4px","spread":"0px","color":"rgba(0, 0, 0, 0.80)","inset":true},{"offsetX":"0px","offsetY":"-1px","blur":"0px","spread":"0px","color":"rgba(255, 255, 255, 0.08)","inset":true}]

shadow.recessed-strong[{"offsetX":"0px","offsetY":"2px","blur":"7px","spread":"0px","color":"rgba(0, 0, 0, 0.78)","inset":true},{"offsetX":"0px","offsetY":"-1px","blur":"0px","spread":"0px","color":"rgba(255, 255, 255, 0.05)","inset":true}][{"offsetX":"0px","offsetY":"2px","blur":"7px","spread":"0px","color":"rgba(0, 0, 0, 0.78)","inset":true},{"offsetX":"0px","offsetY":"-1px","blur":"0px","spread":"0px","color":"rgba(255, 255, 255, 0.05)","inset":true}]

duration.fast120ms120ms

duration.base200ms200ms

duration.slow320ms320ms

ease.standard[0.2,0,0,1][0.2,0,0,1]

ease.emphasized[0.3,0,0.8,0.15][0.3,0,0.8,0.15]