Preview 01 · Color

Contrato base y acción sólida

Bloque A es el único lugar del sistema donde existe un literal de color. Todo lo demás se deriva con color-mix(), de modo que cambiar estos nueve valores retiña el producto completo en claro y en oscuro. Usa el interruptor para comprobar ambos temas.

colors_and_type.css · bloque Aassets/siga.css:13–70
Cambiar tema para verificar el contrato en su variante oscura

Superficies y líneas

Tres planos: el fondo de página, la superficie de tarjeta y el relleno informativo. Las líneas separan; las sombras casi no existen en este sistema.

--bg
Fondo de página
#f4f7fb · osc. #0a0e13
--surface
Tarjetas, tablas, campos, capas
#ffffff · osc. #181f29
--surface-warm
Relleno informativo (--info-soft)
#eef6ff · osc. #16283a
--border
Línea estructural de 1px
#d8e2ee · osc. #2f3948
--border-soft
Línea entre filas de tabla
#edf3f8 · osc. #232b36
--subtle
Encabezado de tabla, pie de tarjeta, hover
derivado
--subtle-2
Estado activo, pista de control segmentado
derivado
--rail-bg
Carril de navegación: el único plano oscuro
#182e45 en claro

Texto

La regla que gobierna esta fila: --muted da 4.76:1 sobre blanco puro, pero cae a 4.15:1 en cuanto el fondo se tiñe (fila alterna, píldora, aviso). Todo el texto secundario del sistema usa --muted-ink, que se mantiene en 6.02:1 sobre superficie y 5.25:1 sobre relleno tenue.

--fg-strong sobre --surface19.29:1 · títulos, valores, celdas enfatizadas
--fg sobre --surface17.74:1 · texto corrido y celdas de tabla
--muted-ink sobre --surface6.02:1 · texto secundario, pistas, metadatos
--muted-ink sobre --subtle5.25:1 · sigue cumpliendo sobre fondo teñido
--muted sobre --subtle4.15:1 · no cumple: reservado a iconos, nunca a texto
--fg-disabledúnico estado autorizado a perder contraste

Acento y acción sólida

El acento brillante con texto blanco da 2.4:1, así que no puede ser un botón. La acción sólida usa --solid-bg (acento mezclado 26 % hacia la tinta): 5.71:1 con blanco, y el hover sube a 8.23:1. El acento brillante queda para selección, foco e indicadores.

--accent
Selección, foco, columna vigente
#0ea5e9 · osc. #38bdf8
Guardar cambios
--solid-bg
Único botón sólido de la vista
5.71:1 con --solid-fg
Guardar cambios
--solid-bg-hover
Hover: el contraste sube, nunca baja
8.23:1 con --solid-fg
--accent-ink
Enlaces, aro de foco, interruptor activo
9.15:1 sobre --surface
--accent-soft
Selección, comida activa, campo enfocado
derivado
--accent-line
Borde de bloque seleccionado
derivado
Servicio diario
--rail-active
Elemento seleccionado del carril
4.55:1 con --rail-fg
--data-track / --solid-bg
Pista y marca de dato: relleno, nunca contorno
≥3:1 contra pista y tarjeta