Lumasis Design System — Amit Patel Designs

Company

Glydways

Project

Lumasis Design System

Role

Principal Designer

Surfaces

Design System

Interaction Design

Live Activities & Applications

AI Platforms: Operating Command & Control

Year

2024–2026

Problem

Transit environments are high-stress, high-motion, and multilingual. Riders and operators need information that's immediately legible and behaviorally consistent, especially during disruptions.

Goal

Build a system that doesn't just standardize UI—it calmly guides people through complex environments and makes advanced autonomy easier to understand across product, operations, and storytelling.

Overview

Lumasis is the design system for Glydways' autonomous transit network — the screens inside the vehicles, the rider's phone, the platform kiosks, and the control room where the fleet is watched. It was built between 2024 and 2026.

Six views of the Lumasis system — the guideway track and Build control, the Blue Haven to Nova Purple light ramp, a live route comparison against ride share and bus, the vehicle software mark, the cabin mood and climate controls under construction in Figma, and an arrival Live Activity on iPhone.

Parameters

Type and pictograms came from Metro fixed, and stayed fixed — they read the same on every surface. Color could not: the same value has to hold in a vehicle in daylight, on a platform at night, and in the control room. So color is the only thing given a parametric build. Light is that color read through glass, material is the glass, depth is opacity.

Color

Light

Glass

Frosted

Dark

Tinted

Prismatic

Opacities

Refractions

Depth

.05

.11

.19

.28

.40

SwatchFamilyColorLightΔLToken architecture

Bronzehue 34°#93744Bhsl(34, 32%, 44%)#3E2E1Ahsl(33, 41%, 17%)−27--lum-bronze44 / 17

Amberhue 34°#ECA74Ahsl(34, 81%, 61%)#AA6405hsl(35, 94%, 34%)−27--lum-amber61 / 34

Tealhue 168°#33A68Fhsl(168, 53%, 43%)#044E41hsl(169, 90%, 16%)−27--lum-teal43 / 16

Azurehue 198°#2C81A5hsl(198, 58%, 41%)#12465Dhsl(198, 68%, 22%)−19--lum-azure41 / 22

Bluehue 221°#2D64DDhsl(221, 72%, 52%)#142B5Chsl(221, 64%, 22%)−30--lum-blue52 / 22

Indigohue 241°#4A49A9hsl(241, 40%, 47%)#292861hsl(241, 42%, 27%)−20--lum-indigo47 / 27

Violethue 288°#793989hsl(288, 41%, 38%)#401E48hsl(289, 41%, 20%)−18--lum-violet38 / 20

Magentahue 328°#AE3375hsl(328, 55%, 44%)#471222hsl(342, 60%, 17%)−27--lum-magenta44 / 17

Emberhue 10°#C44E37hsl(10, 56%, 49%)#65120Ehsl(3, 76%, 23%)−26--lum-ember49 / 23

SurfaceGlass & DepthValueCompositionToken architecture

Frostedlayer 03 · glassrgba(255,255,255,.045)blur 22px——--lum-glass-frosted

Darklayer 03 · glassrgba(0,0,0,.44)blur 22px——--lum-glass-dark

Tintedlayer 03 · glassrgba(79,73,169,.30)blur 22px · takes the family——--lum-glass-tinted

Prismaticlayer 03 · glasslinear-gradient(122deg)magenta · blue · teal at .20——--lum-glass-prismatic

Opacitieslayer 03 · glass.05 / .11 / .19 / .28 / .40five steps——--lum-glass-opacity-scale

Refractionlayer 03 · glasslinear-gradient(100deg).04 · .22 · .04——--lum-glass-refraction

Level 1layer 04 · depthrgba(255,255,255,.05)step 1 of 5——--lum-depth-1

Level 2layer 04 · depthrgba(255,255,255,.11)step 2 of 5——--lum-depth-2

Level 3layer 04 · depthrgba(255,255,255,.19)step 3 of 5——--lum-depth-3

Level 4layer 04 · depthrgba(255,255,255,.28)step 4 of 5——--lum-depth-4

Level 5layer 04 · depthrgba(255,255,255,.40)step 5 of 5——--lum-depth-5

Token names are derived, not assigned. The stem is the family and the step is the HSL lightness, so --lum-blue-52 states its own value and two designers naming the same swatch independently arrive at the same token. The swatch is the stack from the diagram above, seen edge-on and in the same order: 01 color at the base, 02 light, 03 the glass ground, 04 depth. Color is the flat, brightest shade the Metro standard hands down; light is that color seen through refractive glass at 34%. Bands 02 and 03 carry no visible seam because they are one value reached two ways — 02 painted from the stored hex, 03 composited live in the browser — and that agreement is the premise, drawn rather than asserted. The application is subtractive: the surface is dark, so glass takes lightness away and the delta runs negative. ΔL is the number the pair is checked on, 18 to 30 points in every family, and that band is also what clears AA. Depth is carried by opacity alone — .05 · .11 · .19 · .28 · .40, against a blur that does not change. Every translucent value here composites over the page ground, #0E0E0E, and never over the plate it sits on, so a token reads the same here as it does in the figure. Blur belongs to motion, where it measures the gap between a moving object and the trail it leaves.

Token Architecture

Four parameters, one object. The core is the only value anyone chooses — everything above it is derived from that value or applied over it.

