Foundations

Color

El sistema de color está organizado en tres niveles: primitivos (valores crudos), semánticos (propósito) y contextuales (componente específico). La paleta de marca gira alrededor del verde #008650.

ExtraídoFigma: Colors page + System Variables + nodes API

Jerarquía de tokens

Primitive→Semantic→Contextual→Mapped

Extraído de la página "System Variables" en Figma. Cada nivel hereda del anterior; un cambio en Primitive se propaga a todos los niveles que lo referencian.

Colores primitivos

green

#e6f7ee

100

#c3ebd5

200

#6fda9d

300

#52bd83

400

#27a669

500

#008650

600

#006e41

700

#005532

800

#003d24

900

#002416

green.50

#e6f7ee

green.100

#c3ebd5

green.200

#6fda9d

green.300

#52bd83

green.400

#27a669

green.500

#008650

green.600

#006e41

green.700

#005532

green.800

#003d24

green.900

#002416

gray

#ffffff

#f8f7f7

100

#f4f5f7

200

#c8c8c8

300

#a9abae

400

#848484

500

#9e9e9e

600

#5a5a5a

700

#3d3d3f

800

#25282b

900

#0a121b

950

#060d12

gray.0

#ffffff

gray.50

#f8f7f7

gray.100

#f4f5f7

gray.200

#c8c8c8

gray.300

#a9abae

gray.400

#848484

gray.500

#9e9e9e

gray.600

#5a5a5a

gray.700

#3d3d3f

gray.800

#25282b

gray.900

#0a121b

gray.950

#060d12

blue

100

#e8f0fa

300

#5aa9ff

500

#007aff

600

#2065b0

800

#1a4a8a

blue.100

#e8f0fa

blue.300

#5aa9ff

blue.500

#007aff

blue.600

#2065b0

blue.800

#1a4a8a

Teal

teal.400

#00e0e8

Purple

purple.400

#8b56ff

Colores semánticos

Los colores semánticos asocian un nombre de propósito a un valor primitivo. Usa siempre colores semánticos en los componentes, nunca los primitivos directamente.

brand

color.semantic.brand.primary

{color.primitive.green.500}

#008650

color.semantic.brand.primary-light

{color.primitive.green.300}

#52bd83

color.semantic.brand.primary-lighter

{color.primitive.green.200}

#6fda9d

color.semantic.brand.primary-hover

{color.primitive.green.600}

#006e41

color.semantic.brand.primary-active

{color.primitive.green.700}

#005532

text

color.semantic.text.primary

{color.primitive.gray.900}

#0a121b

color.semantic.text.secondary

{color.primitive.gray.700}

#3d3d3f

color.semantic.text.tertiary

{color.primitive.gray.500}

#9e9e9e

color.semantic.text.disabled

{color.primitive.gray.300}

#a9abae

color.semantic.text.inverse

{color.primitive.gray.0}

#ffffff

color.semantic.text.brand

{color.primitive.green.500}

#008650

background

color.semantic.background.primary

{color.primitive.gray.0}

#ffffff

color.semantic.background.secondary

{color.primitive.gray.100}

#f4f5f7

color.semantic.background.tertiary

{color.primitive.gray.50}

#f8f7f7

color.semantic.background.brand

{color.primitive.green.500}

#008650

color.semantic.background.brand-sub

{color.primitive.green.200}

#6fda9d

border

color.semantic.border.default

{color.primitive.gray.200}

#c8c8c8

color.semantic.border.strong

{color.primitive.gray.500}

#9e9e9e

color.semantic.border.brand

{color.primitive.green.500}

#008650

color.semantic.border.focus

{color.primitive.blue.600}

#2065b0

feedback

color.semantic.feedback.success

{color.primitive.green.500}

#008650

color.semantic.feedback.success-bg

{color.primitive.green.50}

#e6f7ee

color.semantic.feedback.error

{color.primitive.red.500}

#e53535

color.semantic.feedback.error-bg

{color.primitive.red.100}

#fde8e8

color.semantic.feedback.warning

{color.primitive.yellow.400}

#ffca28

color.semantic.feedback.warning-bg

{color.primitive.yellow.100}

#fff8e1

color.semantic.feedback.info

{color.primitive.blue.600}

#2065b0

color.semantic.feedback.info-bg

{color.primitive.blue.100}

#e8f0fa

color.semantic.feedback.cobranza

{color.primitive.yellow.500}

#f5a623

Uso en CSS

Todos los tokens se generan como CSS custom properties con el prefijo --ds-.

/* Uso básico */
.my-component {
  background: var(--ds-color-semantic-background-primary);
  color: var(--ds-color-semantic-text-primary);
  border: 1px solid var(--ds-color-semantic-border-default);
}

/* Brand */
.btn-primary {
  background: var(--ds-color-semantic-brand-primary);     /* #008650 */
  color: var(--ds-color-semantic-text-inverse);           /* #ffffff */
}

/* Feedback */
.alert-error {
  background: var(--ds-color-semantic-feedback-error-bg); /* #fde8e8 */
  color: var(--ds-color-semantic-feedback-error);         /* #e53535 */
}

Referencia en Figma

Página: Colors

Contiene la paleta visual (Pallete color) y la documentación de la anatomía de tokens (Anatomía de los Tokens).

Página: System Variables

Documenta la jerarquía Primitive → Semantic → Contextual → Mapped con ejemplos. Nota: Los tokens son documentación visual, no Variables de Figma programáticas.

Ver en Figma →