Run of show

Verkada · Design systems · 45 min
Emilio Passi · Eric Soderberg
Tab 1Lumasis
Tab 2Standards Manual
Tab 3Figma — Token Swatch
Tab 4Figma — OCC system map
RuleShare a page, never the assets panel.

The walk

00OPEN

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.

03PERCEPTION
The lane-classification plate, then the thesis

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.

07FRAMEWORK
Scroll to Parameters

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.

12PLATE + TABLE
Four-column palette, then the parametric tokens plate

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 JSON

The 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.

18LIVE ACTIVITIES
Scroll to Live Activities

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.

22MOVE TO FIGMA
Variables panel · Lumasis collection

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.

28COMPONENT

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 panel
34OCC IN CONTEXT
OCC breaker on the page  ·  System map in Figma ↗

This 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.

39GOVERNANCE
No screen — talk

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.

43CLOSE
Disclose, then hand back

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.

Lines that land

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 minutes

The test is whether the value identifies the component, or is supplied to it.

The component question — earned, not theoretical

Two designers naming the same swatch independently arrive at the same token.

Why derived names beat assigned ones

Renaming broke the live site four times for zero reader-visible gain.

Governance as restraint

Opacity fails to visible. A clip fails to nothing.

If motion or resilience comes up

Moving the map onto Lumasis changed twenty-three bindings and zero colors.

The semantic tier, demonstrated rather than described

Three elements never drop: the track, the position on it, and the time.

When they ask what survives the smallest surface

If they ask

Who 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.

Disclose before they find it

01

button-bg-action-hover aliases rest. No hover ramp is measured yet. It is a placeholder, and naming it is stronger than being asked.

02

The motion spec cuts the count-up; the live coverage plate still runs it. The spec is ahead of the implementation, deliberately.

03

The scripts list includes CJK and Thai while the clock plate shows only Circular's five.

04

The OCC system map is tokenized but not restyled. Color comes from Lumasis; the form is still Metro. Say it before they say it.