Base

Tamaños

Para título y textos usamos tamaños fijos definidos como variables CSS. El valor es único para todos los breakpoints.

Textos

(Estilos) Shared Design System

Títulos

Figma	scss	css	px	rem
title-h1	$title-h1	.title-h1	50px	3.125rem
title-h2	$title-h2	.title-h2	35px	2.1875rem
title-h3	$title-h3	.title-h3	30px	1.875rem
title-h4	$title-h4	.title-h4	25px	1.5625rem
title-h5	$title-h5	.title-h5	22px	1.375rem
title-h6	$title-h6	.title-h6	20px	1.25rem

¹ El line-height no debe ser menor a 1.2(120%), porque en textos truncados perderíamos parte visible de la descendente.

Subtítulos

Figma	scss	css	px	rem
subtitle-1	$subtitle-1	.subtitle-1	30px	1.875rem
subtitle-2	$subtitle-2	.subtitle-2	22px	1.375rem
subtitle-3	$subtitle-3	.subtitle-3	17px	1.0625rem

Textos

Figma	scss	css	px	rem
text-lg	$text-lg	.text-lg	18px	1.125rem
text-md	$text-md	.text-md	16px	1.0rem
text-sm	$text-sm	.text-sm	15px	0.9375rem
text-xs	$text-xs	.text-xs	13px	0.8125rem
text-xxs	$text-xxs	.text-xxs	11px	0.6875rem

Estilos

Font weight

Usamos tres clases para los tres pesos que usamos. Para entender mejor el por qué de su uso y cómo funciona la tipografía, puedes revisar Tipografía en la sección de Estilos.

Tipografía

Estilos

Color

Principalmente usamos 3 clases utilitarias para diferencias colores de textos.

Interlineado

Configuración de line-height en los textos.