Tipografía

Familia

Una única familia en toda la interfaz. La diferenciación visual entre texto de UI y datos numéricos se logra con peso y tamaño, no con familia distinta.

Token	Fuente	Fallback
--font-ui	Inter Tight	Helvetica Neue, Arial, sans-serif

Escala de tamaños

Token	Valor	Uso
--text-tag	10px	Badges uppercase — OPEN, CHEAPEST
--text-xs	12px	Metadata, timestamps, distancias
--text-sm	14px	Chips, texto secundario, form labels
--text-base	16px	Body, botones, menu items
--text-lg	20px	Card titles, station name
--text-xl	24px	Screen headings
--text-2xl	32px	Display, landing headline
--text-price	44px	Hero price

Pesos

Token	Valor	Uso
--weight-regular	400	Body, labels, metadata
--weight-medium	500	Precios secundarios, runner-up
--weight-semibold	600	Botones, headings de panel
--weight-bold	700	Headings principales, hero price

Interlineado

Token	Valor	Uso
--leading-none	1	Todo el UI — precios, títulos, botones, labels
--leading-body	1.5	Párrafos y texto legal

Estilos semánticos

Combinaciones con nombre que usan los componentes. Nunca aplicar los tokens crudos directamente — usar siempre el estilo semántico correspondiente.

Estilo	Tamaño	Peso	Leading
price	--text-price (44px)	bold (700)	none
price-md	--text-lg (20px)	medium (500)	none
price-sm	--text-sm (14px)	medium (500)	none
display	--text-2xl (32px)	bold (700)	none
heading	--text-xl (24px)	semibold (600)	none
title	--text-lg (20px)	bold (700)	none
subtitle	--text-base (16px)	semibold (600)	none
body	--text-base (16px)	regular (400)	body
body-sm	--text-sm (14px)	regular (400)	body
label	--text-xs (12px)	regular (400)	none
badge	--text-tag (10px)	semibold (600)	none
legal	--text-base (16px)	regular (400)	body

Referencias en cada plataforma

Plataforma	Archivo
Web	tanko-web/src/shared/lib/brand.ts → FONT
Web (CSS vars)	tanko-web/design-handoff/tokens.css → sección TYPOGRAPHY
Android	tanko-app/androidApp/src/main/kotlin/com/tanko/android/ui/theme/Type.kt
iOS	tanko-app/iosApp/iosApp/Theme.swift