Harbourline
Motion

Following your system setting.

Operations you can account for.

Harbourline is a fictional operations-intelligence product invented for this prototype. Every name, number, logo and interface fragment on this page is made up.

Systems parity prototype

The sharp crop and the ambient field behind it are the same generated source, so the section takes its temperature from its own content.

Flattened to one tonal weight

Fifteen invented marks with deliberately different natural weights. All are crushed to a single value, and attention — hover, keyboard focus, or touch — is the only thing that restores one.

Corrected from the reference: the flatten holds at every width, and restore is bound to :hover, :focus-visible and :active, so a touch press works where hover cannot.

One capped grid, three span maps

Twelve columns at every width. The column count never collapses; only the spans change. The container caps and stops growing.

12 / 6 / 4
12 / 6 / 4
12 / 6 / 4
12 / 12 / 8
12 / 12 / 4
Container
capped, centred, stops growing above the cap
Columns
12 at 390, 768 and 1440
Gutter
steps with the breakpoint, from the primitive source
Section rhythm
one responsive spacing token, not per-section values

One weight, five levels

Nothing in this hierarchy is bolder than anything else. Separation is carried by size, tint and space. The sizes below are semantic roles, and the token values restep at each breakpoint — the classes never change.

Display

Headline extra large

Headline large

Headline medium

Headline small

Body large, for lede paragraphs that need to carry a little more presence than running text.

Body medium is the default reading size, set at a measure short enough to stay inside a comfortable line length.

Body small, used for captions and secondary annotation.

LABEL / THE ONLY STEP ABOVE REGULAR WEIGHT

Corrected from the reference: sizes are set in rem, not px, so the whole ramp honours a reader's browser font-size preference. The muted tint step is darkened until it clears 4.5:1, and a machine check enforces that.

Four section themes, one rule each

The identical card markup appears four times below. Nothing about it changes. Each band sets a handful of semantic custom properties and the card inherits them.

theme-base

Reconciliation queue

Fourteen exceptions are waiting on a decision. The oldest has been open for three days.

Open queue

theme-warm

Reconciliation queue

Fourteen exceptions are waiting on a decision. The oldest has been open for three days.

Open queue

theme-deep

Reconciliation queue

Fourteen exceptions are waiting on a decision. The oldest has been open for three days.

Open queue

theme-accent

Reconciliation queue

Fourteen exceptions are waiting on a decision. The oldest has been open for three days.

Open queue

Corrected from the reference: themes resolve by custom-property inheritance. A theme is one rule that sets variables; the nested case is correct because the innermost scope wins by inheritance rather than by an exclusion chain. Adding a fifth theme costs one rule, not a rule per themed utility.

Interface as the proof object

Invented console geometry, invented figures. The point is the framing: a specimen cropped at the container edge reads as a window into a working system rather than as a rendered marketing asset.

12,480 +18%

Throughput

Invented figures. Every number on this page is attached to a unit and an owner, because that is the discipline being proved.

Exceptions

Original geometry. No screenshot, no traced interface, nothing borrowed from a real product.

Routing trace

The specimen is named to assistive technology. A graphic carrying meaning gets a real accessible name, not a bare role.

Cropped at the edge, reframed on mobile

On a wide viewport this specimen is deliberately oversized and clipped by the container, so it runs off the right edge. That crop is the whole effect, and it is also the thing that breaks at 390 if nobody art-directs it.

Below 768 the same asset is reframed rather than re-cropped: the window changes proportion and the art scales to fit, so the panel stays legible instead of becoming a clipped sliver.

Live 3,142

A pinned sequence that has somewhere to fall back to

On a wide viewport with motion allowed, each figure pins while its copy scrolls past. Switch Motion to Reduced in the header and the whole sequence becomes an ordinary stacked list — same markup, same reading order, nothing hidden.

  1. Step one

    Intake

    Work arrives from four channels and is normalised into one record shape before anything downstream sees it.

  2. Step two

    Routing

    Each record is scored and routed. Anything the model will not commit to is held for a person rather than guessed at.

  3. Step three

    Account

    Every decision keeps its trace, so an outcome can be explained months later without reconstructing it from logs.

Implementation notes

