Tokens reference

The semantic token contract, with values from Material 3, Carbon and Ant Design.

The semantic tier every design-system pack must provide, in every mode. Generated UIs and renderers only ever reference these names. Values below are each pack's light mode, resolved through its own primitive and system tiers.

The contract also requires 34 contrast pairs (WCAG 2.2 1.4.3 for text, 1.4.11 for graphics) and 4 constraints, such as body text of at least 16px. Check a pack with npm run check-ds -w @polyxd/spec -- path/to/manifest.json.

color

Token	Material 3	Carbon	Ant Design
`color.surface.default` Main page/app background	`#fdf7ff`	`#ffffff`	`#ffffff`
`color.surface.subtle` Slightly differentiated background for grouping (sections, table headers)	`#f2ecf4`	`#e0e0e0`	`#fafafa`
`color.surface.raised` Background of raised containers (cards, sheets)	`#f8f2fa`	`#f4f4f4`	`#ffffff`
`color.surface.overlay` Background of overlays (dialogs, popovers)	`#ece6ee`	`#f4f4f4`	`#ffffff`
`color.surface.inverse` High-contrast inverse background (snackbars, tooltips)	`#322f35`	`#393939`	`#262626`
`color.scrim` Backdrop behind modal overlays	`#000000 / 0.32`	`#000000 / 0.6`	`#000000 / 0.45`
`color.text.default` Primary text	`#1d1b20`	`#161616`	`#1f1f1f`
`color.text.muted` Secondary text: captions, helper text, metadata	`#49454e`	`#525252`	`#595959`
`color.text.inverse` Text on surface.inverse	`#f5eff7`	`#ffffff`	`#ffffff`
`color.text.link` Inline links	`#65558f`	`#0f62fe`	`#0958d9`
`color.border.default` Dividers and container outlines	`#cac4cf`	`#c6c6c6`	`#f0f0f0`
`color.border.strong` Input outlines and borders that identify controls (WCAG 1.4.11)	`#7a757f`	`#8d8d8d`	`#8c8c8c`
`color.border.focus` Keyboard focus indicator	`#625b71`	`#0f62fe`	`#1677ff`
`color.action.primary.background` The single most important action	`#65558f`	`#0f62fe`	`#0958d9`
`color.action.primary.foreground` Text/icon on action.primary.background	`#ffffff`	`#ffffff`	`#ffffff`
`color.action.secondary.background` Supporting actions	`#e8def8`	`#393939`	`#ffffff`
`color.action.secondary.foreground` Text/icon on action.secondary.background	`#4a4458`	`#ffffff`	`#1f1f1f`
`color.action.secondary.border` Outline of secondary actions	`#7a757f`	`#393939`	`#d9d9d9`
`color.action.danger.background` Destructive or irreversible actions	`#ba1a1a`	`#da1e28`	`#d9363e`
`color.action.danger.foreground` Text/icon on action.danger.background	`#ffffff`	`#ffffff`	`#ffffff`
`color.selection.background` Selected option, tab or row	`#e8def8`	`#e0e0e0`	`#e6f4ff`
`color.selection.foreground` Text/icon on selection.background	`#4a4458`	`#161616`	`#1f1f1f`
`color.status.info.background` Background of info messages	`#cee5ff`	`#edf5ff`	`#e6f4ff`
`color.status.info.foreground` Text on status.info.background	`#004a75`	`#161616`	`#0958d9`
`color.status.info.emphasis` Icon/border/indicator for info on regular surfaces	`#00639a`	`#0043ce`	`#1677ff`
`color.status.success.background` Background of success messages	`#a3f69c`	`#defbe6`	`#f6ffed`
`color.status.success.foreground` Text on status.success.background	`#005312`	`#161616`	`#237804`
`color.status.success.emphasis` Icon/border/indicator for success on regular surfaces	`#1b6d24`	`#24a148`	`#389e0d`
`color.status.warning.background` Background of warning messages	`#ffddb5`	`#fcf4d6`	`#fffbe6`
`color.status.warning.foreground` Text on status.warning.background	`#643f00`	`#161616`	`#874d00`
`color.status.warning.emphasis` Icon/border/indicator for warning on regular surfaces	`#835400`	`#8e6a00`	`#ad6800`
`color.status.danger.background` Background of danger messages	`#ffdad6`	`#fff1f1`	`#fff2f0`
`color.status.danger.foreground` Text on status.danger.background	`#93000a`	`#161616`	`#b32430`
`color.status.danger.emphasis` Icon/border/indicator for danger on regular surfaces	`#ba1a1a`	`#da1e28`	`#ff4d4f`
`color.data.categorical.1` Chart series 1	`#6750a4`	`#6929c4`	`#1677ff`
`color.data.categorical.2` Chart series 2	`#006b5a`	`#1192e8`	`#d46b08`
`color.data.categorical.3` Chart series 3	`#904d00`	`#005d5d`	`#08979c`
`color.data.categorical.4` Chart series 4	`#00658f`	`#9f1853`	`#eb2f96`
`color.data.categorical.5` Chart series 5	`#586400`	`#fa4d56`	`#389e0d`
`color.data.categorical.6` Chart series 6	`#984062`	`#520408`	`#722ed1`
`color.data.positive` Increase / favourable change in data	`#1b6d24`	`#24a148`	`#389e0d`
`color.data.negative` Decrease / unfavourable change in data	`#ba1a1a`	`#da1e28`	`#ff4d4f`
`color.data.neutral` Unchanged or baseline data	`#7a757f`	`#6f6f6f`	`#8c8c8c`

