# Clay · Design system migration spec

> Source: https://clay.global  ·  Curated by OpenDesign  ·  en

> This site is a perfect example of restrained, premium agency design where the typography and high-quality portfolio imagery are the primary focus.

## 1. Identity DNA

Clay's design system operates like a deliberate pause before a conversation. It treats the brand mark as a singular architectural element, centering it within a vast white field to command attention through absence rather than addition.

**One-liner:** A global branding and UX design agency portfolio.
**Keywords:** branding · UX · agency · global · design · creative
**Analogy:** A premium design agency showcasing high-end portfolio work.

## 2. Color

The color system is defined by its severe restraint, built upon a foundation of pure white and neutral gray. A single deep blue accent exists solely within the logo mark, functioning as a visual anchor in the negative space.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#EFEDEE` | card background |
| `--bg-quiet` | `#F3F4F6` | quiet area |
| `--ink` | `#06070A` | body text |
| `--ink-soft` | `#666C7A` | secondary text |
| `--muted` | `#B2B8C2` | placeholder |
| `--muted-soft` | `#A4B0C2` | weak hint |
| `--line` | `rgba(6,7,10,1.0)` | divider |

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

This approach ensures the brand's presence is felt, not explained.

## 3. Typography

Typography is present only as a monospaced rendering of the brand name, treated as a component of the logo itself rather than a voice for content. There is no type scale or text hierarchy, reinforcing the system's logo-centric identity.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 72px | 1.1 | 740 | -2.96px | Hero headline |
| heading | 32px | 1.2 | 740 | -0.6px | Case study titles |
| body | 18px | 1.24 | 500 | -0.3px | Primary body text |
| caption | 15px | 1.3 | 500 | -0.28px | UI labels and small text |

## 4. Spacing

Rhythm is established through centered, symmetric vertical stacking, where the singular element's placement defines all spatial relationships.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Standard 4px base grid with generous whitespace in hero sections and consistent padding in content containers.

## 5. Surfaces

Surfaces are conceived as pure, unadorned planes. The absence of shadows and borders creates a depthless canvas, ensuring no visual hierarchy competes with the central mark.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - 0 4px 24px rgba(6,7,10,0.08)
- **Borders:** Minimal 1px solid lines, mostly borderless cards, with a prominent pill-shaped Contact button.

## 6. Layout

The layout skeleton is a study in absolute centering, with the logo element positioned as the focal point in a single-column structure. This symmetrical composition transforms negative space into the primary layout material.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion philosophy is one of deliberate stillness, though defined durations exist for potential future micro-interactions. The specified easing curve suggests any movement would be smooth and considered, never disruptive to the static composition.

- **Durations:** micro 150ms · small 650ms · medium 900ms
- **Easing:** `cubic-bezier(0.16, 1, 0.3, 1)`
- **Patterns:**
  - Smooth opacity fades on page load
  - Gentle transforms on scroll
  - Hover color transitions on navigation links

- **Hover:** Subtle color transition on nav links (0.15s).
- **Click:** Immediate response with cursor pointer on interactive elements.
- **Transition:** Smooth page transitions and scroll-triggered animations using a custom cubic-bezier curve.
- **Keyboard:** Standard tab navigation with visible focus states.

## 8. Voice & Don'ts

The editorial voice is completely silent, avoiding headlines, calls-to-action, and explanatory text. This system communicates purely through the presence of the brand mark.

- **Tone:** Confident, professional, and concise.
- **Headline style:** Large, bold, lowercase or sentence-case geometric sans-serif headlines.
- **CTA style:** Short, direct, uppercase text inside a pill-shaped container.
- **Avoid:** Overly enthusiastic or salesy language / Complex sentences / Bright neon or clashing color accents / Decorative serifs / Heavy drop shadows

### Don'ts
- ❌ 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.

It deliberately forgoes navigation, content, and secondary UI to exist solely as a statement of identity.

## System Prompt (paste into AI tool)

```
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.
```
