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 teñidos de verde. Los neutros son fríos a propósito: el beige y el latón que pide por defecto una pastelería harían que el verde dejara de ser el color de la marca.
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,5:1 papel · 5,0:1 pistacho
Tinta
--color-inkTexto principal y fondo del modo oscuro.
17,4:1 sobre papel
Tinta suave
--color-ink-softPárrafos largos y texto secundario.
9,5:1 sobre papel
Tinta tenue
--color-ink-muteMetadatos, pies y etiquetas pequeñas.
5,5:1 papel · 5,0:1 pistacho
Papel
--color-paperFondo por defecto de toda la web.
Pistacho
--color-pistachoSuperficie alterna: historia, tarjetas de reseña y pie.
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 y pistacho para separar 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 y Instrument Sans para leer. 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
- Titulares de dos líneas como máximo, con corte decidido a mano.(recomendado)
- Párrafos limitados a 62 caracteres de ancho.(recomendado)
- 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
Un solo sistema de redondeo, y un ritmo vertical constante entre secciones.
--radius-surface. Fotos grandes y bandas.
--radius-tile. Celdas del bento y tarjetas.
--radius-field. Campos de formulario.
Todo lo pulsable: botones y controles redondos.
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, 80 px en escritorio
- Del título a su contenido
- 48 px
- Hueco del bento
- 12 px en móvil, 16 px en escritorio
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.
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
Discreto y con motivo. Cada animación responde a algo: una entrada, un puntero encima o un cambio de estado.
- Curva
cubic-bezier(0.16, 1, 0.3, 1), entre 200 y 300 ms- Aparición al bajar
- 28 px de subida y fundido, con
animation-timeline: view() - Puntero encima de una foto
- Escala al 1,04 en 600 ms
- Pulsación
- Escala al 0,975 mientras se mantiene
- Franja de envíos
- 46 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 en secciones que solo informan.(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)
- 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.