Structured foundations
Design system engineering workspace
Design Token Studio
Inspect a structured token collection, validate its foundations, and generate production-ready outputs from one focused workspace.
Browsable collection
80% pass rate
Completed sprints
Collection inventory
Tokens
13 of 13 tokens shown
On primarycolor.action.on-primary
color{color.neutral.0}
Primary actioncolor.action.primary
color{color.blue.600}
Amber 500color.amber.500
color#f59e0b
Blue 600color.blue.600
color#2563eb
Whitecolor.neutral.0
color#ffffff
Slate 600color.neutral.600
color#475569
Slate 900color.neutral.900
color#0f172a
Default surfacecolor.surface.default
color{color.neutral.0}
Primary textcolor.text.primary
color{color.neutral.900}
Secondary textcolor.text.secondary
color{color.neutral.600}
Warning textcolor.text.warning
color{color.amber.500}
Spacing 4spacing.4
dimension{"value":16,"unit":"px"}
Bodytypography.body
typography{"fontFamily":["Inter","sans-serif"],"fontSize":{"value":16,"unit":"px"},"fontWeight":400,"lineHeight":1.5}
Production output
Export preview
Generated directly from the current collection
13 generated tokens712 characters
/* Generated by Design Token Studio */
:root {
--studio-color-action-on-primary: var(--studio-color-neutral-0);
--studio-color-action-primary: var(--studio-color-blue-600);
--studio-color-amber-500: #f59e0b;
--studio-color-blue-600: #2563eb;
--studio-color-neutral-0: #ffffff;
--studio-color-neutral-600: #475569;
--studio-color-neutral-900: #0f172a;
--studio-color-surface-default: var(--studio-color-neutral-0);
--studio-color-text-primary: var(--studio-color-neutral-900);
--studio-color-text-secondary: var(--studio-color-neutral-600);
--studio-color-text-warning: var(--studio-color-amber-500);
--studio-spacing-4: 16px;
--studio-typography-body: 400 16px/1.5 Inter, sans-serif;
}
Automated quality gate
Accessibility validation
Live WCAG contrast evaluation using semantic token pairs.
Current result80%
4 passed ยท 1 needs attention
warningwarning-text
Contrast ratio 2.15:1 does not meet AA for normalText.
Increase the contrast between color.text.warning and color.surface.default until it meets AA for normalText.Version history
The immutable snapshot engine is implemented. The next sprint will expose snapshot creation, comparison, and restoration in this production workspace.