Foundations

Colors

Paleta de color adaptada al tema, con tokens de acento y superficie

Tokens que se adaptan al tema, construidos sobre el light-dark() de CSS. Cada muestra previsualiza el tema activo. Cámbialo y verás cómo se recalcula cada token. Los bordes cambian de color según su papel.

Surface & Text

--color-bg

Fondo de página y app

Claro#FFFFFFOscuro#16181A

--color-surface

Tarjetas elevadas (translúcido)

Claro#0000000DOscuro#FFFFFF0D

--color-surface-opaque

Superficies elevadas sólidas

Claro#F2F2F2Oscuro#222425

--color-text

Texto principal del cuerpo

Claro#475569Oscuro#E2E8F0

--color-text-secondary

Descripciones, texto secundario

Claro#565F6EOscuro#AAAAAA

--color-text-tertiary

Etiquetas tenues, separadores

Claro#576980Oscuro#D4D4D4

Accent

--color-accent

Acciones, enlaces, focus

Claro#7C3AEDOscuro#2DD4BF

--color-accent-secondary

Acentos secundarios, degradados

Claro#06B6D4Oscuro#D94F7B

--color-glow

Brillo ambiental / efectos de aura

Claro#06B6D42EOscuro#2DD4BF14

Status

--color-success

Confirmación, operación correcta

Claro#00BE58Oscuro#4ADE80

--color-error

Fallo, error de formulario

Claro#DC2626Oscuro#F87171

--color-info

Avisos, mensajes en curso

Claro#2FA5FFOscuro#60A5FA

Border

Separador--color-border

Líneas y filas que se repiten

Claro#4755692EOscuro#E2E8F024

Tarjeta--color-border-card

Una tarjeta suelta en la página

Claro#4755693DOscuro#E2E8F029

Control--color-border-control

Controles compactos, pasa el 3:1

Claro#475569B3Oscuro#E2E8F073

Campo--color-text

Campos, Button outline y marcas

Claro#475569Oscuro#E2E8F0

Acento a 1 px--color-contour-accent

Abierto, con valor y foco con clic

Claro#6D28D9Oscuro#2DD4BF