Lumasis is the interface system for an autonomous transit network — vehicles, rider app, kiosks, and the operations center. It sits on Metro, so palette, type, and icon are inherited. What Lumasis adds is everything that only exists once an interface has state and duration.
Sets up the whole session: Metro's rules are static, Lumasis's are temporal. If they only remember one structural idea, this is the one.
Two lanes, same guideway, different classification — one green, one violet, each with its own telemetry. That is what the vehicle sees. The palette is derived from that, which is why color carries a sensor reading rather than a brand preference.
This plate now opens the page, before the thesis. Scroll it, say the two sentences, keep moving. It exists so the color argument lands as an observation rather than a claim.
Four channels, each carrying exactly one thing. Color carries state. Light carries priority. Material carries surface. Depth carries position. Every token on the page resolves to one of the four.
This is the named framework. Do not call it “principles” — it is a set of channel assignments, and that is stronger.
Color and Light are not two palettes. They are one family read at two levels — the applied set is the core color seen through refractive glass at thirty-four percent, which is why ΔL is the only number separating them. Names follow the same logic: family from the HSL hue, step from the HSL lightness, so --lum-blue-52 states its own value.
Point at the Light column Expand the plate Hit CSS, then JSONThe export is the moment the page stops being a portfolio and starts being a system. Let the download happen on screen. If time is tight, this beat is the one that can absorb a cut — but never cut the export.
The same arrival runs in the Dynamic Island, on the Lock Screen, and in StandBy. Three elements never drop — the track, the position on it, and the time — and the route's gradient carries line identity at every size.
This is the constraint beat, and it is new. It answers “does the system survive a hostile size” with a surface Apple defined rather than one I chose. Useful against Verkada, whose product lives on wall displays and phones at the same time.
Fifty-six variables, six groups. Core and Applied are primitives, Material and Depth too. Semantic is role. Component is one consumer, one property. Everything below the primitive tier is an alias — there are no raw values in Semantic or Component.
Filter on Semantic/ so they see alias chips rather than hexes. That single view answers their token-taxonomy question completely. If asked how you know: it is checkable, and it was checked.
Two axes. Type, because Color carries a marker and Glass and Depth carry a blur that Color must not have. Density, because at eight-sixty the plate drops to two columns and rows lose twelve pixels.
Then the scar — the strongest thirty seconds available: on the earlier per-color swatches, hex identified the component, so promoting it to a set-level property collapsed all eighteen to one default. Here the row is generic and the value is supplied, so a set property is correct.
Open the description panelThis map came from the earlier Metro palette. Moving it onto Lumasis was not a repaint — the blocked segment binds to status-bg-critical, the delayed car to status-bg-warning, the guideway to lum-azure-22. Twenty-three fills and strokes, no picked colors.
Best available proof that the semantic tier does work rather than exists. Say the chain once, slowly — Component → Semantic → Applied → value — and stop. If they ask what is unfinished here, say it first: the form is still Metro. Hairline guideway and glass stations are the next pass.
Class prefixes are deliberately inconsistent with the prose vocabulary. Renaming them broke the live site four times for zero reader-visible gain, so the rule is now: the vocabulary governs writing, not selectors.
Restraint is the governance. Most candidates describe a naming convention; this describes a naming convention that was deliberately not enforced, and why. Follow with the motion spec — two rules marked Absolute, and a postmortem where a 15% ratio threshold on a 9,105px panel against a 900px viewport was arithmetically unsatisfiable.
Three things I would flag before you find them.
Then stop talking. Volunteering debt at the end reads as confidence; being caught on it at minute twenty reads as an oversight.
Metro's rules are Simplicity at rest. Lumasis's are the same rules once the interface has state and duration.
Use in the first two minutesThe test is whether the value identifies the component, or is supplied to it.
The component question — earned, not theoreticalTwo designers naming the same swatch independently arrive at the same token.
Why derived names beat assigned onesRenaming broke the live site four times for zero reader-visible gain.
Governance as restraintOpacity fails to visible. A clip fails to nothing.
If motion or resilience comes upMoving the map onto Lumasis changed twenty-three bindings and zero colors.
The semantic tier, demonstrated rather than describedThree elements never drop: the track, the position on it, and the time.
When they ask what survives the smallest surfaceWho actually consumed this system?
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 Figma library — and why the component work is recent rather than foundational.
Is the semantic layer in production?
In Figma and named in the anatomy. The site ships primitives. Aliasing is additive, not a rename — value-derived primitives alias cleanly, so nothing has to be renamed to adopt it.
How do you handle themes or modes?
One mode today. The collection is mode-ready — a second mode is a column, not a rename, because every semantic token is already an alias.
How do you keep it from drifting?
A closed vocabulary with a retired-words list, an ordered decision tree with two rules marked Absolute, and a bar for adding anything: name the role no existing state can carry, or use the existing one.
Accessibility?
Contrast is treated as a property of the token pair rather than a separate audit — the derivation is stated as a lightness delta, so a failing pair is visible as a number rather than found later in a checker.
What would you do differently?
Build the semantic tier first. Primitives were derived well enough that aliasing is painless now, but a year of consumers wrote against value names, and every one of those is a future migration.
What is the hardest thing you solved here?
Making one pill lens legible against a moving exterior, a lit platform, and a dark cabin without changing the component — solved as material rather than as three variants.
button-bg-action-hover aliases rest. No hover ramp is measured yet. It is a placeholder, and naming it is stronger than being asked.
The motion spec cuts the count-up; the live coverage plate still runs it. The spec is ahead of the implementation, deliberately.
The scripts list includes CJK and Thai while the clock plate shows only Circular's five.
The OCC system map is tokenized but not restyled. Color comes from Lumasis; the form is still Metro. Say it before they say it.