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 tres neutros cálidos. El blanco frío hacía que la web pareciera una clínica; la crema la devuelve al obrador. 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-cremaBanda del mostrador y tarjetas de reseña.
Pistacho
--color-pistachoSuperficie alterna: historia y pie de página.
Línea
--color-lineaFiletes y bordes de campos. Nunca para texto.
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, crema y pistacho para dar ritmo a las secciones.(recomendado)
- Invertir una sección a modo oscuro en mitad de una página clara.(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.
Cada mañana
Todo sale del obrador
Una segunda tienda en el ensanche
Todo se elabora aquí, a mano y a diario.
IVA incluido
La carta
recién hecho
- 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: 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. Solo la foto principal, 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 es lo único escrito a mano y lo único que va torcido 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.
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 decorativas
- 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)
- Bucles infinitos fuera de la franja y de las dos marcas del hero.(a evitar)
- Inclinaciones al azar: van fijadas por posición para que no bailen entre recargas.(a evitar)
Fotografía
Tres 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.
- 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.