Design system
Tokens, rules and every component, live. Phase two builds Blueprints and Praxis from these.
Navy and turquoise stay. Semantic tokens say what a colour is for; the terminal has its own palette.
| Pair | Sample | Colours | Ratio | Needs | Result |
|---|---|---|---|---|---|
| Body text | Aa | ink #1A2332surface #FFFFFF | 15.78:1 | 4.5:1 | AA pass |
| Body text on tinted surface | Aa | ink #1A2332surface-2 #F6F9FB | 14.93:1 | 4.5:1 | AA pass |
| Secondary text | Aa | ink-2 #4A586Bsurface #FFFFFF | 7.24:1 | 4.5:1 | AA pass |
| Secondary text on tinted surface | Aa | ink-2 #4A586Bsurface-2 #F6F9FB | 6.85:1 | 4.5:1 | AA pass |
| Tertiary text (captions) | Aa | ink-3 #5B6B80surface #FFFFFF | 5.44:1 | 4.5:1 | AA pass |
| Link / accent text | Aa | accent-ink #066E6Bsurface #FFFFFF | 6.09:1 | 4.5:1 | AA pass |
| Accent text on tinted surface | Aa | accent-ink #066E6Bsurface-2 #F6F9FB | 5.76:1 | 4.5:1 | AA pass |
| Accent text on accent-soft | Aa | accent-ink #066E6Baccent-soft #E7F8F8 | 5.56:1 | 4.5:1 | AA pass |
| Button label (navy on turquoise) | Aa | navy #1A2332accent #0ABFBC | 6.91:1 | 4.5:1 | AA pass |
| Light text on navy | Aa | surface #FFFFFFnavy #1A2332 | 15.78:1 | 4.5:1 | AA pass |
| Turquoise on navy (footer links, dark bands) | Aa | accent #0ABFBCnavy #1A2332 | 6.91:1 | 4.5:1 | AA pass |
| Success text | Aa | success #0B6E43success-soft #E5F6EC | 5.63:1 | 4.5:1 | AA pass |
| Warning text | Aa | warning #8A5200warning-soft #FFF3DC | 5.81:1 | 4.5:1 | AA pass |
| Danger text | Aa | danger #A31F1Fdanger-soft #FDECEC | 6.63:1 | 4.5:1 | AA pass |
| Danger text on white | Aa | danger #A31F1Fsurface #FFFFFF | 7.57:1 | 4.5:1 | AA pass |
| Body text on teal wash | Aa | ink #1A2332wash-teal #DDF6F5 | 13.96:1 | 4.5:1 | AA pass |
| Secondary text on teal wash | Aa | ink-2 #4A586Bwash-teal #DDF6F5 | 6.41:1 | 4.5:1 | AA pass |
| Body text on sky wash | Aa | ink #1A2332wash-sky #E4EEFA | 13.46:1 | 4.5:1 | AA pass |
| Secondary text on sky wash | Aa | ink-2 #4A586Bwash-sky #E4EEFA | 6.18:1 | 4.5:1 | AA pass |
| Accent text on teal wash | Aa | accent-ink #066E6Bwash-teal #DDF6F5 | 5.38:1 | 4.5:1 | AA pass |
| White on hero gradient (darkest stop) | Aa | surface #FFFFFFnavy-deep #0E1622 | 18.16:1 | 4.5:1 | AA pass |
| Quiet button text (white) on hero gradient lightest stop | Aa | surface #FFFFFFteal-deep #0B5F63 | 7.42:1 | 4.5:1 | AA pass |
| White on hero gradient (teal end) | Aa | surface #FFFFFFteal-deep #0B5F63 | 7.42:1 | 4.5:1 | AA pass |
| Secondary text on dark band (navy-mid) | Aa | on-dark #D3DEEAnavy-mid #14263A | 11.26:1 | 4.5:1 | AA pass |
| Secondary text on dark band (band end) | Aa | on-dark #D3DEEAgrad-end #0F3F52 | 8.31:1 | 4.5:1 | AA pass |
| Secondary text on teal-deep | Aa | on-dark #D3DEEAteal-deep #0B5F63 | 5.44:1 | 4.5:1 | AA pass |
| Turquoise on navy-mid (eyebrows on bands) | Aa | accent #0ABFBCnavy-mid #14263A | 6.72:1 | 4.5:1 | AA pass |
| Turquoise on band end | Aa | accent #0ABFBCgrad-end #0F3F52 | 4.96:1 | 4.5:1 | AA pass |
| White on CTA gradient (middle) | Aa | surface #FFFFFFcta-mid #0A7F82 | 4.80:1 | 4.5:1 | AA pass |
| White on CTA gradient (azure end) | Aa | surface #FFFFFFazure #1F5FBF | 6.09:1 | 4.5:1 | AA pass |
| Secondary text on hero quick-path card (glass over teal end) | Aa | on-dark #D3DEEAglass #0E4B52 | 7.18:1 | 4.5:1 | AA pass |
| White heading on hero quick-path card | Aa | surface #FFFFFFglass #0E4B52 | 9.78:1 | 4.5:1 | AA pass |
| Turquoise arrow on hero quick-path card | Aa | accent #0ABFBCglass #0E4B52 | 4.28:1 | 3.0:1 | AA pass |
| White glyph on icon chip (teal-mid) | Aa | surface #FFFFFFteal-mid #0B8F8D | 3.94:1 | 3.0:1 | AA pass |
| White glyph on icon chip (azure) | Aa | surface #FFFFFFazure #1F5FBF | 6.09:1 | 3.0:1 | AA pass |
| Strong border (inputs, controls) | Aa | line-strong #8795A8surface #FFFFFF | 3.05:1 | 3.0:1 | AA pass |
| Focus ring (accent-ink) on white | Aa | accent-ink #066E6Bsurface #FFFFFF | 6.09:1 | 3.0:1 | AA pass |
| Capability map: white on live node (accent-ink) | Aa | surface #FFFFFFaccent-ink #066E6B | 6.09:1 | 4.5:1 | AA pass |
| Capability map: ink on coming-soon node | Aa | ink #1A2332warning-soft #FFF3DC | 14.36:1 | 4.5:1 | AA pass |
| Capability map: coming-soon dashed outline | Aa | warning #8A5200surface #FFFFFF | 6.39:1 | 3.0:1 | AA pass |
| Selected filter chip: white on accent-ink | Aa | surface #FFFFFFaccent-ink #066E6B | 6.09:1 | 4.5:1 | AA pass |
| Mega-menu: accent link on sky wash (feature card) | Aa | accent-ink #066E6Bwash-sky #E4EEFA | 5.19:1 | 4.5:1 | AA pass |
| Mega-menu: Coming soon chip (ink-3 on surface-2) | Aa | ink-3 #5B6B80surface-2 #F6F9FB | 5.15:1 | 4.5:1 | AA pass |
| Mega-menu: Live status dot (success on white) | Aa | success #0B6E43surface #FFFFFF | 6.31:1 | 3.0:1 | AA pass |
| Terminal: command text | Aa | t-text #E6EDF3t-bg #0B0F14 | 16.27:1 | 4.5:1 | AA pass |
| Terminal: output (phosphor green) | Aa | t-green #39FF9Bt-bg #0B0F14 | 14.60:1 | 4.5:1 | AA pass |
| Terminal: dim output | Aa | t-dim #5FB48Dt-bg #0B0F14 | 7.69:1 | 4.5:1 | AA pass |
| Terminal: warning (amber) | Aa | t-amber #FFB547t-bg #0B0F14 | 10.94:1 | 4.5:1 | AA pass |
| Terminal: keys (cyan) | Aa | t-cyan #5CE1E6t-bg #0B0F14 | 12.23:1 | 4.5:1 | AA pass |
| Terminal: window label on bar | Aa | t-dim #5FB48Dt-bar #141B24 | 6.93:1 | 4.5:1 | AA pass |
Text needs 4.5:1 (3:1 for large text). Control borders and focus rings need 3:1. Ratios are computed by build/contrast.py at build time.
Figtree (self-hosted, OFL) for headings and text, the system monospace for code. Weights 300, 400 and 600. Tabular numerals for prices.
Figtree 400: body text, long reading and H2.
Figtree 600: labels, buttons, H3, emphasis.
Figtree 300: large display headings.
System monospace: ui-monospace, SFMono-Regular, Menlo, Consolas.
Reading text sits between 62 and 72 characters per line. This paragraph is capped at 68ch, the width token --measure. Shorter lines tire the eye less and help you keep your place.
An 8px scale (with a 4px half step). A 12-column container, 1200px at most, 24px gutters (16px on phones).
--sp-half 4px--sp-1 8px--sp-2 16px--sp-3 24px--sp-4 32px--sp-6 48px--sp-8 64px--sp-12 96px| Token | Width | What changes |
|---|---|---|
| sm | 480px | Single column, 16px gutters |
| md | 768px | Two columns, explorer nav moves to a bottom bar below 720px |
| lg | 1100px | Header switches between full-screen drawer and slim bar |
| xl | 1280px | Search label shortens to icon and shortcut; container maxes at 1200px |
Three radii, three elevations, two borders.
Three durations, one curve, purposeful only.
One easing curve: cubic-bezier(0.2, 0.7, 0.2, 1). Motion is only used to show cause and effect (a hover, a panel change, a packet travelling). With prefers-reduced-motion every transition collapses to nothing and every animation has a static equivalent.
Reading is Praxis's job. Marketing pages show, then say.
Enforced by python3 build/lint_text.py, which fails the build on the home page, company pages and index pages.
Each one is a function in build/components.py, styled in css/components.css, and works without JavaScript.
Primary for the one main action, ghost for the alternative, quiet for tertiary, dark on light bands. 44px minimum height.
import components as C
C.button("Start free trial", "/signup") # <a class="btn btn-primary">
C.button("Book a call", "/contact.html", "ghost")
C.button("Run", None, "primary", attrs={"data-act": "run"}) # <button>
variants: primary | ghost | quiet | dark size: "" | "sm"One line, never wraps, truncates with an ellipsis, light surface with a small status dot. Replaces the heavy black pill.
C.chip("Lesson \u00b7 3 min", "accent") # tone: neutral | accent | success | warn | danger
C.chip("Topic", "neutral", href="/praxis/build/notes/?tags=passkeys")A tag, a title, one short paragraph (40 words at most) and a single call to action. The whole card is the link.
SAML 2.0 and OpenID Connect with PKCE.
OpenNo link, no hover state.
C.card(title, body, href=None, tag=C.chip(...), meta=None, cta="Open")A big word or number with a one-line label. Only true statements; never invented numbers.
C.stat("Mumbai", "Data hosted in asia-south1", note=None)
# wrap several in <div class="c-stats">Built from headings by JavaScript, so without it the panels read as stacked sections. Arrow keys, Home and End move between tabs.
Face ID, Touch ID, Windows Hello, security keys, phones.
Time-based one-time codes.
SMS codes, once the provider integration is done.
C.tabs("uid", [("Title", "<p>html</p>"), ...], label="Accessible name")Native details elements. Use for secondary reading; pass a group name for one-open-at-a-time.
A key pair kept on your device. Nothing to type or steal.
A standard for creating, updating and removing accounts between systems.
C.accordion([(summary, html), ...], group="name", open_first=False)
C.more("Read more", "<p>html</p>") # single inline expanderFour kinds. Colour never carries the meaning alone: each has an icon and a title.
Good to know
Simulated output is always labelled.
Done
The export is ready.
Not yet
No certificate exists today.
Careful
This signs the person out everywhere.
C.callout("info" | "ok" | "warn" | "danger", "Title", "<p>html</p>")Ctrl+K or Cmd+K anywhere, or the Search button in the header. Fuzzy search over /search-index.json. Arrow keys, Enter, Esc.
Any element with data-palette-open opens it. Index: build/build_search.py writes /search-index.json.
Extra items: drop a JSON list in content/search/*.json
[{"t":"lesson","title":"...","url":"/praxis/learn/x/","d":"one line","k":"keywords"}]Types and streams lines from JSON. Play, Pause, Step, Restart, Skip to end, speed and Copy. Reduced motion renders everything at once. Always labelled.
$ scim-client patch --user 8f2a --active false PATCH /scim/v2/Users/8f2a {"active":false,"meta":{"resourceType":"User"}} ! 2 sessions still open ✓ user inactive
C.term("uid", [("cmd", "..."), ("out", "..."), ("json", "{...}"), ("warn", "..."), ("ok", "...")],
title="event trace", simulated=True) # simulated=False only for a real command a person could run
HTML it emits: <figure data-term><script type="application/json" class="term-data">{"lines":[{"t":"cmd","x":"..."}]}</script></figure>
Load: /css/terminal.css and /js/terminal.js. JS: AMTerm.get(el).load(lines, {play:true})Inline SVG nodes and edges with travelling packets. Click or press Enter on a node for its one-line explanation and log lines. Arrow keys move between nodes. Becomes vertical on phones.
Selected
HR is the source of truth.
Select any step to see what it does and what it writes to the log.
$ hr emit leaver ✓ sent
spec = {"label": "...", "nodes": [{"id","label","sub","icon","col","row"?,"explain","lines"}], "edges": [{"from","to"}],
"scenarios": [{"id","label"}]?} # explain/lines may be {scenarioId: value}
C.flow("uid", spec) # includes its linked terminal
Load: /css/flow.css, /css/terminal.css, /js/terminal.js, then /js/flow.jsOne step at a time with a progress bar. Without JavaScript all steps are shown in order.
The app sends you to AuthMantra.
You use a passkey.
A signed token goes back.
C.stepper("uid", [("Title", "<p>html</p>"), ...])One question, instant feedback with a reason. Wrong answers lock themselves; the right one reveals.
Which one cannot be phished?
C.quiz("uid", "Question?", [("Option", is_correct, "why")])Used on the home page and Praxis. A chip with kind and duration, a title and one line.
C.lesson_card(href, title, blurb, minutes=3, kind="Lesson", art="key")
art: any icon in components._ICONSHome is added for you; the last item is the current page.
C.crumbs([("/praxis/", "Praxis"), ("", "Current page")])role=progressbar with a label. Use for lessons, review counts and reading progress.
C.progress(value, "Accessible label", maximum=100)Marks long-form blocks with data-depth-only="full". The choice is remembered in this browser.
Always visible: the short version.
Only in the full version: the longer explanation, with the edge cases and the history.
C.depth_toggle()
<p data-depth-only="full">...</p> # hidden while html[data-depth="short"]A small group of exclusive options (aria-pressed). Used for scenario and filter switches.
C.segmented("Label", [("value", "Text"), ...]) # first option is pressed