← Índice · Design System · Tokens

design/system/tokens.html

Tokens del Design System

Paleta de color, tipografía, espaciado, radios y sombras. Fuente de verdad para todos los mockups.

Componentes Patrones Iconos

Paleta de Color

Tres familias: Brand (institucional), Accent (cálido), Neutral (base).

Brand — Azul institucional

50
100
200
300
400
500★
600
700
800
900
950

Accent — Ámbar cálido

50
100
200
300
400★
500
600
700
800
900

Neutral — Tierra cálida

50
100
200
300
400
500
600
700
800
900
950

Colores semánticos

Success

#16a34a

Guardado, completado, inscripto

Warning

#d97706

Pendiente, requiere atención

Danger

#dc2626

Error, eliminación, crítico

Info

#0284c7

Información, ayuda, neutral

Tipografía

DISPLAY / TÍTULOS

Source Serif 4

«La corresponsabilidad exige que el Estado, la familia y la sociedad asuman juntos el cuidado integral de niñas, niños y adolescentes.»

Light 300

Aa

Regular 400

Aa

Semibold 600

Aa

INTERFAZ / CUERPO

Inter

Legible en cualquier tamaño, perfecta para formularios, menús, etiquetas y toda la interfaz de usuario. Excelente en pantallas de baja resolución.

400

Aa

500

Aa

600

Aa

700

Aa

Escala tipográfica

5xl · 3remInfancia
4xl · 2.25rAdolescencia
3xl · 1.875rSalud Mental
2xl · 1.5remCorresponsabilidad
xl · 1.25remFundación Derechos en Red
lg · 1.125rJornada Académica 2025 — Ushuaia
base · 1remInscripción abierta para profesionales de la salud, la educación y el trabajo social.
sm · .875remCupos limitados · 20 y 21 de noviembre de 2025 · Aula Magna UNTDF
xs · .75remJORNADA-2025 · INSCRIPCIÓN · REF: JOR25-0042

Espaciado

space-14px — gap mínimo, border
space-28px — íconos inline
space-312px — padding pequeño
space-416px — base
space-520px — botones
space-624px — padding card
space-832px — sección interna
space-1040px — padding sección
space-1248px — espacio entre secciones
space-1664px — padding hero
space-2080px — sección grande

Radios y Sombras

Border Radius

sm
4px — inputs, badges
md
8px — botones, chips
lg
12px — cards pequeñas
xl
16px — cards estándar
2xl
24px — cards grandes, hero
full
9999px — avatares, pills

Sombras

shadow-sm

Inputs, hover sutil

shadow-md

Cards en reposo

shadow-lg

Cards en hover, modales

shadow-xl

Dropdowns, popovers

Breakpoints

Nombre Min-width Uso típico Activo ahora
—0pxMobile first, 375px de referenciaactivo
sm640pxTablet pequeña, layout de 2 columnas—
md768pxTablet, menú desktop, grids de 3—
lg1024pxDesktop mínimo, sidebar aparece—
xl1280pxDesktop estándar, layout 1440px—
2xl1536pxPantallas grandes, max-w-7xl—

Breakpoint actual: