Sistema de diseño — Farmacia Óptica Marcos

Cada bloque tiene dos partes: docs (caja blanca con etiqueta 📘 — Bender explicando) y vista web (marco oscuro con cinta 🎨 — así se ve de verdad sobre cream). Si ves gris/blanco, soy yo hablando. Si ves cream, es la web.

Container 1140px Tipografías Fraunces · Inter Espaciado múltiplos de 8 Accesibilidad WCAG AA

01 ·

Paleta y contraste

Qué es

Los 12 colores que usa la web. Divididos en fondos, tinta, verde (farmacia + acciones), mostaza (acento óptica) y estados.

Cuándo usar cada uno

--cream fondo por defecto de toda la web.
--cream-alt bandas alternas para romper monotonía.
--verde-900 SOLO botones primarios y CTAs.
--mostaza SOLO acento óptica (bordes, iconos, badges outline). NUNCA fondo grande ni botón.
--nogal headings y texto secundario.

Fondos

--cream#EFE5D0
fondo base

--cream-alt#E5D9BE
banda alterna

--verde-50#E4EDE3
fondo farmacia

--mostaza-50#F4E9CC
fondo óptica

Tinta y acentos

--tinta#1F2A24
14.2:1 AAA

--nogal#5A4632
7.1:1 AAA

--verde-900#1F4A2E
8.4:1 AAA

--verde-700#2E6B43
5.6:1 AA

--mostaza#9C6E1A
4.9:1 AA

--borde#D9CFBC
solo líneas

Combinaciones permitidas

Texto	Sobre	Muestra	Ratio	AA	AAA	Uso real
tinta	cream	Texto cuerpo	13.6:1	OK	OK	Body de toda la web
nogal	cream	Heading	6.8:1	OK	OK	H1/H2/H3
cream	verde-900	Botón primario	8.1:1	OK	OK	CTA primario
nogal	cream-alt	Heading banda	6.2:1	OK	OK	Bandas alternas
mostaza	cream	Badge óptica	4.7:1	OK	NO	Solo badges/iconos
mostaza	tinta	PROHIBIDO	2.9:1	NO	NO	Nunca usar

🎨 VISTA WEBasí se ve sobre cream real

Cuatro generaciones cuidando Cangas

Desde 1870 atendemos a los vecinos del valle. Farmacia familiar, óptica desde 1984, y la misma manera de hacer las cosas.

Texto cuerpo en Inter 16px sobre cream. Headings en Fraunces nogal. Enlaces como éste en verde-900.

02 ·

Tipografía

Familias

Fraunces (serif, headings — da carácter de oficio) e Inter (sans, body + UI). Ambas Google Fonts.

Headings: Fraunces 500 · color --nogal · line-height 1.2
Body: Inter 400 · color --tinta · line-height 1.6 · max 62ch
UI / botones: Inter 500

Escala

H1Fraunces 500 · 40px · 1 por página · titular hero

H2Fraunces 500 · 28px · entradilla de sección

H3Fraunces 500 · 20px · subtítulos dentro de sección

LeadInter 400 · 18px · primer párrafo de cada sección

BodyInter 400 · 16px · texto normal

SmallInter 400 · 14px · pies, legales, metadatos

Notas para Elementor

Site Settings → Typography: fijar estos tamaños como global.
Custom Fonts: Fraunces e Inter desde Google Fonts.
No usar la fuente por defecto de Elementor en ningún sitio.

🎨 VISTA WEBtipografía real

Cuatro generaciones cuidando Cangas

Lead 18px Inter. Frase que resume la sección.

Atención farmacéutica desde 1870

Body 16px Inter. Cuatro generaciones de la familia Marcos llevan atendiendo a los vecinos del valle desde el siglo XIX.

Servicios farmacéuticos

Body que sigue al H3. Mantén max-width 62ch para líneas cómodas.

03 ·

Espaciado y rejilla

Sistema 8px

Todo espaciado (margins, paddings, gaps) es múltiplo de 8.

8

gap badge ↔ texto

16

padding interno card pequeña

24

gap entre cards

32

padding interno sección

48

separación entre bloques

64

padding vertical sección grande

96

separación entre secciones de página

Container

Ancho máximo 1140px centrado.
Padding lateral móvil 24px.
NO secciones full-width.

04 ·

Botones

Tres tipos, jerarquía clara

Primario: Acción principal. UNO por bloque. Verde-900 + texto cream.
Secundario: Alternativa. Outline nogal sobre cream.
Fantasma: Enlace destacado en texto. Subrayado verde-900.

Specs

Padding 12px 22px · radius 2px (oficio, no app moderna).
Hover primario → verde-700 · secundario invierte.
Focus: outline 2px --focus offset 2px.

🎨 VISTA WEB

Llamar a la farmacia Cómo llegar Ver todos los servicios →

05 ·

Badges

Para etiquetar tipo de contenido

Farmacia verde-700 sólido sobre cream.
Óptica outline mostaza (la mostaza nunca rellena).
Historia / familia nogal sólido + texto cream.

🎨 VISTA WEB

Farmacia Óptica Desde 1870

06 ·

Fondos de sección

Cuatro fondos

cream por defecto (70% de la web).
cream-alt para romper ritmo cada 2-3 secciones.
verde-50 sección farmacia (servicios).
mostaza-50 sección óptica (servicios).

Nunca dos fondos distintos juntos sin 64px de padding vertical interno mínimo.

🎨 VISTA WEBcream

Sección estándar

Lo que ves en el 70% de la web.

🎨 VISTA WEBcream-alt

Banda alterna

Para romper ritmo vertical.

🎨 VISTA WEBverde-50 · farmacia

Servicios farmacéuticos

Fondo de la sección Farmacia.

🎨 VISTA WEBmostaza-50 · óptica

Servicios de óptica

Texto sobre este fondo siempre tinta (12.8:1), nunca mostaza.

07 ·

Tarjetas de servicio

Grid 3 columnas desktop, 1 móvil

Fondo blanco, borde 1px --borde, padding 20px, radius 2px.
Título H3 Fraunces 20px nogal. Body Inter 14px nogal.
CTA fantasma al final.
NO sombras. NO animaciones bruscas en hover.

🎨 VISTA WEB

Dermofarmacia

Asesoramiento en cuidado de la piel.

Saber más →

Ortopedia

Plantillas, fajas, productos ortopédicos.

Saber más →

Control glucémico

Seguimiento para personas diabéticas.

Saber más →

08 ·

Navegación

Cabecera simple, sin hamburguesa hasta <768px

Fondo cream + borde inferior 1px --borde.
Logo Fraunces 18px nogal a la izquierda.
5 enlaces a la derecha en Inter 14px tinta.
Hover: verde-900.

🎨 VISTA WEB

Farmacia Óptica Marcos

09 ·

Faldón Kit Digital (obligatorio)

Requisito de justificación

Aparece en TODAS las páginas, antes del footer normal.
4 logos: UE · NextGenerationEU · Plan Recuperación · Kit Digital.
Altura logos 40-50px, gap 24px, alineados verticalmente.
Texto reglamentario Inter 11px nogal, line-height 1.5.
Fondo cream o blanco, separador superior 1px --borde.

🎨 VISTA WEB

UE 50px

NextGenEU 50px

Plan Recuperación 50px

Kit Digital 50px

Proyecto financiado por la Unión Europea — NextGenerationEU. Esta web ha sido desarrollada en el marco del programa Kit Digital, financiado por el Plan de Recuperación, Transformación y Resiliencia, a través de los fondos NextGenerationEU.