Dark-mode chrome preview
Brand-tinted dark chrome for Lyllo, Snabbare, Mobilespin. Each brand gets a subtle tint on neutral dark greys — no loud color, just a hue shift that reads as "brand-aware chrome". Landed in Semantic (brand-moded) with raw hex per brand; Theme Dark aliases rewired; Primitives untouched.
v4 file Zfh3eGX8SSWsGf3IFN8j7I · 2026-04-23 · ✓ SHIPPED — 14 Semantic *-dark vars created (brand-moded), Theme Dark aliases rewired, Primitives untouched (364 → 364)
Side-by-side preview
Phone mocks built from the 8 chrome tokens only. Body area (white space) intentionally left blank — this preview is about chrome, not content.
Lyllo pink-grey · hue 330
9:41●●●● 5G
⌂Home
♡Saved
⚲Search
⚙More
| header-bg | #1a141a |
| header-fg | #f2ecf0 |
| header-surface-1 | #221a21 |
| header-surface-2 | #2a2028 |
| nav-bg | #1a141a |
| nav-fg | #e5dbe3 |
| ios-bar-fg | #f2ecf0 |
| menu-row-on-label | #968893 |
Snabbare blue-grey · hue 215
9:41●●●● 5G
⌂Home
♡Saved
⚲Search
⚙More
| header-bg | #0f1620 |
| header-fg | #e8edf5 |
| header-surface-1 | #161e2a |
| header-surface-2 | #1e2736 |
| nav-bg | #0f1620 |
| nav-fg | #d8dde7 |
| ios-bar-fg | #e8edf5 |
| menu-row-on-label | #7a8599 |
Mobilespin red-grey · hue 355
9:41●●●● 5G
⌂Home
♡Saved
⚲Search
⚙More
| header-bg | #1a1214 |
| header-fg | #f5ebec |
| header-surface-1 | #221618 |
| header-surface-2 | #2a1c1e |
| nav-bg | #1a1214 |
| nav-fg | #e8d8da |
| ios-bar-fg | #f5ebec |
| menu-row-on-label | #967a7e |
Tint comparison — is it too subtle, just right, or too bold?
All three brands at header-bg strength, enlarged so the tint is visible. If any of these read as pure grey on your monitor, the tint needs a bump.
Lyllo · #1a141a
Snabbare · #0f1620
Mobilespin · #1a1214
Reference pure neutral at same lightness: #161616 — compare the three above against this to gauge tint strength.
Design rationale
- Neutral-first philosophy. Dark chrome shouldn't compete with content. Tints are ~5–8% saturation — enough to differentiate brands side-by-side, subtle enough that a single brand feels "dark grey" not "dark pink".
- Elevation ladder preserved.
header-bg < surface-1 < surface-2 each step ~6–8 L* lighter, so stacked surfaces still read as depth.
- Foregrounds tinted to match. Slightly warm FG on warm BG (Mobilespin, Lyllo), cool FG on cool BG (Snabbare). Avoids the "dirty white" effect.
- Lyllo included speculatively. Brand primary is pink, so a pink-grey chrome reads as coherent. Drop to pure neutral
#14141a if brand prefers.
- Brand primaries unchanged. Lyllo pink stays Lyllo pink in dark mode — CTA/accent colors flow through untouched. This is Option B behavior.
Open questions
- Should brand primary desaturate in dark mode, or stay at full saturation? Current proposal keeps brand ramps identical across modes.
- Any brand-specific dark surfaces missing (e.g., Mobilespin "dark red card bg")? Would go into the v4 brand extras block.
- Status colors (success/warning/error) — dark-mode tuning needed, or inherit from system ramp?
- Are there dark-mode reference designs in Figma or Abstract/Zeplin we can hex-diff against? Current values are derived, not sampled.
Next steps
- Eyeball preview · if tints feel right → ship as-is; if too subtle/bold → bump or drop S by 2-5 points in HSL.
- Add 8
color/chrome/*-dark sibling primitives to Collection 1, brand-moded across Lyllo/Snabbare/Mobilespin.
- Rewire Theme Dark aliases for those 8 tokens from
color/neutral/* → color/chrome/*-dark. Other 23 Theme tokens untouched.
- QA: throwaway copy of each brand frame set to Theme=Dark. Hex-diff against refs if available.
- Update
project_token_architecture.md + v3.1 token reference doc.