Light interfaceMeasured www.clay.com

Clay

Crafted and tactile, like a playful workshop for growth teams.

This page is styled with Clay’s own measured values. It is a private reference for AltLeads; their logo, brand and company-only fonts belong to them.

Colours

Each role is a value read from their live website, checked against their screenshots.

Background#FEFDFB
Page behind everything

Surface#F4F3F0
Cards, panels, menus

Text#1B1A18
Headings and body

Muted text#79756D
Secondary info

Line#D1CDC7
Dividers and outlines

Accent#CBD810
Main button, links, selection

On accent#000000
Text on the accent

Contrast

Text on background 17.1:1Muted on background 4.5:1Text on accent 13.4:1

Every colour found on their site

#000000#1B1A18#79756D#FFFFFF#FEFDFB#F4F3F0#EEF773#035D44#3BD3FD#E6E8EC#D1CDC7#F3F2ED#CBD810

Typography

Headings use Roobertvf (company-only; shown here with the free look-alike Manrope). Body text uses Roobertvf (company-only; shown with Manrope).

h1	Roobertvf · 88px · 575 · -3.52px	Build systems to grow revenue
h2	Roobertvf · 72px · 500 · -2.16px	GTM engineers build on Clay
h3	Roobertvf · 48px · 500 · -1.92px	What do you want to build?
p	Roobertvf · 14px · 500	Product
li	Roobertvf · 16px · 400	Product

Corners & shadows

Corner sizes used

18px

12px

8px

16px

32px

10px

Shadows

Shadow 1

Shadow 2

Shadow 3

Components, rebuilt from their values

Live and clickable. Built by us from the numbers above, not copied from their code. Sample CRM data.

Buttons

Navigation

WorkspaceCompanies Contacts Meetings

Disposition

InterestedCallbackBengaluru

Hide do-not-call

Next call

Licious · Admin head

Wants a proposal before the cafeteria contract renews in March.

Tabs

Table

Company	Owner	Status	Last touch
Zomato Food tech · Gurugram	PR	Callback	18 days ago
Licious Food tech · Bengaluru	RM	Interested	Today
Delhivery Logistics · Gurugram	AS	No answer	35 days ago

Toast

Call logged · callback on Friday

Real components from their site

Cropped from Clay’s live website. Click to enlarge.

Buttons · 4

Clay button: Get a demo — #F3F2ED · corners 12px · 39px

Clay button: Start free trial — #000000 · corners 12px · 39px

Navigation bar · 1

Clay Navigation bar: Back — no fill · square · Roobertvf 16px

Buttons · 5

Clay Buttons: Get a demo — fill #F3F2ED · corners 12px · Roobertvf 13.92px

Clay Buttons: Start free trial — fill #000000 · corners 12px · Roobertvf 13.92px

Clay Buttons: Lead Scoring — fill #C8BBFB · corners 12px · Roobertvf 16px

Tags and badges · 5

Clay Tags and badges: ⌘ — no fill · corners 4px · Roobertvf 12.8px

Clay Tags and badges: DATA — fill #395AFA · corners 1600px · Roobertvf 12px

Clay Tags and badges: AGENTS — fill #B53D0A · corners 1600px · Roobertvf 12px

Clay Tags and badges: ORCHESTRATION — fill #808000 · corners 1600px · Roobertvf 12px

Clay Tags and badges: EXECUTION — fill #CC089E · corners 1600px · Roobertvf 12px

Cards and panels · 1

Clay Cards and panels: All inbound — fill #FEFDFB · corners 18px · Roobertvf 16px

Icons

3 icons copied exactly from their site’s code.

Product screens

5 real screens from web image search, each linked to where it was found.

Clay product screen: 1280 × 1031 — 1280 × 1031

Clay product screen: 1450 × 910 — 1450 × 910

Clay product screen: 1200 × 630 — 1200 × 630

Clay product screen: 1598 × 1420 — 1598 × 1420

Clay product screen: 2560 × 1120 — 2560 × 1120

Do & don’t

What makes it Clay

Warm off-white backgrounds, never clinical white
A single lime-yellow accent button alongside solid black ones
Soft, rounded cards (12-18px) with a crafted, illustrated feel

Use warm cream backgrounds instead of pure white
Pair black buttons with one bright lime accent
Keep corners generously rounded

Don’t

Don't use cold grey or blue-white backgrounds
Don't use sharp corners or hard edges
Don't overload the page with many accent colours

For AltLeads: Borrow the warm, crafted feel and single bright accent so the tool feels human, not robotic.

Copy the tokens

Paste into any project to try this look.

/* Clay · values measured from https://www.clay.com/ · reference only, their brand belongs to them */
:root {
  --bg: #FEFDFB;
  --surface: #F4F3F0;
  --text: #1B1A18;
  --muted: #79756D;
  --line: #D1CDC7;
  --accent: #CBD810;
  --on-accent: #000000;
  --radius-button: 12px;
  --radius-card: 18px;
  --radius-small: 8px;
  --button-height: 47px;
  --font-heading: "Roobertvf", "Manrope", system-ui, sans-serif;
  --font-body: "Roobertvf", "Manrope", system-ui, sans-serif;
  --shadow: rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
}