Platform · Phase 0 mockups

Exploration — drafted with the UI/UX design skill

Separate from everything above, and deliberately so. The sections above are the record of what was weighed and what was picked; what follows are proposals, each on a colour and a set of shapes of its own, none of them chosen and none of them built. They exist to be argued with. Both are self-contained (one CSS file each, no build step) and both @font-face the house faces out of backend/assets/fonts/, so serve the folder rather than opening them over file://.

For the recruiter, and the only direction that inverts the canvas: the petrol the portal wears as an accent becomes the room, and the screen is a bento of tiles instead of a document with a sidebar. The argument is not taste — on white each of the five signals a recruiter reads all day costs a coloured chip, and eight chips per row cancel out; on petrol the surface is silent and light is the signal, so status is the only thing allowed to be coloured. Open question: it spends the portal's colour on internal screens, so if it wins, the portal needs a second identifying move. assets/petrol.css · A/B/W/P toggle on each screen.

For the client, and the deliberate opposite of Petrol: warm ivory paper, forest-green ink, organic shapes, one editorial column. The reasoning is that a client is not an operator — they open this a few times a week to ask for a search and to say yes or no — so the room should read as somewhere prepared for a guest, not as a console handed over. Gold is spent on one thing only: what is waiting on them. Colour is new on both counts — terracotta is the internal app, petrol is the portal today, and this is neither. Motion is pushed hardest here (word-by-word headline, cursor spotlight, one tilt, one magnetic button, drawing path, counting numbers), all of it off under prefers-reduced-motion. It keeps the two portal rules that were already decided: no match percentage crosses to the client, and candidate names are shown in full. assets/bloom.css + assets/bloom.js.

Third proposal for the PP, and the first built around a voice rather than a surface. The tone asked for was light but not white and not dark: the canvas is warm stone at 91% lightness and the cards sit above it at 97%. That inversion is the point — on a white page a card must draw a border to exist, and borders everywhere read as a form to fill in; on stone a card is simply lighter than the room, the way paper on a desk is. Home, but technical: warmth from the stone, the rounded shapes and the fact that the page speaks in sentences; precision from a monospaced label on every fact, a faint 34px grid under everything, and status that is always a word plus a mark. The page is written as Marta's side of a conversation — she is the person who follows your searches — and the client's own moves are drawn as replies that land in the thread when pressed. Open question: it is warmer than anything else in the set, and it only stays honest if a real person is genuinely there. Effects are pushed hardest here and stay inside the metaphor: typing indicators sized to the length of the message, bubbles that land on a back-out curve, headlines wiped open rather than faded, cross-page @view-transition, a reading thread, a bar that contracts, a light that follows the pointer. All of it off under prefers-reduced-motion. assets/loom.css + assets/loom.js.

Halfway between Loom and Petrol, in both senses. Colour: it keeps Loom's structure — a light room with paper laid on it — and swaps the temperature to Petrol's family: cold slate at 90% lightness, petrol ink, and Petrol's aqua kept as the live signal, so the portal reads as the same product as the dark internal instrument seen in daylight. One warm note survives (amber) and it is spent only on what waits on the client. Density: Loom was airy and its candidate page carried a conversation and little else; this one is full — skills measured against the brief, the whole career with stack and outcome, education, languages, certifications, the references we actually called, interview notes, documents, the stage of the search and the interview slots on offer. The assistant stays, and changes shape: at this density a tone of voice would fight the data, so Marta becomes a panel that travels with you, with a named scope line under the header — the shape this needs if it is later wired to a real model. Its answers here are scripted strings on the buttons; a demo that pretends otherwise sells a feature before it exists. Still no match percentage: the bars measure years of use of a tool, checkable row by row, not a person's worth. assets/harbor.css + assets/harbor.js.

The ultratech one. Carbon room, one electric lime, mono on every label and every number, chamfered corners, hairlines instead of shadows — and no serif anywhere, the only direction in the set that drops Fraunces. It is dark like Petrol but the opposite intent: Petrol is a quiet instrument that whispers there is machinery, Volt is a console that shows you the machinery. The style database was useful mostly as a warning: its HUD and cyberpunk entries ask for 1px lines, neon on pure black and heavy glow, and flag themselves as poor for accessibility — so the room is carbon at 18.5% rather than #000 (on pure black every glow blooms), lime on carbon lands at ~13:1 so the accent genuinely carries text, glow is a halo behind a shape and never a shadow under body copy, and the scanline sheet sits at an opacity you notice only if you look. Effects: text that resolves out of noise on a 600ms budget with the real string in aria-label from the first frame, counters that settle, a beam that crosses a panel once as it arrives, skills as countable cells — eight cells are eight years, no trusting the length of a bar. The mascot is carried over unchanged: a console this cold needs exactly one warm-blooded thing in it. assets/volt.css + assets/volt.js.

Assembled to the client's brief out of three directions that already existed: Petrol for the sign-in (reproduced from its token values, not by eye), Bloom's light for everything after it, and Harbor's layout — twelve columns, a full profile, the assistant in the top bar. The one real problem was temperature. Bloom's paper is warm ivory (hue 92) and Petrol's accent is cold teal (hue 199-220); left untouched, the two read as two brands stapled together at the login. So the paper keeps Bloom's lightness (0.976 — luminous, unmistakably paper) and moves its hue onto Petrol's side (205, chroma under 0.012). Nobody will call it blue, but every neutral now sits on the same side of the wheel as the accent, which is what makes the passage from the dark door to the lit room feel like one product. One stylesheet, two states: body.deep swaps the tokens for Petrol's dark set and every component works on both sides unchanged — the sign-in is literally the inside of the app with the lights off. Petrol keeps coming back after login as deep panels. Amber survives as the only warm note, spent solely on what waits on the client. assets/tide.css + assets/tide.js.

Same brief as Tide, read more literally. Tide recoloured Harbor, which is a different thing from what was asked — because what separates Bloom from Harbor is not the palette, it is the material: Bloom has a spacing scale 35% wider, 36px corners with one clipped, 16px body, a serif allowed to be big, blurred fields drifting behind the paper, headlines that resolve word by word, a path that draws itself. Lagoon takes the material from Bloom and the arrangement from Harbor — Bloom's air, geometry, type and effects on Harbor's twelve columns, with Harbor's density of information. The monospace labels are gone; section rules, facts lists and stage dots are Bloom's. Colour is Petrol as the secondary set, gold dropped for Petrol's own water, amber kept only for what waits on the client. Sign-in is Petrol untouched.

Now a whole flow, not three screens. The set was incomplete — the nav pointed nowhere and the list linked to a candidate rather than to a position — so it gained a home, the search detail that is the real heart of the portal (the brief the client gave, beside the people we put in front of them), and the open-a-position form: five numbered islands, almost nothing required, because a form that demands everything before it starts is a form people postpone. The CTA rides in the bar on every screen — asking for a person is the reason a client has an account — and collapses to a single plus on a phone. The animated assistant is out for now, as asked; its plan is kept for later. assets/lagoon.css + assets/lagoon.js.