type

Token	Material 3	Carbon	Ant Design
`type.title.page` Title of the whole surface	`32px/1.25 400`	`32px/1.25 400`	`30px/1.266667 600`
`type.title.section` Section headings	`22px/1.2727 400`	`20px/1.4 400`	`20px/1.4 600`
`type.title.item` Titles of cards, list items, dialogs	`16px/1.5 500`	`16px/1.5 600`	`16px/1.5 600`
`type.body.default` Running text; must be >= 16px	`16px/1.5 400`	`16px/1.5 400`	`16px/1.5 400`
`type.body.small` Secondary running text	`14px/1.4286 400`	`14px/1.42857 400`	`14px/1.571429 400`
`type.label.default` Controls, form labels, buttons	`14px/1.4286 500`	`14px/1.28572 400`	`14px/1.571429 400`
`type.label.small` Chips, badges, table headers	`12px/1.3333 500`	`12px/1.33333 400`	`12px/1.666667 400`
`type.numeric.display` Large key figures (metrics)	`36px/1.2222 400`	`42px/1.199 300`	`24px/1.333333 400`

space

Token	Material 3	Carbon	Ant Design
`space.inset.compact` Padding inside dense containers	`8px`	`8px`	`12px`
`space.inset.default` Padding inside containers	`16px`	`16px`	`16px`
`space.inset.comfortable` Padding inside spacious containers	`24px`	`24px`	`24px`
`space.stack.tight` Vertical gap between tightly related items (label and field)	`4px`	`8px`	`4px`
`space.stack.default` Vertical gap between related items	`8px`	`16px`	`8px`
`space.stack.loose` Vertical gap between loosely related items	`16px`	`32px`	`16px`
`space.stack.section` Vertical gap between sections	`32px`	`48px`	`32px`
`space.inline.tight` Horizontal gap within a compound control	`4px`	`4px`	`4px`
`space.inline.default` Horizontal gap between adjacent items	`8px`	`8px`	`8px`
`space.inline.loose` Horizontal gap between groups	`16px`	`16px`	`16px`

size

Token	Material 3	Carbon	Ant Design
`size.target.min` Minimum interactive target size (>= 24px, platform guidance 44-48)	`48px`	`48px`	`32px`
`size.icon.small` Small icons	`18px`	`16px`	`12px`
`size.icon.default` Default icons	`24px`	`20px`	`14px`

radius

Token	Material 3	Carbon	Ant Design
`radius.small` Corner radius: small	`4px`	`0px`	`4px`
`radius.default` Corner radius: default	`12px`	`0px`	`6px`
`radius.large` Corner radius: large	`28px`	`0px`	`8px`
`radius.full` Corner radius: full	`9999px`	`999999px`	`9999px`

border

Token	Material 3	Carbon	Ant Design
`border.width.default` Default border width	`1px`	`1px`	`1px`
`border.width.strong` Emphasised border width (selected, focused inputs)	`2px`	`2px`	`2px`

focus

Token	Material 3	Carbon	Ant Design
`focus.ring.width` Focus indicator thickness	`3px`	`2px`	`3px`
`focus.ring.offset` Gap between element and focus indicator	`2px`	`-2px`	`1px`

measure

Token	Material 3	Carbon	Ant Design
`measure.max` Maximum line length for running text, in characters (45-75)	`65`	`65`	`65`

opacity

Token	Material 3	Carbon	Ant Design
`opacity.state.hover` State layer opacity on hover	`0.08`	`0.12`	`0.06`
`opacity.state.pressed` State layer opacity when pressed	`0.12`	`0.5`	`0.15`
`opacity.state.focus` State layer opacity when focused	`0.12`	`0.12`	`0.1`
`opacity.state.disabled` Opacity of disabled content	`0.38`	`0.3`	`0.45`

shadow

Token	Material 3	Carbon	Ant Design
`shadow.raised` Elevation of raised containers	`shadow`	`shadow`	`shadow`
`shadow.overlay` Elevation of overlays	`shadow`	`shadow`	`shadow`

motion

Token	Material 3	Carbon	Ant Design
`motion.duration.instant` Motion duration: instant	`50ms`	`70ms`	`100ms`
`motion.duration.short` Motion duration: short	`200ms`	`110ms`	`200ms`
`motion.duration.medium` Motion duration: medium	`300ms`	`240ms`	`300ms`
`motion.duration.long` Motion duration: long	`500ms`	`400ms`	`400ms`
`motion.easing.standard` On-screen movement	`0.2, 0, 0, 1`	`0.2, 0, 0.38, 0.9`	`0.645, 0.045, 0.355, 1`
`motion.easing.enter` Elements entering	`0.05, 0.7, 0.1, 1`	`0, 0, 0.38, 0.9`	`0.08, 0.82, 0.17, 1`
`motion.easing.exit` Elements leaving	`0.3, 0, 0.8, 0.15`	`0.2, 0, 1, 0.9`	`0.78, 0.14, 0.15, 0.86`

Polyxd is an early preview. Found something unclear? It will get better with your feedback.