Clay
Technical warmth through deep forest green, editorial typography, and systematic precision. Built for noe.tatoud.com and beyond.
Color Palette
Clay Tones — Primary
50
100
200
300
400
500
600
700
800
900
950
Olive Tones — Secondary
50
100
200
300
400
500
600
700
800
900
950
Semantic Colors
Usage Guidelines
Clay (primary) is your signature. Use for primary actions, links, and brand moments.
Olive (secondary) is the warm counterpoint. Use for secondary actions, badges, and highlights — like olive leaves against terracotta.
Muted (clay-100/200) for subtle backgrounds, hover states, and secondary surfaces.
Deep (clay-800/900) for emphasis, selected states, and high-contrast text.
Never use pure black or white — always tint toward sand.
Typography
Display — Young Serif
Heading 1
The quick brown fox jumps over the lazy dog
Heading 2
The quick brown fox jumps over the lazy dog
Heading 3
The quick brown fox jumps over the lazy dog
Heading 4
The quick brown fox jumps over the lazy dog
Body — DM Sans
Body Large
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
Body
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
Body Small
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
Caption
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
Mono (system monospace)
Code
const clay = 'soft warmth'
Code Block
function greet(name: string) { return `Hello, ${name}!` }
Buttons
Variants
Default uses primary (clay) for main actions. Secondary uses olive for calm accents.
Sizes
States
Spacing & Radius
Border Radius
Spacing Scale
Clay Design System v1.0 — Built with soft warmth.