Hostalin DS v1.0
Design System · v1.0 · Mayo 2026

El sistema visual detrás de las habitaciones más honestas del centro de Barcelona.

Esta es la referencia técnica del DS de Hostalin: color, tipografía, escalas, forma y componentes que cualquier persona del equipo o proveedor debe usar para mantener coherencia. Versión interactiva del PDF — copia tokens, descarga formatos y enlaza al Brand Book para contexto editorial.

Versión1.0 · 23 May 2026
FuenteBrand Book Hostalin v1.0
CuradorWebsalia
Formato tokensDTCG v1

01 · ColorPaleta y aplicaciones

Tres familias: primarios (identidad), neutros (estructura) y semánticos (estados). Haz clic en cualquier swatch para copiar el HEX. Etiqueta WCAG marca contraste sobre cream (#F4F2EC).

Primarios

primary
Primary · Vivo
#5A9A9D click para copiar
CTAs, hero, iconos. Saturación añadida según feedback Ramon ("menos mate, más viva").
AA · 4.6:1
anchor
Primary · Ancla
#9AB6BA click para copiar
Teal del logo. Bandas secundarias, separadores. Token original detectado en designlang.
Solo decorativo
dark
Primary · Dark
#16494C click para copiar
Tipografía sobre claro, footer, fondos dramáticos.
AAA · 11.2:1

Neutros

tint
Tint
#ACCBBC click para copiar
Backgrounds de sección. NUNCA como CTA (contraste insuficiente).
cream
Cream
#F4F2EC click para copiar
Fondo principal de página. Sustituye al blanco puro.
paper
Paper
#FBFAF6 click para copiar
Cards y superficies elevadas sobre crema.
text
Text
#1A1A1A click para copiar
Cuerpo de texto · 16-18 px.
AAA · 16.1:1
text-soft
Text · Soft
#6B6B66 click para copiar
Texto secundario, captions, metadata.
AA · 4.9:1
rule
Rule
#DDD8CE click para copiar
Líneas divisorias, bordes de cards.

Semánticos

danger
Danger
#A14545 click para copiar
Solo estados de error en validación de formulario.
AA · 5.4:1
good
Good
#1B6E4F click para copiar
Solo estados de éxito en validación de formulario.
AA · 6.4:1

02 · TipografíaDisplay y cuerpo

Dos familias. Playfair Display para titulares y momentos editoriales; Inter para todo lo demás. Reducidas desde 8 familias detectadas por designlang en la web actual.

Aa
Playfair Display
"Playfair Display", "EB Garamond", Georgia, serif
Hero, titulares, citas, lockups. Italic disponible para énfasis editorial.
400500600700400i
Aa
Inter
"Inter", "Open Sans", -apple-system, system-ui, sans-serif
Cuerpo, UI, navegación, microcopy. Sustituye a system fonts por consistencia cross-device.
300400500600700

Escala

5xl4.6rem
Habitaciones honestas
4xl3.2rem
Habitaciones honestas
3xl2.4rem
Habitaciones honestas
2xl1.85rem
Habitaciones honestas
xl1.45rem
Habitación doble con balcón en Gran Vía 540
lg1.15rem
El centro de Barcelona, sin pagar de más por una habitación que apenas vas a pisar.
base1.02rem
Hostalin son cuatro hostales en cuatro direcciones del Eixample. Reserva directa sin intermediarios.
sm0.88rem
Cancelación gratuita hasta 24 h antes del check-in.
xs0.78rem
Diputació · Gran Vía · Madrid · Passeig de Gràcia

Line-height

tight1.15
Titulares de hero y portadas — texto que respira poco para máximo impacto visual.
snug1.35
Subtítulos y encabezados de sección con dos o tres líneas de descanso.
normal1.55
Cuerpo estándar. Lectura cómoda en bloques de texto largos sobre fondos claros.
relaxed1.75
Texto pausado para guías de barrio, FAQs y zonas editoriales donde el contenido domina.

03 · EspaciadoEscala basada en 4 px

Ocho pasos. Usa la escala para márgenes, paddings y gaps. Doblar para layouts editoriales (hero, secciones); incrementos pequeños para UI compacta (formularios, badges).

xs
4 px
sm
8 px
md
16 px
lg
24 px
xl
32 px
2xl
48 px
3xl
64 px
4xl
96 px

04 · FormaRadius y sombras

Radius suave para suavizar la geometría sin perder presencia. Sombras discretas — siempre verticales, nunca difusas en exceso.

Radius

sm
4 px
md
8 px
lg
14 px
full
999 px

Sombras

sm
0 1px 3px / .08
md
0 4px 12px / .10
lg
0 12px 28px / .12

05 · ComponentesPatrones base

Componentes mínimos para construir la web y los emails. Renderizados en HTML real — inspecciona el código para ver la implementación exacta.

Botones
<button class="btn primary">Reservar ahora</button>
<button class="btn secondary">Ver habitaciones</button>
<button class="btn ghost">Cancelar</button>
Inputs
Card de habitación

Doble con balcón

Diputació 250. Vista a la calle, 14 m², baño privado.

desde 78 €/noche
Badges
Disponible Reserva directa Sin comisiones Confirmada Cancelada
Alerts
Reserva flexible: cancela gratis hasta 24 h antes del check-in.
Confirmada: hemos enviado el bono a tu correo.
Pago rechazado: revisa los datos de tu tarjeta y vuelve a intentarlo.

06 · DescargasTokens y formatos

Todos los formatos que cualquier desarrollador, diseñador o agencia externa necesita para implementar Hostalin sin reinventar nada.

.json · DTCG Design Tokens Tokens estándar Design Tokens Community Group v1. Compatible con Style Dictionary, Tokens Studio, herramientas de build. ↓ Descargar .css · Tailwind v4 Tailwind v4 Theme Bloque @theme listo para Tailwind v4. Incluye paleta, tipografía, espaciado y radii. ↓ Descargar .css · Custom Properties CSS Variables Variables CSS bare para vanilla, WordPress, Astro o cualquier stack sin Tailwind. ↓ Descargar .json · Figma Figma Variables Import directo a Figma variables. Colección unificada de color, tipografía y espaciado. ↓ Descargar .json · WordPress WordPress theme.json Listo para FSE / Block Editor. Inyecta automáticamente paleta y tipografía en el editor. ↓ Descargar .pdf · Print DS Hostalin · PDF Versión print del Design System v1.0. Útil para imprimir, archivar o enviar como entregable cerrado. ↓ Descargar
Copiado al portapapeles