Color Palette
Primary
subtle
base
emphasis
Secondary
subtle
base
emphasis
Tertiary
subtle
base
emphasis
Neutral
50
100
200
300
400
500
600
700
800
900
950
Show code
/* Brand primitive color tokens */
background-color: var(--pt-color-brand-primary);
background-color: var(--pt-color-brand-primary-subtle);
background-color: var(--pt-color-brand-primary-emphasis);
background-color: var(--pt-color-brand-secondary);
background-color: var(--pt-color-brand-secondary-subtle);
background-color: var(--pt-color-brand-secondary-emphasis);
background-color: var(--pt-color-brand-tertiary);
background-color: var(--pt-color-brand-tertiary-subtle);
background-color: var(--pt-color-brand-tertiary-emphasis);
/* Neutral primitive color tokens */
background-color: var(--pt-color-neutral-50); /* lightest */
background-color: var(--pt-color-neutral-500); /* mid */
background-color: var(--pt-color-neutral-950); /* darkest */Semantic Colors
Surface
bg-canvas
surface-base
surface-soft
surface-strong
surface-contrast
surface-inverted
brand-primary
brand-secondary
brand-tertiary
Text
Aa
text-defaultAa
text-mutedAa
text-subtleAa
text-headingBrand Foreground
Aa
brand-primary-fgAa
brand-secondary-fgAa
brand-tertiary-fgAction
Border
border-soft
border-default
border-strong
Link
Link Hover Visited
on-soft
Link
/
Hover
on-strong
Link
/
Hover
on-contrast
Link
/
Hover
on-inverted
Link
/
Hover
on-brand-primary
Link
/
Hover
on-brand-secondary
Link
/
Hover
on-brand-tertiary
Link
/
Hover
Text Contrast
on-inverted
on-inverted
on-inverted-muted
on-inverted-subtle
text-heading-on-inverted
on-surface-contrast
on-surface-contrast
text-heading-on-contrast
on-brand-primary
on-brand-primary
text-heading-on-brand-primary
on-brand-secondary
on-brand-secondary
text-heading-on-brand-secondary
on-brand-tertiary
on-brand-tertiary
text-heading-on-brand-tertiary
Show code
/* Semantic surface tokens */
background-color: var(--st-color-bg-canvas);
background-color: var(--st-color-surface-base);
background-color: var(--st-color-surface-soft);
background-color: var(--st-color-surface-strong);
background-color: var(--st-color-surface-contrast);
background-color: var(--st-color-surface-inverted);
/* Semantic text tokens */
color: var(--st-color-text-default);
color: var(--st-color-text-muted);
color: var(--st-color-text-subtle);
color: var(--st-color-text-heading);
/* Brand foreground tokens */
color: var(--st-color-brand-primary-fg);
color: var(--st-color-brand-secondary-fg);
color: var(--st-color-brand-tertiary-fg);
/* On-surface text tokens (high-contrast surfaces) */
color: var(--st-color-text-on-inverted);
color: var(--st-color-text-on-inverted-muted);
color: var(--st-color-on-brand-primary);
color: var(--st-color-on-brand-secondary);
/* Heading-on-* tokens (flow via .surface--bg-* cascade, not bridged as utilities) */
color: var(--st-color-text-heading-on-inverted);
color: var(--st-color-text-heading-on-contrast);
color: var(--st-color-text-heading-on-brand-primary);
color: var(--st-color-text-heading-on-brand-secondary);
color: var(--st-color-text-heading-on-brand-tertiary);
/* Action tokens */
background-color: var(--st-color-action-primary-bg);
color: var(--st-color-action-primary-fg);
border-color: var(--st-color-action-primary-border);
/* Border tokens */
border-color: var(--st-color-border-soft);
border-color: var(--st-color-border-default);
border-color: var(--st-color-border-strong);
/* Link tokens */
color: var(--st-color-link);
color: var(--st-color-link-hover);
color: var(--st-color-link-visited);Heading color by surface
Each surface below reassigns --st-color-text-heading to the
matching -on-* variant. The same <Heading>
component renders different colors automatically through the surface cascade.
Heading on contrast surface
Muted body text — cascades to --st-color-text-on-surface-contrast-muted.
Heading on inverted surface
Muted body text — cascades to --st-color-text-on-inverted-muted.
Heading on brand-primary surface
Muted body text — cascades to --st-color-on-brand-primary-muted.
Heading on brand-secondary surface
Muted body text — cascades to --st-color-on-brand-secondary-muted.
Heading on brand-tertiary surface
Muted body text — cascades to --st-color-on-brand-tertiary-muted.
Form Tokens
Placeholder text…
form-control-bg form-control-border form-placeholder
Show code
/* Form control tokens */
background-color: var(--st-color-form-control-bg);
border-color: var(--st-color-form-control-border);
color: var(--st-color-form-placeholder);Status Colors
Success
muted
Aa
on-success Warning
muted
Aa
on-warning Error
muted
Aa
on-error Info
muted
Aa
on-info Show code
/* Status primitive tokens */
background-color: var(--pt-color-status-success);
background-color: var(--pt-color-status-success-muted);
color: var(--st-color-on-status-success);
background-color: var(--pt-color-status-warning);
background-color: var(--pt-color-status-warning-muted);
color: var(--st-color-on-status-warning);
background-color: var(--pt-color-status-error);
background-color: var(--pt-color-status-error-muted);
color: var(--st-color-on-status-error);
background-color: var(--pt-color-status-info);
background-color: var(--pt-color-status-info-muted);
color: var(--st-color-on-status-info);Typography
Font Families
--st-font-family-display
The quick brown fox jumps over the lazy dog
--st-font-family-body
The quick brown fox jumps over the lazy dog
--st-font-family-prose
The quick brown fox jumps over the lazy dog
--st-font-family-code
The quick brown fox jumps over the lazy dog
Type Scale (Fluid)
text-xs --pt-text-xs
text-sm --pt-text-sm
text-md --pt-text-md
text-lg --pt-text-lg
text-xl --pt-text-xl
text-2xl --pt-text-2xl
text-3xl --pt-text-3xl
text-4xl --pt-text-4xl
text-5xl --pt-text-5xl
text-6xl --pt-text-6xl
Heading Size Mapping
| Semantic Token | Maps to |
|---|---|
| --st-font-size-display | --pt-text-4xl |
| --st-font-size-h1 | --pt-text-3xl |
| --st-font-size-h2 | --pt-text-2xl |
| --st-font-size-h3 | --pt-text-xl |
| --st-font-size-h4 | --pt-text-lg |
| --st-font-size-h5 | --pt-text-md |
| --st-font-size-h6 | --pt-text-sm |
| --st-font-size-code | --pt-text-sm |
Font Weights
The quick brown fox — light --pt-font-weight-light
The quick brown fox — regular --pt-font-weight-regular
The quick brown fox — semibold --pt-font-weight-semibold
The quick brown fox — bold --pt-font-weight-bold
The quick brown fox — code --pt-font-weight-code
Line Heights
--pt-line-height-tight (tight)
Design tokens create a shared vocabulary between design and development. They capture decisions so teams can iterate on visual style without touching component logic.
--pt-line-height-body (body)
Design tokens create a shared vocabulary between design and development. They capture decisions so teams can iterate on visual style without touching component logic.
--pt-line-height-relaxed (relaxed)
Design tokens create a shared vocabulary between design and development. They capture decisions so teams can iterate on visual style without touching component logic.
Show code
/* Font family tokens */
font-family: var(--st-font-family-display);
font-family: var(--st-font-family-body);
font-family: var(--st-font-family-prose);
font-family: var(--st-font-family-code);
/* Type scale tokens (fluid) */
font-size: var(--pt-text-xs);
font-size: var(--pt-text-sm);
font-size: var(--pt-text-md);
font-size: var(--pt-text-lg);
font-size: var(--pt-text-xl);
font-size: var(--pt-text-2xl);
font-size: var(--pt-text-3xl);
font-size: var(--pt-text-4xl);
font-size: var(--pt-text-5xl);
font-size: var(--pt-text-6xl);
/* Font weight tokens */
font-weight: var(--pt-font-weight-light);
font-weight: var(--pt-font-weight-regular);
font-weight: var(--pt-font-weight-semibold);
font-weight: var(--pt-font-weight-bold);
/* Line height tokens */
line-height: var(--pt-line-height-tight);
line-height: var(--pt-line-height-body);
line-height: var(--pt-line-height-relaxed);Spacing Scale (Fluid)
3xs
2xs
xs
sm
md
lg
xl
2xl
3xl
4xl
5xl
6xl
Show code
/* Spacing scale tokens (fluid) */
padding: var(--pt-space-3xs);
padding: var(--pt-space-2xs);
padding: var(--pt-space-xs);
padding: var(--pt-space-sm);
padding: var(--pt-space-md);
padding: var(--pt-space-lg);
padding: var(--pt-space-xl);
padding: var(--pt-space-2xl);
padding: var(--pt-space-3xl);
padding: var(--pt-space-4xl);
padding: var(--pt-space-5xl);
padding: var(--pt-space-6xl);Container Size Variants
Resize the browser to see how each container constrains its content at different viewport widths.
content — max-width: var(--pt-layout-content-max) — narrowest,
for reading
content-wide — max-width: var(--pt-layout-content-wide-max)
— wider content
wide — max-width: var(--pt-layout-container-max) — default
for most layouts
full — max-width: 100% — edge-to-edge
Show code
/* Container size layout tokens */
max-width: var(--pt-layout-content-max); /* content */
max-width: var(--pt-layout-content-wide-max); /* content-wide */
max-width: var(--pt-layout-container-max); /* wide (default) */
max-width: 100%; /* full */Border Radius
xs
sm
md
lg
full
Show code
/* Border radius tokens */
border-radius: var(--pt-radius-xs);
border-radius: var(--pt-radius-sm);
border-radius: var(--pt-radius-md);
border-radius: var(--pt-radius-lg);
border-radius: var(--pt-radius-full);Shadows
shadow-sm
shadow-md
shadow-lg
Show code
/* Shadow tokens */
box-shadow: var(--pt-shadow-sm);
box-shadow: var(--pt-shadow-md);
box-shadow: var(--pt-shadow-lg);Code Block (Shiki)
Rendered via Markdown pipeline — verifies Shiki dual-theme and --st-color-code-text token.
function greet(name: string): string {
return `Hello, ${name}!`;
}
// Semantic tokens in action
const message = greet("world");