// the praxys design system
Editorial + technical. Navy & paper. One rust accent.
This page is a living gallery, not a mockup — every swatch, scale, and component below renders
the real design-system tokens (src/styles/praxys.css) through the real Tailwind utilities. If a token changes, this page changes with it.
// brand
The Δ mark, and its wordmark lockup.
The delta is the only pictorial glyph the system uses — never redrawn, never paired with an emoji.
praxys-mark.svg
praxys-logo.svg
praxys-mark-mono.svg
// color
Surfaces, one accent, and a semantic set.
Every swatch is framed with a hairline border so near-white light-mode surfaces stay visible against the page.
surfaces
bg
--bg-base
sunken
--bg-sunken
surface1
--surface-1
surface2
--surface-2
surface3
--surface-3
surface4
--surface-4
brand
accent
--accent
action
--action
semantics
success
--success
info
--info
warning
--warning
danger
--danger
violet (agent)
--violet-500
// accent usage
Where the one rust accent belongs.
Rust is rationed — it carries interaction and brand, never decoration or fills. Per design-system.md: “links, focus rings, active nav, switches, the Δ mark, at most one hero/active element per view. It is not the CTA fill.”
Links & cross-links
Active nav · focus · Δ mark
One emphasised element
Eyebrows muted · CTA is ink
// eyebrows stay muted
never px-kicker text-accent · never bg-accent on a primary button
// type
Serif display, sans body, mono for the machine.
display (serif) — 7xl → 3xl
7xl — Run the business
6xl — Run the business
5xl — Run the business
4xl — Run the business
3xl — Run the business
body (sans)
lg — The quick brown fox jumps over the lazy dog.
md — The quick brown fox jumps over the lazy dog.
base — The quick brown fox jumps over the lazy dog.
sm — The quick brown fox jumps over the lazy dog.
mono
sm — Δ same query · two tenants
xs — Δ same query · two tenants
2xs — Δ same query · two tenants
the px-kicker treatment
// 01 mono eyebrow, uppercase, tracked wide
// spacing & radii
The base spacing grid, and the radius scale.
spacing (representative steps)
space-2
space-4
space-6
space-8
space-10
space-13
radii
xs
sm
md
lg
xl
2xl
full
// components
Real examples, reused inline across the site.
buttons
code panel (dark island, theme-invariant)
Δ design system · living gallery [tokens] src/styles/praxys.css [wired] tailwind.config.ts → var(--…) ✓ every swatch below is the real token ✓ no hardcoded hex, no CDN, no drift
mono status line
✓ boot-smoke passed · i 10/10 gates green · ! roadmap, not shipped
links (hover for the animated underline)