07
Boundary-free monitoring
DViewport-as-AOI remote-sensing proof of concept.
01 Overview · 02 Explorer
Internal reference
Design System
Catalogue of design tokens, component patterns, visualisation chrome, and page-specific variants. Most specimens render actual site CSS; inline recreations are called out where no shared class exists yet.
Local preview only; this does not edit theme.config.js.
System map
Foundations
Tokens and type decisions that should flow through themes before individual components override them.
Canonical components
Shared controls, forms, cards, rows, links, and status patterns that should reduce variant drift.
Specimen states · Buttons · Forms · Cards · Navigation · Links · Status
Visualisation patterns
Graph, legend, tooltip, readout, and overlay chrome where interaction state and data semantics must stay distinct.
Flow · Visualisation chrome · Document Map · Satellite Explorer
Module exceptions
Contextual page patterns that share primitives but retain their own academic, editorial, or exploratory tone.
Global shell · Editorial · Taxonomy · Products Over Projects
Governance
How to keep the reference current as production pages change and design debt is discovered.
Page rhythm modes
Essay rhythm
Use for long-form explanation. Prioritize readable measure, generous section breaks, quiet links, and prose-led hierarchy.
Examples: module roots, notes, articles, theory sections
Lab rhythm
Use for interactive tools. Keep controls compact, stages prominent, readouts close to the visual, and insight copy readable.
Examples: Flow Explore, Satellite Explorer, GC Explorer
Catalogue rhythm
Use for scan-first indexes. Prefer rows, sparse enclosure, compact metadata, and strong title/descriptor alignment.
Examples: module catalogue, note index, article index
Reference rhythm
Use for taxonomies, tables, derivations, and design-system specimens. Favor clear grouping, compact labels, and stable comparison grids.
Examples: taxonomy grids, M/M/1 derivation, this page
00 · Specimen state model
Static snapshot
Use for examples that show stable anatomy, token use, or layout without implying user interaction.
Label with Snapshot
Forced state
Use when the page intentionally pins a state such as Active, Disabled, Working, Error, or Visible.
Label the visible state directly
Interactive specimen
Use only when the design-system page is intentionally exercising behavior; otherwise prefer snapshots.
Label with Interactive
Specimens are descriptive unless labelled interactive. Forced state examples may expose static aria-pressed, disabled, or visibility classes to document the rendered state.
01 · Color tokens
Surface
--paper
#faf8f1
--paper-dark
#f0ead9
--paper-deep
#e6dece
Ink
--ink
#2A2018 · headings, emphasis
--ink-mid
#5C4F3A · body text
--ink-faint
#9C8E78 · secondary labels
--ink-ghost
#C8BDA8 · borders, disabled
Accents
--rust
#8B3A2A
--rust-light
#B85C40
--sage
#4A6741 · focus rings, positive
--sage-light
#6B8F62
--ochre
#9A7B3A
--gold
#B8943A
--slate
#3D4F5C
--slate-light
#5A7080
Accent semantics
Rust
Constraint, risk, warning, capacity pressure, conflict, or negative outcome. Use when the interface needs tension or consequence.
--rust · examples: error status, Flow capacity line, flight outcome
Sage
Constructive signal, resolved/positive state, selected conceptual emphasis, or calm confirmation. Use when the system is showing coherence or useful progress.
--sage · examples: resolved outcome, card accent, conceptual highlights
Gold
Active mode, high-attention context switch, searching/in-progress emphasis, or chosen lens. Do not use as a generic decorative highlight.
--gold · examples: Demo tags and Satellite context controls through attention tokens
Slate
Structural framing, secondary systems, neutral contrast, or oversight/meta-state. Use when the interface needs weight without alarm.
--slate · examples: oversight outcome, secondary visual grouping, structural accents
Ochre
Working, pending, transitional, or caution-adjacent state. Use when something is active but not failed or confirmed.
--ochre · examples: working status, pending analysis, transitional notes
Themes may remap the literal colours, but the semantic roles should hold. If one surface needs more than two accent roles at once, prefer neutral ink tiers for supporting detail so the primary signal stays legible.
Viz tier — data visualisation only, not UI
--viz-ink-faint
#7A6E5F
--viz-ink-ghost
#B0A490
--viz-rust-light
= --rust-light
--viz-gold
= --gold
--viz-sage
= --sage
02 · Typography
Families
Body / prose family
--serif · body, prose
Computed on load
Heading family
--serif-alt · headings
Computed on load
Mono / UI family
--mono · labels, UI, code
Computed on load
Headings
Module title h1
Essay heading h2
Section label
Module context number
Module title h1 · Computed on load
Essay heading h2 · Computed on load
Section label · Computed on load
Module context number · Computed on load
Body
Essay body — computed from the active theme's prose stack. Used for long-form prose in module essays and notes.
Module header body — same size, slightly looser colour at --ink-mid.
Essay body · Computed on load
Module header body · Computed on load
Mono labels
Button / action label
--fs-button-action (0.75rem) · 0.12em tracking
Micro label / viz chrome
0.6rem · 0.05–0.08em tracking
01
.module-number — catalogue numbering
Section label
To the Bedrock
.section-label — 0.75rem mono uppercase, --ink-faint, 0.12em tracking · defined in css/components/hero-cv.css
Hero meta block
.hero-meta · .hero-meta-name (serif-alt italic) · .hero-meta-role (mono upper) · left border uses --link-inline
03 · Buttons
Control role taxonomy
Primary action
Use for the single action that starts or advances the main workflow on a surface.
Shared class: .control-action.control-action--primary; current examples include .submit-btn and contextual .satellite-analyse-btn
Secondary action
Use for lower-emphasis commands adjacent to a primary action, including reset/new-view affordances.
Shared class: .control-action.control-action--secondary; current examples include .satellite-secondary-btn and footer progression links when navigational
Segmented mode switch
Use for mutually exclusive view modes where one option is always active.
Shared classes: .control-segmented and .control-segmented-option; high-attention context switches may use --control-attention-* tokens
Segmented preset group
Use for scenario presets that set multiple controls together, may become unselected after manual edits, and may re-apply behavior when the active preset is pressed again.
Shared classes: .control-segmented.control-segmented--preset and .control-segmented-option
Filter chip
Use for local filtering or focus within a visualization or assessment, not for page navigation.
Shared class: .control-chip; current examples include Document Map anchors and risk chips
Binary toggle
Use for an independent on/off setting that can change without switching the whole mode.
Shared class: .control-toggle; active high-attention toggles may use --control-attention-* tokens
Text disclosure
Use for expanding or revealing optional explanatory content without changing task state.
Shared class: .control-disclosure; current examples include collapsible toggles, details summaries, and in-page jump links
This taxonomy is canonical guidance. Shared role classes own the common control anatomy; module-specific classes keep contextual sizing, active states, and color semantics.
Canonical control primitives
Snapshot · default
Primary action · .submit-btn
Forced state · disabled
Primary action · disabled
Snapshot · default
Text disclosure
Defined in css/pages/module-foundation.css · disabled state in css/components.css
Mode, filter, and toggle targets
Forced state · on
Canonical binary toggle · independent on/off setting
Overlay chrome / glass HUD
Fixture surface · live imagery unavailable
Forced state · on
Archived surface toggle · Plotly demo
Flow presets and the CV/Skills shell use neutral segmented language because they choose between peer modes. Satellite Explorer uses overlay chrome: a translucent blurred backing preserves readability over changing imagery, one viewport action remains button-like, Terrain is a compact pressed-state chip, hectare values are metadata, and fallback copy is quiet status text. The archived Plotly demo still has its own Base map toggle because it controls a different surface layer.
- Use overlay chrome only for controls over a dynamic map, rendered surface, or canvas; normal page controls should use the canonical action, segmented, and toggle patterns.
- The live Explorer overlay order is viewport action, Terrain state chip, request-area readout. Keep scene metadata below the viewer rather than inside the overlay.
- The Terrain control is a button[aria-pressed] with a visible track-and-thumb switch. It is a compact mode toggle, not a peer action button; do not add a Basemap peer button beside it.
- Area values are read-only visualisation metadata. Preserve lowercase units such as ha and avoid input-like boxes.
- Normal HUD surfaces stay neutral, translucent, and blurred. Blocked viewport state should change text such as zoom in below 200 ha, not the glass material.
- The archived Plotly demo Base map toggle is documented for legacy parity only; it is not the live Explorer HUD pattern.
04 · Form elements
Radio scale
.question-block · .question-scale · .scale-option · defined in css/pages/module-foundation.css
Range slider
.control-range · use --control-range-color for contextual track/thumb colour while preserving shared focus and hover behaviour.
Search input
.note-search · .note-search-input — bottom border animates on focus-within. Defined in css/pages/content-cards.css
05 · Cards
Card and row taxonomy
Informational card
Use for supporting observations or explanatory content that is not itself a navigation target.
Shared class: .surface-card; examples include .satellite-poc-card and neutral note panels
Callout card
Use for contextual asides that interrupt the essay rhythm just enough to clarify, warn, or frame the next step.
Shared class: .surface-card--callout; examples include .field-notes-card
Action card
Use for a card-shaped link or next-step affordance where the whole surface navigates.
Shared class: .surface-card--action; examples include .essay-link, .note-index-link, and .case-card
Assessment card
Use for questionnaire steps, risk comparison panels, or other task-local decision surfaces.
Shared class: .surface-card--assessment; examples include .q-card, .risk-comparison-column, and .risk-principle-card
Metric/result card
Use for result summaries and computed output where the content is primarily read, not acted on.
Shared class: .surface-card--metric; examples include .sim-summary-card and .risk-result
Catalogue row
Use for dense catalogue entries where scan order, title, descriptor, and section metadata matter more than card enclosure.
Shared class: .surface-row; production .module-entry keeps exact class strings for navigation-contract tests
Simulation summary card
Simulation complete
Outcomes
Resolved
42%
Flight
18%
Oversight
12%
.sim-summary-card · top accent uses --card-accent-color (= --sage)
Field notes card
Field note
This card pattern is used for contextual asides and supporting observations within module essays. Left accent uses --slate-light.
.field-notes-card — left accent --slate-light · defined in css/pages/content-cards.css
Note index card
.note-index-card · .note-index-link — hover lifts with shadow. Left accent --card-accent-color (= --sage)
Essay link card
.essay-link — slides right on hover (translateX 4px). Label in serif-alt italic --sage. Defined in css/pages/content-cards.css
Questionnaire card
Step 2 of 5
.q-card · top accent uses --ink-ghost
Module back-link
.module-back-link · defined in css/pages/navigation-explorer.css
Module sub-nav
.module-sub-nav · .module-sub-nav-link--active · defined in css/pages/navigation-explorer.css
Module tags / chips
.module-tags · .module-tag · colour token --tag-chip
Demo tag
D
.module-demo-tag · compact D with accessible Demo label
07 · Outcome state colours
Used in GC simulation summaries and result readouts.
Resolved--sage
Flight--rust
Oversight--slate
Searching--gold
In-CO--sage-light
Unresolved--ink-faint
08 · Link variants
All link affordances are centralised in css/pages/link-language.css (loaded last).
Inline prose links
Ideas about complexity and emergence — inline links within .essay-body, .hero-body, .diagnosis-body. Underline thickness 1px, offset 0.16em. Tag links like #emergence render in --ink-faint.
Footer-nav / progression links
← Flow & Waiting
.footer-nav-link · --sage, inset underline
View full diagnosis
.diagnosis-link · same treatment as footer-nav-link
In-page jump links
Jump to derivation
.ep-jump — bottom border underline, no bg
Footer utility link
Site Notes
.footer-link · --ink-faint, no underline
09 · Status indicators
Used for async operation states in the Explorer. Defined in css/pages/satellite-index.css.
Analysing…
Forced state · working
.satellite-status--working · --ochre
Ready
Forced state · ready
.satellite-status--ready · --sage
Live imagery unavailable
Forced state · error
.satellite-status--error · --rust
10 · Global shell and home surface
Main navigation states
.nav-link variants · active marker · editorial serif italic · catalogue rust
.nav-links.is-open · popover surface, slight rotation, animated links
Global shell details live in css/components/nav.css: sticky link row, mobile grid toggle, catalogue submenu, safe-area top offset, popover z-index tier.
Homepage hero
To the Bedrock
Complex systems, made inspectable.
The home surface uses the largest serif-alt italic title, compact mono section label, and restrained EB Garamond body copy.
11 · Editorial content and notes
Markdown article body
Generated note heading
Notes and articles use a slightly smaller prose rhythm than module essays, with compact line-height and low-contrast ink. Paragraph spacing stays quiet so long reading pages feel editorial rather than dashboard-like.
Blockquotes use a pale left rule and inherited serif text rather than a decorative callout treatment.
const insight = "plain static pages, carefully styled";.note-content h2/h3/p/li/blockquote/pre/code · defined in css/pages/content-cards.css
Catalogue row
12 · Taxonomy, comparison, and matrix patterns
Taxonomy dimension
Release discipline
Pull-limited New work enters only when capacity is visibly available.
Push-loaded Intake follows demand pressure rather than system readiness.
Reference grid
| Low variability | High variability | |
|---|---|---|
| Low load | Stable flow | Bursty but recoverable |
| High load | Brittle utilization | Queue amplification |
13 · Products Over Projects risk patterns
Risk comparison cards
Product-mode risk
Residual uncertainty lives in discovery and market learning.
Use compact card framing with serif-alt italic claim and serif explanatory body.
Project-mode risk
Residual uncertainty lives in execution coordination.
The card shape matches shared primitives but carries module-specific semantics.
14 · Flow & Queuing lab and math treatment
Token tier policy
- Bar charts use the neutral UI tier --ink-ghost, with opacity carrying fit/spill/backlog differences.
- Capacity line uses --rust; force graph nodes use pastel accent tiers.
- Math letters use STIX/Cambria/Latin Modern/math fallback before the serif stack.
Mini legend and math variable style
- WIP (L)work currently inside the system
- Lead time (W)elapsed time from arrival to completion
Interactive lab stage
- Order helper, preset group, range controls, chart panels, interpretive insight, then metric readout.
- Panels chart panels stay unboxed by default; hierarchy comes from title, explanatory note, fixed chart height, and shared visualisation chrome.
- Mobile preset controls may wrap into a two-by-two grid, chart panels stack, and metric readouts collapse before text is squeezed.
Lab pages should feel like instruments, not dashboards. Keep the primary visual or canvas visually dominant, put controls before the stage, put explanatory insight after the stage, and keep theory/prose as a follow-up layer rather than inline instruction.
15 · Visualisation chrome and graph states
Chrome role taxonomy
Helper
Use for compact instructions that orient the interaction before or beside a visualisation.
Shared class: .viz-chrome-helper
Legend
Use for visual keys and filterable category controls.
Shared classes: .viz-chrome-legend, .viz-chrome-legend-item, and .viz-chrome-legend-filter
Tooltip/detail
Use for transient explanatory content tied to hover, focus, selection, or a highlighted relationship.
Shared classes: .viz-chrome-tooltip, tooltip child classes, and .viz-chrome-detail
Status/readout
Use for live state, request metadata, and metric output surrounding an interactive visualisation.
Shared classes: .viz-chrome-status, .viz-chrome-readout, .viz-chrome-readout-label, and .viz-chrome-readout-value
Interpretive insight
Use for sentence-length explanatory feedback generated by an interactive lab; keep it readable prose rather than compact status microcopy.
Shared class: .viz-chrome-insight
Force graph chrome
Select a group to focus related nodes
Highlighted relationship
Forced state · detail visibleBreathing room: variability is more likely to be absorbed before it becomes persistent waiting. This is interpretive feedback, not a short request status.
Forced state · insight visibleMix Mapper legend
Hover or focus a node to inspect process/assumption/learning relationships.
16 · Document Map visual language
Legend, anchors, and tooltip
Readiness bars are neutral; anchor mode owns the rust emphasis.
◆Active anchor
Readiness
Home station
Restated artifact
Anchor
Station 04 · Concept
Tooltip copy uses mono microtype and restrained paper surface.
17 · Boundary-free monitoring Explorer
Spectral index content
Index formulas
NDVI
NIR, red
18 · Maintenance
This page describes the current design reference. Design debt, open consolidation decisions, and proposed canonical directions live in the design-system backlog.
Consolidation should preserve the same overall site feel, reduce ambiguous pattern meanings, and keep button, chip, switch, toggle, disclosure, and visualisation-control states intact across hover, focus, active/selected, disabled, keyboard, and mobile contexts.
- When production changes update the matching specimen or add a module-specific exception.
- When a specimen becomes canonical move its shared vocabulary into css/components/ and keep contextual styling in page CSS.
- When a variant remains unresolved record it in the backlog instead of letting the design-system page imply it is approved.
Theme quality checklist
- Readability body text, labels, links, and captions remain legible without relying on theme novelty.
- Controls hover, focus, selected, disabled, and mobile wrapping states remain visible for buttons, chips, toggles, presets, and ranges.
- Cards and rows borders, accents, and shadows preserve the card/row taxonomy instead of turning every surface into the same block.
- Visualisation chart marks, legends, readouts, tooltips, and interpretive insight preserve data meaning and do not compete with page decoration.
- Overlays HUDs and canvas overlays stay readable on dynamic imagery, especially on Satellite Explorer.