The walk — Harvey

Design Engineer, Design Systems · 45 min · Portfolio review
The spine — one sentence

Every plate on both case studies is hand-authored HTML, CSS and JavaScript, so the rules are executable rather than documented — a name is a function of a value, a contrast floor is a loop, a layout API is a custom property, and a repaint is a binding.

Say this in the first ninety seconds

Harvey asked for two end-to-end case studies. Both of mine stop at the system — they show the language and the rules, not the shipped product surface end to end. Naming it unprompted reads as judgement. Being caught on it at minute twenty reads as a hole.

“Before I start — both of these stop at the system rather than running end to end through a shipped product. What they do show is the part I think is hardest to fake: the rules running as code. I’ll walk you through four places where a system rule is executable, and I’m happy to go anywhere you want after that.”

Clock

0–2

Name the gap. One sentence each on Glydways and Lumasis — what the product is, who the user is.

2–15

Lumasis. Movements 01 and 05 — derived tokens, then the map that moves by binding.

15–28

Standards Manual. Movements 02 and 03 — the component API, then contrast as a function.

28–32

Movement 04 if there is room, or hold it for the engineering question.

32–45

Your questions. Three are drafted at the bottom. This is a third of the interview — treat it as content, not courtesy.

Five movements

01Naming

A token name is a function of its value

Family from the HSL hue, step from the lightness. --lum-blue-52 states its own value, so two designers naming the same swatch independently arrive at the same token. The identical rule runs on the Glydways manual as --sm- without modification.

Answers token architecture, reusability, maintainability. Naming is where systems rot — if names are assigned, two people fork the system. Making the name derivable makes review mechanical instead of aesthetic. Follow with theming: one glass component specified against Classic Frost, Dark Glass, Warm Haze and Neon Edge, held by one rule — glow only ever reinforces a state, never carries one alone.

02API

The component API is a custom property

The script coverage table is not a picture of a table. One --cols property re-declares the entire grid at four breakpoints, and every cell carries content:attr(data-l) so it names itself once the header drops on mobile. The reveal stagger indexes only visible rows.

Answers component APIs, shipped systems in code. The true story, forty seconds: adding the Hebrew row took one row edit — the stagger re-indexed, the typeface totals recalculated, the CSV export picked it up. That is the test for whether you built a component or drew a picture of one.

03Enforcement

The accessibility rule is a loop, not a PDF

The contrast plate reads the brand accent off the live page, computes WCAG relative luminance, and walks lightness down until the derived shade clears 7:1 against the ink. Nothing is hard-coded, so the accent can change and the guarantee holds.

Answers hands-on production code, craft, usability. A documented rule degrades the moment someone is in a hurry. A rule expressed as a function cannot be skipped — it either returns a passing value or it does not.

04Diagnosis

Spacing was measured, not eyeballed

The section gaps on Lumasis read as arbitrary because four rules were compounding — section padding-bottom, block margin-bottom, section padding-top, row padding-top — up to two hundred and thirty-two pixels, and only some blocks carried all four. I measured it, zeroed all four, and replaced them with one four-step scale applied generically.

Answers maintainability, and how you think. This is the most honest engineering story you have because it is recent and it is a fix, not a triumph. The generic selector is worth showing — an embed that renders nothing is taken out of flow with :not(:has(div,table,pre,p,img…)), so a style-only block cannot collect a gap of its own. Rules, not exceptions.

05Proof

A surface changes by binding, not painting

A control-room map built on the older Metro palette was moved onto Lumasis by changing thirty-three bindings — blocked to status-bg-critical, delayed to status-bg-warning, guideway to lum-azure-22, ground to bg-canvas. Every semantic and component token is an alias; there are no raw values below the primitive tier.

Answers token architecture at the theming layer. Volunteer the boundary: state colors and ground are bound, ink is not, and the form is still Metro. Say it before they ask. The claim you can defend is the tiering — and it was verified programmatically, not asserted.

Backup — only if they push on engineering

The clock plate rebuild: frames segmented programmatically, numerals grouped by angular position, re-revealed off one timeline. Then the transparency call — screen blend at 36 KB against 444 KB for an alpha WebP.

In-code prototyping · the AI-assisted workflow question

A child anchor inside gradient-clipped text renders invisible — the paragraph paints its glyphs with background-clip and a transparent fill, and the link has no background of its own. It has to repaint itself.

If they want a craft-level debugging story

The turns

Naming is where design systems rot.

Opening turn for the token argument

The test is whether you built a component or drew a picture of one.

The component turn — earned from the Hebrew row

A documented rule degrades the moment someone is in a hurry. A rule as a function cannot be skipped.

The enforcement turn

Renaming broke the live site four times for zero reader-visible gain, so the vocabulary governs writing, not selectors.

Governance as restraint — if they ask about conventions

If you get knocked off it

“Where is the adoption evidence?”

Answer it directly, because nothing on either page evidences it. The consumers were a signage fabricator, a wrap vendor and one front-end engineer — not designers pulling instances. That is why the contract lives in code and written rules rather than a published library. Then turn it forward: the thing you would build first at Harvey is the adoption surface, because you have felt its absence.

“How do you work with engineers?”

The honest version: on Glydways you were the engineer for the system surface. The tokens ship as CSS custom properties and a JSON export because that is what a front-end engineer can consume without a translation step. Point at the export running on screen.

“Where is the discipline heading?”

They ask for a POV, so have one. Suggested: the deliverable is moving from the library to the rule. A component library assumes a human assembles the screen. Once generation is in the loop, the durable artifact is the constraint that can be checked — a derivable name, a contrast floor as a function, a spacing scale with no exceptions. Systems that can be verified will outlast systems that are merely documented.

They go quiet.

Ask what they are deciding between. Silence is usually an unasked scoping question — whether you are a systems designer who can code or an engineer who can design. The answer is that the distinction has not been true of your work for two years, and the plates are the evidence.

Three questions to ask them

Who consumes the system today, and what do they consume — components, tokens, or documentation?

Tells you whether the role is library work or governance work, and it is the question you most want answered before you accept.

When a product team needs something the system does not have, what happens?

The single best signal of whether a design system is real. If the answer is a process, it is healthy. If it is a person, it is fragile.

Where does generation sit in your workflow now, and where do you want it in a year?

Harvey is an AI company; asking this shows you are thinking about their product and the discipline at once. It also opens the POV answer if it has not come up.

Close on what you would flag before they find it. Then stop talking. Volunteering the boundary reads as confidence; being caught on it reads as an oversight.

The close