// DS_02 · MULTI-BRAND MOBILITY PLATFORM
Launch Mobility.
A driver app for three brands and six product lines. A 3 level token architecture with formal governance.
- PRODUCT
- Driver app with three first tier brands and six internal product lines
- SOURCE OF TRUTH
- Published Figma library with 5 atomic levels and per brand variables
- STATUS
- v4.2 in governance and tokens, 27 production screens verified
01 How it was built
Replay the construction of the system step by step. Tokens light up in the order they were created; audit findings and decisions appear where they happened.
It looked complete. It was failing silently.
A system grown organically for years. A structured audit on 4 axes, every finding tied to a real node ID, a measured contrast ratio or an exact hex.
- [AUDIT] Colors without tokens
- [AUDIT] 2 of 5 component sets corrupted (spinner, disabled row, rating)
- [AUDIT] Badges with identical background and text
- [AUDIT] Buttons not matching production
- [AUDIT] No governance at all
02 How it connects
Every component traces back to a token and every token to an intent. Click a node to see what depends on it.
Resolves to one of three primitives through the active Figma Mode.
5 connected nodes highlighted. Click any node to trace it.03 Ask the system
An oracle that answers design questions from the system's own rules. Ask in English or Spanish, or paste any hex to find its token.
The oracle answers from the system's own rules, tokens and changelog. No guessing: every answer shows the chain it resolved through and a confidence label, the same rule the Launch Mobility guide uses for inferred values.
04 Switch the brand
Three brands, one property swap. Brand tokens move; shared and status tokens stay put.
| Semantic token | Resolves to |
|---|---|
| brand-primary | #23325B |
| brand-accent | #387FF7 |
| status/error | #B10015 · shared |
| bg-page | #FBFBFB · shared |
| type | Roboto |
| radius/button | 100px pill |
One property swap, like Figma Modes: only brand tokens move, shared and status tokens never do.
05 Live accessibility audit
Every text token against every background token, WCAG 2.1 ratio computed on the spot.
11/18 pairs pass AA for body text · computed live in your browser
| bg-page | bg-input | bg-surface | |
|---|---|---|---|
| text-primary | Aa18.2 · AAA | Aa17.3 · AAA | Aa18.8 · AAA |
| text-secondary | Aa4.6 · AA | Aa4.4 · AA LG | Aa4.8 · AA |
| status/error | Aa7.0 · AAA | Aa6.7 · AA | Aa7.3 · AAA |
| brand-primary · main | Aa12.1 · AAA | Aa11.5 · AAA | Aa12.5 · AAA |
| brand-accent · main | Aa3.7 · AA LG | Aa3.5 · AA LG | Aa3.8 · AA LG |
| brand-accent · third | Aa2.7 · FAIL | Aa2.5 · FAIL | Aa2.8 · FAIL |
06 Specimen
Click any swatch to copy its value.
Pick up today at 18:30
CONFIRM BOOKING
Sedan · 3 days
07 Rules
- Brand isolation: the three primary colors are never combined in one piece.
- Buttons are always pills, 100px radius, with one documented product approved exception.
- Spacing only in multiples of 4. 5, 7, 11, 15 and 18px are forbidden.
- One red for every error state and required asterisk, across all three brands.
- Any value inferred by analogy, without a production screen to confirm it, is labeled lower confidence.
- Reversible work: the production page is duplicated before any edit.
- Reuse over replacement: mature libraries are migrated, not rebuilt.
- Verify behavior against real logic, not only appearance.
- Every decision lands in a versioned, dated changelog.
08 Known gaps
- Only a few components have partner brand master components. Parity is on the roadmap.
- Set corruption is invisible from the layers panel and needs periodic audits.
- Some third brand values are still inferred by pattern rather than verified.
- Two visual eras coexist in the third brand. Documented, not yet unified.