BrandBook

# SNOWBALL — DESIGN SYSTEM & BRAND GUIDELINES v1.8

## Identidad
- Nombre: Project Snowball, S.L.U. ("Snowball") · CIF B67745521
- Claim: "Passion for performance"
- Posicionamiento: Consultora growth marketing. Partner estrategico. Sistemas de crecimiento sostenibles para empresas digitales 1M-20M facturacion.
- Tono: Directo, sin postureo, orientado a negocio, ligeramente canalla. CEO a CEO. Nunca corporativo vacio. Numeros reales siempre.
- Web: agenciasnowball.com | hola@agenciasnowball.com
- Servicios: SEO estrategico, Paid Media, CRO, Analitica & Tracking, Growth Strategy, AI Architecture
- Modelos: Growth Retainer, Marketing de Emergencia, Implant (DAE), Proyectos puntuales
- Social: LinkedIn (principal)

## Paleta de colores

### Core
- Black: #0D0D0D (fondo principal, texto)
- Blue: #0094FF (CTAs, links, estados activos — siempre accent primario)
- Purple: #8F00FF (gradientes, acento secundario — nunca domina)
- White: #FFFFFF (fondos claros)
- Green: #16a34a (confirmacion, exito)
- Red: #FF3B30 (error, prohibido)

### Grises
- 900: #1A1A1A | 800: #262626 | 700: #404040 | 600: #525252
- 500: #737373 | 400: #A3A3A3 | 300: #D4D4D4 | 200: #E5E5E5 | 100: #F5F5F5