04 Depth
03 Glass
02 Light
01 Color

Color

Glass

Depth

Read from the bottom. Color is the value Metro hands down; light is that color once the glass sits over it, which on a dark surface lands darker — hence the negative delta. Every parameter is picked rather than dragged: nine families, four grounds, five depths, and nothing in between any two of them. The grounds are ordered by density rather than by name — .045, .20, .30, .44 — so both material rows run the same direction and the surface gets heavier toward the right. Only Tinted takes its cast from the family; the other three are fixed materials, so stepping the color moves one ground and leaves the rest where they are. Every value shown is a shipped token.

Color & Light

One family read at two levels. Color is the flat, brightest shade the Metro standard hands down; light is that same color through glass at 34% — subtractive, so on a dark surface it lands darker.

Rejected

A parallel palette for dark surfaces. Doubles the token count and lets the two drift apart.

Consequence

ΔL is the number the pair is checked on: 18 to 30 points in every family, which is also the band that clears AA.

Depth

Screens stack — a sheet over a panel over the ground — and something has to say which one is nearer. Here that is a single number: opacity, five steps, .05 → .40. The blur behind it never changes.

Rejected

A parallel blur ladder stepping down as priority rises. Two properties expressing one idea, disagreeing at the edges.

Consequence

Depth is a single number an engineer can read off a token, and blur became a function of velocity rather than a decoration.

Nomenclature

Token names come from the value itself — the family from where the hue sits, the step from the lightness. Two designers naming the same swatch independently arrive at --lum-blue-52.

Rejected

A curated semantic vocabulary. Readable on day one, contested by month three.

Consequence

Naming stops being a review topic. The token is checkable against its own value.

Material : Glass

The same pill lens has to read against white frost, black glass, desert light, and neon glow without changing shape. Refraction carries the interface beneath it rather than hiding it, so one shape serves a button, a status pill, and a mode toggle across all four. The material is authored as a Figma tool built to Apple's Human Interface Guidelines — refraction, depth, dispersion, frost and splay as named values — so a designer specifies glass the way the platform does rather than approximating it by eye.

Classic Frost

Neutral white-frosted glass
80% opacity blur

Dark Glass

Deep charcoal tint
Inner light rim

Warm Haze

Amber-peach tint
Golden edge highlight

Neon Edge

Near-black cyberpunk
Prismatic glow

Pill token architecture

{
  "pill": {
    "bg": {
      "default":  { "value": "{color.surface.1}" },
      "hover":    { "value": "{color.surface.2}" },
      "pressed":  { "value": "rgba(255,255,255,0.08)" },
      "disabled": { "value": "rgba(255,255,255,0.03)" }
    },
    "text": {
      "default":  { "value": "{color.ink.primary}" },
      "disabled": { "value": "rgba(255,255,255,0.35)" }
    },
    "radius": { "value": "{radius.pill}" },
    "height": { "value": "{size.pillHeightMd}" },
    "stroke": {
      "width": { "value": "{stroke.hairline}" },
      "color": { "value": "rgba(255,255,255,0.14)" }
    },
    "glass": {
      "blur":                  { "value": "{blur.glassMd}" },
      "specularOpacity":       { "value": 0.55 },
      "innerHighlightOpacity": { "value": 0.18 },
      "chromaticShift":        { "value": "0.6px" }
    }
  }
}

$The glass material authored as a Figma tool — refraction, depth, dispersion, frost, and splay carried as named values in the effects panel rather than approximated by eye.$

Live Activities

The arrival follows the rider across the Dynamic Island, the Lock Screen, and StandBy, so one activity has to hold from a compact pill to a full screen. The track, the position on it, and the time never drop, and the route's gradient carries the line identity at every size.

Accessibility

Contrast

A dark theme with glowing accents has to clear WCAG AA[1] on every primary text and control; each applied value sits 18 to 30 points of lightness above its core.

Glass

Frosted, Dark, Tinted, and Prismatic all carry text at the same lightness-lifted values, so contrast doesn't reset depending on which surface a control lands on.

Operations

The same lightness thresholds hold in the Command & Control view, where a missed color read costs more than it does on a platform sign.

Operations Command & Control

The operator sees the same lane guidance and classification-confidence data the vehicle uses, not a translation of it — same color logic, same type scale, same iconography, at fleet scale. One system serves the person taking a ride and the person watching twenty, and a wrong read costs more at the second.

Components

The Outcome

A rider on a platform can tell what the vehicle is about to do, and an operator watching twenty can tell which one needs attention. Both are reading the same tokens at the same lightness thresholds. Nothing was translated for either of them, which is the whole of it — a value that names itself does not need an interpreter on the way to a screen.

A living system where light flows through — a refuge of clarity in complexity, over an image of an autonomous transit vehicle in a neon-lit tunnel

$Dark glass material reference: opacity and refraction swatches$ Lumasis design system detail from Figma

Lumasis design system detail, secondary view from Figma

$Dark glass material reference: opacity and refraction swatches$ Lumasis design system detail from Figma

References

[1]

Web Content Accessibility Guidelines (WCAG) 2.2 ↗

W3C · Dec 2024

[2]

Apple Human Interface Guidelines ↗

Apple · Dec 2025

Related Work

Metro Visual System

Brand Guidelines