/* ============================================================
peakbnb — Design System
Base: Pop Site · Adaptado a la identidad peakbnb
Actualizado: 2026-08-25
============================================================
Cómo usar: copiar este archivo junto al HTML de la pieza y
enlazarlo con
============================================================ */
/* ---- Tipografía: Satoshi (Fontshare — gratis, uso comercial) ----
La landing NO carga la fuente desde acá: un @import dentro de una hoja
enlazada es una petición en serie —el navegador tiene que bajar y parsear
este archivo antes de descubrirla— y encima pedía un peso 900 que la
página no usa. El index la pide con y preconnect, en paralelo.
Si copiás este archivo a otra pieza, agregale el al HTML:
*/
:root{
/* ========== COLOR ==========
Un solo azul. Es el color de la ACCIÓN, nunca decoración.
Máximo un elemento azul saturado por pieza. */
/* --- Principales (el 95% de cualquier pieza) --- */
--pk-blue: #3d7ef7; /* Azul peakbnb — CTA, acento único. Sale del logo. */
--pk-midnight: #0a1521; /* Tinta — titulares y texto. Casi negro, apenas azulado. */
--pk-muted: #6b7480; /* Texto secundario, bajadas, epígrafes, metadatos */
--pk-line: #d2d2d7; /* Bordes suaves, badges, divisores */
--pk-white: #ffffff; /* Fondo. El sistema vive en blanco. */
/* --- De apoyo (casos puntuales) --- */
--pk-logo: #0d1b2a; /* Color exacto del logo. NO usar como color de texto. */
--pk-blue-soft: #6ea5ff; /* Links y acciones secundarias */
--pk-wash: #e8f0fe; /* Una sola superficie destacada por pieza */
--pk-body: #3f4a57; /* Párrafo largo, cuando el midnight pesa demasiado */
/* ========== TIPOGRAFÍA ========== */
--pk-font: 'Satoshi', 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
/* Pesos: 700 para todo titular. 400/500 para el resto. Nunca 600. */
--pk-w-regular: 400;
--pk-w-medium: 500;
--pk-w-bold: 700;
--pk-w-black: 900;
/* ---- Escala POST Instagram (lienzo 1080x1350) ---- */
--pk-ig-display: 122px; /* Titular principal */
--pk-ig-title: 84px; /* Titular secundario */
--pk-ig-sub: 34px; /* Bajada */
--pk-ig-body: 26px; /* Texto */
--pk-ig-meta: 20px; /* Badge, epígrafe, pie */
/* ---- Escala WEB (lienzo 1440) ---- */
--pk-web-display: 93px;
--pk-web-title: 53px;
--pk-web-sub: 21px;
--pk-web-body: 17px;
--pk-web-meta: 13px;
/* Los dígitos son todos del mismo ancho y con el tracking del display se
empastan. Las letras lo toleran, los números no. */
--pk-num-track: -.02em;
/* Interlineado y tracking del display: la firma del sistema */
/* Medido sobre Satoshi 700: ascendente 0,680em, descendente 0,213em.
Suman 0,893em, así que con .92 no se solapan — pero quedan 3,2px de
aire a 122px, y eso se LEE como pegado cuando el asta de una "p" cae
encima del asta de una "l". .97 da ~9px y sigue siendo compacto. */
--pk-display-lh: .97;
--pk-display-track: -.055em;
--pk-display-word: .10em; /* compensa el tracking, si no las palabras se pegan */
/* ========== FORMA ========== */
--pk-r-pill: 9999px; /* Botones, badges, pills — innegociable */
--pk-r-card: 8px; /* Cards de contenido */
--pk-r-image: 22px; /* Imágenes grandes y frames de teléfono */
/* ========== ESPACIO ========== */
--pk-s-1: 8px;
--pk-s-2: 12px;
--pk-s-3: 16px;
--pk-s-4: 24px;
--pk-s-5: 40px;
--pk-s-6: 60px;
--pk-s-7: 80px;
--pk-s-8: 120px;
}
/* ============================================================
COMPONENTES BASE
============================================================ */
.pk-display{
font-family:var(--pk-font);
font-weight:var(--pk-w-bold);
line-height:var(--pk-display-lh);
letter-spacing:var(--pk-display-track);
word-spacing:var(--pk-display-word);
color:var(--pk-midnight);
}
/* Botón de acción — el único elemento saturado de la pieza */
.pk-btn{
display:inline-block;
background:var(--pk-blue);
color:var(--pk-white);
border-radius:var(--pk-r-pill);
font-family:var(--pk-font);
font-weight:var(--pk-w-medium);
border:none;
}
/* Botón secundario — contorno, nunca un segundo azul lleno */
.pk-btn-ghost{
display:inline-block;
background:var(--pk-white);
color:var(--pk-midnight);
border:1px solid var(--pk-midnight);
border-radius:var(--pk-r-pill);
font-family:var(--pk-font);
font-weight:var(--pk-w-medium);
}
/* Badge de contexto o prueba social — borde fino, sin relleno */
.pk-badge{
display:inline-block;
border:1px solid var(--pk-line);
border-radius:var(--pk-r-pill);
color:var(--pk-muted);
font-family:var(--pk-font);
font-weight:var(--pk-w-regular);
}
.pk-badge b{color:var(--pk-midnight);font-weight:var(--pk-w-bold);}
/* Card — definida por su borde, jamás por una sombra */
.pk-card{
background:var(--pk-white);
border:1px solid var(--pk-midnight);
border-radius:var(--pk-r-card);
}
.pk-card--wash{background:var(--pk-wash);border-color:var(--pk-blue);}
/* ============================================================
REGLAS DURAS (romperlas rompe el sistema)
------------------------------------------------------------
1. Un solo azul por pieza, y solo en la acción principal.
Nunca azul en decoración, iconos ni fondos sueltos.
Única excepción: en un carrusel se puede pintar UNA palabra
de azul, en UNA sola slide, y nunca en la slide del botón.
Sigue habiendo un solo azul por pieza.
Cuenta como acción el indicador de POSICIÓN de una serie: el
número del paso en el que estás. Marca estado, no decora, y se
mueve con el lector. Una sola pieza a la vez y nunca la del
botón. Un número que no cambia no es un indicador: es adorno.
Cuando una palabra va en azul, el signo que la sigue ENTRA en el azul.
Un punto negro pegado a una palabra azul no se lee como un remate: se
lee como un error de armado.
2. Cero sombras en cards y botones. La estructura la hace
el borde de 1px. Sombra solo bajo un mockup de teléfono.
3. Cero gradientes de fondo.
4. Titular siempre en 700 y siempre grande: 100px+ en post,
53px+ en web. El salto de escala ES el diseño.
5. Radios: pill (9999px) o 8px o 22px. Nada intermedio.
6. Un post NO lleva barra de navegación, footer, links ni
"fuente" al pie. Eso es lenguaje de web.
7. Fondo blanco. Siempre.
Una foto A SANGRE no rompe esta regla: no es un fondo de color, es
contenido. Pero vale SÓLO en la portada, nunca en una slide interna,
y a sangre quiere decir a sangre: si el borde queda en 1079 aparece
una línea blanca de un píxel y la pieza se ve mal armada.
Texto claro encima sólo después de MEDIR el contraste contra el píxel
más claro de la zona. Si no llega, primero se busca una zona vacía de
la foto; el velo es el segundo recurso y va a ancho completo, porque
uno del ancho del texto deja un corte vertical visible.
Lo mismo vale para un marco o un logo claro sobre una foto: se mide
antes. Sobre un interior luminoso, un marco blanco puede dar 1.04:1,
que es invisible.
8. Separador: coma. Nunca el punto medio (·) — es el tic más
reconocible de texto generado por IA. La barra (/) se usa
solo entre dos etiquetas de igual peso, nunca en una frase.
9. Una frase, un bloque. Un texto de dos frases va en dos bloques,
nunca en un párrafo corrido: si no, la segunda frase arranca
pegada al final de la primera y queda partida al medio.
10. Los números llevan --pk-num-track, no el tracking del display.
11. Título y texto van AGRUPADOS. Dos elementos empujados a los
extremos opuestos del lienzo se leen como un error de armado;
el mismo par agrupado, con aire alrededor, se lee como una
decisión. El aire va afuera del bloque, no adentro.
12. El botón va pegado al texto que lo justifica, nunca contra el
logo al pie.
13. El logo firma distinto en cada pieza de una serie: logotipo,
isotipo o imagotipo, el que mejor funcione. No siempre el mismo.
14. La esquina superior derecha NO ES NUESTRA. Instagram dibuja ahí el
contador del carrusel ("2/6"), que sobre el lienzo de 1080 se come
unos 110x90 desde el borde. Cualquier cosa que pongamos ahí en una
slide de carrusel no se ve. Durante un mes vivieron ahí las marcas
de margen — veintiún instrumentos dibujados uno por uno, uno por
post — y no se veía ninguna.
En su lugar va una BARRA DE AVANCE al pie, que además dice algo que
la marca no decía: cuánto falta, que es lo que decide si alguien
sigue deslizando. Abajo no hay nada de Instagram encima de la
imagen: los puntitos del carrusel van debajo, fuera de la foto.
Vive sólo en las slides del medio: en la portada compite con el
arranque y en la del botón compite con el logo, que es quien firma
ahí. Se mide sobre las intermedias, así que la última de contenido
la deja llena.
La lección general: la interfaz de la plataforma es parte del
lienzo. Antes de poner algo en un borde hay que saber qué dibuja
Instagram encima.
15. El logo es una firma, no un titular: como mucho el 36% del
display de la pieza. Si compite con el título, está grande.
16. Historia (1080x1920): el contenido vive entre y 280 y y 1620.
Instagram tapa arriba con las barras de progreso y el nombre
de la cuenta, y abajo con la barra de "Enviar mensaje". Fuera
de esa franja no va nada, ni el logo.
Dentro de una destacada el logo firma sólo en la primera y en
la última: Instagram ya muestra la cuenta arriba de cada una.
17. Si dos elementos se superponen, el de arriba puede tapar el BORDE
del de abajo, nunca su texto. Vale para las pastillas apiladas y
para cualquier montaje futuro.
18. La portada no lleva pastilla arriba del titular. El arranque va lo
más limpio posible: el titular primero y nada antes. El badge de
fuente sigue existiendo, pero adentro y sólo donde hay un dato que
citar.
19. Que una foto "aguante texto encima" no es una propiedad de la foto:
es una propiedad de la foto Y del tamaño del bloque. Un titular de
122px pide 800x380 píxeles parejos y casi ninguna foto de interior
los tiene; una etiqueta de 34px pide 130x75 y eso se consigue casi
siempre. La misma foto que no aguanta un titular puede aguantar
cinco etiquetas. Primero se mapea la foto y después se escribe,
nunca al revés.
20. Una portada puede no tener titular. Si lo que la pieza muestra son
cosas concretas, señalarlas dice más que nombrarlas. Pero entonces
hace falta una línea al pie que cierre el sentido: sin ella,
"Cubierto" no dice cubierto por qué. Ese epígrafe no es un footer
de web (regla 6): lo que la 6 prohíbe es la barra de links y la
línea de "fuente", no un pie de foto.
21. El sistema alinea a la izquierda: el titular, la bajada, la lista y
la firma arrancan todos en la misma línea de 80px. Centrar es una
excepción, y se toma entera o no se toma: un título centrado con la
firma a la izquierda no se lee como una variante, se lee como un
error de armado. Si una pieza se centra, se centra todo.
22. Una referencia se replica MIDIÉNDOLA. Las líneas de una grilla, la
posición del titular y el tamaño de un bloque salen de medir el
original y pasar las proporciones al lienzo, no de repartir a ojo:
repartida pareja, la grilla de la referencia 10 se convertía en un
cuadriculado y perdía lo único que la hacía interesante.
Y si el original pone un bloque de color detrás del texto, va
semitransparente: sólido tapa la foto y deja de ser una capa.
23. Un logotipo ajeno va con su archivo oficial y en midnight. Dibujarlo
de memoria sale torcido y se nota más que cualquier otro detalle de
la pieza; ponerlo en su color mete una paleta que no es la nuestra.
Si el archivo viene sucio — damero de transparencia quemado, marca
de agua — se limpia por código antes de usarlo, no se usa igual.
============================================================ */