Claro y oscuro
Los dos modos lado a lado, con la misma jerarquía y las mismas capacidades.
La escalera de superficies, por modo
Cuatro superficies, tres pesos de texto y cuatro valores en alfa. Cada uno con su hex, su L* medido y dónde se usa. La muestra se pinta del token, así que la muestra y el número no pueden discrepar.
Los peldaños se separan al menos 3 L*, y no llevan tinte
Menos de 3 L* y dos superficies vecinas se leen como la misma. Los pasos de abajo se calculan con la fórmula de CIE L* cada vez que se abre la página, y el test de ui-tokens los vuelve a medir contra tokens.css.
Los grises son neutros: los tres canales de cada valor son iguales. Es Vercel, no la familia 231 teñida de gris — el matiz vive en el acento y en las piezas de marca, no en las superficies.
- Piso · #090909
- L* 2.47
- Isla · #141414
- L* 6.32 · paso 3.85
- Sutil · #1C1C1C
- L* 10.27 · paso 3.95
- Elevada · #242424
- L* 14.20 · paso 3.93
Hasta 2026-09-20: canvas #050506, superficie #141417 y grises con tono 231. El sutil del estudio era #1a1a1a y daba un paso de 2,94 L*; subió a #1c1c1c. El piso es #090909 y no el #0a0a0a del estudio: con ese, la isla daba 1,0747:1 sobre el canvas y no llegaba al 1,08 que ui-tokens ya exigía.
La isla flota con luz, y su sombra sólo cae hacia abajo
Cuatro tiros en oscuro: un hairline de luz alrededor al 5 %, una línea de luz arriba al 4 %, una línea negra dura abajo y una sombra larga desplazada hacia abajo. En claro son tres, sin las líneas de luz.
Una sombra difusa alrededor, sobre un piso casi negro, es una mancha y no altura. Ningún tiro tiene desplazamiento negativo en Y, y el test lo comprueba leyendo el CSS.
Hasta 2026-09-20 la elevación oscura era una luz superior más una sombra difusa alrededor. El founder la vio en la vuelta 2 y la rechazó: sobre un piso casi negro se lee como una mancha.
Los tiros, en orden
- Oscuro · 1
- inset 0 0 0 1px blanco 5 % — el hairline de luz
- Oscuro · 2
- inset 0 1px 0 blanco 4 % — la luz de arriba
- Oscuro · 3
- 0 1px 0 negro 70 % — la línea dura de abajo
- Oscuro · 4
- 0 24px 48px -28px negro 85 % — la caída
- Claro · 1
- 0 0 0 1px negro 6 %
- Claro · 2
- 0 1px 2px negro 4 %
- Claro · 3
- 0 20px 40px -24px negro 14 %
- Desplazamiento en Y
- siempre ≥ 0 — nunca hacia arriba
La isla deja ver el piso
Ocho píxeles de margen contra el piso arriba, abajo y a la derecha; a la izquierda el piso ya está, porque ahí vive la barra lateral. Radio 16.
Ese margen es la definición: sin él la isla es la pantalla y la escalera de superficies deja de verse.
La barra lateral no es un panel
Vive directamente sobre el piso: sin fondo propio, sin borde, sin sombra. Su texto va en el peso secundario y sus iconos un punto más apagados, y hay exactamente una fila encendida.
No lleva espécimen porque no hay nada que dibujar: es la ausencia de superficie. Si al mirarla ves un panel, alguien le puso un fondo.
Los contrastes de la escalera
Medidos con el mismo contrastRatio de la paleta, cada texto contra la isla de su modo. El apagado también se mide contra la superficie elevada, que es la más clara en oscuro: 4,56:1.
El mismo markup, dos modos
Bandeja
12 conversaciones
Constructora Andes
14:32Perfecto, revisemos la propuesta el jueves…
AgenteClínica Alameda
13:07Una persona tomó la conversación.
PersonaVinos del Maule
12:05Reunión confirmada para el martes 10:00.
Agendado
Bandeja
12 conversaciones
Constructora Andes
14:32Perfecto, revisemos la propuesta el jueves…
AgenteClínica Alameda
13:07Una persona tomó la conversación.
PersonaVinos del Maule
12:05Reunión confirmada para el martes 10:00.
Agendado
Las dos columnas renderizan exactamente el mismo componente. La derecha solo cambia un atributo de datos. Si los modos divergen, el bug está en un token — nunca en un fork del UI.
Misma jerarquía, mismas capacidades
El oscuro no es una marca alternativa ni un modo «pro»: es el mismo producto con menos luz. Y el fondo es neutro, casi negro — el azul de la familia vive en los acentos, nunca teñido en el canvas.
Lo que sí cambia por diseño: el azul de acción baja un paso a #183E75 (el de claro sobre superficie oscura da 2,64:1), y la elevación cambia de motor: el paso de superficie separa, y el token de sombra aporta un hairline de luz. La sombra sólo cae hacia abajo.
La landing pública permanece clara en esta fase — eso es una decisión de la landing, no una regla del sistema.
Signal paper es una excepción controlada
Notificaciones y toasts son recibos legibles puestos sobre el trabajo, no una segunda habitación oscura. Por eso su hoja permanece blanca en ambos modos y el estado vive en el filete, el ícono y el texto.
La excepción se declara en el subtree con tokens, nunca con un fork del componente. No aplica a diálogos, menús ni paneles comunes: esos siguen el modo del producto.
Centro de señales
Notificaciones
Handoff abierto · AltoAndes Cloud
Requiere una decisión humana.
Reunión agendada
La invitación quedó registrada.
- Canvas
- #F2F2F3 · #090909
- Superficie
- #FFFFFF · #141414
- Texto
- #171717 · #EDEDED
- Acción
- #2457A8 · #183E75
- Enlace
- #2457A8 · #7AA3F0
- Signal paper
- white / ink en ambos modos
- Selección
- system → localStorage
- Primer paint
- sin flash · boot script