Foundations

Tipografía

El sistema usa Avenir como fuente principal. Existen dos perfiles tipográficos independientes: uno para Gestores y Líderes y otro para Regionales, cada uno con su propia escala de estilos.

Extraído32 estilos — Figma styles API + Typography page

Familias tipográficas

Avenir

Brand typeface — display y body principal

Extraído

Aa Bb Cc

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz

Nota: Este sitio usa DM Sans como sustituto web. Avenir requiere licencia.

Inter / DM Sans

UI web — este sitio de documentación

Normalizado

Aa Bb Cc

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz

Weights: 300, 400, 500, 600, 700, 800

Perfiles tipográficos

Los dos namespaces reflejan la diferencia de densidad y jerarquía entre los dos tipos de usuario. Gestores necesitan más información visible; Regionales tienen vistas más limpias.

Gestores — Líderes

22 estilos

Headlines

Investigación

gestores.display

72px / 800

lh: 72px

Gestores - Lideres/Headlines/Display

Investigación

gestores.display-small

56px / 800

lh: 64px

Gestores - Lideres/Headlines/Display Small

Investigación

gestores.h1

40px / 800

lh: 48px

Gestores - Lideres/Headlines/H1

Investigación

gestores.h2

32px / 700

lh: 40px

Gestores - Lideres/Headlines/H2

Titles

Texto de ejemplo

gestores.title

24px / 700

lh: 32px

Gestores - Lideres/Title/Title

Texto de ejemplo

gestores.subtitle

20px / 600

lh: 28px

Gestores - Lideres/Title/Subtitle

Texto de ejemplo

gestores.pretitle

12px / 600

lh: 16px

Gestores - Lideres/Title/Pretitle

Body

El sistema documenta la experiencia del campo.

gestores.body-large

18px / 400

lh: 28px

Gestores - Lideres/Body/Body Large

El sistema documenta la experiencia del campo.

gestores.body-medium

16px / 400

lh: 24px

Gestores - Lideres/Body/Body Medium

El sistema documenta la experiencia del campo.

gestores.body-bold

16px / 700

lh: 24px

El sistema documenta la experiencia del campo.

gestores.body-link

16px / 500

lh: 24px

Gestores - Lideres/Body/Body Link

Labels

Etiqueta de componente

gestores.label

14px / 400

lh: 20px

Gestores - Lideres/Label/Label

Etiqueta de componente

gestores.label-medium

14px / 500

lh: 20px

Etiqueta de componente

gestores.label-bold

14px / 700

lh: 20px

Etiqueta de componente

gestores.label-black

14px / 900

lh: 20px

Etiqueta de componente

gestores.label-link

14px / 500

lh: 20px

Etiqueta de componente

gestores.label-small

12px / 400

lh: 16px

Etiqueta de componente

gestores.label-small-bold

12px / 700

lh: 16px

Buttons

Etiqueta de componente

gestores.button-large

18px / 700

lh: 24px

Gestores - Lideres/Button/Button Large

Etiqueta de componente

gestores.button-medium

16px / 700

lh: 20px

Etiqueta de componente

gestores.button-small

14px / 700

lh: 18px

Etiqueta de componente

gestores.button-link

16px / 500

lh: 20px

Regionales

11 estilos

Investigación

regionales.display-1

48px / 800

Regionales/Display 1

Investigación

regionales.display-2

40px / 800

Regionales/Display 2

Texto de ejemplo

regionales.header

24px / 700

Regionales/Header

Texto de ejemplo

regionales.card-title

20px / 600

Regionales/Card Title

Texto de ejemplo

regionales.title

18px / 600

Regionales/Title

El sistema documenta la experiencia del campo.

regionales.body

16px / 400

Regionales/Body

El sistema documenta la experiencia del campo.

regionales.body-medium

16px / 500

Regionales/Body Medium

El sistema documenta la experiencia del campo.

regionales.body-bold

16px / 700

Regionales/Body Bold

El sistema documenta la experiencia del campo.

regionales.body-link

16px / 500

Regionales/Body Link

Etiqueta de componente

regionales.label

14px / 400

Regionales/Label

Etiqueta de componente

regionales.label-bold

14px / 700

Regionales/Label bold

Reglas de uso

✓ Do

Usa el namespace correcto para cada tipo de usuario (Gestores vs Regionales)

Usa body-medium como tamaño base para texto de párrafo

Reserva display y h1 para jerarquía real de pantalla

Usa label para texto de formularios y etiquetas de componentes

✗ Don't

No mezcles estilos de Gestores con pantallas de Regionales

No uses display para subtítulos de secciones pequeñas

No uses label-black para texto de párrafo largo

No definas tamaños de fuente custom fuera de la escala

Uso en CSS

/* Variables tipográficas disponibles */
--ds-typography-fontFamily-brand: Avenir, 'Avenir Next', 'DM Sans', sans-serif;
--ds-typography-fontFamily-ui: 'DM Sans', 'Inter', system-ui, sans-serif;

/* Escalas: accede como escala de spacing */
/* Gestores */
.heading-display {
  font-family: var(--ds-typography-fontFamily-brand);
  font-size: 72px;
  font-weight: 800;
  line-height: 72px;
}

/* Regionales */
.regional-header {
  font-family: var(--ds-typography-fontFamily-brand);
  font-size: 24px;
  font-weight: 700;
}