Design tokens

Tokens are DTCG-compatible JSON, transformed into CSS custom properties with Style Dictionary. Components consume semantic tokens, never primitives directly.

Authored token paths use the aidsgn root namespace, such as aidsgn.color.text.primary and aidsgn.typography.body. Aliases include the same namespace, and generated CSS converts these paths into --aidsgn-* custom properties.

The primitive scales below are rendered from the generated CSS. They are a reference for designers and a quick visual regression check for the token pipeline.

Typography

Heading one — a fluid page title

Heading two — a fluid section title

Heading three — a fluid subsection title

Body large — an approachable introduction

Body — readable interface copy at the default size

Label — compact, emphatic control text

Spacing

2

4

8

12

16

24

32

Colors

Blue 500

Blue 600

Slate 0

Slate 50

Slate 200

Slate 700

Slate 900

Coral 500

Green 700

Amber 700

Red 700

Corner radius

xs

sm

md

lg

full

Shadows

Small

Medium

Use semantic intent in components

Use a semantic token such as --aidsgn-color-text-primary, --aidsgn-color-surface-default, or --aidsgn-control-radius in component CSS. Primitive scales such as --aidsgn-color-blue-500 and --aidsgn-space-16 define the system’s vocabulary and are intended to be aliased by semantic tokens.

Typography is always a complete composite: family, size, weight, letter spacing, and line height stay together in JSON. Its sizes use Utopia-style clamp(min, fluid, max) values, allowing the scale to grow smoothly without breakpoint jumps. The generator publishes the properties supported by CSS’s font shorthand as one value such as --aidsgn-typography-body; apply its paired --aidsgn-typography-body-letter-spacing property separately.

.article {
  font: var(--aidsgn-typography-body);
  letter-spacing: var(--aidsgn-typography-body-letter-spacing);
}

Layout code can also combine spacing tokens in bounded fluid values, such as clamp(var(--aidsgn-space-16), 3vw, var(--aidsgn-space-32)). Breakpoint references are deliberately not emitted as CSS custom properties because variables cannot be used in media-query or container-query conditions. See responsive layout for the shared thresholds and query guidance.

Color primitives are authored in perceptual oklch(). That supports display-P3 gamut on capable screens while preserving predictable lightness relationships and graceful gamut mapping elsewhere. Components continue to consume semantic aliases rather than raw color scales.

Modal components use --aidsgn-color-surface-backdrop, a translucent semantic surface token. The scrim provides visual separation only; native dialog modality and background inertness provide the behavior.

Tooltip uses dedicated --aidsgn-tooltip-surface, --aidsgn-tooltip-text, and --aidsgn-tooltip-radius semantic tokens. Their dark-theme aliases invert the surrounding page surface to keep concise descriptions distinct.

Shadows create visual hierarchy only. Color, contrast, text, and iconography must continue to communicate every essential state without relying on elevation.