Detos UI
Empezar
Fundamentos
Átomos
Moléculas
Organismos
La paleta de Detos UI en dos capas: primitivos (la escala de cada color) y tokens semánticos (el papel que cumple cada color). Todos los componentes usan los semánticos, que ya traen su valor para tema claro y oscuro.
Usa siempre un token semántico (text/, bg/, border/, fg/) en elementos y clases, nunca un hex suelto.
Escribe el color como var(--uid-del-token, #fallback) para que cambie solo con el tema.
Si un par texto/fondo no llega a AA, crea un token -aa en vez de retocar el elemento.
Usar primitivos directamente en componentes: no cambian con el tema oscuro.
Restilar elementos para el modo oscuro: se cambia con changeDefaultTheme y los tokens hacen el resto.
Usar bg/brand-solid como color de texto sobre fondo oscuro: se queda en 4.0:1.
Escalas base de Untitled UI (neutral de Tailwind v4). Son la materia prima de los semánticos; no se usan directamente en componentes.
50
#FFF6EA
100
#FFEFD8
200
#FFE2B9
300
#FFD394
400
#FFC366
500
#FFB000
600
#D69300
700
#A97300
800
#7F5500
900
#5B3C00
950
#311F00
50
#FAFAFA
100
#F5F5F5
200
#E5E5E5
300
#D4D4D4
400
#A1A1A1
500
#737373
600
#525252
700
#404040
800
#262626
900
#171717
950
#0A0A0A
50
#F0FDF4
100
#DCFCE7
300
#7BF1A8
500
#00C950
600
#00A63E
700
#008236
50
#FFF7ED
100
#FFEDD4
300
#FFB86A
500
#FF6900
600
#F54900
700
#CA3500
50
#FEF2F2
100
#FFE2E2
300
#FFA2A2
500
#FB2C36
600
#E7000B
700
#C10007
Colores de texto por jerarquía y estado.
text/primary
#262626
Títulos y texto principal
text/secondary
#333333
Etiquetas y texto de controles
text/secondary_hover
#262626
text/tertiary
#404040
Texto de apoyo y descripciones
text/tertiary_hover
#333333
text/quaternary
#525252
Texto terciario, cabeceras de tabla
text/white
#FFFFFF
Texto sobre fondos sólidos oscuros
text/on-brand-solid
#262626
Texto sobre bg/brand-solid (8.3:1)
text/disabled
#737373
text/disabled-aa
#737373
Texto deshabilitado
text/placeholder
#525252
text/placeholder-aa
#525252
Placeholder (AAA)
text/primary_on-brand
#FFFFFF
text/secondary_on-brand
#FFE2B9
text/brand-primary
#311F00
text/brand-secondary
#5B3C00
Enlaces y texto de marca (10:1)
text/brand-tertiary
#5B3C00
text/error-primary
#9F0712
Mensajes de error de campos (8.4:1)
text/warning-primary
#962900
text/success-primary
#016630
text/success-strong
#0D542B
Texto de éxito sobre fondo claro (AAA)
text/warning-strong
#962900
Texto de aviso sobre fondo claro (AAA)
text/error-strong
#9F0712
Texto de error sobre fondo claro (AAA)
text/tooltip-supporting
#D4D4D4
Fondos de página, superficies, estados y sólidos.
bg/primary
#FFFFFF
Fondo de página y tarjetas
bg/primary_hover
#FAFAFA
Hover de filas y botones secundarios
bg/primary_alt
#FFFFFF
bg/primary-solid
#0A0A0A
bg/secondary
#FAFAFA
Fondos alternos, vistas previas, cabeceras de tabla
bg/secondary_hover
#F5F5F5
bg/tertiary
#F5F5F5
Avatares sin foto, pistas de progreso
bg/quaternary
#E5E5E5
bg/disabled
#FAFAFA
Controles deshabilitados
bg/overlay
#0A0A0A
Capa bajo modales
bg/brand-primary
#FFF6EA
bg/brand-primary-aa
#FFF6EA
Badge brand, estados suaves de marca
bg/brand-secondary
#FFEFD8
bg/brand-solid
#FFB000
Botón primario, con texto oscuro encima
bg/brand-solid_hover-aa
#FFC366
Hover del primario
bg/brand-section
#311F00
Secciones de marca, con texto blanco
bg/success-primary
#F0FDF4
bg/success-secondary
#DCFCE7
bg/success-solid
#00A63E
bg/warning-primary
#FFF7ED
bg/warning-secondary
#FFEDD4
bg/warning-solid
#CA3500
bg/error-primary
#FEF2F2
bg/error-secondary
#FFE2E2
bg/error-solid
#9F0712
Botón destructivo (blanco 8.4:1)
bg/error-solid_hover-aa
#82181A
Hover de destructivo (10:1)
Bordes y separadores.
border/primary
#929292
Bordes de campos y botón secundario (3.1:1)
border/secondary
#E5E5E5
Separadores y bordes de tarjeta
border/secondary_alt
#E5E5E5
border/tertiary
#F5F5F5
border/disabled
#E5E5E5
Controles deshabilitados
border/brand
#A97300
Foco y seleccionado
border/brand_alt
#A97300
border/error
#FB2C36
Campo con error
border/error_subtle
#FFA2A2
Primer plano no textual: iconos, puntos, indicadores.
fg/primary
#262626
Iconos del item activo en navegación
fg/secondary
#404040
fg/tertiary
#525252
Iconos de apoyo
fg/quaternary
#737373
Iconos muy secundarios, items de navegación inactivos
fg/white
#FFFFFF
fg/on-brand-solid
#262626
Iconos sobre bg/brand-solid
fg/brand-primary
#A97300
Iconos, subrayado activo y marcas de selección
fg/brand-secondary
#FFB000
fg/error-primary
#E7000B
Iconos de error
fg/warning-primary
#F54900
Iconos de aviso
fg/success-primary
#00A63E
Iconos de éxito
Anillo que marca el foco con teclado.
ring/default
#A97300
Anillo de foco con teclado
ring/error
#FB2C36
Anillo de foco en campos con error
Tokens -aa
brand-solid_hover-aa, error-solid_hover-aa, brand-primary-aa, disabled-aa y placeholder-aa existen porque los valores originales no llegaban a 4.5:1 en algún tema.
Tokens -strong
success, warning y error tienen una versión -strong (tono 700 en claro) para texto pequeño sobre fondos claros: 4.7 a 5.9:1.
Cómo se mide
Cada página de componente incluye el contraste medido en el navegador en los dos temas.
Los componentes siguen preparados para modo oscuro: cada token semántico guarda un valor claro y uno oscuro.
El sitio Detos UI se muestra solo en tema claro por ahora; la paleta oscura se está revisando y por eso esta página solo lista los valores claros.
El tema se cambia con la acción change-theme (o changeDefaultTheme en el editor). Nunca se restilan elementos.
editDesignSystemToken no guarda el valor oscuro: para corregir un token hay que crear uno nuevo con createDesignSystemTokens y repuntar los bindings.
El canvas de ww-chartjs no entiende var(): los gráficos leen el tema y usan hex por tema.