Color
Extraído de FigmaEl sistema de color del DS Torre de Control está construido sobre una paleta primaria verde (#2e7e62) que comunica confianza, estabilidad y acción. La paleta neutral da soporte a textos, bordes y superficies.
Paleta Primaria
Verde institucional — transmite confianza y claridad de acción. Extraído directamente del archivo Figma DS Torre de Control.
Paleta Neutral
Usada para texto, bordes, superficies y estados deshabilitados. La escala va de casi-negro (#0e1223) a casi-blanco (#fafafa).
Colores Semánticos
Colores de retroalimentación. Cada uno tiene variante de fondo light para uso en alertas, badges y estados.
Success
#2e7e62--color-successError
#c0392b--color-errorWarning
#e67e22--color-warningInfo
#2980b9--color-infoGuía de uso
Acción primaria
--color-primary-700Botones CTA, links activos, indicadores de progreso
Hover estado
--color-primary-800Estado hover sobre elementos primary
Texto principal
--color-neutral-900Cuerpo de texto, labels, headings
Texto secundario
--color-neutral-700Descripciones, metadatos, subtítulos
Superficie page
--surface-pageFondo de la aplicación
Superficie sidebar
--surface-sidebarPanel lateral, áreas de navegación
Referencia de tokens
| Token | Valor | Descripción |
|---|---|---|
--color-primary-700 | #2e7e62 | Color primario principal |
--color-primary-500 | #52bd83 | Primario mid — gráficas, indicadores |
--color-primary-400 | #6fda9d | Primario light — backgrounds suaves |
--color-neutral-900 | #262322 | Texto principal |
--color-neutral-100 | #f4f5f7 | Superficie code / inputs |
--text-primary | var(--color-neutral-900) | Alias semántico texto |
--text-secondary | var(--color-neutral-700) | Texto secundario |
--border-subtle | var(--color-neutral-200) | Bordes sutiles |