### Propuestas comerciales (variante)
- Lilac: #C4B5F4 (divisores, acentos)
- Purple Deep: #7C3AED (CTAs, badges)
- Lilac BG: #EDE9FD (fondos destacados)
- Gradient soft: linear-gradient(135deg, #f0f4ff, #f5f0ff 55%, #fdf0ff)

## Tipografia
Fuente unica: Inter (Google Fonts). Pesos: 200, 300, 400, 500, 600, 700, 800, 900.
Monospace: JetBrains Mono (codigo, datos tecnicos).
Prohibido: Arial, Helvetica, Roboto, Times, Poppins. Inter siempre en brand.

### Escala tipografica
- Display: 48-96px / 800-900 / ls -0.04em / lh 0.88
- H1: 32-80px / contraste light(200)+bold(700-900) / ls -0.03em
- H2: 24-44px / 600-700 / ls -0.02em
- H3: 14-16px / 700 / ls 0.1em / uppercase
- Label: 9-13px / 600-700 / ls 0.12-0.25em / uppercase
- Body: 15-16px / 400 (300 para texto largo) / lh 1.7-1.85
- Meta: 10-12px / 500

### Firma tipografica (clave de marca)
Titulares SIEMPRE combinan light (200/300) con bold (700/800/900) en la misma linea o bloque.
Esto crea la tension visual que define Snowball.
Ejemplo: "Passion" (w900, color principal) + "for performance" (w200, color atenuado).
En dark: bold blanco + light rgba(255,255,255,.4).
En light: bold negro + light gris (#737373).

## Gradientes

### Hero Dark (heros principales)
background: linear-gradient(145deg, #0A0A0A 0%, #0D1020 35%, #111128 55%, #0A0A0A 100%)
Overlay radial: radial-gradient(ellipse at 40% 50%, rgba(0,148,255,.12), rgba(143,0,255,.06) 40%, transparent 65%)

### Gradient Light (secciones intermedias)
background: linear-gradient(135deg, #f0f4ff, #f5f0ff 55%, #fdf0ff)

### Purple Deep (cards propuesta, case studies)
background: linear-gradient(135deg, #2d1b4e, #7C3AED)

### Reglas de gradientes
- Gradientes son decorativos, nunca fondo directo de texto sin contraste
- Radiales sobre hero dark: opacidad 10-28%
- Cards son siempre solidas (nunca degradado en cards)
- No mezclar Hero Dark + Gradient Light en la misma seccion

## Sombras (3 niveles)
- Nivel 1 (reposo): 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04)
- Nivel 2 (hover): 0 8px 40px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04)
- Nivel 3 (flotante): 0 8px 40px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.10)
- Dark mode: opacidades x2.5 + border 1px solid rgba(255,255,255,.07)

## Layout
- Breakpoints: mobile <768px | tablet ≥768px | desktop ≥1280px
- Contenedor: max-width 1200px
- Padding: 20px (mobile) | 48px 56px (tablet) | 56px 72px (desktop)
- Grid: auto-fill minmax(280px, 1fr), gap 12-16px
- Secciones: margin-bottom 24px, border-radius 24-32px

## Componentes
- Cards light: border-radius 18-24px, padding 40-44px, border 1px rgba(0,0,0,.06), hover shadow nivel 2
- Cards dark (propuestas): bg rgba(255,255,255,.06), border rgba(255,255,255,.12)
- Card activa: border lilac rgba(196,181,244,.5), bg rgba(196,181,244,.07), top-bar 3px lilac
- Spacing: XS 8 | S 16 | M 24-32 | L 48-72 | XL 80-120
- Radii: Cards 18-24px | Botones 8-12px | Inputs 8px | Pills 4-8px | Modales 20px
- Iconos: Lucide (principal) o Heroicons, outline, stroke 1.5px UI / 2px hero, color hereda del contexto, nunca filled
- Botones: border-radius 8-12px, padding 10-14px 20-24px, transicion 150ms ease, hover scale(1.02)
- Glass morphism: backdrop-filter blur(40px) saturate(1.8), border 1px rgba(255,255,255,.45)

## Dark mode
### Tokens que se adaptan
- --bg: #FAFAFA → #0D0D0D
- --bg-card: #fff → #1a1a1a
- --bg-subtle: #F5F5F5 → #222
- --text: #0A0A0A → #F0F0F0
- --text-sub: #737373 → rgba(255,255,255,.45)
- --border: rgba(0,0,0,.06) → rgba(255,255,255,.07)
- --shadow: rgba(0,0,0,.06) → rgba(0,0,0,.5)

### Colores que NO cambian
--blue, --purple, --black, --green, --red, --g100 a --g900 son fijos (colores de marca).
Logo cells y color chips mantienen fondo fijo para mostrar la muestra correctamente.

### Reglas dark mode
- Hero principal: siempre dark
- Respetar prefers-color-scheme del sistema
- Persistir eleccion en localStorage
- Contraste minimo texto/fondo: 4.5:1 (3:1 para texto ≥18px bold)
- En dark siempre anadir border sutil para compensar sombras menos visibles

## Logo
Isotipo (S estilizada) + wordmark "Snowball".
- Negro sobre fondos claros, blanco sobre fondos oscuros/color
- Isotipo solo cuando espacio limitado
- Min digital: 80px logo completo, 24px isotipo
- Min print: 20mm
- Espacio de respeto: minimo ancho del isotipo como margen
- Prohibido: rotar, estirar, aplicar efectos, usar colores fuera de paleta

## Tono de voz
1. CEO a CEO. De igual a igual. Nunca de agencia a cliente.
2. Numeros reales: "17 leads sin llamar" > "baja contactabilidad"
3. Sin condescendencia: no explicar que es un funnel — decir que esta roto.
4. C-level/corporativo: tono senior profesional, sin coloquialismos.
5. SMB/startups: directo, canalla, cero corporativo.
6. LinkedIn (Pau): parrafos cortos, humor seco, sin CTA, sin autopromocion, sin hashtags masivos.
7. Vocabulario SI: sistema, datos, estructura, medir, crecer, ejecutar, revenue.
8. Vocabulario NO: sinergia, holistic, leverage, disruptivo, empoderar, 360.
9. Propuestas: datos primero, luego solucion. Nunca "somos los mejores" sin prueba.

## Direccion visual
- Evitar stock generico. Preferir screenshots reales de producto y dashboards.
- Imagenes con overlay oscuro minimo rgba(0,0,0,.6) si se usan como fondo.
- Duotono solo blue + black. Nunca filtros de color arbitrarios.
- Screenshots: sombra nivel 3, border-radius 12-16px, border 1px rgba(0,0,0,.08).
- Iconografia: Lucide, outline, mismo color que texto adyacente, nunca filled.

## Aplicaciones de marca
- Firma email: isotipo azul como avatar, separador 2px azul, wordmark al 50% opacidad, Inter siempre.
- LinkedIn: hook directo (sin emoji), dato real, parrafos cortos, cierre seco, humor si cabe.
- Slides propuesta: fondo dark, cards rgba(255,255,255,.04), label fase uppercase, firma tipografica en titulo, wordmark al 30% opacidad, footer con datos legales.
- Thumbnails: aspect ratio 16:9, firma tipografica light+bold, wordmark 25-30% opacidad, dato concreto como headline. Dark hero o gradient light segun contexto.

## Motion
- Botones: scale(1.02), transition 150ms ease, opacity 0.92 on press
- Cards hover: shadow nivel 2, translateY(-2px), transition 200ms ease
- Entradas seccion: opacity 0→1, translateY(12px→0), 400ms ease, stagger 80ms
- Loading: shimmer gradient, 1.5s ease-in-out infinite
- Principio: rapidas (150-400ms), funcionales, nunca bloquean. Si se nota demasiado, es demasiada.

## Design tokens JSON
```json
{
  "colors": {
    "black": "#0D0D0D", "blue": "#0094FF", "purple": "#8F00FF",
    "white": "#FFFFFF", "green": "#16a34a", "red": "#FF3B30",
    "lilac": "#C4B5F4", "purpleDeep": "#7C3AED", "lilacBg": "#EDE9FD"
  },
  "grays": {
    "900": "#1A1A1A", "800": "#262626", "700": "#404040", "600": "#525252",
    "500": "#737373", "400": "#A3A3A3", "300": "#D4D4D4", "200": "#E5E5E5", "100": "#F5F5F5"
  },
  "gradients": {
    "heroDark": "linear-gradient(145deg, #0A0A0A 0%, #0D1020 35%, #111128 55%, #0A0A0A 100%)",
    "light": "linear-gradient(135deg, #f0f4ff, #f5f0ff 55%, #fdf0ff)",
    "purpleDeep": "linear-gradient(135deg, #2d1b4e, #7C3AED)"
  },
  "spacing": [8, 16, 24, 32, 48, 72, 80, 120],
  "radii": { "card": 18, "button": 10, "input": 8, "pill": 6, "modal": 20 },
  "shadows": {
    "level1": "0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04)",
    "level2": "0 8px 40px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04)",
    "level3": "0 8px 40px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.10)"
  },
  "breakpoints": { "tablet": 768, "desktop": 1280 },
  "fonts": { "sans": "Inter", "mono": "JetBrains Mono" }
}
```