---
name: Clay
description: "This site is a perfect example of restrained, premium agency design where the typography and high-quality portfolio imagery are the primary focus."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#06070A"
  secondary: "#666C7A"
  neutral: "#B2B8C2"
  bg-soft: "#EFEDEE"
  bg-quiet: "#F3F4F6"
  muted-soft: "#A4B0C2"
  line: "rgba(6,7,10,1.0)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 72px
    lineHeight: 1.1
    fontWeight: 740
    letterSpacing: "-2.96px"
  heading:
    fontFamily: geometric-sans
    fontSize: 32px
    lineHeight: 1.2
    fontWeight: 740
    letterSpacing: "-0.6px"
  body:
    fontFamily: geometric-sans
    fontSize: 18px
    lineHeight: 1.24
    fontWeight: 500
    letterSpacing: "-0.3px"
  caption:
    fontFamily: geometric-sans
    fontSize: 15px
    lineHeight: 1.3
    fontWeight: 500
    letterSpacing: "-0.28px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A global branding and UX design agency portfolio.

*A premium design agency showcasing high-end portfolio work.*

## Colors

Monochromatic ink-on-white with subtle warm-grey background gradients and muted grey UI elements.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#06070A`)** — uses `ink` token
- **Secondary text (`#666C7A`)** — uses `ink-soft` token
- **Muted (`#B2B8C2`)** — uses `muted` token
- **Borders (`rgba(6,7,10,1.0)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** geometric-sans

## Layout

Asymmetric split layout in the hero (text left, 3D graphic right) and a grid of large image-based case study cards below.

*Rhythm:* Standard 4px base grid with generous whitespace in hero sections and consistent padding in content containers.

## Elevation & Depth

- 0 4px 24px rgba(6,7,10,0.08)
- Borders: Minimal 1px solid lines, mostly borderless cards, with a prominent pill-shaped Contact button.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Black pill-shaped primary CTA, uppercase text, subtle hover transitions.
- **card:** Large, borderless image-heavy case study cards with tight text captions underneath.
- **chip:** None visible.
- **input:** None visible.
- **hero:** Full-width split layout with large typography on the left and an abstract 3D composition on the right.

## Do's and Don'ts

**Don't:**
- Don't use decorative serif fonts — screenshot shows clean geometric sans-serif typography for all text.
- Don't use bright, high-chroma accent colors — screenshot shows a monochromatic palette with black, white, and grey.
- Don't add heavy borders or drop shadows to cards — screenshot shows borderless, image-focused case study cards.
- Don't use perfectly square corners — screenshot shows a pill-shaped (999px radius) Contact button.
- Don't use justified text — screenshot shows left-aligned typography with tight letter-spacing.
- Don't use a crowded layout — screenshot shows generous whitespace and large padding around elements.

---

## System Prompt (paste into AI agent)

```
Design a premium global branding and UX design agency website. Use a monochromatic palette centered on pure white (#FFFFFF) and deep ink (#06070A), with subtle warm-grey backgrounds (#EFEDEE) and muted grey UI elements (#666C7A). Typography must be a clean geometric sans-serif in two weights: a heavy 740 weight for large display headlines and a medium 500 weight for body text, both with tight negative letter-spacing. The layout should feature generous whitespace, asymmetric split hero sections, and large, borderless image-heavy case study cards. Key interaction elements like the primary CTA should use a black pill-shaped button. Critical constraints: avoid all decorative serif fonts, never use high-chroma accent colors, and maintain a restrained, sophisticated aesthetic with smooth cubic-bezier transitions.
```