Playground

Wagabaza Design System

Configure a design language by place, time, season, and weather. Download a comprehensive AI-ready spec — paste it into Claude Code, Cursor, Gemini, or any AI coding tool.


Place
Volcanic rock, desert flora, copper patina, canvas stretched over redwood.
Time of day
Full light. Warm, open, editorial.
Season
High contrast, generous whitespace, warm saturation.
Weather
Crisp edges, full visibility. No effects.
Live preview
Sonoran Desert · Noon · Summer · Clear
Design System
Volcanic rock, desert flora, copper patina, canvas stretched over redwood.
Primary action
Palette
obsidian
basalt
malpais
ironwood
marigold
caliche
saguaro
ocotillo
copper
quartz
mesquite
redwood
petroglyph
canvas
adobe
Typography — Bodoni Moda
Display heading
Section heading
Subsection in body font
Body text in the configured font. Structural honesty, material warmth, earned density.
const token = "--marigold";
Components
PrimarySecondaryTertiary
Card title
Interactive surface with standard treatment.
Email
you@example.com
Glow System
marigold
ocotillo
saguaro

Download

Sonoran Desert · Noon · Summer · Clear — 19-section comprehensive spec

How to use
1. Download the .md file
2. Add to your project or paste into AI context:
Claude Code → project directory
Cursor → .cursor/rules/
Gemini → conversation context
Figma Make → project reference
3. AI uses the spec as the design brain

About the system

Wagabaza started with two visits. The first to Taliesin in Spring Green, Wisconsin — Wright's original home, set into the brow of a limestone hill above the Wisconsin River, built and rebuilt from the land around it. The second to Taliesin West in Scottsdale, Arizona — the desert counterpart, where volcanic rock gathered on site became the walls, and stretched canvas filtered the Sonoran light. Both places taught the same lesson: the construction materials aren't just what you build with. They're the design language.

That principle — that materials should name and constrain the system, not abstract adjectives — became this tool. Each place draws its token vocabulary from the local geology, flora, and building traditions. The Sonoran palette names obsidian and saguaro. The Prairie palette names limestone and goldenrod. The Pacific palette names kelp and driftwood. The names carry their own constraints.

Three typographic pairings match the character of each landscape: Bodoni Moda for Sonoran (Italian editorial warmth), Jost for Prairie (the thin geometric precision of Wright's own era), and EB Garamond for Pacific (literary gravity). Four axes — place, time, season, weather — produce 240 unique configurations.

Every generated spec covers: color tokens, typography, spacing, grid, buttons, cards, surfaces, glow system, forms, navigation, page templates, data visualization, tables, badges, states, icons, animations, accessibility, content voice, and rejection criteria. Download the .md and paste it into any AI coding tool — it becomes the design brain of the project.

Wagabaza Design System · Matia Wagabaza · 2026