The site's design system
Check here before adding UI. Every value below is read from src/styles/tokens.css when the site builds, and every sample is the site's own markup and classes, so this page can't drift from the pages it describes. Calm, precise, editorial-technical: warm paper in light, deep graphite in dark, one accent and one signal.
Colours, light and dark
Backgrounds
Paper in light, graphite in dark. Raised for frames and cards, sunken for stages.
--bg#f7f6f3#111214
--bg-raised#ffffff#17181b
--bg-subtle#f1f0ec#1c1d21
--bg-sunken#ebe9e4#0c0d0f
--bg-inverse#1b1c1f#ececee
Text
Three steps: primary, secondary, tertiary.
--text#1b1c1f#ececee
--text-2#55565c#a5a6ad
--text-3#686970#8a8b93
--text-inverse#f7f6f3#111214
Hairlines
Solid 1 px lines, three strengths.
--line#e3e1db#25262b
--line-2#d3d1ca#303137
--line-3#bebcb4#43444b
Accent
One blue teal, for interaction and focus only, on the site and in the demo windows.
--accent#0a7697#5cc4e0
--accent-strong#075a74#8fd8ec
--accent-soft#e0f0f5rgba(92, 196, 224, 0.14)
--accent-line#a3d0dfrgba(92, 196, 224, 0.45)
--accent-ink#ffffff#06222c
Signal
Orange, for drop targets and indicators only.
--signal#e0570c#ff8a4c
--signal-text#c2410c#ff8a4c
--signal-softrgba(224, 87, 12, 0.11)rgba(255, 138, 76, 0.15)
--signal-ink#1d0e05#1d0e05
Results and series
Good and bad results; chart series (the proposal takes the accent).
--good#22744a#67c48f
--bad#b3261e#ff8a80
--series-a#8f5a14#e0a356
--series-a2#cf9d55#f0c88e
--series-b#6159ad#9a93ea
--series-b2#9b6aa8#d39be0
--series-cvar(--accent)same
--series-c2#4ea7c3#9edff0
--series-d#566577#a3afbf
--series-e#8795a6#6f7d8f
--series-ink#4b4d53#c2c4ca
Grips
The drag handle's dots, at rest and hot.
--grip#858a93#7d838e
--grip-hot#4a4b50#c9cbd1
Window chrome
Demo windows: bars a step lighter than the well, a lifted paper with readable lines, coloured lights.
--win-frame#eef0f3#24262b
--win-bar#f9fafb#2b2e34
--win-well#e4e7eb#1d1f23
--win-edge#dcdad5#34343a
--win-text#1d1d1f#ececee
--win-muted#5f5f64#9a9aa2
--win-r10pxsame
--win-paper#ffffff#3a3d44
--win-paper-line#d3d3d4#575960
--win-light-1#16b8d8same
--win-light-2#f2c94csame
--win-light-3#e8467csame
Diagrams
The desk and drag stages' fills.
--d-floor#e9e7e1#141518
--d-ink#2a2c31#d8dade
--d-ink-text#f4f3ef#15161a
--d-panel#f3f4f3#202227
--d-panel-head#e3e6e5#292c32
--d-panel-line#cfd3d2#383b42
--d-rail#dfe2e1#1b1d21
--d-doc#ffffff#33363c
--d-doc-line#d9d6ce#45484f
--d-doc-rule#e9e6df#4d5057
--d-float#ffffff#262a30
--d-float-head#d6ebf2#1b3a46
--d-float-line#9ccbdb#2e6276
Cyan is motion, violet is placement
The pair has two colours with a meaning. A page of a part sets data-part on its main; --part (and --part-strong for text on a tint) then carries that part's colour to everything that takes it: the eyebrow and its rule, the nav underline, the pressed case, the figure caption's tick, the callout and the pager hover. This section is set to placement, so it shows violet.
--motion · --place
Cyan (--accent) for @n-uf/motion, violet (--series-b) for @n-uf/placement. Violet means placement and nothing else: other engines in a chart take the slates --series-d and --series-e.
Figure caption
A mono caption, with a --part tick, above each figure's first note (.fig-plan): SCOPE · MOTION CARRIES THE PANEL on a Move page, PLAN · PLACEMENT RETURNS RECTS on a Place page. CSS content only.
Leader-line notes
Small mono chips with a dashed elbow to what the package is doing now (styles/notes.css). Decoration: aria-hidden, driven by classes the islands already set, anchored with CSS where a part moves, and a plain key under the figure on a phone. Placement's notes never say it draws or moves anything.
Text contrast
Every text token meets WCAG AA (4.5:1) on --bg: --text-3 is 5.06 in light and 5.53 in dark; --signal-text is the orange for text, --signal-ink the ink on an orange fill.
The type scale
The system UI stack (--font-sans) and its monospace (--font-mono); headings at weight 650 with tight tracking, tabular figures for values.
Settle, never overshoot
The rules
Every glide launches from where the window is drawn.
Every glide launches from where the window is drawn.
Every glide launches from where the window is drawn.
Every glide launches from where the window is drawn.
Every glide launches from where the window is drawn.
The scales
Spacing
--s14px--s28px--s312px--s416px--s524px--s632px--s748px--s872pxRadii
--r8px--r-sm6px--r-xs4pxShadows
--shadow-1--shadow-2--shadow-popButtons, switches, segments
npm i @n-uf/motionThe figure's anatomy
Every interactive page: eyebrow, h1 and lead in the page head, then one figure, a window (components/Chrome.astro). The window cannot move, so it has no grip: its title bar starts with the coloured lights and ends with the window's fixed controls, the freeze lock where a page has one, X-ray (each package's layer over the window: placement's hit zones, priorities and slots, motion's settle target, trail and aim; off by default) and ↺ Reset, which puts every group, the demo and the lock back to their defaults (keeping the visitor's preview mode, speed, tempo and theme) and is disabled while there is nothing to reset. Every control lives in a toolbar group led by a compact dot handle, in the title bar, a top or bottom bar, an edge, or floating, and a visitor can drag, collapse and rearrange them (the arrangement is remembered per figure; right-click a handle for Reset position). On a side edge each group shows its compact form (icons, mono numbers, no captions, text never rotated) or collapses to its handle and », which opens the group's full form in a popover. Between the bars: a numbered case rail exactly as tall as the stage (it scrolls; under 900 px it becomes a strip) and the stage on the flat well. Long status lines go under the window. Then an h3 per rule under the section's h2, and the pager. This sample is live.
A rule's question
Its answer, in plain words, beside it. On a page each rule is its own h3, under the section's h2.
The window chrome
The window every demo draws: coloured lights (--win-light-1…3), bars on --win-bar over the --win-well, a lifted paper (--win-paper) with lines in --win-paper-line. The active tool is an accent ring, hover a soft accent tint. This is the toolbar page's own markup, at rest.
Scope of work
The drag handle's states
3 px dots with 2 px gaps, one line of 3, only on what can be dragged (a toolbar group); a window that cannot move has none. Muted at rest, darker on hover or focus, accent while dragging. Frozen, grips are hidden; holding Alt brings them back. These are specimens, not handles.