Doc 06 · v1.0 · Abril 2026 · Confidencial
← Índice

Documento 06 · Fase 02 · Play! Board Game Store

Brief
Creativo

La síntesis de todos los documentos anteriores en una sola dirección. La frase norte que filtra cada decisión de diseño. Las decisiones irrevocables que el cliente aprueba y no puede deshacer sin scope adicional.


Sección 01

La frase norte

Dirección del proyecto

La tienda digital de Play! convierte al comprador de Lima — desde el que no sabe qué elegir hasta el coleccionista que busca una expansión específica — en un cliente que compra o reserva sin fricción, mostrando el catálogo más completo de juegos de mesa en Perú con el respaldo visible de 4 tiendas físicas reales.

Esta frase es el filtro. Si una decisión de diseño, copy o funcionalidad no ayuda a que ese comprador compre o reserve con más facilidad — la decisión se revisa.

La frase norte no es el slogan de Play! ni su misión de marca. Es la dirección de este proyecto específico. Nace de la combinación de las tres personas identificadas en Doc 02 (Andrea, Sebastián, Mathias), el flujo de conversión del Doc 03 y el posicionamiento competitivo del Doc 01.


Sección 02

Decisiones irrevocables

Al aprobar este brief, estas 5 decisiones quedan cerradas. Cambiar cualquiera de ellas después de esta aprobación implica scope adicional, porque cada una es la base de un sistema mayor.

Decisión irrevocable 01
Paleta de colores
La paleta aprobada en Doc 04 es la base de todos los componentes visuales del sitio. Cada token CSS del theme apunta a estos valores.
Si cambia: rehacer todos los componentes del theme, las imágenes compuestas, los badges de producto y los emails de Klaviyo. Estimado: +30–40% del tiempo de build.
Decisión irrevocable 02
Tipografía del sistema
Cormorant Garamond (títulos serifs) + DM Mono (labels/UI) + Barlow (cuerpo). Las tres fuentes están integradas en el theme como variables CSS y en todos los documentos de Fase 02.
Si cambia: rehacer el sistema de escala tipográfica, todos los heading styles y los documentos HTML de Fase 02. Estimado: +15–20% del tiempo de build.
Decisión irrevocable 03
Plataforma: Shopify Basic
Toda la arquitectura técnica — colecciones automáticas, metafields, apps seleccionadas, flujos de pago Izipay + PowerPay, integración V-CHAIN — está diseñada para Shopify. El análisis de plataformas está documentado en Doc 05.
Si cambia: rehacer el proyecto desde cero. No hay migración parcial posible entre plataformas de e-commerce.
Decisión irrevocable 04
Arquitectura de páginas (Doc 03)
El sitio tiene la estructura aprobada en Doc 03: Home, Colecciones (con filtros), Encuentra tu Juego, Nuestras Tiendas, Eventos, Blog, Sobre Nosotros, Contacto, FAQ + páginas legales. Cada página tiene un template Shopify.
Si se agrega una página: scope adicional. Cada página nueva implica template, copy, SEO y QA. El presupuesto actual cubre las páginas del Doc 03, no más.
Decisión irrevocable 05
Header: doble fila blanca + CTA "Encuentra tu Juego →"
El header blanco de doble fila (56px logo/search + 40px nav) es la estructura base del theme. El CTA "Encuentra tu Juego →" es el punto de entrada principal para Andrea, la persona de mayor volumen. La razón está documentada en Doc 04 (Sección 6).
Si cambia la estructura del header: rehacer el template base y todos los estados responsivos. Si se elimina el quiz: se pierde el flujo de conversión de la persona más numerosa del catálogo.

Sección 03

Paleta aprobada

Estos son los valores exactos. En el código del theme, los tokens CSS se llaman como se indica. Nunca usar valores aproximados — siempre los HEX exactos.

Colores primarios de marca

Play Red --play-red: #E42528

Botones, CTAs, acción, urgencia. El acento dominante.

Play Black --play-black: #0A0A0D

Footer, hero bg, texto del logo. Solo donde el negro tiene peso.

Play Paper --play-paper: #F5F3EE

Fondo cálido. Backgrounds, cards, surfaces secundarias.

White #FFFFFF

Header, body del sitio, cards de producto. La base limpia.

Colores de sistema (texto y estructura)

Ink --ink: #0E0E0E

Texto corrido, nombres de producto, precios.

Mid --mid: #8A7F72

Texto secundario, labels, placeholders, metadatos.

Rule --rule: #C8BFA8

Líneas divisoras, borders sutiles, separadores.

Colores funcionales del e-commerce

NombreHEXUso específico
Green#21C063Badge "En stock" · Confirmación de pedido · Estado activo
Amber#D97706Badge "Últimas unidades" · Advertencia de stock bajo
Pre-order Blue#2563EBBadge "Próximamente" · Estado de pre-order
Nota sobre excepciones aprobadas: Los íconos de redes sociales en el footer (Instagram, TikTok, Facebook) usan Simple Icons SVG en negro/blanco — son los únicos íconos de marca admitidos. Todo el resto del sistema usa Lucide SVG. Esta excepción está documentada en Doc 04.

