16. Modo oscuro
Re-mapea solo la capa semántica: fondo-base → Carbón, fondo-elevado → Superficie oscura, texto-principal → Niebla, borde → Superficie oscura. Los primitivos no cambian. Los colores funcionales suben ligeramente su luminosidad para sostener contraste sobre fondo oscuro.
Elevación por luminosidad (v3.1, lección de Carbon): en oscuro las sombras pierden protagonismo y la jerarquía se expresa con superficies más claras cuanto más elevadas:
| Nivel | Claro | Oscuro |
|---|---|---|
| 0 (base) | Lienzo #FFFFFF |
Carbón #15171A |
| 1 (tarjeta) | Lienzo + sombra | Superficie oscura #1F2227 |
| 2 (menú, popover) | Lienzo + sombra media | #262B31 |
| 3 (modal) | Material translúcido | #2D333B o material entintado oscuro |
Flujo dark-first (v3.1): al diseñar pantallas nuevas, empezar por el tema oscuro y adaptar al claro. El oscuro es menos indulgente (sombras inútiles, contrastes que fallan, colores que vibran): lo que funciona en oscuro casi siempre funciona en claro, y la mayoría de usuarios móviles vive en oscuro.