Tokens

Tokens Primitivos

Los tokens primitivos son los valores brutos del sistema — colores en hex, tamaños en px. No deben usarse directamente en componentes. Son la base desde la que se construyen los tokens semánticos y contextuales.

ExtraídoNivel 1 de 4 — Figma: 📚 System Variables (node 619:6736)

Primitive→Semantic→Contextual→Component

Los primitivos son el fundamento — no se usan directamente en componentes

Paleta de colores primitivos

Green

color.primitive.green.*

Inferido

--ds-color-primitive-green-50

#e6f7ee

100

Inferido

--ds-color-primitive-green-100

#c3ebd5

200

Extraído

--ds-color-primitive-green-200

#6fda9d

fill in grid rectangles, Fundamentos page

300

Extraído

--ds-color-primitive-green-300

#52bd83

brand-secondary, active states

400

Inferido

--ds-color-primitive-green-400

#27a669

500

Extraído

--ds-color-primitive-green-500

#008650

brand-primary — fills in Botones/Header, #008650

600

Inferido

--ds-color-primitive-green-600

#006e41

700

Inferido

--ds-color-primitive-green-700

#005532

800

Inferido

--ds-color-primitive-green-800

#003d24

900

Inferido

--ds-color-primitive-green-900

#002416

Gray

color.primitive.gray.*

Extraído

--ds-color-primitive-gray-0

#ffffff

Extraído

--ds-color-primitive-gray-50

#f8f7f7

bg of Buttons frame

100

Extraído

--ds-color-primitive-gray-100

#f4f5f7

bg-secondary, Pallete color frame

200

Extraído

--ds-color-primitive-gray-200

#c8c8c8

Gray200 — System Variables page

300

Extraído

--ds-color-primitive-gray-300

#a9abae

disabled button color

400

Inferido

--ds-color-primitive-gray-400

#848484

500

Extraído

--ds-color-primitive-gray-500

#9e9e9e

Gray500 — System Variables page

600

Inferido

--ds-color-primitive-gray-600

#5a5a5a

700

Extraído

--ds-color-primitive-gray-700

#3d3d3f

text-secondary, Fundamentos page text nodes

800

Extraído

--ds-color-primitive-gray-800

#25282b

Colors page text #25282B

900

Extraído

--ds-color-primitive-gray-900

#0a121b

text-primary, Primitive frame fill

950

Inferido

--ds-color-primitive-gray-950

#060d12

Blue

color.primitive.blue.*

100

Inferido

--ds-color-primitive-blue-100

#e8f0fa

300

Extraído

--ds-color-primitive-blue-300

#5aa9ff

Ellipse 4 in Colors page

500

Extraído

--ds-color-primitive-blue-500

#007aff

Ellipse 2-3 in Colors page

600

Extraído

--ds-color-primitive-blue-600

#2065b0

Anatomía de los Tokens frame fill

800

Inferido

--ds-color-primitive-blue-800

#1a4a8a

Teal

color.primitive.teal.*

400

Extraído

--ds-color-primitive-teal-400

#00e0e8

Ellipse 5 in Colors page

Purple

color.primitive.purple.*

400

Extraído

--ds-color-primitive-purple-400

#8b56ff

Ellipse 6 in Colors page

Red

color.primitive.red.*

100

Inferido

--ds-color-primitive-red-100

#fde8e8

500

Inferido

--ds-color-primitive-red-500

#e53535

Inferred from Error big fill style

600

Inferido

--ds-color-primitive-red-600

#c42020

Yellow

color.primitive.yellow.*

100

Inferido

--ds-color-primitive-yellow-100

#fff8e1

400

Inferido

--ds-color-primitive-yellow-400

#ffca28

Inferred from yellow big fill style (Cobranza flow)

500

Inferido

--ds-color-primitive-yellow-500

#f5a623

Spacing primitivo

spacing.* — base 4px

size-0

0px

Extraído

size-2

2px

Extraído

size-4

4px

Extraído

size-8

8px

Extraído

size-12

12px

Extraído

size-16

16px

Extraído

size-24

24px

Extraído

size-32

32px

Extraído

size-40

40px

Extraído

size-48

48px

Extraído

size-56

56px

Extraído

size-64

64px

Extraído

Border Radius primitivo

borderRadius.*

none

0px

4px

8px

12px

16px

2xl

24px

full

9999px

Regla fundamental

Los tokens primitivos no deben usarse directamente en componentes. Siempre referencia un token semántico (ej. --ds-color-semantic-brand-primary) en lugar de un primitivo (ej. --ds-color-primitive-green-500). Esto garantiza que el sistema sea themeable en el futuro.