What this prototype claims, what it deliberately does differently from the reference site, and what it does not prove.

Parity — reproduced because it transfers

  • Responsive token values, not responsive utilities. Each type role is one class. The primitive values restep at two breakpoints, so the whole ramp moves without any call-site breakpoint prefix.
  • A full hierarchy at one weight. Nine roles, regular weight throughout the display hierarchy. Only the label step steps up, and only because it is set at the smallest size.
  • Warm neutrals in one direction. Every neutral runs red above green above blue. The near-black is warm, not #000.
  • One scarce accent for every interactive state. Links, focus rings, the primary control, and the active trace node. Never decoration.
  • Chroma quarantined into bounded fields with graded white on top rather than a second hue.
  • Uniform tonal flattening on the logo wall, restored by attention. The flatten is brightness(0) opacity(...), not grayscale(), because grayscale preserves each mark's own luminance and the wall goes lumpy.
  • Interface as the proof object, cropped at the container edge.
  • Ambient field derived from the content it sits behind. The blur plate and the sharp crop are the same generated source.
  • Layered, tinted elevation — five shadow layers at growing offsets in a hue drawn from the surface, not neutral black.
  • Reduced motion as a layout state, not just a transition switch.
  • Pure-CSS peek sizing from an active and an inactive basis.

Intentionally corrected

  • Themes resolve by inheritance, not by selector combinatorics. The reference compiles one rule per themed utility per theme, each carrying an exclusion chain to stop an outer theme leaking inward. Measured there: 205 rules holding 262 KB of selector text, 60% of the whole stylesheet, at a mean of 1,279 characters per selector. Here a theme is one rule that sets variables. Nesting is correct because the innermost scope wins by inheritance.
  • Type is set in rem. The reference sets its whole ramp in px, which ignores a reader's browser font-size preference.
  • The muted tint clears 4.5:1. The reference's smallest text tint measures about 3.6:1 and is used for real text. Here the bottom step is darkened until it passes, and tools/primitives.py check fails the build if any declared pair drops below its stated minimum.
  • The logo flatten holds at every width. The reference applies it only from 1024 up, so the wall is a disciplined monochrome texture on desktop and a full-colour patchwork on mobile. Restore here is bound to :hover, :focus-visible and :active so touch has a path.
  • The bleeding specimen is art-directed for narrow viewports. The reference's desktop crop becomes an unreadable sliver at 390 with words cut mid-character. Here the window changes proportion and the art scales to fit.
  • Every meaningful graphic has an accessible name. The reference renders its animated figures as <canvas role="img"> with no aria-label, while its CMS holds good alt text that never reaches the DOM. A bare role="img" is worse than no role.
  • The default easing is a real ease-out. The reference defaults to a symmetric ease-in-out and uses a proper ease-out exactly once.
  • The carousel snaps and contains its overscroll.
  • Motion state is switchable in the page. The whole reference study was blocked on this: the capture browser had reduce-motion on, so the default motion composition was never seen. A prototype that can only be read in one motion state repeats that failure.

Not proven here

  • Content dependency. This aesthetic leans on a real product, real customers and commissioned documentary photography. Everything here is invented, so the prototype proves the system and cannot prove that the system survives contact with real content.
  • Typeface. The reference runs a licensed grotesque. This uses the system sans stack. A one-weight hierarchy is more sensitive to the face than to anything else in the system, so the register here is approximate.
  • Documentary photography and the baked blur plate. The plate here is a generated gradient blurred in CSS. The idea transfers; the material does not.
  • Real-device behaviour. Verified in a desktop browser at three emulated viewports only. svh, sticky regions and touch restore need a physical device.
  • Long-form measure, dense data tables, forms, and localisation. None are exercised. The reference's Japanese and Korean trees raise a question about a Latin-only one-weight hierarchy that this prototype does not answer.
  • Field performance. No budget, no measurement, no third parties.

Primitive contract

tokens.json is the authoritative source. primitives.css is a generated projection carrying a digest over the selected primitive pairs, and the check fails if it drifts. Authored CSS may never define a --p- variable, and every governed colour, spacing, typography, radius and duration declaration must bind through one. Geometry exceptions are declared inline at their use site and reported by the checker.