La guía de estilo de Güerri
Las reglas con las que está construida esta web. Sirven para que lo que se añada mañana siga pareciendo de la misma casa.
La marca
La ü del logotipo es una cara: los dos puntos son los ojos y la curva es la sonrisa. Es el activo con más cariño de la marca y el que más se usa aquí.
Los puntos van siempre en verde Güerri y las letras en tinta. Nunca al revés.
- Usar la ü sola como viñeta, separador y remate de pie de página.(recomendado)
- Dejar un margen libre alrededor equivalente a la altura de un punto.(recomendado)
- Sobre fondo oscuro, la ü va en verde Güerri sin modificar.(recomendado)
- Rotarla, inclinarla o separar los puntos de la curva.(a evitar)
- Añadirle boca, nariz u otros rasgos: la cara ya está sugerida.(a evitar)
- Colocarla sobre una foto sin una superficie plana detrás.(a evitar)
Color
Un solo acento, el verde Güerri, sobre neutros cálidos: la crema de día y la madrugada del obrador de noche. El verde sigue mandando porque es el único acento de toda la página.
Verde Güerri
--color-guerriFondo de botón primario, franja de envíos, puntos del logotipo, iconos sobre tinta.
8,6:1 con tinta encima
Verde texto
--color-guerri-deepEnlaces, antetítulos y cifras. Es el verde para escribir.
5,4:1 papel · 5,0:1 pistacho
Tinta
--color-inkTexto principal y fondo del modo oscuro.
17,1:1 sobre papel
Tinta suave
--color-ink-softPárrafos largos y texto secundario.
8,7:1 sobre papel
Tinta tenue
--color-ink-muteMetadatos, pies y etiquetas pequeñas.
5,2:1 papel · 4,7:1 pistacho
Papel
--color-paperCrema cálido. Fondo por defecto de toda la web.
Crema
--color-cremaTarjetas de reseña sobre papel.
Pistacho
--color-pistachoSuperficie alterna: mostrador y pie de página.
Línea
--color-lineaFiletes y bordes de campos. Nunca para texto.
Madrugada
--color-nocheFondo de la zona oscura: el hero y la palabra del maestro.
17,3:1 con papel encima
Texto de noche
--color-noche-textoPárrafos dentro de la zona oscura.
12,7:1 sobre madrugada
Tenue de noche
--color-noche-mutePies y etiquetas dentro de la zona oscura.
7,3:1 sobre madrugada
Alba
--color-albaSolo el resplandor cálido detrás de un titular de la zona oscura.
La zona de madrugada
La página no es una pila de bandas: es una mañana seguida. La clase.noche no pinta nada, reapunta los mismos tokens semánticos (--surface, --text, --rule,--accent-on-surface) a la versión oscura, así que cualquier componente funciona en las dos zonas sin saber en cuál está. Y como--fondo-pagina nunca se reapunta, la zona oscura puede fundir sus propios bordes contra la crema y desaparece la costura entre secciones.
La regla que no se salta
El verde #B5BA06 sobre papel da 2,0:1. No llega a ningún mínimo de accesibilidad, así que nunca se escribe con él sobre claro. En claro se escribe con #666B03; el verde puro solo actúa de relleno con tinta encima, o de tinta sobre fondo oscuro, donde da 8,6:1.
- Un único acento en toda la página, de la cabecera al pie.(recomendado)
- Alternar papel y pistacho para dar ritmo a las secciones.(recomendado)
- La zona oscura entra y sale con un fundido de 9 rem, nunca a corte.(recomendado)
- Más de dos zonas oscuras por página: dejan de ser un momento.(a evitar)
- Introducir un segundo color de marca para dar variedad.(a evitar)
Tipografía
Outfit para titular, Instrument Sans para leer y Caveat solo dentro de las pegatinas. Outfit es una geométrica redonda, la misma familia de formas que el logotipo, así que la marca y los títulos se parecen sin tener que forzarlo.
Hoy también
Todo sale del obrador
Una tarta no se acaba cuando sale del horno.
Lo que no se ve desde el mostrador
Todo se elabora aquí, a mano y a diario.
IVA incluido
La carta
José Borrachero
- Titulares de dos líneas como máximo, con corte decidido a mano.(recomendado)
- Párrafos limitados a 62 caracteres de ancho.(recomendado)
- La manuscrita fuera de una pegatina o de la firma: ni títulos, ni cuerpo, ni botones.(a evitar)
- Serif en ningún sitio: rompe el parecido con el logotipo.(a evitar)
- Mezclar dos familias dentro de un mismo titular para destacar una palabra.(a evitar)
Forma y espacio
Nada es cuadrado del todo. Hay un sistema de redondeo para lo corriente y cuatro formas con nombre para los momentos: el arco, el pétalo, el festón y la pegatina.
--radius-surface. Bandas y fotos grandes.
--radius-tile. Celdas del bento y tarjetas.
--radius-field. Campos de formulario.
Todo lo pulsable: botones y controles redondos.
Las cuatro formas con nombre
El escaparate y la boca del horno. Solo el retrato del maestro, una vez por página.
Obrador y tienda. Van en espejo, inclinados grado y pico.
Borde de tarta. Solo en el arranque del pie.
Etiqueta de mostrador. Tres por página como mucho.
Ritmo vertical
- Ancho útil
- 1320 px, con 20 px de margen en móvil y 40 px a partir de 768 px
- Separación entre secciones
- 64 px en móvil, 96 px en escritorio
- Del título a su contenido
- 56 px
- Hueco del bento
- 12 px en móvil, 16 px en escritorio
- Inclinación de una tarjeta
- Entre 1 y 2 grados, fija por posición y nunca al azar
Componentes
Con sus estados, no solo el estado feliz. Un componente sin foco, sin error y sin vacío está a medio hacer.
Botones y enlaces
El primario lleva tinta sobre verde: 8,6:1, y es el mismo en claro y en oscuro. Máximo tres palabras, para que nunca parta en dos líneas.
Pegatinas y precios
hechoa mano3,10 €
La pegatina va torcida de serie. El precio es una pastilla verde sobre la foto, girada dos grados, porque un precio alineado parece un catálogo y no un mostrador.
La losa
huele a recién hecho
Una palabra del titular sacada del texto y convertida en etiqueta física: verde de marca, tinta encima, inclinada grado y medio. Es lo más ruidoso de la página, así que hay exactamente una por página y nunca hereda el resplandor del titular que la rodea.
La firma
El nombre en manuscrita y un trazo de pluma debajo. Al bajar, el nombre se barre de izquierda a derecha con clip-path y el trazo se dibuja constroke-dashoffset sobre un pathLength="1", para que la cuenta del guion sea la misma a cualquier tamaño. Ambos parten de su estado final, así que sin movimiento la firma simplemente está.
Campos
Etiqueta siempre encima. El marcador nunca hace de etiqueta.
Falta el dominio del correo.
Deshabilitado: sigue leyéndose, no se edita.
Carga y vacío
Hoy no queda nada de esta bandeja
Se hace por la mañana y se acaba. Mira el resto del mostrador.
Ver la tiendaEl esqueleto copia la forma final del contenido, no es un disco girando. El vacío explica por qué está vacío y ofrece la salida.
Movimiento
La web tiene que estar viva sin dar la lata. Cada animación responde a algo: una entrada, un puntero encima, el propio scroll o un cambio de estado. Nada se mueve porque sí.
- Curva normal
cubic-bezier(0.16, 1, 0.3, 1), entre 200 y 300 ms- Curva con muelle
cubic-bezier(0.34, 1.46, 0.44, 1), para lo que se endereza o salta- Entrada del hero
- 22 px de subida, 850 ms, escalonada de 50 en 120 ms
- Aparición al bajar
- 28 px de subida y fundido, con
animation-timeline: view() - Aparición de tarjeta
- Sube 26 px desde el 0,94 de escala, con muelle
- Deriva de una foto
- Se desplaza un 8 % dentro de su marco a lo largo del scroll
- Puntero encima de una tarjeta
- Se endereza a 0 grados y sube 10 px en 450 ms
- Pulsación
- Escala al 0,975 mientras se mantiene
- Flotación
- 11 px arriba y abajo cada 6 s, solo en marcas y pegatinas
- Carrusel de fotos
- Tres fotos, 24 s de vuelta, fundido de 1,4 s y sin controles
- Firma que se escribe
- Barrido del nombre y trazo del rasgo, los dos atados al scroll
- La cabecera se posa
- De transparente a crema entre el 84 % y el 100 % de las primeras 72 vh
- Franja de envíos
- 38 s por vuelta, una sola en toda la página
- Todo el movimiento se apaga con prefers-reduced-motion, incluida la franja.(recomendado)
- El contenido se ve aunque el navegador no soporte la animación.(recomendado)
- Escuchar el scroll con JavaScript: lo resuelve el timeline de CSS.(a evitar)
- El carrusel deja siempre visible su primera foto: sin movimiento se lee como una sola imagen.(recomendado)
- Bucles infinitos fuera de la franja, los carruseles y las marcas que flotan.(a evitar)
- Inclinaciones al azar: van fijadas por posición para que no bailen entre recargas.(a evitar)
Fotografía
Cuatro registros, y ninguno recortado sobre gris. El producto en gris plano fue el mayor problema de la web anterior: convertía pastelería artesana en catálogo.
Qué rota y qué no
El hero, el obrador y la banda de encargos son carruseles de tres fotos: son ambiente, y cambiarlos hace que la web parezca abierta hoy. El mostradorno rota nunca: cada foto va pegada a un nombre y a un precio, y una foto que cambia debajo de «Pastel Sacher · 2,60 €» es un error, no una gracia. La regla es esa: si la imagen está atada a un dato, se queda quieta.
Las fotos de esta maqueta son de relleno
Todo lo que se ve aquí está generado para poder enseñar el diseño, incluido el retrato del maestro, que no es José Borrachero. Antes de publicar hay que sustituirlas por fotografía real de la tienda, del obrador y del equipo, con la misma dirección descrita arriba.
- Espacio vacío real a un lado cuando encima va a ir texto.(recomendado)
- Velo degradado bajo cualquier texto sobre foto, hasta llegar a 4,5:1.(recomendado)
- Producto recortado sobre gris plano.(a evitar)
- Mezclar luz fría y luz cálida en una misma fila de producto.(a evitar)
- Etiquetas ni marcas de agua encima de la imagen.(a evitar)
Voz
De pueblo y sin pretensiones. Güerri lleva desde 1970 en la misma plaza: no necesita adjetivos, necesita concreción.
Así
«Por eso hay cosas que se acaban a mediodía. Preferimos que falte a que sobre.»
«Todo sale del horno a pocos metros del mostrador.»
«Cuéntanos qué se celebra.»
Así no
«Repostería artesanal en cada creación.»
«Una experiencia que despierta los sentidos.»
«Nuestros pasteles son una verdadera obra de arte.»
Los tres de la derecha son de la web anterior. Describen cualquier pastelería del mundo, y por eso no describen esta.