Foundations

The shared decisions behind every Gamma component, expressed as tokens so a whole design system can be swapped at once.

One contract, many systems.

Components never hardcode a color, font, radius, easing, or shadow. They read --gamma-* custom properties, and a design system supplies all thirty-six values. Gamma is the default system installed on the document root; the design-system library holds the alternatives.

Mode tokens change between light and dark: surfaces, text, accent, semantic colors, shadows, focus ring, selection.
Type, shape, and motion tokens are fixed for a system.
A scope element with data-design-system becomes an island; the nearest scope wins.

Quiet surfaces. Clear signals.

Color gives each control an understandable role without competing with the live component. Text pairs hold 4.5:1 contrast in both modes; the checker enforces it.

BackgroundPrimary canvas--gamma-bg#ffffff

SurfaceGrouped panels and rows--gamma-surface#f8faff

Surface 2Tracks, slots, hover fills--gamma-surface-2#f2f5fb

InkPrimary content--gamma-ink#17233a

MutedSupporting copy--gamma-muted#65738b

BorderHairline separation--gamma-border#e3e9f3

AccentFocus and action--gamma-accent#275bea

Accent inkText on the accent--gamma-accent-ink#ffffff

SuccessCompleted and verified--gamma-success#16845b

DangerErrors and destructive actions--gamma-danger#c83e4c

WarningReview before continuing--gamma-warning#9a6200

Readable at every scale.

DM Sans carries the interface and its headings; IBM Plex Mono marks source, values, and measurements. Display headings track to -0.03em; nothing tightens further.

--gamma-font-displayComponents worth keeping.

--gamma-font-ui, 18pxOne system, many states.

--gamma-font-ui, 14px

Use plain labels, short guidance, and enough contrast for everyday work.

--gamma-font-code, 12pxonComplete(value: string) → void

Space follows purpose.

Four pixels is the base unit. Density increases in navigation and code, while live previews get room to breathe. Radii come in four sizes plus a pill; buttons may pick their own.

4px

8px

12px

16px

24px

32px

48px

Small · 6px

Control · 9px

Button · 9px

Panel · 12px

Pill · 999px

Focus ring

Motion explains state.

Three durations cover feedback, routine change, and layout. Transitions use the standard curve, arrivals use the emphasized curve, and only elastic controls use the spring. Every animation has a reduced-motion path.

130msFastHover, press, focus

200msBaseToggles, reveals, labels

360msSlowPanels, trays, arrivals

Standard cubic-bezier(0.2, 0.8, 0.2, 1)
Emphasized cubic-bezier(0.16, 1, 0.3, 1)
Spring cubic-bezier(0.2, 1.3, 0.35, 1)

Depth is tinted from the ink.

Three shadows carry an offset and a soft blur; none is a halo. Elevation is declared once per surface, either a hairline or a shadow.

LowControls and selected tabs

MidCards, menus, toasts

HighLifted cards and overlays

Every state earns its place.

Interactive components have clear keyboard paths, accessible names, and motion that respects user preferences.

Native semantics are the default starting point.
Focus, loading, error, and disabled states are deliberate.
Every component renders under every design system in the library.
Captured evidence stays in review until source and rights are checked.