getdesign.mdgetdesign/clay
Clay
Warm cream canvas with named swatch palette (Matcha, Slushie, Lemon, Ube), Inter-substitute geometric display, and playful rotate-and-offset hover shadows.
install
npx designkit add getdesign/claypreviewrenderPreviewHtml
source
---
name: Clay
description:
Warm cream canvas with named swatch palette (Matcha, Slushie, Lemon, Ube),
Inter-substitute geometric display, and playful rotate-and-offset hover
shadows.
originalFonts:
primary: "Roobert"
mono: "Space Mono"
fallbacks:
- "Arial"
colors:
background: "#faf9f7"
surface: "#ffffff"
surface-raised: "#eff1f3"
ink: "#000000"
ink-muted: "#9f9b93"
accent: "#078a52"
accent-alt: "#3bd3fd"
border: "#dad4c8"
link: "#3859f9"
focus: "#146ef5"
clay-black: "#000000"
pure-white: "#ffffff"
warm-cream: "#faf9f7"
matcha-300: "#84e7a5"
matcha-600: "#078a52"
matcha-800: "#02492a"
slushie-500: "#3bd3fd"
slushie-800: "#0089ad"
lemon-400: "#f8cc65"
lemon-500: "#fbbd41"
lemon-700: "#d08a11"
lemon-800: "#9d6a09"
ube-300: "#c1b0ff"
ube-800: "#43089f"
ube-900: "#32037d"
pomegranate-400: "#fc7981"
blueberry-800: "#01418d"
warm-silver: "#9f9b93"
warm-charcoal: "#55534e"
dark-charcoal: "#333333"
oat-border: "#dad4c8"
oat-light: "#eee9df"
cool-border: "#e6e8ec"
dark-border: "#525a69"
light-frost: "#eff1f3"
badge-blue-bg: "#f0f8ff"
badge-blue-text: "#3859f9"
typography:
h1:
family: "Inter"
size: "5rem"
weight: 600
lineHeight: 1
h2:
family: "Inter"
size: "3.75rem"
weight: 600
lineHeight: 1
h3:
family: "Inter"
size: "2.75rem"
weight: 600
lineHeight: 1.1
body:
family: "Inter"
size: "1.13rem"
weight: 400
lineHeight: 1.6
button:
family: "Inter"
size: "1rem"
weight: 500
lineHeight: 1.5
caption:
family: "Inter"
size: "0.88rem"
weight: 400
lineHeight: 1.5
code:
family: "JetBrains Mono"
size: "0.875rem"
weight: 400
spacing:
xs: "0.25rem"
sm: "0.5rem"
md: "1rem"
lg: "1.5rem"
xl: "2.5rem"
rounded:
sm: "4px"
md: "12px"
lg: "24px"
xl: "40px"
shadows:
sm: "rgba(0,0,0,0.05) 0px -0.5px 1px"
md:
"rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px 1px inset,
rgba(0,0,0,0.05) 0px -0.5px 1px"
lg: "rgb(0,0,0) -7px 7px"
components:
button-primary:
background: "#ffffff"
color: "{colors.ink}"
border: "1px solid {colors.border}"
radius: "{rounded.md}"
padding: "6.4px 12.8px"
button-secondary:
background: "transparent"
color: "{colors.ink}"
border: "1px solid #717989"
radius: "{rounded.sm}"
padding: "8px 12px"
card:
background: "{colors.surface}"
border: "1px solid {colors.border}"
radius: "{rounded.lg}"
padding: "1.5rem"
input:
background: "{colors.surface}"
color: "{colors.ink}"
border: "1px solid #717989"
radius: "{rounded.sm}"
padding: "0.5rem 0.75rem"
---
<!-- source: VoltAgent/awesome-design-md @ 80bbbc2 (MIT) — see ATTRIBUTION.md -->
# Design System Inspiration of Clay
## 1. Visual Theme & Atmosphere
Clay's website is a warm, playful celebration of color that treats B2B data
enrichment like a craft rather than an enterprise chore. The design language is
built on a foundation of warm cream backgrounds (`#faf9f7`) and oat-toned
borders (`#dad4c8`, `#eee9df`) that give every surface the tactile quality of
handmade paper. Against this artisanal canvas, a vivid swatch palette explodes
with personality — Matcha green, Slushie cyan, Lemon gold, Ube purple,
Pomegranate pink, Blueberry navy, and Dragonfruit magenta — each named like
flavors at a juice bar, not colors in an enterprise UI kit.
The typography is anchored by Roobert, a geometric sans-serif with character,
loaded with an extensive set of OpenType stylistic sets (`"ss01"`, `"ss03"`,
`"ss10"`, `"ss11"`, `"ss12"`) that give the text a distinctive, slightly quirky
personality. At display scale (80px, weight 600), Roobert uses aggressive
negative letter-spacing (-3.2px) that compresses headlines into punchy,
billboard-like statements. Space Mono serves as the monospace companion for code
and technical labels, completing the craft-meets-tech duality.
What makes Clay truly distinctive is its hover micro-animations: buttons on
hover rotate slightly (`rotateZ(-8deg)`), translate upward (`translateY(-80%)`),
change background to a contrasting swatch color, and cast a hard offset shadow
(`rgb(0,0,0) -7px 7px`). This playful hover behavior — where a button literally
tilts and jumps on interaction — creates a sense of physical delight that's rare
in B2B software. Combined with generously rounded containers (24px–40px radius),
dashed borders alongside solid ones, and a multi-layer shadow system that
includes inset highlights, Clay feels like a design system that was made by
people who genuinely enjoy making things.
**Key Characteristics:**
- Warm cream canvas (`#faf9f7`) with oat-toned borders (`#dad4c8`) — artisanal,
not clinical
- Named swatch palette: Matcha, Slushie, Lemon, Ube, Pomegranate, Blueberry,
Dragonfruit
- Roobert font with 5 OpenType stylistic sets — quirky geometric character
- Playful hover animations: rotateZ(-8deg) + translateY(-80%) + hard offset
shadow
- Space Mono for code and technical labels
- Generous border radius: 24px cards, 40px sections, 1584px pills
- Mixed border styles: solid + dashed in the same interface
- Multi-layer shadow with inset highlight: `0px 1px 1px` + `-1px inset` +
`-0.5px`
## 2. Color Palette & Roles
### Primary
- **Clay Black** (`#000000`): Text, headings, pricing card text,
`--_theme--pricing-cards---text`
- **Pure White** (`#ffffff`): Card backgrounds, button backgrounds, inverse text
- **Warm Cream** (`#faf9f7`): Page background — the warm, paper-like canvas
### Swatch Palette — Named Colors
**Matcha (Green)**
- **Matcha 300** (`#84e7a5`): `--_swatches---color--matcha-300`, light green
accent
- **Matcha 600** (`#078a52`): `--_swatches---color--matcha-600`, mid green
- **Matcha 800** (`#02492a`): `--_swatches---color--matcha-800`, deep green for
dark sections
**Slushie (Cyan)**
- **Slushie 500** (`#3bd3fd`): `--_swatches---color--slushie-500`, bright cyan
accent
- **Slushie 800** (`#0089ad`): `--_swatches---color--slushie-800`, deep teal
**Lemon (Gold)**
- **Lemon 400** (`#f8cc65`): `--_swatches---color--lemon-400`, warm pale gold
- **Lemon 500** (`#fbbd41`): `--_swatches---color--lemon-500`, primary gold
- **Lemon 700** (`#d08a11`): `--_swatches---color--lemon-700`, deep amber
- **Lemon 800** (`#9d6a09`): `--_swatches---color--lemon-800`, dark amber
**Ube (Purple)**
- **Ube 300** (`#c1b0ff`): `--_swatches---color--ube-300`, soft lavender
- **Ube 800** (`#43089f`): `--_swatches---color--ube-800`, deep purple
- **Ube 900** (`#32037d`): `--_swatches---color--ube-900`, darkest purple
**Pomegranate (Pink/Red)**
- **Pomegranate 400** (`#fc7981`): `--_swatches---color--pomegranate-400`, warm
coral-pink
**Blueberry (Navy Blue)**
- **Blueberry 800** (`#01418d`): `--_swatches---color--blueberry-800`, deep navy
### Neutral Scale (Warm)
- **Warm Silver** (`#9f9b93`): Secondary/muted text, footer links
- **Warm Charcoal** (`#55534e`): Tertiary text, dark muted links
- **Dark Charcoal** (`#333333`): Link text on light backgrounds
### Surface & Border
- **Oat Border** (`#dad4c8`): Primary border — warm, cream-toned structural
lines
- **Oat Light** (`#eee9df`): Secondary lighter border
- **Cool Border** (`#e6e8ec`): Cool-toned border for contrast sections
- **Dark Border** (`#525a69`): Border on dark sections
- **Light Frost** (`#eff1f3`): Subtle button background (at 0% opacity on hover)
### Badges
- **Badge Blue Bg** (`#f0f8ff`): Blue-tinted badge surface
- **Badge Blue Text** (`#3859f9`): Vivid blue badge text
- **Focus Ring** (`rgb(20, 110, 245) solid 2px`): Accessibility focus indicator
### Shadows
- **Clay Shadow**
(`rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px 1px inset, rgba(0,0,0,0.05) 0px -0.5px 1px`):
Multi-layer with inset highlight — the signature
- **Hard Offset** (`rgb(0,0,0) -7px 7px`): Hover state — playful hard shadow
## 3. Typography Rules
### Font Families
- **Primary**: `Roobert`, fallback: `Arial`
- **Monospace**: `Space Mono`
- **OpenType Features**: `"ss01"`, `"ss03"`, `"ss10"`, `"ss11"`, `"ss12"` on all
Roobert text (display uses all 5; body/UI uses `"ss03"`, `"ss10"`, `"ss11"`,
`"ss12"`)
### Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
| ----------------- | ------- | ---------------- | ------ | -------------- | ------------------ | ----------------------------------- |
| Display Hero | Roobert | 80px (5.00rem) | 600 | 1.00 (tight) | -3.2px | All 5 stylistic sets |
| Display Secondary | Roobert | 60px (3.75rem) | 600 | 1.00 (tight) | -2.4px | All 5 stylistic sets |
| Section Heading | Roobert | 44px (2.75rem) | 600 | 1.10 (tight) | -0.88px to -1.32px | All 5 stylistic sets |
| Card Heading | Roobert | 32px (2.00rem) | 600 | 1.10 (tight) | -0.64px | All 5 stylistic sets |
| Feature Title | Roobert | 20px (1.25rem) | 600 | 1.40 | -0.4px | All 5 stylistic sets |
| Sub-heading | Roobert | 20px (1.25rem) | 500 | 1.50 | -0.16px | 4 stylistic sets (no ss01) |
| Body Large | Roobert | 20px (1.25rem) | 400 | 1.40 | normal | 4 stylistic sets |
| Body | Roobert | 18px (1.13rem) | 400 | 1.60 (relaxed) | -0.36px | 4 stylistic sets |
| Body Standard | Roobert | 16px (1.00rem) | 400 | 1.50 | normal | 4 stylistic sets |
| Body Medium | Roobert | 16px (1.00rem) | 500 | 1.20–1.40 | -0.16px to -0.32px | 4–5 stylistic sets |
| Button | Roobert | 16px (1.00rem) | 500 | 1.50 | -0.16px | 4 stylistic sets |
| Button Large | Roobert | 24px (1.50rem) | 400 | 1.50 | normal | 4 stylistic sets |
| Button Small | Roobert | 12.8px (0.80rem) | 500 | 1.50 | -0.128px | 4 stylistic sets |
| Nav Link | Roobert | 15px (0.94rem) | 500 | 1.60 (relaxed) | normal | 4 stylistic sets |
| Caption | Roobert | 14px (0.88rem) | 400 | 1.50–1.60 | -0.14px | 4 stylistic sets |
| Small | Roobert | 12px (0.75rem) | 400 | 1.50 | normal | 4 stylistic sets |
| Uppercase Label | Roobert | 12px (0.75rem) | 600 | 1.20 (tight) | 1.08px | `text-transform: uppercase`, 4 sets |
| Badge | Roobert | 9.6px | 600 | — | — | Pill badges |
### Principles
- **Five stylistic sets as identity**: The combination of `"ss01"`, `"ss03"`,
`"ss10"`, `"ss11"`, `"ss12"` on Roobert creates a distinctive typographic
personality. `ss01` is reserved for headings and emphasis — body text omits
it, creating a subtle hierarchy through glyph variation.
- **Aggressive display compression**: -3.2px at 80px, -2.4px at 60px — the most
compressed display tracking alongside the most generous body spacing (1.60
line-height), creating dramatic contrast.
- **Weight 600 for headings, 500 for UI, 400 for body**: Clean three-tier system
where each weight has a strict role.
- **Uppercase labels with positive tracking**: 12px uppercase at 1.08px
letter-spacing creates the systematic wayfinding pattern.
## 4. Component Stylings
### Buttons
**Primary (Transparent with Hover Animation)**
- Background: transparent (`rgba(239, 241, 243, 0)`)
- Text: `#000000`
- Padding: 6.4px 12.8px
- Border: none (or `1px solid #717989` for outlined variant)
- Hover: background shifts to swatch color (e.g., `#434346`), text to white,
`rotateZ(-8deg)`, `translateY(-80%)`, hard shadow `rgb(0,0,0) -7px 7px`
- Focus: `rgb(20, 110, 245) solid 2px` outline
**White Solid**
- Background: `#ffffff`
- Text: `#000000`
- Padding: 6.4px
- Hover: oat-200 swatch color, animated rotation + shadow
- Use: Primary CTA on colored sections
**Ghost Outlined**
- Background: transparent
- Text: `#000000`
- Padding: 8px
- Border: `1px solid #717989`
- Radius: 4px
- Hover: dragonfruit swatch color, white text, animated rotation
### Cards & Containers
- Background: `#ffffff` on cream canvas
- Border: `1px solid #dad4c8` (warm oat) or `1px dashed #dad4c8`
- Radius: 12px (standard cards), 24px (feature cards/images), 40px (section
containers/footer)
- Shadow:
`rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px 1px inset, rgba(0,0,0,0.05) 0px -0.5px 1px`
- Colorful section backgrounds using swatch palette (matcha, slushie, ube,
lemon)
### Inputs & Forms
- Text: `#000000`
- Border: `1px solid #717989`
- Radius: 4px
- Focus: `rgb(20, 110, 245) solid 2px` outline
### Navigation
- Sticky top nav on cream background
- Roobert 15px weight 500 for nav links
- Clay logo left-aligned
- CTA buttons right-aligned with pill radius
- Border bottom: `1px solid #dad4c8`
- Mobile: hamburger collapse at 767px
### Image Treatment
- Product screenshots in white cards with oat borders
- Colorful illustrated sections with swatch background colors
- 8px–24px radius on images
- Full-width colorful section backgrounds
### Distinctive Components
**Swatch Color Sections**
- Full-width sections with swatch-colored backgrounds (matcha green, slushie
cyan, ube purple, lemon gold)
- White text on dark swatches, black text on light swatches
- Each section tells a distinct product story through its color
**Playful Hover Buttons**
- Rotate -8deg + translate upward on hover
- Hard offset shadow (`-7px 7px`) instead of soft blur
- Background transitions to contrasting swatch color
- Creates a physical, toy-like interaction quality
**Dashed Border Elements**
- Dashed borders (`1px dashed #dad4c8`) alongside solid borders
- Used for secondary containers and decorative elements
- Adds a hand-drawn, craft-like quality
## 5. Layout Principles
### Spacing System
- Base unit: 8px
- Scale: 1px, 2px, 4px, 6.4px, 8px, 12px, 12.8px, 16px, 18px, 20px, 24px
### Grid & Container
- Max content width centered
- Feature sections alternate between white cards and colorful swatch backgrounds
- Card grids: 2–3 columns on desktop
- Full-width colorful sections break the grid
- Footer with generous 40px radius container
### Whitespace Philosophy
- **Warm, generous breathing**: The cream background provides a warm rest
between content blocks. Spacing is generous but not austere — it feels
inviting, like a well-set table.
- **Color as spatial rhythm**: The alternating swatch-colored sections create
visual rhythm through hue rather than just whitespace. Each color section is
its own "room."
- **Craft-like density inside cards**: Within cards, content is compact and
well-organized, contrasting with the generous outer spacing.
### Border Radius Scale
- Sharp (4px): Ghost buttons, inputs
- Standard (8px): Small cards, images, links
- Badge (11px): Tag badges
- Card (12px): Standard cards, buttons
- Feature (24px): Feature cards, images, panels
- Section (40px): Large sections, footer, containers
- Pill (1584px): CTAs, pill-shaped buttons
## 6. Depth & Elevation
| Level | Treatment | Use |
| --------------------- | ------------------------------------------------------------------------------------------- | ------------------------------------------------- |
| Flat (Level 0) | No shadow, cream canvas | Page background |
| Clay Shadow (Level 1) | `rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px inset, rgba(0,0,0,0.05) 0px -0.5px` | Cards, buttons — multi-layer with inset highlight |
| Hover Hard (Level 2) | `rgb(0,0,0) -7px 7px` | Hover state — playful hard offset shadow |
| Focus (Level 3) | `rgb(20, 110, 245) solid 2px` | Keyboard focus ring |
**Shadow Philosophy**: Clay's shadow system is uniquely three-layered: a
downward cast (`0px 1px 1px`), an upward inset highlight (`0px -1px 1px inset`),
and a subtle edge (`0px -0.5px 1px`). This creates a "pressed into clay" quality
where elements feel both raised AND embedded — like a clay tablet where content
is stamped into the surface. The hover hard shadow (`-7px 7px`) is deliberately
retro-graphic, referencing print-era drop shadows and adding physical
playfulness.
### Decorative Depth
- Full-width swatch-colored sections create dramatic depth through color
contrast
- Dashed borders add visual texture alongside solid borders
- Product illustrations with warm, organic art style
## 7. Do's and Don'ts
### Do
- Use warm cream (`#faf9f7`) as the page background — the warmth is the identity
- Apply all 5 OpenType stylistic sets on Roobert headings:
`"ss01", "ss03", "ss10", "ss11", "ss12"`
- Use the named swatch palette (Matcha, Slushie, Lemon, Ube, Pomegranate,
Blueberry) for section backgrounds
- Apply the playful hover animation: `rotateZ(-8deg)`, `translateY(-80%)`, hard
shadow `-7px 7px`
- Use warm oat borders (`#dad4c8`) — not neutral gray
- Mix solid and dashed borders for visual variety
- Use generous radius: 24px for cards, 40px for sections
- Use weight 600 exclusively for headings, 500 for UI, 400 for body
### Don't
- Don't use cool gray backgrounds — the warm cream (`#faf9f7`) is non-negotiable
- Don't use neutral gray borders (`#ccc`, `#ddd`) — always use the warm oat
tones
- Don't mix more than 2 swatch colors in the same section
- Don't skip the OpenType stylistic sets — they define Roobert's character
- Don't use subtle hover effects — the rotation + hard shadow is the signature
interaction
- Don't use small border radius (<12px) on feature cards — the generous rounding
is structural
- Don't use standard shadows (blur-based) — Clay uses hard offset and
multi-layer inset
- Don't forget the uppercase labels with 1.08px tracking — they're the
wayfinding system
## 8. Responsive Behavior
### Breakpoints
| Name | Width | Key Changes |
| ------------ | --------- | ---------------------------------------------- |
| Mobile Small | <479px | Single column, tight padding |
| Mobile | 479–767px | Standard mobile, stacked layout |
| Tablet | 768–991px | 2-column grids, condensed nav |
| Desktop | 992px+ | Full layout, 3-column grids, expanded sections |
### Touch Targets
- Buttons: minimum 6.4px + 12.8px padding for adequate touch area
- Nav links: 15px font with generous spacing
- Mobile: full-width buttons for easy tapping
### Collapsing Strategy
- Hero: 80px → 60px → smaller display text
- Navigation: horizontal → hamburger at 767px
- Feature sections: multi-column → stacked
- Colorful sections: maintain full-width but compress padding
- Card grids: 3-column → 2-column → single column
### Image Behavior
- Product screenshots scale proportionally
- Colorful section illustrations adapt to viewport width
- Rounded corners maintained across breakpoints
## 9. Agent Prompt Guide
### Quick Color Reference
- Background: Warm Cream (`#faf9f7`)
- Text: Clay Black (`#000000`)
- Secondary text: Warm Silver (`#9f9b93`)
- Border: Oat Border (`#dad4c8`)
- Green accent: Matcha 600 (`#078a52`)
- Cyan accent: Slushie 500 (`#3bd3fd`)
- Gold accent: Lemon 500 (`#fbbd41`)
- Purple accent: Ube 800 (`#43089f`)
- Pink accent: Pomegranate 400 (`#fc7981`)
### Example Component Prompts
- "Create a hero on warm cream (#faf9f7) background. Headline at 80px Roobert
weight 600, line-height 1.00, letter-spacing -3.2px, OpenType 'ss01 ss03 ss10
ss11 ss12', black text. Subtitle at 20px weight 400, line-height 1.40, #9f9b93
text. Two buttons: white solid pill (12px radius) and ghost outlined (4px
radius, 1px solid #717989)."
- "Design a colorful section with Matcha 800 (#02492a) background. Heading at
44px Roobert weight 600, letter-spacing -1.32px, white text. Body at 18px
weight 400, line-height 1.60, #84e7a5 text. White card inset with oat border
(#dad4c8), 24px radius."
- "Build a button with playful hover: default transparent background, black
text, 16px Roobert weight 500. On hover: background #434346, text white,
transform rotateZ(-8deg) translateY(-80%), hard shadow rgb(0,0,0) -7px 7px."
- "Create a card: white background, 1px solid #dad4c8 border, 24px radius.
Shadow: rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px 1px inset.
Title at 32px Roobert weight 600, letter-spacing -0.64px."
- "Design an uppercase label: 12px Roobert weight 600, text-transform uppercase,
letter-spacing 1.08px, OpenType 'ss03 ss10 ss11 ss12'."
### Iteration Guide
1. Start with warm cream (#faf9f7) — never cool white
2. Swatch colors are for full sections, not small accents — go bold with matcha,
slushie, ube
3. Oat borders (#dad4c8) everywhere — dashed variants for decoration
4. OpenType stylistic sets are mandatory — they make Roobert look like Roobert
5. Hover animations are the signature — rotation + hard shadow, not subtle fades
6. Generous radius: 24px cards, 40px sections — nothing looks sharp or corporate
7. Three weights: 600 (headings), 500 (UI), 400 (body) — strict roles