Design system
Quiet surfaces, fitted controls and clear documents. A shared visual language for Master websites.
The brand guide defines the identity. This handbook is the interface it runs on: Moonstone in light mode and Obsidian in dark, one material ladder, one elevation order and one way to frame an example.
A small document workspace
A small project vocabulary
<article class="p-card r-card b(1) b-solid b-line-divider bg-surface-raised fg-text-body"> <p class="m(0) font-mono text-xs fg-brand">FIELD NOTES / 024</p> <h2 class="mt-sm mb-xs text-xl font-medium fg-text-strong">Room for the details</h2> <p class="m(0) text-sm">Color, spacing and radius come from three shared project tokens.</p></article>@theme { --color-brand: var(--color-text-link); --spacing-card: 1.5rem; --radius-card: .75rem;}Generated CSS
@layer theme { :root, :host { --color-zinc-30: oklch(78% .0025 265); --color-zinc-70: oklch(39.8% .0028 265); --color-zinc-90: oklch(24.6% .0022 265); --color-zinc-100: oklch(15% .0016 265); --color-blue-30: oklch(72.87% .1468 249.3); --color-blue-60: oklch(51.83% .2687 266.1) } :root, :host { --color-surface-raised: light-dark(var(--color-white), var(--color-zinc-90)); --color-line-divider: light-dark(oklch(0% 0 none / .12), oklch(100% 0 none / .12)); --color-text-body: light-dark(var(--color-zinc-70), var(--color-zinc-30)); --color-text-strong: light-dark(var(--color-zinc-100), var(--color-white)); --color-text-link: light-dark(var(--color-blue-60), var(--color-blue-30)) } :root, :host { --color-white: oklch(100% 0 none) } :root, :host { --font-family-mono: var(--font-mono, ui-monospace), SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --font-weight-medium: 500; --font-size-xs: .75rem; --font-size-sm: .875rem; --font-size-xl: 1.25rem; --text-xs: var(--font-size-xs); --text-xs--line-height: 1.5; --text-xs--letter-spacing: 0; --text-sm: var(--font-size-sm); --text-sm--line-height: 1.5; --text-sm--letter-spacing: 0; --text-xl: var(--font-size-xl); --text-xl--line-height: 1.4; --text-xl--letter-spacing: -.01em; --spacing-xs: .5rem; --spacing-sm: .75rem } :root, :host { --color-brand: var(--color-text-link); --spacing-card: 1.5rem; --radius-card: .75rem }}@layer utilities { .text-sm { font-size: var(--text-sm); line-height: var(--text-sm--line-height, normal); letter-spacing: var(--text-sm--letter-spacing, normal) } .text-xl { font-size: var(--text-xl); line-height: var(--text-xl--line-height, normal); letter-spacing: var(--text-xl--letter-spacing, normal) } .text-xs { font-size: var(--text-xs); line-height: var(--text-xs--line-height, normal); letter-spacing: var(--text-xs--letter-spacing, normal) } .bg-surface-raised { background-color: var(--color-surface-raised) } .b-line-divider { border-color: var(--color-line-divider) } .r-card { border-radius: var(--radius-card) } .b-solid { border-style: solid } .b\(1\) { border-width: calc(1 * 1px) } .fg-brand { color: var(--color-brand) } .fg-text-body { color: var(--color-text-body) } .fg-text-strong { color: var(--color-text-strong) } .font-mono { font-family: var(--font-family-mono) } .font-medium { font-weight: var(--font-weight-medium) } .m\(0\) { margin: calc(0 * 1px) } .mb-xs { margin-bottom: var(--spacing-xs) } .mt-sm { margin-top: var(--spacing-sm) } .p-card { padding: var(--spacing-card) }}- --color-brand
var(--color-text-link)- --spacing-card
1.5rem- --radius-card
.75rem
#Layers and materials
Every surface is a step on one ladder: the canvas holds a tray, a tray holds a lit stage, and sheets rise from it. A well sits below its surroundings. The interface stays monochrome; hue appears only in named teaching specimens and status.
--ui-surface-canvas--ui-surface-tray--ui-surface-stage--ui-surface-sheet--ui-surface-well--ui-surface-floatElevation
sink < flat < rise-1 < rise-1h < rise-2 < rise-3 < overlay
Concentric radii
3 · 4 · 6 · 8 · 10 · 14, nested by a 4px inset
#Controls that fit
Controls share one material and one state order. A raised face lifts half a pixel on hover and sinks into a well when pressed. Selected segments rise inside their sunken track, and focus is always a visible ink ring.
Buttons
Default, primary and quiet; hover lifts, pressing sinks
Choices and fields
Selected segments rise inside a sunken track; fields float back to the sheet on focus
Copy with an honest result
#A clear reading rhythm
One example is one tray: its head names it, the stage shows it, the code window holds the source with a closed Generated CSS disclosure, and a caption says what to notice. Tables and indexes own their frames.
Values, together
| Token / class | Role |
|---|---|
--color-brand | var(--color-text-link) |
--spacing-card | 1.5rem |
--radius-card | .75rem |
Teaching color is always named
- Context
- Subject
- Comparison
#Complete component reference
Each page shows a component's live states, where the site uses it and its markup interface. The authoring handbook covers layout contracts and the complete recipe collections.
Surfaces and frames 6
- Tray and stageOne complete example: head, stage, source and caption.
- Sheet and wellRaised faces and sunken fields on one ladder.
- CompareThe same subject under two named conditions.
- Browser viewportResize a real document inside an iframe.
- ContainerChange local width while the page stays put.
- Scroll regionKeep overflow local and keyboard reachable.
Specimens and annotations 11
- ItemA tile that stands for content, in a named tone.
- BadgeA small, legible state or category.
- LabelName a condition outside the measured layout.
- LegendPair every teaching color with a visible name.
- MeasureRead the browser’s actual width and height.
- AxesExplain physical directions around the subject.
- SwatchA named role with its actual paint.
- PaletteFixed preset colors with copy feedback.
- MediaOriginal artwork and real images with intrinsic size.
- PlayerPlay, pause and replay native animations.
- Downloadable assetArtwork on its intended ground with a download.
Controls 3
Documents and evidence 17
- Code windowsSource tabs, stable selection and native copying.
- Document patternsOptions, disclosures and related choices.
- Parameters and contractsComplete input names, types and requirements.
- Tooling examplesOptions and verified source/result pairs.
- Prompts and workflowsCopyable prose and explicit review steps.
- API declarationsImport paths, symbols and full declarations.
- Stylesheet examplesLiteral CSS and its complete compiled output.
- Document indexClear groups, readable links and useful starts.
- StepsA sequence with code in the same reading flow.
- Utility tableProperties and namespaces from shared facts.
- Numeric tokensOriginal values beside a useful comparison.
- Delivery diagramExplain resource order on one time axis.
- Chart groupUnits, series and sample context together.
- Metric rowsAlign values while preserving their caveats.
- Data tableComplete data in a named scroll region.
- Evidence footerKeep the source and recorded date in view.
- Recipe catalogNative disclosures for a complete collection.
Build an example with the shared components, or inspect all working recipes.