00Portada

Sogno Studio — Portada del documento1600 px

Mesa de madera con pestiños, rosquillas, pastas de almendra, una tartaleta de limón y un tarro de miel — Portada del documento1600 px

Resumen del proyecto y mapa de la web1600 px

00 Portada · Resumen

Resumen del proyecto

Qué es Miel y Limón, para quién es la web, qué tiene que conseguir y cómo está organizada. Es el punto de partida de las decisiones de diseño de los tableros siguientes.

El cliente

Repostería tradicional andaluza en Bollullos Par del Condado (Huelva). Vende en su tienda y por encargo, de lunes a sábado de 08:00 a 14:30. No tenía web propia.

Objetivos de la web

01Que quien busque repostería en la zona la encuentre de forma rápida y sencilla.
02Abrir el apetito y transmitir la tradición y el cariño de la marca.
03Conseguir encargos: formulario, teléfono y WhatsApp siempre a mano.

Para quién

Vecinos de la zona Quien prepara una celebración Celíacos e intolerantes

Tecnología

Construcción: Astro 7 + Tailwind CSS 4
Alojamiento: Cloudflare Pages
Formulario: Envío por email con Resend
Cookies: Ninguna no esencial · sin aviso

Mapa de la web

/ Inicio · una sola página

01Portada

02Productos

03Encargos

04Nosotros

05Cifras

06Galería

07Contacto

08Pie

Siempre visibles

Menú fijo arriba, que se vuelve rojo al bajar, y botón de WhatsApp abajo a la derecha, que se abre como una receta.

Páginas aparte · enlazadas desde el pie

/aviso-legal/ /privacidad/ /cookies/ /gracias/

Decisiones clave

Rojo y miel

Los colores salen del logo y hacen de cada sección un bloque reconocible.

Una sección, una pantalla

En ordenador cada sección mide justo la altura de la pantalla.

Nostalgia con movimiento

Álbum, receta antigua y gotas de miel; todo se mueve, pero respeta a quien lo desactiva.

Privacidad primero

Sin cookies que pedir, fuentes propias y mapa solo a petición.

01Guía de estilo

Colores1600 px

01 Guía de estilo · Colores

Colores

Los dos colores del logo mandan: un rojo intenso y un amarillo miel. Los fondos son cremas cálidos en lugar de blanco puro, y un marrón tostado se encarga del texto y de la sección más oscura.

Paleta de marca

8,1 : 1Aa

Rojo

primario

#9D1927

Menú al bajar, Encargos, pie, botón de enviar y titulares a mano.

10,7 : 1Aa

Rojo oscuro

primarioOscuro

#7C121D

Botón de enviar al pasar el cursor.

7,4 : 1Aa

Miel

acento

#F9B234

Botón principal, iconos, trazo del menú, Cifras y WhatsApp.

13,6 : 1Aa

Marrón

texto

#3B2A24

Texto principal, fondo de la Galería y velo de la foto de portada.

7,2 : 1Aa

Marrón suave

textoSuave

#6A5248

Textos secundarios y entradillas.

13,2 : 1Aa

Crema

fondo

#FFFBF4

Fondo general y sección de Productos.

12,2 : 1Aa

Crema alterno

fondoAlterno

#FDF1D8

Fondo de Nosotros y Contacto.

Reparto por secciones

Portada Productos Encargos Nosotros Cifras Galería Contacto Pie

Cada sección cambia de color para que al bajar se note el paso de una a otra, sin necesidad de líneas ni separadores.

Contraste comprobado

Blanco sobre rojo: 8,1 : 1 · texto de cualquier tamaño
Marrón sobre miel: 7,4 : 1 · texto de cualquier tamaño
Marrón suave / crema: 7,0 : 1 · texto de cualquier tamaño
Rojo sobre miel: 4,4 : 1 · solo letra grande (Cifras, titulares)

Tipografía1600 px

01 Guía de estilo · Tipografía

Tipografía

Tres familias de Google Fonts, servidas desde el propio dominio para no conectar con Google. Una serif con carácter para los titulares, una redondeada y amable para leer, y una manuscrita que aporta el toque personal. La letra del logo, Valerie Hand, no está en Google Fonts; por eso el logo se usa siempre como dibujo.

Titulares600 · 700

Fraunces

ABCDEFGHIJKLMNÑOPQRSTUVWXYZ
abcdefghijklmnñopqrstuvwxyz
0123456789 · ¿?¡! áéíóú

Serif blanda y golosa. Titulares, menú y cifras.

Texto400 · 500 · 600 · 700

Nunito

ABCDEFGHIJKLMNÑOPQRSTUVWXYZ
abcdefghijklmnñopqrstuvwxyz
0123456789 · ¿?¡! áéíóú

Redondeada y clara. Párrafos, botones y antetítulos.

A mano500 · 600 · 700

Caveat

ABCDEFGHIJKLMNÑOPQRSTUVWXYZ
abcdefghijklmnñopqrstuvwxyz
0123456789 · ¿?¡! áéíóú

La letra de la receta. Hoja, pies de foto y «Haz tu pedido ahora».

Escala tipográfica · tamaños medidos a 1440 × 900 / 390 px

