# Design Brief — Peninsula Fitness (contrato de diseño) > **Cómo usar este archivo:** copia y pega secciones de este documento en tu > herramienta de diseño (Claude, Canva, Figma, etc.) como instrucciones. Está > escrito para que cualquier diseño que produzcas **encaje sin reescribir el > código**. Si quieres cambiar un token (color, tipografía), cámbialo aquí o > dímelo y yo lo conecto en `src/styles/global.css`. Este documento es la fuente de verdad del diseño. El código ya implementa estos tokens como variables CSS en `:root` (ver `src/styles/global.css`). --- ## 1. Marca y tono - **Producto:** pisos de caucho de alta resistencia para gimnasios, boxes, estudios, home gyms y proyectos acústicos. Venta en México. - **Personalidad visual:** industrial premium · deportivo profesional · limpio, sólido y confiable. - **Estética:** modo oscuro por defecto, contrastes fuertes, botones claros y grandes, fichas técnicas ordenadas, foco en conversión. - **Mensajes ancla:** cotización inmediata · envío a todo México · factura electrónica · material reciclado certificado · mejor precio directo que marketplace · asesoría gratuita. --- ## 2. Reglas NO negociables (afectan el diseño) 1. **Mobile-first.** Diseña primero a **375px de ancho**. Si algo se ve bien en desktop pero mal en móvil, está incompleto. Layout de una sola columna en móvil. 2. **Targets táctiles ≥ 44px** de alto (botones, inputs, chips clicables). 3. **Contraste accesible** (WCAG AA): texto normal ≥ 4.5:1, texto grande ≥ 3:1. 4. **Inputs con teclado correcto** en móvil: teléfono, email, numérico. 5. **El cotizador es el centro de conversión.** Su flujo y sus dos CTAs no cambian de orden (ver §6). 6. **No inventar campos ni pasos** que rompan el contrato de datos del cotizador o del CRM. 7. **No eliminar** el aviso "Cotización estimada. Un especialista validará disponibilidad, envío e instalación." --- ## 3. Tokens de diseño (estado actual — editables) Estos son los valores vivos en el código. Diséñalos con estos hex/medidas, o propón nuevos y los actualizo en un solo lugar. ### Color (tema oscuro) | Token | Hex | Uso | |---|---|---| | `--pf-bg` | `#0e0f12` | Fondo de página | | `--pf-surface` | `#16181d` | Tarjetas | | `--pf-surface-2` | `#1e2129` | Inputs, superficies secundarias | | `--pf-border` | `#2a2e38` | Bordes y divisores | | `--pf-text` | `#f4f5f7` | Texto principal | | `--pf-text-dim` | `#a6adbb` | Texto secundario | | `--pf-accent` | `#2e2ed6` | **Azul de marca** — fondo de CTAs, acentos | | `--pf-accent-700` | `#3636c1` | Hover del acento (más oscuro) | | `--pf-accent-300` | `#8a8aff` | Texto/acento sobre fondo oscuro (cumple AA) | | `--pf-success` | `#2ecc71` | "Cotización inmediata", éxito (semántico) | | `--pf-warning` | `#f1c40f` | "Requiere especialista", avisos (semántico) | | WhatsApp | `#25d366` | Botón de WhatsApp | > **Colores oficiales de marca:** `#2e2ed6` y `#3636c1` (azul/índigo). El acento > se usa como **fondo** de botones con texto blanco (alto contraste). Para texto > en color de acento sobre el fondo oscuro usa `--pf-accent-300` (#8a8aff), que > sí pasa contraste AA. Success/warning son colores semánticos, no de marca. > > Si quieres un tema claro adicional, indícalo: se puede agregar como variante > sin tocar la estructura. ### Tipografía — fuentes oficiales - **Títulos:** **Barlow Condensed** (jugando con las negritas para resaltar; pesos 600/700/800, normalmente en MAYÚSCULAS para el look deportivo/industrial). - **Cuerpo y UI:** **Barlow** (pesos 400/500/600/700). - Ya están **auto-hospedadas** en la app vía `@fontsource` (sin Google Fonts ni cambios de CSP). En el mockup HTML se cargan desde Google Fonts. - Variables: `--pf-font-head` (Barlow Condensed) y `--pf-font` (Barlow). - **Escala (móvil):** - H1 hero: `clamp(2.1rem, 8.5vw, 3.6rem)`, peso 800, MAYÚSCULAS - H1 sección / H2: ~1.5rem, peso 700–800, Barlow Condensed - Cuerpo: 1rem (16px), línea 1.5, Barlow - Texto secundario: 0.85–0.9rem - Etiquetas/eyebrow: 0.72rem, mayúsculas, tracking 0.06em, color `--pf-accent-300` - Los títulos en Barlow Condensed **no** llevan tracking negativo (ya es estrecha). ### Espaciado, radios y sombra - **Radios:** `--pf-radius: 12px` (tarjetas), `--pf-radius-sm: 8px` (botones/inputs), `999px` (chips/badges). - **Ancho máximo de contenido:** `--pf-maxw: 1120px`, padding lateral 16px. - **Sombra:** `0 8px 30px rgba(0,0,0,0.35)`. - **Ritmo de espaciado** sugerido: múltiplos de 4 (8, 12, 16, 24, 32, 48). ### Breakpoints `560px` (grid 2 col) · `640px` (botones inline) · `768px` (nav desktop, KPIs 5 col) · `900px` (grid 3–4 col). --- ## 4. Inventario de componentes (con estados) Diseña estos componentes; el código ya los tiene como clases reutilizables. - **Botón primario** (`.btn-primary`): fondo acento, texto blanco. Estados: normal, hover (`--pf-accent-700`), active (baja 1px), disabled. - **Botón secundario** (`.btn-secondary`): transparente, borde, texto claro. - **Botón WhatsApp** (`.btn-whatsapp`): verde `#25d366`. - **Input / Select / Textarea**: alto 48px, fondo `--pf-surface-2`, borde, foco con outline acento. Estados: normal, focus, error (texto rojo `#ff7a8a`). - **Tarjeta** (`.card`): superficie + borde + radio 12px. - **Tarjeta de producto** (`.product-card`): eyebrow de categoría (acento), título, meta (espesor·color·dimensiones), badge, precio "$ + IVA". - **Badge**: `badge-quotable` (verde, "Cotización inmediata") y `badge-specialist` (ámbar, "Requiere especialista"). - **Chip** (`.chip`): píldora de filtro/categoría; estado activo en acento. Scroll horizontal en móvil. - **Header** (`.site-header`): sticky, logo "PENINSULA·FITNESS", nav (desktop), botón "Cotizar". - **Footer** (`.site-footer`): claims de marca. - **KPI** (`.kpi`): número grande + etiqueta. Grid 2 col (móvil) / 5 col (desktop). - **Tabla de datos** (`.table.data`): para CRM; en móvil va dentro de `.table-wrap` con scroll horizontal (no comprimir columnas). - **Notice** (`.notice`): bloque de aviso/estimado. Para cada componente, entrega idealmente: **normal, hover, focus, disabled, error** (los que apliquen). --- ## 5. Páginas a diseñar (móvil primero) y su objetivo 1. **Home `/`** — vender y empujar a cotizar. Hero con H1 + subcopy + 2 CTAs ("Cotizar ahora" primario, "Ver catálogo" secundario), chips de categorías, grid "Más cotizados", bloque "¿No estás seguro?" → especialista. 2. **Catálogo `/productos`** — buscador, chips de categoría (filtro), grid de `.product-card`. Estado vacío. 3. **Ficha de producto `/productos/[slug]`** — categoría, título, badge, precio, 2 CTAs, descripción, tabla de especificaciones, relacionados. 4. **Cotizador `/cotizar`** — el más importante (ver §6). 5. **Gracias `/gracias/[id]`** — folio, resumen, siguiente paso. 6. **CRM login `/crm/login`** — minimal, robots noindex. 7. **CRM dashboard `/crm`** — KPIs arriba + tabla de oportunidades recientes. 8. **CRM tablas** (pipeline, leads, oportunidades, cotizaciones, productos) — nav de chips + tablas con scroll horizontal. --- ## 6. Cotizador — flujo bloqueado (no alterar el orden) Diseña la UI, pero respeta esta secuencia y estos elementos: - **Paso 1 (cálculo):** Producto (select) → m² (numérico) → Código postal (5 dígitos) → Uso del espacio (select) → botón **"Calcular cotización"**. Indicador "Paso 1 de 2". - **Paso 2 (resultado + datos):** primero el **resumen estimado** (piezas/rollos sugeridos, m² cubiertos, subtotal, IVA 16%, "Envío: pendiente de confirmar por CP", **Total estimado**), el **aviso de especialista**, y luego el formulario de contacto: Nombre, Empresa (opcional), WhatsApp, Correo. - **CTAs finales, en este orden:** **"Levantar orden"** (primario) y **"Hablar con especialista"** (secundario). Más un "← Modificar datos". - Mantén el resultado visible/sticky tras calcular en móvil. --- ## 7. Accesibilidad (obligatorio) - Contraste AA en todos los textos sobre fondos oscuros y sobre el acento rojo. - Foco visible en todos los interactivos (outline claro). - No comunicar estado solo con color (los badges ya llevan texto). - Tamaños táctiles ≥ 44px y separación suficiente entre acciones. --- ## 8. Qué NO cambiar (para que el código siga funcionando) Puedes rediseñar 100% lo visual, pero **no cambies**: - El **orden y los textos de los CTAs** del cotizador (§6). - Los **textos de estado** de productos ("Cotización inmediata" / "Requiere especialista"). - El **aviso legal/estimado** del cotizador. - La **estructura de pasos** del cotizador (2 pasos) y los campos que captura. - Las **rutas/secciones** del CRM (Dashboard, Pipeline, Leads, Oportunidades, Cotizaciones, Productos). Si crees que algo de esto debe cambiar, márcalo como propuesta y lo evaluamos (puede tener impacto en datos/medición). --- ## 9. Cómo entregarme el diseño De más fácil a más completo de integrar: 1. **Tokens + capturas** (lo mínimo útil): paleta final en hex, tipografía elegida, y screenshots por pantalla en móvil. Yo lo traduzco a CSS. 2. **HTML + CSS** (lo ideal si la herramienta lo exporta): lo adapto a los componentes Astro existentes casi 1:1. 3. **Figma / enlace**: dame los valores (colores, tamaños, espaciados) o el link con permisos de inspección. 4. **Imágenes/PNG de referencia**: sirven como guía; reconstruyo en código. En todos los casos, indícame: **qué tokens cambian** respecto a §3 y **qué componentes/páginas** tocaste. Con eso actualizo `global.css` (un solo lugar) y los componentes afectados, y reviso que no se rompan reglas (§2) ni el flujo del cotizador (§6).