FluidIQ ops · 14 August 2026

Three looks, one menu

The menu structure is shipped and frozen — Home, Work, Reports, Admin, exactly as config/navigation.php defines it. All three pages carry the same header markup, class for class, from the real layout. The only thing that varies is look and feel, which is the one decision waiting on you. They also all sit on one rebuilt type system, so the jumpy, crooked letterforms are gone in every one.

The three

Each card is a live, scaled render of the actual page. Click to open it full size — then hover or tab into the header, because the menus really open, with no JavaScript in the file.

A · Console Compact and quiet. Dense rows, tight radii, restrained ink, dark primary button. The most rows on a screen and the least decoration. LinearVercelDensest B · Midnight The same density, rendered dark — straight from the [data-theme="dark"] block already in tokens.css. Adds a lit top edge on cards and a halo on status dots, which is what stops dark cards reading as grey rectangles. Linear darkLow-glareNo new colour C · Studio Roomier. Bigger display type, more air per row, softer corners, orange links so the eye finds the next action. Reads as a document rather than an instrument — the honest trade is that fewer rows fit on a screen. StripeShopify adminSecond typeface

What is a setting and what is a proposal. Density, radius, elevation and type scale are settings — pick any combination. Two things are genuine proposals and should be judged as such: C's second typeface (Instrument Sans for display, Inter for text), and B's dark surface as a default rather than an option. Everything else draws its colour from tokens.css and nowhere else — those values already passed contrast and colour-blindness validation, and no mockup here introduces a hex code.

What each page proves, not just shows

Scroll to the bottom of any option. Five behaviours are reproduced live, because a still image can hide every one of them.

01 The dropdowns need no JavaScript :hover opens them for a pointer, :focus-within for the keyboard. Not a preference — dropdowns were rejected once on the belief they needed a script, so a mockup with an onclick would be showing something we won't ship. There is no script tag in any of these files.
02 On a phone they stop being dropdowns They unfold as labelled sections inside the ☰ drawer, because :hover on a touchscreen is whatever the browser decides a tap meant. Both states are shown at a real 390px, and the page has zero horizontal overflow there.
03 The parent is marked, not just the child On /ops/runs, is-current sits on the Admin button and on Runs. Without it the header goes blank on every page except Home.
04 The avatar never breaks Initials on a coloured disc unless a photo is set — never a broken image, never a silhouette. Both states shown.
05 "Getting set up" disappears once onboarding is finished The Admin menu is shown twice, before and after. Hidden, not revoked — any link already sent still works.

The crooked letters — cause and fix

Left is the live app's type, reproduced from its own declarations. Right is what all three mockups use. This part lands whichever letter you pick.

Today — ops.css

Spend, month to date

412.68

Needs a person today

Merchant Center sweep · biweekly · 3 disapprovals outstanding

font-weight: 650 and 550 are not real weights in this stack, so the browser fakes them by smearing every glyph sideways. 11.5px and 12.5px put letter edges on half-pixels. And ops.css sets its own stack on body, overriding --font from tokens.css — so half the app renders in a different face than the other half.

The mockups

Spend, month to date

412.68

Needs a person today

Merchant Center sweep · biweekly · 3 disapprovals outstanding

A real variable font (Inter, 100–900 continuous), so 450 and 550 are drawn rather than faked. font-synthesis: none makes faking impossible going forward. Integer sizes on a fixed scale. One stack, defined once. tabular-nums so digits line up column to column. Letter-spacing is a function of size — tight on headings, open on small caps.

Two more things fixed in all three

Independent of the look you choose.

06 Cards squeezed to slivers grid-4 divides the width four ways no matter how narrow, then collapses straight to one column at 900px. Replaced with auto-fit, minmax(216px, 1fr) — cards reflow 4 → 3 → 2 → 1 and never go below a readable width.
07 Rows on inconsistent heights Cells mixed rem and px padding against varying font sizes, so no two rows shared a rhythm — and any cell that wrapped to two lines broke every row around it. One row height, one baseline, nothing wraps.

Picking

Say a letter. Mixing is fine — A's density with C's radius, B's surface with A's buttons. The chosen CSS ports across as one step: the class names are already the shipped ones (app-menu, app-menu-pop, app-menu-heading, app-account, is-current), so nothing has to be re-typed. Re-run python3 docs/_reference/mockups/build.py after any menu change and all three follow config/navigation.php automatically.