Aura
Design tokens

Catálogo visual alineado con DESIGN.md y packages/registry/styles/globals.css: escala 12 pasos, grid de 13px, tipografía fluida y componentes típicos.

01 / Colors

Accent scale (12 steps)

accent-1

#17121c

Accent scale · step 1 (deepest)

accent-2

#1c1524

Accent scale · step 2

accent-3

#2e1d3d

Accent scale · step 3

accent-4

#3b2351

Accent scale · step 4

accent-5

#462b5e

Accent scale · step 5

accent-6

#52356b

Accent scale · step 6

accent-7

#634381

Accent scale · step 7

accent-8

#7d55a2

Accent scale · step 8

accent-9 · primary

#bf91ec

Brand solid · maps to --primary

accent-10

#b486e0

Accent scale · step 10

accent-11

#cea0fc

Accent scale · step 11

accent-12

#e9dbf9

Accent scale · step 12 (lightest)

Gray scale (12 steps)

gray-1

#f6f9ff

App background

gray-2

#f0f6ff

Canvas / alt sections

gray-3

#e3ecff

Component default

gray-4

#d7e4ff

Hover

gray-5

#ccdcff

Active

gray-6

#c2d4ff

Subtle borders

gray-7

#b4c8ff

Input borders

gray-8

#99b3ff

Focus ring

gray-9

#6d84d5

Solid neutral

gray-10

#647ac5

Hover solid

gray-11

#4b5c9a

Muted text

gray-12

#121b48

Primary text

Semantic status

info

#e8ebfe

Surface · contrast #0927ec

success

#e8fef7

Surface · contrast #045d3c

warning

#fefbe8

Surface · contrast #5d5104

danger

#feefe8

Surface · contrast #8e3106

02 / Typography

Fluid scale (clamp)

Misma fórmula que el registry: clamp(var(--min), var(--val), var(--max)) con --val: 4.03vw. Sin utilidades Tailwind text-2xl para copy principal.

Heading 1 · fluid

h1 / .h1 — min 1.9838rem · 4.03vw · max 3.052rem · lh ~1.15 · wght 600

Heading 2 · section title

h2 / .h2 — 1.58665rem · 4.03vw · 2.441rem

Heading 3 · card title

h3 / .h3 — 1.482rem · 4.03vw · 2.28rem

Heading 4 · blockquote scale

h4 / .h4 / blockquote — 1.26945rem · 4.03vw · 1.953rem

Heading 5

h5 — 1.17225rem · 4.03vw · 1.563rem

Heading 6

h6 — 1.0625rem · 4.03vw · 1.25rem

Body · El sistema usa Inter y html a 17px. Este párrafo usa la escala p / .p (1rem fluido en min/max).

p / .p — 1rem · 4.03vw · 1rem · lh 1.5

text-sm (0.875rem) — metadatos, labels secundarios, UI densa permitida por reglas.

Tailwind text-sm — fijo 14px

text-xs (0.75rem) — legal, timestamps, microcopy.

Tailwind text-xs — fijo 12px

03 / Buttons

Variants & sizes

Paridad conceptual con @aura/button: fill, pill, link, menu. Alturas en múltiplos de 13px.

Primary

Border gray-6

Underline

Ghost

Icon (1em)

Sizes

~h-2.5

h-4

h-6

04 / Badges & alerts

Status & inline chrome

Neutral Accent v1.0.0

Información · usa fondo info y texto info-contrast.

Éxito · operación completada.

Aviso · revisa antes de continuar.

Error · algo salió mal.

Separator:

Before

After

05 / Cards (dark strip)

Cards sobre fondo gray-12

Fondo de sección = gray-12. Tarjetas elevadas con gray-2 y texto gray-12 para contraste.

Registry

Componentes en modo shadcn: copias el código y controlas tokens en tu app.

Ver docs →

Form system

useFormDynamic, validación AJV y errores centralizados en Form.

Formularios →

Data grid

Tablas densas con teclado, menú contextual y búsqueda integrada.

DataGrid →

05 / Cards (light)

Cards sobre gray-2

Tipografía fluida

clamp en headings evita saltos bruscos entre viewport y zoom del usuario.

Leer más →

Espaciado 13px

Cada unidad Tailwind de espacio es 13px, no 4px.

Spacing →

Iconos Radix

Clase icon; el tamaño hereda de la tipografía.

Icon rules →

05b / Cards (dark mode palette)

Misma estructura · tokens oscuros

Simula prefers-color-scheme: dark del registry (fondos azul profundo, texto gray-12 claro).

Surface 3

Tarjeta sobre fondo app oscuro con bordes gray-6.

Acción →

Elevada

Sombra suave para modales o paneles flotantes.

Detalle →

Lista

Patrón repetible para settings o dashboards.

Ver →

06 / Forms

Inputs & estados

Igual que input:not(.default) en packages/registry/styles/main.css: borde --aura-input-border-color, radio --aura-input-radius (6.5px), altura calc(var(--aura) × 4), foco outline: var(--aura-outline).

Default

Focused

Ring suave accent

Error

Borde danger-contrast

Mensaje

Aura
Design tokens

Accent scale (12 steps)

Fluid scale (clamp)

Heading 1 · fluid

Heading 2 · section title

Heading 3 · card title

Heading 4 · blockquote scale

Heading 5

Heading 6

Variants & sizes

Sizes

Status & inline chrome

Cards sobre fondo gray-12

Registry

Form system

Data grid

Cards sobre gray-2

Tipografía fluida

Espaciado 13px

Iconos Radix

Misma estructura · tokens oscuros

Surface 3

Elevada

Lista

Inputs & estados

Escala Tailwind × 13px

@theme · calc(var(--spacing) × n)

Profundidad & foco

AuraDesign tokens

Accent scale (12 steps)

Fluid scale (clamp)

Heading 1 · fluid

Heading 2 · section title

Heading 3 · card title

Heading 4 · blockquote scale

Heading 5

Heading 6

Variants & sizes

Sizes

Status & inline chrome

Cards sobre fondo gray-12

Registry

Form system

Data grid

Cards sobre gray-2

Tipografía fluida

Espaciado 13px

Iconos Radix

Misma estructura · tokens oscuros

Surface 3

Elevada

Lista

Inputs & estados

Escala Tailwind × 13px

@theme · calc(var(--spacing) × n)

Profundidad & foco

Aura
Design tokens