Tarjeta base
- Lista con checks (.c-checklist)
- Sombras negras, nunca grises
Sistema de diseño
Oscuro premium: suelo casi negro, luz violeta y melocotón de la marca, líneas finas y mini-interfaces como ilustración. Todo sale de tokens.css y components.css; las reglas están en DESIGN-SYSTEM.md.
Color
Superficies por capas sobre un negro con matiz violeta. El violeta es la única acción; el melocotón, el acento cálido.
Superficies
bg#08070b
surface-1Tarjetas
surface-2Paneles, inputs
surface-3Activo, hover
surface-4Elevado
Texto
fgTitulares
fg-2Párrafos · 7.9:1
fg-3Captions · 4.7:1
fg-4Solo decorativo
Marca y servicios
violet-500Acción primaria
violet-400Texto violeta · web
peach-300Acento · SEO
blue-400PPC
successEstados OK
Degradados
gradient-accentPalabra en cursiva
card-webFeature violeta
card-seoFeature terracota
card-ppcFeature clara
glow-topLuz de hero
Tipografía
Geist para todo, DM Serif Display cursiva solo para la palabra destacada y Geist Mono para datos y numeración. El logo es un trazado, no texto.
.c-logo
h1 · displayHaz que te encuentren
h2 · 3xl
Tres servicios, un solo objetivo
h3 · lg
Posicionamiento SEO
.c-lead
Diseñamos webs rápidas a medida y las posicionamos en Google.
body
Texto de párrafo en Geist 16px, interlineado 1.6, color fg-2.
.c-labelRendimiento · móvil
.c-underline
Más de tres canales medidos en un solo informe.
.c-statement
Una web es una herramienta de ventas. La segunda frase va en gris.
Acciones
Botones siempre en píldora. Un solo --primary por bloque visual.
Pill, chips y badges
Formularios
.c-inline-form — input + botón en una píldora
Superficies
Línea fina de 1px + brillo superior. Las tarjetas interactivas llevan .c-spotlight: pasa el cursor.
.c-price--featured
Recomendado1.490 €+ 390 €/mes
- Borde con haz de luz (.c-beam)
- Solo un destacado por tabla
.c-feature--seo
Variantes: por defecto (web, violeta), --seo (terracota), --ppc (clara).
Radios por rol
xs 6
sm 10
md 14
lg 20
xl 28
pill
Espaciado (base 4px)
space-2 · 8
space-4 · 16
space-6 · 24
space-8 · 32
space-12 · 48
space-16 · 64
space-24 · 96
Mini-UIs
Ilustraciones de producto hechas en HTML. Decorativas (aria-hidden), se animan al entrar en pantalla y se simplifican solas cuando su ventana es estrecha.
.c-sitemock · diseño web
.c-serp · SEO (--from → --to)
.c-ads · PPC (barras con --h)
.c-vitals + .c-ring · rendimiento
.c-report · informes (--w, --c)
.c-rows + .c-switch · ajustes
Bloques de sección
Composiciones listas para cualquier página: .c-features, .c-bento, .c-steps, .c-pricing, .l-split + .c-faq, .c-marquee y .c-cta. Ejemplos completos en la landing.
- 01
.c-steps
Línea de tiempo en una sola superficie.
- 02
Barra de progreso
Se rellena al entrar en pantalla.
- 03
Puntos
Se encienden en secuencia con --i.
- 04
Responsive
4 → 2 → 1 columnas.
.l-split + .c-faq
Lateral fijo al hacer scroll; acordeón exclusivo con <details name>.
.c-helpTarjeta de ayuda bajo el titular: la duda que no está en la lista va al formulario.
Acción01Pregunta abierta
Respuesta con apertura animada donde el navegador lo soporta.
02Pregunta cerrada
Contenido.
- .c-marquee
- Una por página
- No se para al pasar el cursor
- Bordes desvanecidos
Conversión
Piezas de las landings de servicio (servicios/*/), en el orden de la página: .c-hero → .c-pains → solución → .c-promises + .c-proof → precios → proceso → FAQ → .c-brief. Una sola meta por página: todo apunta a #contacto. Reglas en DESIGN-SYSTEM.md §10.
.c-note + .c-facts (bajo el botón del hero)
.c-pains (el problema, con las palabras del cliente)
«Frase tal y como la dice el cliente.»
Qué hay detrás, en una o dos líneas. No es un testimonio.
«Otra queja habitual.»
Su causa real.
.c-pains__cost: lo que se pierde mientras tanto, sin dramatizar.
.c-promises + .c-proof (objeción y, justo después, la prueba)
.c-promise
Responde a la duda principal.
Riesgo asumido
Algo que se pueda comprobar.
Cuatro como máximo
4 → 2 → 1 columnas.
Sin humo
Nada de garantías imposibles.
.c-proof
Prueba justo después de la objeción
Algo comprobable: el entregable gratuito (una auditoría por escrito). Sin testimonios, casos ni trabajos por ahora.