// CLAVERO · OXBLOOD · 2026.04

Design tokens.

Los valores numéricos exactos están listos para SCSS. Cualquier ruta no diseñada aún debe construirse usando ÚNICAMENTE estos tokens — no inventar colores ni tamaños.

Ver UI Kit →

SEMÁNTICOS

cambian rol · no decorativos

accent

primary brand · CTA principal

#7a1f24

accent-hover

hover de CTA

#5e1519

accent-2

secundario · enlaces enfáticos

#a83b3b

accent-bg

fondos de chip / banner

#f4e3e3

accent-line

bordes en accent-bg

#d9a4a4

brand

sidebar admin · footer

#171513

brand-fg

texto sobre brand

#f3efe5

ok

vigente · success

#0f9d58

ok-bg

fondo success

#e6f4ec

warn

suspendido · warning

#a87a00

warn-bg

fondo warning

#fbf0d8

bad

revocado · error

#c8323c

bad-bg

fondo error

#fbe8e8

NEUTROS

fondo · texto · estructura

bg

fondo de página

#f6f3eb

bg-alt

fondo zebra · stripe

#f3f3f1

surface

tarjetas · forms

#ffffff

surface-2

header sticky · sub-fondos

#f6f3eb

fg

texto principal

#0a0c0f

fg-2

texto secundario

#3b4047

muted

metadata · captions

#7c8590

line

bordes principales

#e6e6e2

line-soft

separadores tabla

#efefeb

TIPOGRAFÍA

display: Source Serif 4 · ui: Inter Tight · code: JetBrains Mono

Verificable.

Tipografía con dos voces: serif para autoridad y editorial, sans para densidad y UI. El monospace se reserva para códigos de credencial y respuestas técnicas.

TOKENSIZE / LH / WTFAMILIAUSO
display-xl60 / 1.02 / 700Source Serif 4hero / certificado · -0.02em
display-lg48 / 1.05 / 700Source Serif 4section opener · -0.02em
display-md38 / 1.05 / 700Source Serif 4page heading
heading-lg28 / 1.1 / 600Source Serif 4sub-section
heading-md22 / 1.2 / 600Inter Tightcard title
heading-sm18 / 1.25 / 500Inter Tightwidget title
body-lg16 / 1.55 / 400Inter Tightpárrafos largos
body-md14 / 1.55 / 400Inter TightUI default
body-sm13 / 1.5 / 400Inter Tightmetadata
caption11.5 / 1.4 / 400Inter Tightsub-labels
label10.5 / 1.4 / 500Inter TightUPPERCASE · letter-spacing .12em
monovariesJetBrains Monocódigos · IDs · técnico

ESPACIADO · BASE 4

  • 14pxgaps mínimos
  • 28pxpadding interno chip
  • 312pxpadding card sm
  • 416pxgap entre cards
  • 520pxpadding card md
  • 624pxsection gap mobile
  • 832pxpadding section desktop
  • 1040pxpadding hero mobile
  • 1248pxpadding hero desktop
  • 1664pxsection break grande
  • 2496pxhero spacing máximo

RADIOS

  • xs

    tiny chips

    3px

  • sm

    badges · tags

    4px

  • md

    botones · inputs

    7px

  • lg

    tarjetas

    12px

  • xl

    tarjetas grandes · diploma

    16px

  • full

    pills · status

    999px

DARK MODE · MAPEO

cómo cada token se traduce en oscuro

// Light → Dark
bg:           #f6f3eb  →  #0b0d10
surface:      #ffffff  →  #13171c
fg:           #0a0c0f  →  #eef0f3
line:         #e6e6e2  →  #21262d
accent:       #7a1f24  →  #d96b6b   // sube luminosidad
accent-bg:    #f4e3e3  →  #251111
ok:           #0f9d58  →  #3ecf8e
warn:         #a87a00  →  #e4b454
bad:          #c8323c  →  #ff6e6e