# Sanzo Wada — A Dictionary of Color Combinations (MIRÓ Labs)

> The 348 color combinations and 159 colors of volume one of Sanzo Wada's book (1933–34), extracted and checked by hand, turned into ready-to-use web themes. Part of Alonso Rivera's design system at MIRÓ Labs, next to Componentes (components), Tipos (type) and Patrones (patterns).

## Data (read these first)
- [data/temas-sanzo-wada.json](data/temas-sanzo-wada.json): the 348 combinations as themes. Per combination: `colores` (hex, English and Japanese name), `etiquetas` (temperatura: cálida | fría | mixta | neutra; luz: clara | media | oscura; intensidad: suave | media | viva), `pares` (WCAG contrast of every pair), `inmersivo` (roles fondo/texto/primario, contraste, uso, texto_neutro, vars) and `acento` (claro and oscuro: primario, contraste, vars).
- [data/combinaciones-sanzo-wada.json](data/combinaciones-sanzo-wada.json): the combinations with names, hex and CMYK. [data/paleta-sanzo-wada.json](data/paleta-sanzo-wada.json): the 159 colors.

## Use a combination in a web
Link the theme and put a class on <html> or <body>. Variables follow Componentes (https://componentes-lovat.vercel.app): --background, --foreground, --card, --popover, --primary, --secondary, --muted, --accent, --border, --input, --ring and their -foreground.

    <link rel="stylesheet" href="https://sanzo-wada-chi.vercel.app/temas/142.css">
    <html class="wada-142">            <!-- accent: neutral page, Wada on buttons and details (add .dark for dark) -->
    <html class="wada-142-inmersivo">  <!-- immersive: the combination is the page -->

Tokens (DTCG) for each one: `temas/NNN.json` (NNN with three digits, 001–348).

## How to choose
- Tools, dashboards, forms, long text: use the **accent** theme. It is always readable; the combination shows on buttons, focus rings and tints.
- Landing pages, posters, portfolios, creative tools: use the **immersive** theme. Prefer combinations where `inmersivo.texto_neutro` is false (141 of 348): there the text is a Wada color too. If it is true, the text is near-black or near-white on a Wada background.
- Long body text needs `inmersivo.contraste` ≥ 4.5 (WCAG). Between 3 and 4.5 use it only for headlines and large type.
- Two colors read calm and graphic; three give a primary and an accent; four suit illustration, charts and pattern work, less so interfaces.
- Mood: filter by `etiquetas` (warm/cool, light/dark, soft/vivid) before looking at hues.
- Never invent colors for the page: everything in a theme comes from the combination, plus plain tints between its colors and, when needed, near-black or near-white text.