PIXELWAVE — Sistema de Diseño Dithered

01 — CONTEXT & GOALS

Intención de Diseño

Fundamentos del sistema visual Dithered para PIXELWAVE — analítica social B2B con estética retro-digital.

PIXELWAVE usa la técnica dithered — patrones de puntos que simulan degradados con paleta limitada — para crear una identidad visual que evoca la nostalgia de los sistemas de 8 bits, aplicada sobre una interfaz funcional y accesible. El resultado es un dashboard de analítica que se siente auténtico, no genérico.

Objetivo visual

Usar el patrón de puntos como elemento de textura — no decoración — en fondos, estados hover, barras de progreso y zonas de énfasis. Paleta de 7 colores máximo.

Objetivo técnico

Todas las texturas dithered mediante CSS puro (radial-gradient + background-size). Cero assets externos. Bundle ligero. Compatible con React + CSS Modules.

Objetivo de accesibilidad

WCAG 2.2 AA como mínimo no negociable. La textura de puntos jamás reduce el contraste de texto por debajo de 4.5:1. Focus visible siempre activo.

02 — DESIGN TOKENS

Tokens y Fundamentos

Los tokens son la fuente única de verdad. Nunca usar valores raw en componentes.

Paleta de color

#3B82F6

Primary

--primary

#8B5CF6

Secondary

--secondary

#16A34A

Success

--success

#D97706

Warning

--warning

#DC2626

Danger

--danger

#0D0D0D

Surface

--surface

#141414

Surface 2

--surface-2

#F0F0F0

Text

--text

#888888

Text Muted

--text-muted

Escala de espaciado

--sp-1

4px

--sp-2

8px

--sp-3

12px

--sp-4

16px

--sp-6

24px

--sp-8

32px

CSS Custom Properties

/* tokens.css — fuente única de verdad */
:root {
  /* Color */
  --primary: #3B82F6;
  --secondary: #8B5CF6;
  --success: #16A34A;
  --warning: #D97706;
  --danger: #DC2626;

  /* Surface */
  --surface: #0D0D0D;
  --surface-2: #141414;
  --surface-3: #1A1A1A;

  /* Text */
  --text: #F0F0F0;
  --text-muted: #888888;

  /* Spacing scale */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px;
  --sp-4: 16px; --sp-6: 24px; --sp-8: 32px;

  /* Dither utility */
  --dither-dots: radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px);
  --dither-size: 20px 20px;
}
    

03 — TYPOGRAPHY

Tipografía

Tres familias: display para títulos, sans para cuerpo, mono para datos y código.

display-xl

Space Grotesk 700 / 40px

Analítica Social

display-lg

Space Grotesk 700 / 32px

PIXELWAVE Dashboard

heading-md

Space Grotesk 600 / 24px

Métricas de Engagement

body-lg

Open Sans 400 / 18px

Tus publicaciones alcanzaron 48K impresiones esta semana.

body-md

Open Sans 400 / 16px

El engagement rate subió un 12% respecto a la semana anterior.

body-sm

Open Sans 400 / 14px

Última actualización: hace 3 minutos

label-caps

IBM Plex Mono 500 / 11px

TOTAL IMPRESIONES · SEMANA 24

data-value

IBM Plex Mono 400 / 13px

48,291 — +12.4% — CTR: 3.7%

04 — COMPONENTS

Componentes

Anatomía, variantes y estados de cada componente del sistema.

Botones

Variantes

Tamaños

Estado deshabilitado

/* Button — regla de área mínima táctil: 44×44px */
.btn {
  min-height: 36px;
  padding: var(--sp-2) var(--sp-4);  /* 8px 16px */
  font-family: var(--font-sans);
  font-weight: 600;
  /* Dither hover overlay */
  &::before {
    background-image: radial-gradient(circle, rgba(255,255,255,0.12) 1px, transparent 1px);
    background-size: 4px 4px;
  }
}

Badges de estado

Publicado Programado Error En revisión Borrador

Alertas del sistema

ℹ

Actualización disponible

Hay datos nuevos para Instagram desde hace 15 minutos. Actualiza para ver las métricas al día.

✓

Informe exportado

Tu informe semanal se ha enviado a alvarogimeno@agencia.es correctamente.

⚠

Token de API próximo a expirar

El token de Facebook Ads caduca en 3 días. Renuévalo antes para evitar interrupciones.

Error de sincronización

No se pudo conectar con la API de TikTok. Verifica las credenciales en Ajustes > Integraciones.

Campos de formulario

Rango de fechas

Red social

Filtra métricas por canal específico.

Nombre de campaña

ERROR: nombre duplicado. Elige otro identificador.

Email de notificación

Recibirás el informe cada lunes a las 9:00.

Tarjetas de métricas (Dashboard)

👁 Impresiones

48.2K

↑ +12.4% vs sem. ant.

❤ Engagement

3.7%

↑ +0.4pp vs sem. ant.

🔗 Clicks

1,847

↓ -3.1% vs sem. ant.

