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