Color System

Brand + Semantic

Referencia visual de colores para diseno y desarrollo. Cada color permite copiar su valor HEX y su clase de Tailwind para aplicarlo rapidamente en componentes.

Branding Colors

Escalas cromaticas de la marca. Se recomienda usar 500 como base y ajustar contraste segun el contexto.

Forest

Color principal de marca para acciones y acentos primarios.

primary

50#f5f8f6

100#dfe8e3

200#c0cfc8

300#98b0a5

400#728f83

500#587469

600#486057

700#3a4b45

800#313e39

900#2b3632

950#161d1b

Sand

Color de apoyo para superficies suaves y estados secundarios.

secondary

50#f9f8ed

100#f4f1d9

200#e5dba3

300#d6c26e

400#c9ac46

500#b99739

600#9f782f

700#805a28

800#6b4928

900#5d3f26

950#352113

Brick

Color de alto contraste para llamados de atencion y foco visual.

tertiary

50#fef5ee

100#fde8d7

200#fbccad

300#f8a879

400#f47840

500#f1571e

600#e23e14

700#bb2d13

800#952417

900#782116

950#410d09

Deep Blue

Color complementario para secciones con jerarquia alternativa.

quaternary

50#f0f2fd

100#e4e7fb

200#ced2f7

300#b0b4f1

400#9090e9

500#7d75df

600#6d5bd0

700#5e4bb7

800#4d3f94

900#413976

950#211c3a

Semantic Colors

Tokens de interfaz para superficies, texto, bordes y estados. Evitar hardcodear HEX en componentes: priorizar estas clases semanticas.

Surface Tokens

Superficies base y fondos del sistema.

background--background

Preview with bg-background

#fdfdf9bg-background

surface--surface

Preview with bg-surface

var(--color-neutral-50)bg-surface

surface-raised--surface-raised

Preview with bg-surface-raised

#ffffffbg-surface-raised

card--card

Preview with bg-card

#ffffffbg-card

popover--popover

Preview with bg-popover

#ffffffbg-popover

input--input

Preview with bg-input

#ffffffbg-input

Text and Border Tokens

Jerarquia de lectura y delimitacion visual.

foreground--foreground

Preview with text-foreground

var(--color-neutral-900)text-foreground

text-primary--text-primary

Preview with text-text-primary

var(--color-neutral-900)text-text-primary

text-secondary--text-secondary

Preview with text-text-secondary

var(--color-neutral-700)text-text-secondary

text-muted--text-muted

Preview with text-text-muted

var(--color-neutral-500)text-text-muted

text-disabled--text-disabled

Preview with text-text-disabled

var(--color-neutral-400)text-text-disabled

border--border

Preview with border-border

var(--color-neutral-200)border-border

border-strong--border-strong

Preview with border-border-strong

var(--color-neutral-400)border-border-strong

ring--ring

Preview with ring-ring

#f1571ering-ring

Semantic and Feedback Tokens

Tokens de interfaz y estados de feedback.

primary--primary

Preview with bg-primary

#486057bg-primary

secondary--secondary

Preview with bg-secondary

#f9f8edbg-secondary

accent--accent

Preview with bg-accent

#f9f8edbg-accent

muted--muted

Preview with bg-muted

var(--color-neutral-100)bg-muted

success--success

Preview with bg-success

var(--color-green-500)bg-success

warning--warning

Preview with bg-warning

var(--color-yellow-500)bg-warning

error--error

Preview with bg-error

var(--color-red-500)bg-error

info--info

Preview with bg-info

var(--color-blue-500)bg-info

destructive--destructive

Preview with bg-destructive

var(--color-red-500)bg-destructive

Token Schema

Field	Type	Description
`cssVariable`	`string`	Variable CSS fuente del token semantico.
`tailwindClass`	`string`	Clase utilitaria recomendada para consumir el token.
`value`	`string`	Valor actual del token en formato HEX o referencia CSS.
`category`	`'surface' \| 'text' \| 'border' \| 'state' \| 'semantic' \| 'feedback'`	Grupo funcional del token para facilitar filtros y validacion.