Cifra

Quien prueba, repite

90%

Fraunces 700
122 / 96 px

Titular a mano

Nosotros y Cifras

Quien prueba, repite

Caveat 700
77–117 / 48–60 px

Titular de portada

H1 · solo uno

Repostería

Fraunces 700 · 72 / 36 px
interlínea 1,08 · −2,5 %

Título de sección

Nuestros dulces

Fraunces 700 · 36 / 30 px
Encargos: 67 / 36 px

Subtítulo

H3 · tarjetas y pasos

Pestiños con miel

Fraunces 700
30–35 / 24 px

Hoja de receta

Nosotros

Hay dulces que no se olvidan.

Caveat 500 · 24 / 26 px
crece con la pantalla

Frase de pedido

Menú

Haz tu pedido ahora

Caveat 700 · 30 / 22 px

Menú

Enlaces

Productos · Encargos · Nosotros · Galería · Contacto

Fraunces 600 · 18 px

Párrafo

Cuerpo de texto

Dulces de los que desaparecen antes de que se enfríe el café.

Nunito 400 · 16 / 18 px
interlínea 1,5

Botón

Acciones

Haz tu encargo

Nunito 600 · 16 px

Antetítulo

Encima de los títulos

Lo que hacemos

Nunito 600 · 14 px
mayúsculas · +10 %

En Encargos, Nosotros y Cifras la letra crece y encoge con la altura de la pantalla, para que cada sección ocupe una pantalla justa sin sentirse vacía ni comprimida.

Retícula, espaciado y tamaños de pantalla1600 px

01 Guía de estilo · Estructura

Retícula y espaciado

Un contenedor central ordena la página y cada sección reparte su contenido como le conviene. En ordenador, cada sección mide exactamente una pantalla; en el móvil todo pasa a una columna y las secciones largas ocupan lo que necesitan.

Dos anchos de contenido, a 1920 px de pantalla

1.152 px · normal

Menú, portada, productos, galería, contacto y pie

hasta 1.408 px (90 % de la pantalla) · ancho

Encargos, Nosotros y Cifras, para que el contenido grande respire

Reparto dentro de cada sección

Encargos y Contacto
2 columnas iguales

Nosotros
fotos 2 · hoja 3

Cifras
3 columnas

Galería
mosaico de 4 × 3

Formas

Botones
cápsula

Tarjetas
24 px

Formulario
y mapa · 16 px

Polaroid
recta, girada

Tamaños de pantalla

Móvil: Menos de 640 px · una columna · menú de 88 px
Tableta: 640–1.023 px · márgenes de 32 px · menú de 96 px
Ordenador: Desde 1.024 px · menú de 112 px
Pantalla justa: Desde 1.024 × 640 px: cada sección se ajusta a la altura
Pantalla alta: Desde 832 px de alto: más aire y detalles, como el icono del aviso de celíacos

Altura de cada sección

Medida: Al menos 100 % de la pantalla
Espacio arriba: Alto del menú + 24 px, para que no tape nada
Espacio abajo: 32 px
Comprobado: 1366 × 768, 1440 × 900 y 1920 × 1080: justo una pantalla
Límite conocido: A 1024 × 768, Contacto se pasa unos 10 px
En móvil: Al menos una pantalla; las largas crecen, de 1,1 a 2,6 pantallas

Al pulsar el menú

La sección queda encajada arriba del todo y su propio margen deja sitio al menú, de modo que siempre se ve entera.

Mesa con todos los dulces — Fotografía y materiales1600 px

Pestiños con miel — Fotografía y materiales1600 px

02Componentes

Logotipo1600 px

02 Componentes · Logotipo

Logotipo

El logo se extrajo como dibujo vectorial del archivo original de la marca, así que se ve nítido a cualquier tamaño. Tiene dos versiones de color: roja para fondos claros y miel para fondos oscuros o rojos. El dibujo del tarro también se usa solo como elemento decorativo.

Versión roja

Sobre crema, en la hoja de Nosotros y en las páginas legales.

Versión miel sobre rojo

En el menú al bajar y en el pie de página.

Versión miel sobre oscuro

En el menú sobre la foto de la portada.

Tamaños en el menú

80 px · ordenador

72 px · tableta

60 px · móvil

Dibujo del tarro

Marca de agua en Encargos, loseta de la Galería e icono de la pestaña del navegador.

Reglas

Formato: SVG, sin pérdida de calidad
Más pequeño: 56 px de alto (sello de la hoja)
Tipografía: Valerie Hand, solo dentro del logo

Botón redondo de WhatsApp, cerrado — Botones y enlaces1600 px

Botón de WhatsApp abierto como una receta — Botones y enlaces1600 px

Iconos1600 px

02 Componentes · Iconos

Iconos

Dibujos de línea con trazo de 2 px y puntas redondeadas, escritos dentro de la propia web: no dependen de librerías externas ni hacen peticiones extra. Toman el color del texto que los rodea, así que funcionan sobre cualquier fondo.

De repostería · propios del proyecto

miel

limón

rosco

galleta

tarta

sin gluten / lactosa

encargo

Contacto, interfaz y redes

teléfono

ubicación

reloj