jotis.meRegula

Tipografía

Geist, Geist Mono y Bricolage Grotesque.

  • Geist (--font-body) para todo lo funcional. Estilos text-xs (12/18) a text-xl (20/30) en regular, medium, semibold y bold. Por defecto en la interfaz: text-sm (14/20). Cuerpo de lectura: text-md (16/24).
  • Bricolage Grotesque (--font-display) solo para titulares: display-xs (24/32) a display-2xl (72/90). De display-md hacia arriba, interletrado −2%. Título de página en app: display-sm-semibold. Cifras destacadas: display-md-semibold.
  • Pesos: etiquetas y botones en medium/semibold; párrafos en regular. No uses bold en display.
  • Geist Mono (--font-mono) solo para código, de la misma familia que Geist: estilos code-sm (14/20) y code-xs (12/18).
  • Ancho máximo de párrafo: paragraph-max-width (720px).

Display

EstiloTamañoUso

Gasto de octubre

72px/90pxTitular principal, uno por página.

Gasto de octubre

72px/90px

Gasto de octubre

72px/90px

Gasto de octubre

60px/72pxTitular de página de aterrizaje.

Gasto de octubre

60px/72px

Gasto de octubre

60px/72px

Gasto de octubre

48px/60pxCabecera de sección.

Gasto de octubre

48px/60px

Gasto de octubre

48px/60px

Gasto de octubre

36px/44pxTítulo de página en páginas de marketing.

Gasto de octubre

36px/44px

Gasto de octubre

36px/44px

Gasto de octubre

30px/38pxTítulo de página dentro de la app (cabecera de página).

Gasto de octubre

30px/38px

Gasto de octubre

30px/38px

Gasto de octubre

24px/32pxTítulos de modal en escritorio, titulares de tarjeta, cifras destacadas.

Gasto de octubre

24px/32px

Gasto de octubre

24px/32px

Text

EstiloTamañoUso

Gasto de octubre

20px/30pxPárrafos de entrada, subtítulos de sección.

Gasto de octubre

20px/30px

Gasto de octubre

20px/30px

Gasto de octubre

20px/30px

Gasto de octubre

18px/28pxCabeceras de sección, títulos de modal en móvil.

Gasto de octubre

18px/28px

Gasto de octubre

18px/28px

Gasto de octubre

18px/28px

Gasto de octubre

16px/24pxTexto de lectura por defecto, valores de inputs, etiquetas de checkbox md.

Gasto de octubre

16px/24px

Gasto de octubre

16px/24px

Gasto de octubre

16px/24px

Gasto de octubre

14px/20pxPor defecto en la interfaz: botones, etiquetas, celdas de tabla, pistas.

Gasto de octubre

14px/20px

Gasto de octubre

14px/20px

Gasto de octubre

14px/20px

Gasto de octubre

12px/18pxBadges sm, tags, tooltips, pies de foto.

Gasto de octubre

12px/18px

Gasto de octubre

12px/18px

Gasto de octubre

12px/18px

Code

EstiloTamañoUso

Gasto de octubre

14px/20pxBloques de código y código en línea. Geist Mono, de la misma familia que el texto.

Gasto de octubre

12px/18pxCódigo en línea dentro de texto pequeño.