Foundations overview
The visual primitives every Prism surface is built from — colour, type, spacing, radius, elevation, motion. This is the narrative companion to the live specimen cards in the Design System tab and to the deeper splits (TOKENS, THEMING, DENSITY).
One rule above all: never hand-pick a value. Every colour, size, space, radius and shadow comes from a token. An "odd one out" is a bug.
Colour
Vibrant foreground on a soft, warm canvas, authored entirely in OKLCH (no hex, no rgb) so colour renders in wide-gamut Display-P3 and stays perceptually uniform.
- Canvas — a warm sand/cream neutral ramp (
--gray-*, faintly golden, never cold).--surface-pagesits behind--surface-card. - Brand — a single
--brand-*ramp, default a very vibrant blueoklch(0.47 0.32 264)(≈#0022ee). Blue universally reads as interactive. Re-skin by remapping--brand-*(see THEMING). - Status — emerald
--positive, amber--notice, red--negative, sky--info. Always paired with an icon or text — never colour alone. - Section accents — a 3-step attention hierarchy:
--section-primary(violet, loudest) ›--section-secondary(teal) ›--section-tertiary(soft amber, quietest). - Intent —
--intent-brand/--intent-discovery(new/AI/beta) /--intent-premium(upgrade). - Domain —
--domain-commerce|campus|health|media|finance|hospitality|estate: canonical per-platform hues, the source of truth for product signatures. - Role —
--role-student|parent|admin|reviewer|doctor|guest|customer|operator|finance|support: who is using the product (avatar rings, "viewing as" banners, scope chips). Says who, not what happened. - Charts — a Carbon-modelled data-viz system (see DATA_VISUALISATION).
Every foreground/background pair clears WCAG AA. Pair text with its matching -on token (--accent-on on --accent).
Type
| Family | Role | Why |
|---|---|---|
| Roboto Flex | Headings (variable, optical sizing on) | Tight, confident display |
| Atkinson Hyperlegible Next | Body & UI | Disambiguated letterforms — easier for low-vision readers |
| Atkinson Hyperlegible Mono | Data, IDs, money, code | Digits line up |
Every font size is an exact Tailwind step — never an in-between value. The raw --text-xs … --text-9xl ramp is frozen; semantic roles only ever point at one of those steps. The ladder, large → small: --fs-hero › --fs-display › --fs-h1…--fs-h6 › --fs-lead › --fs-body-lg › --fs-body › --fs-body-sm › --fs-small › --fs-caption. All sizes are rem so OS/user text-zoom wins. Body line-height is a roomy 1.55 to survive long localized strings. Classes (.prism-hero….prism-caption) and components (Heading, Text, Eyebrow, Blockquote, Pullquote, Prose) render them.
Spacing & layout
A strict 4px grid of primitives (--space-*). Components consume semantic role tokens — --gap-section, --gap-stack, --pad-card, --control-height, --radius-control/-card/-surface — which shift by device tier and density, so one switch reflows the whole UI. Layout uses logical properties (inset-inline, padding-inline) throughout so RTL mirrors for free. Controls honour a 44px minimum target (--size-touch), 56px xl for TV.
Radius
Soft, not pill-y, and responsive: --radius-control (controls), --radius-card (cards), --radius-surface (modals/large surfaces) — each grows from mobile (tighter) to desktop. --radius-pill is reserved for switches, avatars, removable tags.
Elevation
Soft, warm-tinted, layered (key + ambient) shadows --shadow-xs → --shadow-xl. Subtle in light; in dark theme shadow nearly vanishes and elevation is carried by lighter surfaces + borders. A card = white surface + 1px subtle border + --shadow-sm; interactive cards lift to --shadow-md on hover.
Borders
1px hairlines in three weights: --border-subtle / --border-default / --border-strong. Inputs use the strong border at rest so fields read as editable; checkbox/radio use a 2px border.
Motion
Quick and confident, never bouncy. Durations 80–340ms; standard easing cubic-bezier(0.2,0,0,1). Transitions are functional — they clarify a state change (hover darkens, press shrinks ~1.5%, drawers slide, progress fills). No decorative or infinite animation. All motion collapses under prefers-reduced-motion.
See also
TOKENS for the full taxonomy and naming · THEMING for re-skinning · DENSITY for the responsive/density scales · ACCESSIBILITY for contrast & focus rules.