macOS chrome: traffic lights, frosted title bar, soft depth.
Four lift levels: flat, card, window, float.
Brand
One motif, used everywhere.
The Operant symbol is the “next step” marker: the step you are on, and the step the work moves to. It travels in the product illustrations, it marks the active page in the navigation, and it is the favicon. This page is the working reference — including the sizes where it nearly fails.
Wordmark
Wordmark, symbol, and the smallest size each survives.
On canvas
Operant
On dark
Operant
Header size · 1.15rem
Operant
Small · 0.95rem minimum
Operant
Symbol alone
The full stop after the wordmark is turquoise — the same colour the marker uses while it is moving. It is the only ornament in the logotype and it may not be recoloured.
Favicon
Tested at 16 and 32 pixels, not at 512.
These are the real rasterised files, drawn from the same geometry. The 16px version drops the dot: at that size the gap between the dot and the chevron lands below one pixel and turns into mud.
32 × 32 · actual size and 8×
Plate, dot, and chevron. The complete motif.
16 × 16 · actual size and 8×
Chevron centred, dot removed, stroke thickened to hold its shape.
Light browser tab
Operant — keep every step in viewfavicon.svg · #2d5bd7 plate
Dark browser tab
Operant — keep every step in viewfavicon-dark.svg · #5b86f5 plate
Shipped set: favicon.ico (16 + 32),favicon.svg, favicon-dark.svg,apple-touch-icon.svg at 180px, andog-image.svg. Runnode scripts/generate-favicons.mjs after any change to the geometry. Still outstanding before launch: a PNG export of the social preview, because several platforms will not render an SVG.
The motif
Three states, and only three.
Colour carries the meaning, and the glyph changes with it so the states are distinguishable without relying on colour alone.
Travelling
Turquoise, chevron. Work is moving on its own.
Waiting for a person
Lilac, paused bars. Nothing proceeds without a decision.
Approved
Green, check. A person has authorised it.
Components
Reusable parts and their states.
Buttons
Hover lifts 1px, active returns to 0, focus draws a 2px blue ring.
Status markers
Suggested by OperantApproved by a personNeeds reviewNeeds clarificationReady for reviewWaitingDone
A suggestion is dashed with a hollow dot; an approval is solid with a filled dot. Shape, not just colour.
Readiness badges
ReadyAvailableIn pilotIn pilotPlannedComing nextDesign mockupPreview
Every described capability carries one of these on the site.
Interface window
Tokens
Colour, type, and motion.
Colour
- Canvas--canvas#fbfaf7Page field
- Canvas sunk--canvas-sunk#f3f1ecAlternate band
- Canvas deep--canvas-deep#11141aROI panel, footer
- Ink--ink#14161aBody text
- Ink muted--ink-muted#5b6068Secondary text
- Blue--blue#2d5bd7Primary action, symbol
- Turquoise--turquoise#0f9aa6Marker travelling, progress
- Lilac--lilac#7a64c6Waiting for a person
- Coral--coral#dd6449Needs clarification
- Green--green#2b8c64Approved by a person
Type · Geist, one family
Hero · clamp to 4.5rem
Page title · text-3xl
Section · text-2xl
Sub-section · text-xl
Body · text-base, 1.6 line height
Secondary · text-sm
Reference · mono, text-xs
Motion
- Enter--dur-enter520msA card or window arriving, once
- Travel--dur-travel820msMarker moving between cards
- Mid--dur-mid320msState change on a card
- Fast--dur-fast180msHover, focus, press
- Marker ease--ease-markercubic-bezier(.45,.05,.25,1)Purposeful travel, firm stop
Nothing loops. Every animation runs once per page load or once per scroll entry, ends on a readable frame, and is replaced by that frame entirely underprefers-reduced-motion.