👥 Seguidores

12.9K

↑ +241 esta semana

05 — DITHER PATTERNS

Patrones Dithered

Texturas CSS puras. Nunca imágenes externas. Usar como fondos de énfasis, no como decoración arbitraria.

dither-dots — base

Fondo de página principal

dither-dense — hover / énfasis

Estado hover de tarjetas

dither-checker — superficies 2

Fondos de modales / drawers

dither-purple — accent zone

Zonas CTA / upsell premium

dither-success — confirmación

Fondos de estado éxito

dither-danger — alerta crítica

Fondos de estado error

06 — ACCESSIBILITY

Accesibilidad WCAG 2.2 AA

Criterios de contraste y focus testables en code review.

Ratios de contraste

Estados de foco visibles

Implementación obligatoria — outline 2px offset 2px

/* Regla de foco — obligatoria en TODOS los elementos interactivos */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(59,130,246,0.15);
}
/* NUNCA: outline: none sin reemplazo visual */

Tabla de criterios testables

Criterio WCAG	Nivel	Implementación requerida	Testeable con
1.4.3 Contrast (Minimum)	AA	Ratio ≥ 4.5:1 para texto <18pt	axe-core, Colour Contrast Analyser
2.4.7 Focus Visible	AA	outline en :focus-visible siempre visible	Tab manual, axe-core
2.5.8 Target Size	AA 2.2	Área clicable ≥ 24×24px; recomendado 44×44px	DevTools > computed styles
1.4.11 Non-text Contrast	AA	Bordes de inputs con ratio ≥ 3:1 vs fondo	Inspector visual, axe-core
4.1.2 Name, Role, Value	AA	aria-label en iconos sin texto visible	NVDA / VoiceOver smoke test

07 — ANTI-PATTERNS

Patrones Prohibidos

Implementaciones incorrectas más comunes. Cada una incluye la alternativa correcta.

✕ NO — Bajo contraste de texto

Ejemplo incorrecto

Texto con ratio 1.8:1

Nunca usar --text-dim (#555) para contenido lector. Solo para placeholders de inputs.

✓ SÍ — Contraste mínimo 4.5:1

Alternativa correcta

Texto con ratio 17.5:1

Usar --text (#F0F0F0) para contenido. --text-muted (#888) solo para metadatos secundarios.

✕ NO — Dither sobre texto

Ejemplo incorrecto

Texto ilegible con patrón encima

Nunca poner la textura dithered con z-index superior al texto ni con opacidad >0.08 sobre áreas de contenido.

✓ SÍ — Dither solo en fondos

Alternativa correcta

Texto perfectamente legible

Textura siempre pointer-events:none y opacity máx 0.06 en áreas con texto.

✕ NO — Área táctil insuficiente

Ejemplo incorrecto

Botones con padding 2px 4px — área real ~20×18px, imposible de pulsar con precisión en móvil.

✓ SÍ — Mínimo 44×44px táctil

Alternativa correcta

Padding 8px 18px con min-height 44px. El área de golpe excede los 24×24px mínimos de WCAG 2.2.

08 — QA CHECKLIST

Checklist de Code Review

Ejecutar en cada PR que modifique componentes o estilos visuales.

Visual & Tokens

✓

Sin valores raw de color en componentes. Todos los colores referenciados via var(--token).
grep-able
✓

Espaciado usando escala 4/8/12/16/24/32. No valores intermedios (ej. 10px, 15px).
visual
Textura dithered tiene pointer-events:none y no superpone áreas de texto con opacidad >0.08.
code
Box-shadow con offset pixelado (ej. 3px 3px 0) en botones y tarjetas interactivas.
visual
✓

font-family referencia tokens. No Google Fonts inline en componentes individuales.
code

Accesibilidad

✓

Ratio de contraste verificado con axe-core. Cero violaciones de nivel AA.
axe-core
✓

focus-visible visible en todos los interactivos. Nunca outline:none sin alternativa.
tab manual
Área táctil ≥ 44×44px en botones, links e iconos interactivos.
devtools
Iconos sin texto tienen aria-label. Mensajes de error tienen role="alert".
screen-reader
✓

No motion decorativo sin prefers-reduced-motion. Transiciones <300ms.
css

Componentes

✓

Estados definidos: default, hover, focus, active, disabled. Loading y error donde aplique.
storybook
Responsive probado en 320px, 768px, 1280px. No overflow horizontal.
responsive
✓

Estados vacíos y de carga definidos con skeleton o placeholder coherente.
ux
Labels no ambiguos. Botones con verbo de acción claro (no "Ok", "Click aquí").
copy

Migración

Componentes legacy actualizados en mismo PR si el cambio afecta a su patrón base.
refactor
✓

Sin duplicación de patrones dithered. Usar clases utilitarias del design system.
dry
Changelog actualizado con token o componente nuevo/modificado y motivo.
docs
✓

Sin assets de imagen para texturas. Todo dithering via CSS radial-gradient.
performance