DESIGN.md@.agents/tools/design/library/brands/clay git:20260404.2e83279A

Immutable. This exact content is served forever at /api/v1/blob/b88cb70632fcfb7a.

<!-- SPDX-License-Identifier: MIT -->
<!-- SPDX-FileCopyrightText: 2025-2026 Marcus Quinn -->

# Design System: Clay

Warm, playful B2B design system built on cream canvas, named swatch colors, Roobert typography, and signature hover animations.

## Chapters

| # | File | Contents |
|---|------|----------|
| 1 | [01-visual-theme.md](01-visual-theme.md) | Brand identity, key characteristics, design philosophy |
| 2 | [02-color-palette.md](02-color-palette.md) | Primary, swatch palette (Matcha/Slushie/Lemon/Ube/Pomegranate/Blueberry), neutrals, surfaces, shadows |
| 3 | [03-typography.md](03-typography.md) | Roobert + Space Mono, full type hierarchy table, OpenType stylistic sets |
| 4 | [04-components.md](04-components.md) | Buttons, cards, inputs, navigation, image treatment, distinctive components |
| 5 | [05-layout.md](05-layout.md) | Spacing system, grid, whitespace philosophy, border radius scale |
| 6 | [06-depth-elevation.md](06-depth-elevation.md) | Shadow levels, clay shadow philosophy, decorative depth |
| 7 | [07-dos-and-donts.md](07-dos-and-donts.md) | Definitive do/don't rules for implementing Clay correctly |
| 8 | [08-responsive.md](08-responsive.md) | Breakpoints, touch targets, collapsing strategy, image behavior |
| 9 | [09-agent-prompt-guide.md](09-agent-prompt-guide.md) | Quick color reference, example component prompts, iteration guide |

## Quick Reference

**Background:** `#faf9f7` (Warm Cream) — non-negotiable  
**Text:** `#000000` (Clay Black)  
**Border:** `#dad4c8` (Oat Border)  
**Font:** Roobert with OpenType `"ss01", "ss03", "ss10", "ss11", "ss12"`  
**Hover:** `rotateZ(-8deg)` + `translateY(-80%)` + hard shadow `rgb(0,0,0) -7px 7px`  
**Swatch palette:** Matcha · Slushie · Lemon · Ube · Pomegranate · Blueberry · Dragonfruit