Tipografía

PP Carvuk para los títulos de marca y Manrope para la interfaz. Cada estilo es una clase que fija tamaño, interlineado y peso.

Revisión técnica · Providencia

body-sm

Tu auto al día

heading-2

Lo llevamos a la planta y te lo devolvemos.

body-lg

$34.990

heading-4

Incluye retiro y entrega

caption

Familias

Dos familias con roles distintos. PP Carvuk le da voz a la marca y Manrope resuelve todo lo que se lee y se usa.

AaABCDEFGHIJ abcdefghij 0123456789
PP CarvukDisplay de marca. Solo en heading-1 a heading-3, con peso 550.
AaABCDEFGHIJ abcdefghij 0123456789
ManropeTexto de interfaz. Bold para títulos y regular para el cuerpo.

Escala

Cada estilo es una clase utilitaria que fija familia, tamaño, interlineado y tracking. Los valores están en px como tamaño / interlineado.

Display

PP Carvuk · 550

heading-172 / 76 · Hero de landing

Tu auto

heading-248 / 52 · Títulos de sección

Multas

heading-332 / 40 · Títulos destacados

Revisión técnica

Interfaz

Manrope · Bold

heading-428 / 36 · Títulos de pantalla y precios

$89.990

heading-520 / 28 · Títulos de card y sheet

Cambio de pastillas

heading-616 / 24 · Títulos de lista y grupos

Detalle del servicio

Cuerpo

Manrope · Regular

body-xl24 / 33 · Bajadas de hero

Agenda en minutos y te vamos a buscar.

body-lg18 / 24 · Introducciones

Retiramos tu auto y te lo devolvemos listo.

body16 / 24 · Texto base y formularios

Incluye cambio de aceite, filtros y revisión de 30 puntos.

body-sm14 / 20 · Detalle y etiquetas

Toyota Yaris 2021 · JTRX-12 · Providencia

caption12 / 16 · Metadatos y notas

Precio con IVA incluido

Uso

Mantención 10.000 km

$89.990

Precio con IVA incluido

Sí
Jerarquía con tamaño y color: precio en heading-4 y detalle en body-sm.

Mantención 10.000 km

$89.990

Precio con IVA incluido

No
Todo en el mismo estilo. Nada destaca y cuesta escanear.

Próxima mantención

Miércoles 21 de octubre

Sí
Títulos y etiquetas en oración, con mayúscula solo al inicio.

Próxima mantención

Miércoles 21 de octubre

No
Etiquetas en mayúsculas. Se leen como un grito y rompen el tono.

Código

<h1 className='heading-2 text-foreground'>Tu auto al día</h1>
<p className='body-lg text-muted-foreground'>Lo llevamos a la planta.</p>

<p className='heading-4 text-foreground'>$34.990</p>
<p className='caption text-muted-foreground'>Incluye retiro y entrega</p>