Modern Skeuomorphism — Design Direction
Goal: move the SFMS + Atlas UI away from the flat, generic "AI-generated" look toward Modern Skeuomorphism — tactile depth, layered soft shadows, subtle material gradients, recessed input wells, and frosted-glass chrome — while staying clean, fast, and accessible. Scope: the whole web app (
apps/web). Token-driven, so the change propagates through the shared component kit rather than page-by-page. Rollout: split into 8 phases — see 02_phases.md.
1. What "Modern Skeuomorphism" means here
Not the 2010-era literal skeuomorphism (leather, felt, brushed metal, heavy bevels). Modern skeuomorphism keeps the physical language — light, depth, materials, tactile controls — but expresses it with restraint:
- A single top-down light source. Raised things catch a hairline highlight on their top edge and cast a soft, layered ambient shadow below. Recessed things (input fields, tracks) are carved into the surface with an inset shadow.
- Elevation encodes meaning. Z-height is not decoration — it tells you what a thing is: a well invites input, a raised panel is content, a floating layer is transient (menu, dialog, toast).
- Controls feel tactile. Buttons lift slightly on hover and press in on click; toggles read as physical switches. Affordance becomes obvious without a label.
- Chrome is glass. The top bar and overlays use a frosted, translucent material so content flows underneath — depth without heaviness.
- Restraint over gloss. Soft multi-layer shadows and faint gradients, never mirror-shine or texture. If it looks like a 2011 iOS button, it's too much.
2. Principles (the rules every phase follows)
- Physical light model — one consistent light direction (top). Highlights on top edges, shadows below. No contradictory light.
- Elevation = semantics —
well → raised → floating. Don't raise something that isn't interactive; don't flatten something that is. - Tactility — interactive elements respond to hover (lift) and active (press). Motion is
transform+box-shadow, ~150 ms, eased. - Token-driven — never hardcode a shadow or gradient in a component. Reference the elevation tokens (
shadow-raised,shadow-well,shadow-pressed, …). See 01_tokens.md. - Theme- & dark-aware — tokens carry light/dark variants; components never branch on theme.
- Accessibility is a gate, not a polish step — depth must never drop contrast below WCAG AA, and all tactile motion respects
prefers-reduced-motion.
3. Do / Don't
| Do | Don't |
|---|---|
| Layered soft ambient shadows (2–4 layers) | Single hard box-shadow: 0 2px black |
| Hairline top-edge sheen on raised surfaces | Glossy mirror gradients / specular shine |
| Inset "well" for inputs, tracks, toggles-off | Flat inputs indistinguishable from labels |
| Frosted glass for top bar & overlays | Blur over large scrolling regions (perf) |
| Solid accent colors + borders for contrast | Full monochrome neumorphism (fails AA) |
Press-in on :active, lift on :hover | Textures — leather, felt, brushed metal |
4. Accessibility guardrails
- Text contrast ≥ 4.5:1 (AA) is preserved — material overlays never sit under body text at reduced contrast.
- Non-text contrast ≥ 3:1 for control edges and focus rings.
- No full neumorphism — that trend fails contrast; we always keep solid fills + a visible border/ring.
- Focus rings stay crisp — the 2 px
--ringoutline is unchanged and sits above material. - Reduced motion —
@media (prefers-reduced-motion: reduce)already zeroes transitions globally; the tactile lift/press degrade to instant state changes.
5. Status
| Phase | Title | Status |
|---|---|---|
| 0 | Tokens & material system | ✅ Shipped |
| 1 | Core primitives (Card, Button, Input, Select, Textarea) | ✅ Shipped |
| 2 | Navigation & chrome (sidebar, glass top bar, headers, tabs) | ⏳ Planned |
| 3 | Data surfaces (tables, KPI tiles, meters, badges) | ⏳ Planned |
| 4 | Module consoles (CPMS/EMS controls, schematic, gauges) | ⏳ Planned |
| 5 | Overlays & feedback (dialog, toast, popover, skeleton) | ⏳ Planned |
| 6 | Dashboards & widgets (widget frames, canvas, TV mode) | 🟡 Widgets shipped |
| 7 | Polish — dark-mode, a11y, performance, visual regression | ⏳ Planned |
Details, per-phase scope, files, and acceptance criteria: 02_phases.md. Token reference: 01_tokens.md. Component recipes: 03_component_recipes.md.
Preview (Phases 0–1 shipped)
Raised KPI tiles, recessed input wells, glossy tactile buttons, layered card depth:
- evidence/chiller-console.png
- evidence/energy-console.png
- evidence/dashboard-widgets.png — all widgets as raised instrument panels (carved bars, recessed sparkline screens)
This direction extends the existing token system in ../design_system.md; it adds an elevation/material tier and does not change the colour, radius, or typography tokens.