Standard Design Tokens
Canonical reference for all CSS custom properties exposed by @stnd/styles.
Source files: _standard-01-token.scss, _standard-02-color.scss, _standard-03-typography.scss, _standard-06-prose.scss, _standard-14-analog.scss.
Frontmatter Configuration
Standard Garden maps document-level frontmatter directly into these CSS custom properties. Any frontmatter key prefixed with stnd_ is automatically converted into its corresponding CSS variable on the document root.
For example, stnd_color_foreground: “#1a1a1a” becomes —color-foreground: #1a1a1a. The underscores are converted to dashes automatically.
Ratios
| Token |
Default |
Description |
—ratio-golden |
1.618 |
Golden ratio (φ) |
—ratio-silver |
1.414 |
Silver ratio (√2) |
—ratio-halfstep |
1.272 |
Half-step ratio |
—ratio-quarterstep |
1.128 |
Quarter-step ratio |
—ratio-eighthstep |
1.062 |
Eighth-step ratio |
Base Measurements
| Token |
Default |
Description |
—font-size |
1rem |
Root font size |
—optical-ratio |
var(—ratio-silver) |
Ratio driving the modular scale |
—line-height |
var(—optical-ratio) |
Base line height |
—space |
1rlh |
Official rhythm unit |
—leading |
calc((line-height – 1) * font-size) |
Space between cap-height and next baseline |
—nl |
calc(leading * line-height) |
Newline — full vertical unit |
—trim |
calc(leading / 2) |
Half-leading trim |
—max-width |
1024px |
Maximum content width |
—font-size-mobile |
1.1rem |
Font size override on mobile |
Spacing Scale
Derived from —baseline (1rlh).
| Token |
Value |
—space |
var(—baseline) |
—space-1 … —space-12 |
calc(var(—space) * N) |
—space-d2 |
calc(var(—space) / 2) |
—space-d3 |
calc(var(—space) / 3) |
—space-d4 |
calc(var(—space) / 4) |
Optical Harmony Scale
Powered by pow(var(—optical-ratio), N).
| Token |
Exponent |
Description |
—scale-d5 |
-2 |
Smallest (floor: 9px) |
—scale-d4 |
-1.5 |
|
—scale-d3 |
-1 |
|
—scale-d2 |
-0.5 |
|
—scale |
0 |
Base (= —font-size) |
—scale-2 |
1 |
|
—scale-3 |
2 |
|
—scale-4 |
3 |
|
—scale-5 |
4 |
|
—scale-6 |
5 |
|
—scale-7 |
6 |
|
—scale-8 |
7 |
Largest |
T-Shirt Size Aliases
| Token |
Maps to |
—size-3xs |
—scale-d5 |
—size-2xs |
—scale-d4 |
—size-xs |
—scale-d3 |
—size-sm |
—scale-d2 |
—size-base |
—scale |
—size-lg |
—scale-2 |
—size-xl |
—scale-3 |
—size-2xl |
—scale-4 |
—size-3xl |
—scale-5 |
—size-4xl |
—scale-6 |
—size-5xl |
—scale-7 |
—size-6xl |
—scale-8 |
Line Widths
| Token |
Default |
Description |
—line-width-xs |
24rem |
Extra small |
—line-width-sm |
32rem |
Small |
—line-width-md |
42rem |
Medium (default reading width) |
—line-width-lg |
50rem |
Large |
—line-width-xl |
60rem |
Extra large |
—line-width-full |
calc(100vw – space*2) |
Full viewport minus gutters |
—line-width |
var(—measure, —line-width-md) |
Active line width (themeable via —measure) |
Line Heights
| Token |
Default |
Description |
—line-height |
var(—optical-ratio) |
Base line height |
—line-height-compact |
calc(1 + (lh-1)/2) |
Tight line height |
—line-height-relaxed |
calc(1 + (lh-1)*1.5) |
Relaxed line height |
Letter Spacing
| Token |
Default |
Description |
—tracking-tight |
-0.01em |
Tight tracking |
—tracking-neutral |
0em |
Neutral tracking |
—tracking-open |
0.01em |
Open tracking |
Stroke & Radius
| Token |
Default |
Description |
—stroke-width |
max(1px, 0.06rem) |
Hairline stroke |
—stroke-width-lg |
calc(stroke-width * 2) |
Heavy stroke |
—radius |
var(—corner, var(—leading)) |
Border radius (themeable via —corner) |
—filter-blur |
blur(8px) |
Standard blur filter |
Gaps
| Token |
Default |
Description |
—gap-body |
clamp(space, 0.5vi+0.5rlh, space-3) |
Body gutter |
—gap-grid |
0.25lh |
Grid gutter |
—gap-body-mobile |
var(—space) |
Body gutter on mobile |
—gap-mobile |
1rlh |
General gap on mobile |
Z-Index
| Token |
Value |
Use case |
—z-base |
1 |
Above flow |
—z-dropdown |
1000 |
Dropdowns, popovers |
—z-modal |
1060 |
Modals, dialogs |
—z-toast |
1090 |
Toast notifications |
—z-image-zoom |
9999 |
Image lightbox |
Animation
| Token |
Default |
Description |
—duration-fast |
0.2s |
Quick interactions |
—duration |
0.5s |
Standard duration |
—ease |
cubic-bezier(0.5, 0, 0.5, 1) |
Standard easing curve |
—transition |
var(—duration) var(—ease) |
Shorthand transition |
Breakpoints
| Token |
Default |
Description |
—breakpoint-mobile |
600px |
Mobile breakpoint |
—breakpoint-sm |
768px |
Small screen |
—breakpoint-lg |
1024px |
Large screen |
—breakpoint-wide |
1440px |
Wide screen |
Colors — OKLCH Spectrum
Generated from —color-accent seed via OKLCH hue rotation.
| Token |
Hue |
Description |
—pigment-red |
25° |
Error red |
—pigment-yellow |
85° |
Warning amber |
—pigment-green |
145° |
Success green |
—pigment-cyan |
190° |
Info cyan |
—pigment-blue |
240° |
Link blue |
—pigment-purple |
300° |
Magic purple |
Supporting tokens: —dna-l, —dna-c, —dna-h, —safe-c, —safe-l.
Colors — Light Palette
| Token |
Default |
Description |
—color-light-background |
white |
Page background |
—color-light-foreground |
#262626 |
Text color |
—color-light-accent |
var(—color-foreground) |
Accent color |
—color-light-red |
#b14c42 |
Dusty red clay |
—color-light-orange |
#d78a5a |
Trail-worn orange |
—color-light-yellow |
#c8a840 |
Parchment mustard |
—color-light-green |
#5e9d80 |
Sage green |
—color-light-cyan |
#6ba4b6 |
Glacier teal |
—color-light-blue |
#4f81a4 |
Faded blueprint |
—color-light-magenta |
#7a6c91 |
Dusk lavender |
—color-light-link |
#4f81a4 |
Link color |
Colors — Dark Palette (auto-generated)
Auto-derived from light palette via color-mix(in oklch, light 80%, white).
Themes can override individual values.
| Token |
Default |
Description |
—color-dark-background |
#0f0f0f |
Page background |
—color-dark-foreground |
#dbdbdb |
Text color |
—color-dark-accent |
var(—color-light-accent) |
Accent color |
—color-dark-red |
auto |
Lightened red |
—color-dark-orange |
auto |
Lightened orange |
—color-dark-yellow |
auto |
Lightened yellow |
—color-dark-green |
auto |
Lightened green |
—color-dark-cyan |
auto |
Lightened cyan |
—color-dark-blue |
auto |
Lightened blue |
—color-dark-magenta |
auto |
Lightened magenta |
—color-dark-link |
auto |
Lightened link |
—color-dark-on-accent |
var(—color-dark-background) |
Text on accent |
Colors — Auto-Accent Strategies
Standard provides three automatic strategies to generate an accent color from your foreground text hue. By default, the system uses the triadic strategy for a balanced contrast. You can explicitly override —color-[light/dark]-accent in your theme using any of these strategies:
| Token |
Description |
—color-[light/dark]-accent-complementary |
Opposite side of the color wheel (+180°). Provides maximum, aggressive contrast. |
—color-[light/dark]-accent-triadic |
A third of the way around (+120°). Balanced, strong but natural contrast (Default). |
—color-[light/dark]-accent-analogous |
Next to the seed color (+30°). Harmonious, subtle, camaïeu effect. |
Colors — Semantic
Active tokens that resolve to light or dark palette.
| Token |
Description |
—color-background |
Page background |
—color-foreground |
Primary text |
—color-accent |
Primary accent |
—color-header |
Heading color (fallback: foreground) |
—color-red |
Red hue |
—color-orange |
Orange hue |
—color-yellow |
Yellow hue |
—color-green |
Green hue |
—color-cyan |
Cyan hue |
—color-blue |
Blue hue |
—color-magenta |
Magenta hue |
—color-success |
= —color-green |
—color-warning |
= —color-yellow |
—color-error |
= —color-red |
—color-info |
= —color-blue |
—color-link |
Link color |
—color-italic |
Italic text color |
—color-bold |
Bold text color |
—color-on-accent |
Text on accent background |
Colors — Computed
| Token |
Value |
Description |
—color-muted |
foreground 60% |
Muted text |
—color-subtle |
foreground 40% |
Subtle text / decoration |
—color-border |
foreground 10% |
Default border |
—color-surface-low |
foreground 3% opaque |
Slight surface tint |
—color-surface |
foreground 3% opaque |
Secondary background |
—color-surface-high |
foreground 5% transparent |
Hover state |
—color-darker |
dark 15% transparent |
Shadow helper |
—color-light |
light background |
Pole light |
—color-dark |
light foreground |
Pole dark |
—color-shadow |
dark 5% transparent |
Shadow color base |
Surface Elevation
Progressive foreground tinting for depth. Pairs with shadow presets.
| Token |
Tint |
Shadow |
Use case |
—color-surface-lowest |
14% (background) |
none |
Page background |
—color-surface-low |
7% |
—shadow |
Cards, inputs |
—color-surface |
3% |
—shadow-lg |
Raised panels, popovers |
—color-surface-high |
7% |
—shadow-xl |
Overlays, drawers |
—color-surface-highest |
14% |
—shadow-xl |
Modals, toasts |
Shadows (Layered System)
Composable shadow primitives. Combine freely with comma-separated values.
Building Blocks
| Token |
Description |
—shadow-ambient |
Subtle ground-contact shadow |
—shadow-lift |
Directional elevation shadow |
—shadow-glow |
Accent-tinted halo |
—shadow-inset |
Pressed/recessed effect |
—shadow-ring |
Border-like inset ring |
Composed Presets
| Token |
Composition |
Description |
—shadow |
ambient |
Default subtle shadow |
—shadow-lg |
ambient + lift |
Medium elevation |
—shadow-xl |
ambient + lift + glow |
High elevation with accent glow |
Usage
box-shadow: var(—shadow-lg);
box-shadow: var(—shadow-ring), var(—shadow-lift);
box-shadow: var(—shadow-inset), var(—shadow-ambient);
Borders
| Token |
Value |
Description |
—border |
stroke-width solid border-color |
Default border |
—border-transparent |
stroke-width solid transparent |
Transparent border (layout stability) |
—border-accent |
stroke-width solid accent 7% |
Accent-tinted border |
| Token |
Default |
Description |
—tooltip-background |
#1a1a1a |
Tooltip background |
—tooltip-text |
#ffffff |
Tooltip text |
—tooltip-ease |
cubic-bezier(0.25, 1, 0.5, 1) |
Tooltip animation |
Typography — Font Stacks
| Token |
Default |
Description |
—font-sans |
Instrument Sans, system-ui |
Sans-serif stack |
—font-serif |
Newsreader, Instrument Serif |
Serif stack |
—font-monospace |
IBM Plex Mono, ui-monospace |
Monospace stack |
Typography — Semantic Roles
| Token |
Default |
Description |
—font-text |
var(—font-sans) |
Body text |
—font-header |
“Inter Variable” |
Headings |
—font-interface |
var(—font-sans) |
UI elements |
Typography — Weights
| Token |
Default |
Description |
—font-weight |
400 |
Body weight |
—font-weight-bold |
600 |
Bold weight |
—font-weight-header |
700 |
Heading weight |
—font-weight-h1 |
var(—font-weight-header) |
H1 weight |
—font-weight-h2 |
max(header*0.85, body) |
H2 weight |
—font-weight-h3 |
max(header*0.85, body) |
H3 weight |
—font-weight-h4 |
var(—font-weight) |
H4 weight |
—font-weight-h5 |
var(—font-weight) |
H5 weight |
—font-weight-h6 |
var(—font-weight) |
H6 weight |
Typography — OpenType Features
| Token |
Default |
Description |
—font-inter-feature |
“calt”, “cv05”, “cv11”, “ss03” |
Inter-specific features |
—font-instrument-feature |
“figa”, “ss01”, “ss02”, “ss05” |
Instrument Sans features |
—font-feature |
“” |
Body text features |
—font-variation |
“wdth” 95 |
Body text variation axes |
—font-header-feature |
“” |
Header features |
—font-header-variation |
“” |
Header variation axes |
—font-monospace-feature |
“” |
Monospace features |
—font-monospace-variation |
“” |
Monospace variation axes |
—font-interface-feature |
“dlig”, “zero” |
Interface features |
—font-interface-variation |
“” |
Interface variation axes |
—font-list-feature |
“dlig”, “tnum”, “zero” |
List features |
—font-list-variation |
“” |
List variation axes |
Typography — Other
| Token |
Default |
Description |
—font-letter-spacing |
normal |
Body letter spacing |
—font-header-letter-spacing |
normal |
Header letter spacing |
—font-header-line-height |
1 |
Header line height |
—list-indent |
var(—space) |
List indentation |
Layout — Prose Grid
| Token |
Default |
Description |
—content-width |
min(—line-width, 100%) |
Content column width |
—content-width-sm |
max(space-2 – space, space) |
Sidebar margin inset |
—content-width-editorial |
minmax(0, —space-2) |
Editorial column |
—content-width-feature |
minmax(0, —space-4) |
Feature column |
—content-width-hero |
minmax(0, 1fr) |
Hero (full bleed) column |
Analog (Noise Overlay)
| Token |
Default |
Description |
—noise-overlay |
SVG data URI |
Noise texture |
—noise-overlay-opacity |
0.08 |
Overlay opacity |
—noise-overlay-blend |
multiply |
Blend mode |
Forced Colors (High Contrast)
Under @media (forced-colors: active):
| Token |
Maps to |
—color-background |
Canvas |
—color-foreground |
CanvasText |
—color-accent |
Highlight |
—color-border |
CanvasText |
—color-muted |
GrayText |