Sección 04

Sistema tipográfico

Títulos y display
Cormorant Garamond
H1, H2, nombres de sección, precios grandes, títulos destacados. Serif con personalidad — diferencia Play! de un e-commerce genérico.
Wingspan
S/280
Labels, UI, código
DM Mono
Etiquetas, precios en tabla, SKUs, badges de metadatos, código de producto, numeración de docs, announcement bar.
2–4 jugadores · 45 min · +10
S/280 · 3×S/93
Cuerpo y navegación
Barlow / Poppins
Texto corrido, descripciones de producto, copy de secciones, nav items, botones. Barlow en el theme del sitio; Poppins en documentos Fase 02.
Estrategia de colocación de aves. Construye tu refugio, acumula huevos y balancea recursos.
Display condensado (nombre de marca)
Barlow Condensed · 600
Exclusivamente para el nombre "PLAY!" en el logo, announcement bar y contextos donde la marca se escribe en display grande.
PLAY!

Sección 05

Tono del copy

El tono en una frase

"El experto que trabaja en la tienda — conoce el catálogo de memoria, recomienda con criterio y habla como alguien que realmente juega, no como un e-commerce genérico."

El tono de Play! es cercano y específico. No habla de "productos de calidad" ni de "atención personalizada". Habla de juegos reales, mecanismos concretos, experiencias que sus clientes conocen. La autoridad viene del conocimiento del hobby, no de frases corporativas.

Ejemplos de tono — bien vs. mal

ContextoNo asíSí así
Hero H1 Tu tienda de juegos de confianza en Lima Donde los juegos de mesa son en serio
Quiz CTA Déjanos ayudarte a encontrar el producto ideal ¿No sabes qué juego buscar? Responde 4 preguntas.
Stock agotado Producto temporalmente no disponible Agotado — avísame cuando llegue
Pre-order Reserve su producto con anticipación Sé el primero en tenerlo — reserva ahora
Descripción de producto Juego de mesa para 2-6 jugadores de excelente calidad Para 2–6 jugadores · 45 min · A partir de 10 años. El juego de colocar aves más popular de los últimos 5 años.
Tiendas físicas Contamos con cuatro puntos de venta en Lima 4 tiendas en Lima — entra, pregunta, prueba antes de comprar.
Newsletter footer Suscríbase para recibir nuestras novedades Entérate primero — torneos, novedades y ofertas.

Reglas de tono que no se rompen

1. Usar "tú" (no "usted", no "vos"). Lima es "tú".
2. Mencionar siempre el dato concreto: jugadores, minutos, edad mínima, precio en cuotas.
3. No inventar adjetivos de calidad. Si es bueno, decir por qué es bueno.
4. Los testimonios son de personas reales con nombre — nunca fabricados.
5. Las 4 tiendas físicas son el mayor diferenciador de confianza en Perú. Mencionarlas donde ayude.
6. No usar emojis en copy del sitio. Reservar los íconos para los elementos de UI (Lucide SVG).

Sección 06

Las tres personas — el filtro de cada decisión

Cada decisión de diseño, copy o funcionalidad se valida contra estas tres personas. Si una feature no ayuda a ninguna de ellas, se elimina. (Detalle completo en Doc 02.)

PersonaSituación de compraLo que necesita del sitioCTA principal
Andrea
32 años · mamá
No sabe qué comprar. Busca "juego para niños" y llega sin contexto. Guiarla rápido. El quiz de 4 preguntas es su portal. Las tiendas físicas le dan confianza. "Encuentra tu Juego"
Sebastián
28 años · gamer
Sabe exactamente qué quiere. Busca el nombre del juego, precio, stock y cuotas. Search que funcione. Precio + cuotas PowerPay visible. Reviews de otros jugadores. Search bar
Mathias
24 años · coleccionista
Busca preventa de una expansión. Viene desde Instagram o WhatsApp con un link. Página "Próximamente" con botón Reservar. Badge "100% Original · Distribuidor Autorizado". "Reservar"

Sección 07

Cómo usar este documento

El brief creativo es el argumento racional cuando hay desacuerdo subjetivo en la revisión. Si en el proceso de build el cliente pide algo que contradice las decisiones irrevocables, la respuesta es:

"Miremos el brief que aprobamos juntos. [Decisión X] quedó definida porque [razón]. Lo que estás pidiendo va en dirección contraria. Si queremos hacer ese cambio, es scope adicional porque implica rehacer [sistema Y]. Si hay algo específico que no te está gustando, lo conversamos — puede haber una solución dentro del alcance aprobado."

El brief no es una restricción arbitraria — es la documentación de las decisiones que el cliente ya tomó, con sus consecuencias explicadas. Al aprobarlo, el cliente entiende qué puede pedir en revisión y qué implica scope adicional.

← 05 · Plataforma Digital Siguiente 07 · Copy del Sitio →