Color

Extraído de Figma

El 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.

#f0fdf6

Primary 50

--color-primary-50

#dff8eb

Primary 100

--color-primary-100

#bbf0d1

Primary 200

--color-primary-200

#96e8b8

Primary 300

--color-primary-300

#6fda9d

Primary 400

--color-primary-400

Rectangle 34624964

#52bd83

Primary 500

--color-primary-500

Ellipse 6771

#3a9a78

Primary 600

--color-primary-600

#2e7e62

Primary 700

--color-primary-700

Primario

#1c544d

Primary 800

--color-primary-800

Guía de colores

#0d3d2e

Primary 900

--color-primary-900

Paleta Neutral

Usada para texto, bordes, superficies y estados deshabilitados. La escala va de casi-negro (#0e1223) a casi-blanco (#fafafa).

#fafafa

Neutral 50

--color-neutral-50

#f4f5f7

Neutral 100

--color-neutral-100

Libreria de tokens

#e2e2e8

Neutral 200

--color-neutral-200

#cbcbd1

Neutral 300

--color-neutral-300

#b0b0b8

Neutral 400

--color-neutral-400

#8e8e96

Neutral 500

--color-neutral-500

#6b6b70

Neutral 600

--color-neutral-600

#545457

Neutral 700

--color-neutral-700

#3d3d3f

Neutral 800

--color-neutral-800

Paleta de colores

#262322

Neutral 900

--color-neutral-900

Text

#0e1223

Neutral 950

--color-neutral-950

Actualizar colores

Colores Semánticos

Colores de retroalimentación. Cada uno tiene variante de fondo light para uso en alertas, badges y estados.

Success

#2e7e62
--color-success

Error

#c0392b
--color-error

Warning

#e67e22
--color-warning

Info

#2980b9
--color-info

Guía de uso

Acción primaria

--color-primary-700

Botones CTA, links activos, indicadores de progreso

Hover estado

--color-primary-800

Estado hover sobre elementos primary

Texto principal

--color-neutral-900

Cuerpo de texto, labels, headings

Texto secundario

--color-neutral-700

Descripciones, metadatos, subtítulos

Superficie page

--surface-page

Fondo de la aplicación

Superficie sidebar

--surface-sidebar

Panel 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