Diseño con criterio, para personas y agentes.

Cuatro herramientas y un punto de vista. Un agente las lee, te pregunta y construye tu web con fuentes, colores, componentes y patrones elegidos con cuidado.

Leer la guía para agentes Cómo funciona →
100fuentes libres
348combinaciones de color
33componentes
39patrones generativos

Las herramientas

Cada una decide una cosa. Juntas, un sistema.

Comparten los mismos nombres de color, así que una combinación de Wada pinta los componentes, el patrón y la página entera.

AaSinistre · rareza 4

Tipos

La tipografía. Cada fuente dice su tono, su rareza del 1 al 5, si sirve para texto largo y con qué combina.

AbrirGuía

Sanzo Wada

El color. Las 348 combinaciones del libro de 1933, cada una lista como tema web con el contraste medido.

AbrirGuía

Componentes

La estructura. Formularios, navegación, secciones de landing y tableros, cada uno con cuándo usarlo y cuándo no.

AbrirGuía

Patrones

La gráfica. 39 patrones que se dibujan en vivo, para un hero, una banda o un fondo, con los colores de la misma combinación.

AbrirGuía

Punto de vista

Curiosidad: lo raro tratado con rigor. Una pieza con carácter sobre una base clásica y legible, y nunca dos rarezas compitiendo.

El color se tomaDe una combinación de Wada o de la imagen del proyecto. Nunca inventado.
Se diseña el sistemaReglas que generan variantes, como Gerstner y Casey.
Una idea por pantallaPoca información a la vista y un solo protagonista.
Hecho por alguienCada web tiene un detalle que solo existe en su tema.
Para todo el mundoContraste 4,5:1, teclado, lector de pantalla y celular.
Un solo momentoUna animación por página, y nada que distraiga de lo importante.

Cómo funciona

Le das el concepto. Él pregunta, propone y otro agente critica.

  1. Lee tu proyecto: qué es, para quién y qué contenido tiene.
  2. Te hace las preguntas en un solo mensaje.
  3. Propone 2 o 3 direcciones renderizadas, con el porqué de cada elección.
  4. Un agente crítico las revisa contra el punto de vista.
  5. Tú eliges y escribe el DESIGN.md de tu proyecto.
  6. Construye, y el crítico revisa el resultado.
<!-- una página hecha con el sistema -->
<html class="wada-322">
<link rel="stylesheet" href="…componentes…/tokens.css">
<link rel="stylesheet" href="…sanzo-wada…/temas/322.css">
<link rel="stylesheet" href="…tipos…/fonts/css/hanken-grotesk.css">
<script src="…pattern-studio…/patrones.js"></script>

<patron-fondo pattern="arcade" wada="322">
  <h1>Tu proyecto</h1>
</patron-fondo>