Sombras
Elevación sólida sin desenfoque.
Tres escalas: 2px para piezas pequeñas, 4px para controles y tarjetas; 6px para paneles elevados. Tinta oscura en claro y tinta clara en oscuro mantienen visible el relieve sólido.
Estado actual
Decisiones que ya existen y pueden observarse en el producto.
La sombra se desplaza a la derecha y abajo, sin blur ni spread.
Hover en botones reduce de 4 a 2px; pulsado reduce a cero. Tarjetas informativas no tienen hover por defecto.
2px4px6pxTokens actuales
Valores presentes hoy; documentarlos no significa que todos sean definitivos.
| Token | Valor | Uso actual |
|---|---|---|
| --shadow-color | #1a1a1a | Elevación y color de sombra |
| --shadow-compact | 2px 2px 0 var(--shadow-color) | Elevación y color de sombra |
| --shadow-press | 4px 4px 0 var(--shadow-color) | Elevación y color de sombra |
| --shadow-panel | 6px 6px 0 var(--shadow-color) | Elevación y color de sombra |
Qué falta
Huecos que impiden tratar esta base como una regla estable.
No quedan huecos abiertos en el alcance actual de esta foundation.
Próximas decisiones
Orden recomendado para convertir los hallazgos en una foundation estable.
- 01
No combines sombras suaves con este sistema. Usa shadow-compact, shadow-press o shadow-panel.