Visual foundations
Colour, type, spacing and radius, controlled from a single token source.
AITOM · AI TRANSFORMATION & BRAND GROWTH
One language,
from screen to system.
Building on the existing whitespace, type hierarchy and greyscale interface, visual rules become an operable, verifiable design system.
v02 candidate / source extraction + local control extensions
Interaction contracts
Actions, keyboard, feedback and errors are all part of the component.
Evidence and standards
Measured against WCAG 2.2 AA; automated checks are not treated as conformance certification.
01 / FOUNDATIONS
Restrained visuals, clear function.
The core greys follow the source site; focus, form borders and status colours are local accessibility controls. Dark mode is a candidate mapping based on source research.
canvas
#ffffffsurface
#f9f9f9subtle
#f3f3f3text
#282828muted
#5d5d5dborder
#e5e5e5primary
#171717focus
#005fccdanger
#b42318success
#18794econtrol-border
#767676Spacing scale
4px
8px
12px
16px
24px
32px
48px
64px
80px
96px
Radius scale
sm
md
lg
xl
pill
02 / SINGLE SOURCE
Token index
Reads tokens.json directly, including raw values, aliases and types; CSS is generated.
Showing 96 / 96 tokens
primitive.light.canvascolor
{"colorSpace":"srgb","components":[1,1,1],"alpha":1,"hex":"#ffffff"}Measured on source: --color-surface = #fff; kept locally.primitive.light.surfacecolor
{"colorSpace":"srgb","components":[0.97647059,0.97647059,0.97647059],"alpha":1,"hex":"#f9f9f9"}Measured on source: --color-surface-secondary = #f9f9f9; kept locally.primitive.light.subtlecolor
{"colorSpace":"srgb","components":[0.95294118,0.95294118,0.95294118],"alpha":1,"hex":"#f3f3f3"}Measured on source: --color-surface-tertiary = #f3f3f3; kept locally.primitive.light.textcolor
{"colorSpace":"srgb","components":[0.15686275,0.15686275,0.15686275],"alpha":1,"hex":"#282828"}Measured on source: --color-text = #282828; kept locally.primitive.light.mutedcolor
{"colorSpace":"srgb","components":[0.36470588,0.36470588,0.36470588],"alpha":1,"hex":"#5d5d5d"}Measured on source: --color-text-secondary = #5d5d5d; kept locally.primitive.light.bordercolor
{"colorSpace":"srgb","components":[0.89803922,0.89803922,0.89803922],"alpha":1,"hex":"#e5e5e5"}Measured on source: --color-border = color-mix(in oklab, #0d0d0d 10%, transparent); local candidate uses #e5e5e5 (differs).primitive.light.primarycolor
{"colorSpace":"srgb","components":[0.09019608,0.09019608,0.09019608],"alpha":1,"hex":"#171717"}Measured on source: --color-background-primary-solid = #181818; local candidate uses #171717 (differs).primitive.light.on-primarycolor
{"colorSpace":"srgb","components":[1,1,1],"alpha":1,"hex":"#ffffff"}Local control value; no same-name token measured on source.primitive.light.focuscolor
{"colorSpace":"srgb","components":[0,0.37254902,0.8],"alpha":1,"hex":"#005fcc"}Measured on source: --color-ring-primary = #0169cc; local candidate uses #005fcc (differs).primitive.light.dangercolor
{"colorSpace":"srgb","components":[0.70588235,0.1372549,0.09411765],"alpha":1,"hex":"#b42318"}Measured on source: --color-text-danger = #911e1b; local candidate uses #b42318 (differs).primitive.light.successcolor
{"colorSpace":"srgb","components":[0.09411765,0.4745098,0.30588235],"alpha":1,"hex":"#18794e"}Measured on source: --color-text-success = #00692a; local candidate uses #18794e (differs).primitive.light.control-bordercolor
{"colorSpace":"srgb","components":[0.4627451,0.4627451,0.4627451],"alpha":1,"hex":"#767676"}Local control value; no same-name token measured on source.primitive.light.danger-solidcolor
{"colorSpace":"srgb","components":[0.70588235,0.1372549,0.09411765],"alpha":1,"hex":"#b42318"}Local addition: danger button uses a fixed dark red background with white text, keeping contrast in both themes.primitive.light.on-dangercolor
{"colorSpace":"srgb","components":[1,1,1],"alpha":1,"hex":"#ffffff"}Local addition: danger button uses a fixed dark red background with white text, keeping contrast in both themes.primitive.dark.canvascolor
{"colorSpace":"srgb","components":[0.09019608,0.09019608,0.09019608],"alpha":1,"hex":"#171717"}Local control value; no same-name token measured on source.primitive.dark.surfacecolor
{"colorSpace":"srgb","components":[0.12941176,0.12941176,0.12941176],"alpha":1,"hex":"#212121"}Local control value; no same-name token measured on source.primitive.dark.subtlecolor
{"colorSpace":"srgb","components":[0.18823529,0.18823529,0.18823529],"alpha":1,"hex":"#303030"}Measured on source: --color-surface-tertiary = #131313; local candidate uses #303030 (differs).primitive.dark.textcolor
{"colorSpace":"srgb","components":[0.96078431,0.96078431,0.96078431],"alpha":1,"hex":"#f5f5f5"}Local control value; no same-name token measured on source.primitive.dark.mutedcolor
{"colorSpace":"srgb","components":[0.72156863,0.72156863,0.72156863],"alpha":1,"hex":"#b8b8b8"}Local control value; no same-name token measured on source.primitive.dark.bordercolor
{"colorSpace":"srgb","components":[0.26666667,0.26666667,0.26666667],"alpha":1,"hex":"#444444"}Local control value; no same-name token measured on source.primitive.dark.primarycolor
{"colorSpace":"srgb","components":[0.96078431,0.96078431,0.96078431],"alpha":1,"hex":"#f5f5f5"}Local control value; no same-name token measured on source.primitive.dark.on-primarycolor
{"colorSpace":"srgb","components":[0.09019608,0.09019608,0.09019608],"alpha":1,"hex":"#171717"}Local control value; no same-name token measured on source.primitive.dark.focuscolor
{"colorSpace":"srgb","components":[0.54117647,0.70588235,1],"alpha":1,"hex":"#8ab4ff"}Measured on source: --color-ring-primary = #0285ff; local candidate uses #8ab4ff (differs).primitive.dark.dangercolor
{"colorSpace":"srgb","components":[1,0.60392157,0.56862745],"alpha":1,"hex":"#ff9a91"}Measured on source: --color-text-danger = #e02e2a; local candidate uses #ff9a91 (differs).primitive.dark.successcolor
{"colorSpace":"srgb","components":[0.4745098,0.84313725,0.64705882],"alpha":1,"hex":"#79d7a5"}Local control value; no same-name token measured on source.primitive.dark.control-bordercolor
{"colorSpace":"srgb","components":[0.62745098,0.62745098,0.62745098],"alpha":1,"hex":"#a0a0a0"}Local control value; no same-name token measured on source.primitive.dark.danger-solidcolor
{"colorSpace":"srgb","components":[0.70588235,0.1372549,0.09411765],"alpha":1,"hex":"#b42318"}Local addition: danger button uses a fixed dark red background with white text, keeping contrast in both themes.primitive.dark.on-dangercolor
{"colorSpace":"srgb","components":[1,1,1],"alpha":1,"hex":"#ffffff"}Local addition: danger button uses a fixed dark red background with white text, keeping contrast in both themes.semantic.light.canvas--color-canvascolor
{primitive.light.canvas}Measured on source: --color-surface = #fff; kept locally.semantic.light.surface--color-surfacecolor
{primitive.light.surface}Measured on source: --color-surface-secondary = #f9f9f9; kept locally.semantic.light.subtle--color-subtlecolor
{primitive.light.subtle}Measured on source: --color-surface-tertiary = #f3f3f3; kept locally.semantic.light.text--color-textcolor
{primitive.light.text}Measured on source: --color-text = #282828; kept locally.semantic.light.muted--color-mutedcolor
{primitive.light.muted}Measured on source: --color-text-secondary = #5d5d5d; kept locally.semantic.light.border--color-bordercolor
{primitive.light.border}Measured on source: --color-border = color-mix(in oklab, #0d0d0d 10%, transparent); local candidate uses #e5e5e5 (differs).semantic.light.primary--color-primarycolor
{primitive.light.primary}Measured on source: --color-background-primary-solid = #181818; local candidate uses #171717 (differs).semantic.light.on-primary--color-on-primarycolor
{primitive.light.on-primary}Local control value; no same-name token measured on source.semantic.light.focus--color-focuscolor
{primitive.light.focus}Measured on source: --color-ring-primary = #0169cc; local candidate uses #005fcc (differs).semantic.light.danger--color-dangercolor
{primitive.light.danger}Measured on source: --color-text-danger = #911e1b; local candidate uses #b42318 (differs).semantic.light.success--color-successcolor
{primitive.light.success}Measured on source: --color-text-success = #00692a; local candidate uses #18794e (differs).semantic.light.control-border--color-control-bordercolor
{primitive.light.control-border}Local control value; no same-name token measured on source.semantic.light.danger-solid--color-danger-solidcolor
{primitive.light.danger-solid}Local addition: danger button uses a fixed dark red background with white text, keeping contrast in both themes.semantic.light.on-danger--color-on-dangercolor
{primitive.light.on-danger}Local addition: danger button uses a fixed dark red background with white text, keeping contrast in both themes.semantic.dark.canvas--color-canvascolor
{primitive.dark.canvas}Local control value; no same-name token measured on source.semantic.dark.surface--color-surfacecolor
{primitive.dark.surface}Local control value; no same-name token measured on source.semantic.dark.subtle--color-subtlecolor
{primitive.dark.subtle}Measured on source: --color-surface-tertiary = #131313; local candidate uses #303030 (differs).semantic.dark.text--color-textcolor
{primitive.dark.text}Local control value; no same-name token measured on source.semantic.dark.muted--color-mutedcolor
{primitive.dark.muted}Local control value; no same-name token measured on source.semantic.dark.border--color-bordercolor
{primitive.dark.border}Local control value; no same-name token measured on source.semantic.dark.primary--color-primarycolor
{primitive.dark.primary}Local control value; no same-name token measured on source.semantic.dark.on-primary--color-on-primarycolor
{primitive.dark.on-primary}Local control value; no same-name token measured on source.semantic.dark.focus--color-focuscolor
{primitive.dark.focus}Measured on source: --color-ring-primary = #0285ff; local candidate uses #8ab4ff (differs).semantic.dark.danger--color-dangercolor
{primitive.dark.danger}Measured on source: --color-text-danger = #e02e2a; local candidate uses #ff9a91 (differs).semantic.dark.success--color-successcolor
{primitive.dark.success}Local control value; no same-name token measured on source.semantic.dark.control-border--color-control-bordercolor
{primitive.dark.control-border}Local control value; no same-name token measured on source.semantic.dark.danger-solid--color-danger-solidcolor
{primitive.dark.danger-solid}Local addition: danger button uses a fixed dark red background with white text, keeping contrast in both themes.semantic.dark.on-danger--color-on-dangercolor
{primitive.dark.on-danger}Local addition: danger button uses a fixed dark red background with white text, keeping contrast in both themes.foundation.font-family--font-familyfontFamily
["OpenAI Sans","system-ui","sans-serif"]Local scale; source measurements and differences in docs/components.md. Not an official OpenAI token.foundation.font-size-xs--font-size-xsdimension
{"value":12,"unit":"px"}Local scale; source measurements and differences in docs/components.md. Not an official OpenAI token.foundation.font-size-sm--font-size-smdimension
{"value":14,"unit":"px"}Local scale; source measurements and differences in docs/components.md. Not an official OpenAI token.foundation.font-size-md--font-size-mddimension
{"value":16,"unit":"px"}Local scale; source measurements and differences in docs/components.md. Not an official OpenAI token.foundation.font-size-lg--font-size-lgdimension
{"value":20,"unit":"px"}Local scale; source measurements and differences in docs/components.md. Not an official OpenAI token.foundation.font-size-xl--font-size-xldimension
{"value":24,"unit":"px"}Local scale; source measurements and differences in docs/components.md. Not an official OpenAI token.foundation.font-size-2xl--font-size-2xldimension
{"value":32,"unit":"px"}Local scale; source measurements and differences in docs/components.md. Not an official OpenAI token.foundation.font-size-3xl--font-size-3xldimension
{"value":48,"unit":"px"}Local scale; source measurements and differences in docs/components.md. Not an official OpenAI token.foundation.font-size-4xl--font-size-4xldimension
{"value":64,"unit":"px"}Local scale; source measurements and differences in docs/components.md. Not an official OpenAI token.foundation.font-weight-regular--font-weight-regularfontWeight
400Local scale; source measurements and differences in docs/components.md. Not an official OpenAI token.foundation.font-weight-medium--font-weight-mediumfontWeight
500Local scale; source measurements and differences in docs/components.md. Not an official OpenAI token.foundation.font-weight-semibold--font-weight-semiboldfontWeight
600Local scale; source measurements and differences in docs/components.md. Not an official OpenAI token.foundation.line-height-body--line-height-bodynumber
1.5Local scale; source measurements and differences in docs/components.md. Not an official OpenAI token.foundation.line-height-heading--line-height-headingnumber
1.1Local scale; source measurements and differences in docs/components.md. Not an official OpenAI token.foundation.space-0--space-0dimension
{"value":0,"unit":"px"}Local scale; source measurements and differences in docs/components.md. Not an official OpenAI token.foundation.space-4--space-4dimension
{"value":4,"unit":"px"}Local scale; source measurements and differences in docs/components.md. Not an official OpenAI token.foundation.space-8--space-8dimension
{"value":8,"unit":"px"}Local scale; source measurements and differences in docs/components.md. Not an official OpenAI token.foundation.space-12--space-12dimension
{"value":12,"unit":"px"}Local scale; source measurements and differences in docs/components.md. Not an official OpenAI token.foundation.space-16--space-16dimension
{"value":16,"unit":"px"}Local scale; source measurements and differences in docs/components.md. Not an official OpenAI token.foundation.space-20--space-20dimension
{"value":20,"unit":"px"}Local scale; source measurements and differences in docs/components.md. Not an official OpenAI token.foundation.space-24--space-24dimension
{"value":24,"unit":"px"}Local scale; source measurements and differences in docs/components.md. Not an official OpenAI token.foundation.space-32--space-32dimension
{"value":32,"unit":"px"}Local scale; source measurements and differences in docs/components.md. Not an official OpenAI token.foundation.space-40--space-40dimension
{"value":40,"unit":"px"}Local scale; source measurements and differences in docs/components.md. Not an official OpenAI token.foundation.space-48--space-48dimension
{"value":48,"unit":"px"}Local scale; source measurements and differences in docs/components.md. Not an official OpenAI token.foundation.space-64--space-64dimension
{"value":64,"unit":"px"}Local scale; source measurements and differences in docs/components.md. Not an official OpenAI token.foundation.space-80--space-80dimension
{"value":80,"unit":"px"}Local scale; source measurements and differences in docs/components.md. Not an official OpenAI token.foundation.space-96--space-96dimension
{"value":96,"unit":"px"}Local scale; source measurements and differences in docs/components.md. Not an official OpenAI token.foundation.radius-sm--radius-smdimension
{"value":8,"unit":"px"}Local scale; source measurements and differences in docs/components.md. Not an official OpenAI token.foundation.radius-md--radius-mddimension
{"value":12,"unit":"px"}Local scale; source measurements and differences in docs/components.md. Not an official OpenAI token.foundation.radius-lg--radius-lgdimension
{"value":16,"unit":"px"}Local scale; source measurements and differences in docs/components.md. Not an official OpenAI token.foundation.radius-xl--radius-xldimension
{"value":24,"unit":"px"}Local scale; source measurements and differences in docs/components.md. Not an official OpenAI token.foundation.radius-pill--radius-pilldimension
{"value":9999,"unit":"px"}Local scale; source measurements and differences in docs/components.md. Not an official OpenAI token.foundation.motion-fast--motion-fastduration
{"value":120,"unit":"ms"}Local scale; source measurements and differences in docs/components.md. Not an official OpenAI token.foundation.motion-normal--motion-normalduration
{"value":200,"unit":"ms"}Local scale; source measurements and differences in docs/components.md. Not an official OpenAI token.foundation.motion-easing--motion-easingcubicBezier
[0.2,0,0,1]Local scale; source measurements and differences in docs/components.md. Not an official OpenAI token.foundation.content-max--content-maxdimension
{"value":1440,"unit":"px"}Local scale; source measurements and differences in docs/components.md. Not an official OpenAI token.foundation.control-min--control-mindimension
{"value":44,"unit":"px"}Local scale; source measurements and differences in docs/components.md. Not an official OpenAI token.component.button-radius--button-radiusdimension
{foundation.radius-pill}Local control value; source differences in docs/extraction.md.component.card-radius--card-radiusdimension
{foundation.radius-lg}Local control value; source differences in docs/extraction.md.component.dialog-radius--dialog-radiusdimension
{foundation.radius-xl}Local control value; source differences in docs/extraction.md.No matching tokens. Try a shorter keyword, or clear the search.
03 / TYPOGRAPHY
Let content set the hierarchy.
OpenAI Sans is served from local font files and falls back to system fonts for missing glyphs. Mixed English and Traditional Chinese text needs separate visual review.
Display · font-size-3xl / line-height-heading / regular
Turn ideas into progress.
Heading · font-size-2xl / line-height-heading / medium
Turn ideas into next steps.
Body · font-size-md / line-height-body / regular
A good interface keeps complexity out of the way so learning happens naturally. Read, explore, then try it yourself.
Supporting · font-size-sm / line-height-body / regular
Status, notes and sources. Supporting text keeps sufficient contrast.
05 / INPUT
Errors need a next step too.
06 / PATTERNS
Familiar interactions, consistent contracts.
Tabs
Source language, local components.
Grey surfaces, pill-shaped actions, clear headings and generous whitespace. This demo page is a local addition.
Arrow keys switch, Tab enters the content.
Left/Right arrows, Home and End move and activate tabs; only the current tab is in the Tab order.
Names, states and relationships stay in sync.
tab, tabpanel, aria-selected, aria-controls and aria-labelledby are linked in pairs.
Expand / collapse
AA is currently the acceptance target. Full conformance still requires criterion-by-criterion manual, assistive-technology and end-to-end testing; token contrast checks alone cannot claim conformance.
View the full control standardsStatus messages
Info
This page is a working design specification. System search really finds sections; enter a term that does not exist to check the empty state.
07 / GOVERNANCE
Traceable, so it can evolve.
Format baseline DTCG 2025.10; accessibility target WCAG 2.2 AA; interactions follow native HTML and the WAI-ARIA APG. Local control documents below.
Standards, 55 A/AA criteria and acceptance gates ↗Component contracts and source differences ↗DTCG tokens source file ↗Token build and check script ↗
Run: python3 scripts/tokens.py --check
The script covers only the token types used in this project and 22 colour pairs; it is not full DTCG or WCAG certification.