pernocta

Fundamentos

Tipografía

Plus Jakarta Sans: geométrica, amable y muy legible en pantallas pequeñas. Una sola familia en cinco pesos; la jerarquía sale del tamaño y el peso, nunca del color.

Familia#

Web: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif. Nativo: @expo-google-fonts/plus-jakarta-sans.

Aa

Regular

400

Aa

Medium

500

Aa

SemiBold

600

Aa

Bold

700

Aa

ExtraBold

800

Escala#

Clases: text-display, text-h1 … text-overline. Cada una incluye tamaño, interlineado, tracking y peso.

text-display

56/60 · 800 · -0.03em

Duerme donde amanece

text-h1

40/46 · 800 · -0.025em

Áreas para autocaravanas en Almería

text-h2

32/38 · 700 · -0.02em

Lo que ofrece este lugar

text-h3

26/32 · 700 · -0.015em

Opiniones de viajeros

text-h4

22/28 · 700 · -0.01em

Cerca de aquí

text-h5

18/24 · 600 · -0.005em

Servicios

text-body-lg

18/28 · 400 · 0em

Área tranquila a 200 metros de la playa, con vistas al faro y vaciado de aguas grises.

text-body

16/24 · 400 · 0em

Llegamos de noche y había sitio de sobra. Agua potable gratuita y contenedores junto a la entrada.

text-body-sm

14/20 · 400 · 0em

Níjar, Almería · Área de autocaravanas gratuita

text-caption

12/16 · 500 · 0.005em

Actualizado hace 3 días

text-overline

11/14 · 700 · 0.08em

Favorito de viajeros

Tabla de tokens#

PropTipoPor defectoDescripción
display56px / 60px800Títulos (text-wrap: balance)
h140px / 46px800Títulos (text-wrap: balance)
h232px / 38px700Títulos (text-wrap: balance)
h326px / 32px700Títulos (text-wrap: balance)
h422px / 28px700Títulos (text-wrap: balance)
h518px / 24px600Títulos (text-wrap: balance)
body-lg18px / 28px400Texto de lectura
body16px / 24px400Texto de lectura
body-sm14px / 20px400Texto de lectura
caption12px / 16px500Texto de lectura
overline11px / 14px700Siempre en mayúsculas

Reglas#

Lo que ofrece este lugar

HazTítulos en sentence case: “Lo que ofrece este lugar”.

Lo Que Ofrece Este Lugar

EvitaTítulos en Title Case o TODO MAYÚSCULAS salvo el overline.

Área tranquila a 200 metros de la playa, con vistas al faro.

HazTexto largo a 16 px con interlineado 24 y ancho máximo ~70 caracteres.

Área tranquila a 200 metros de la playa, con vistas al faro.

EvitaTexto de lectura en 12 px o en gris claro (fg-subtle) sobre blanco.