CURATED · OPEN · FREE

Clay

A global branding and UX design agency portfolio.

EditorialCleanProductCalmRestraint
Clay screenshot
↓ Download design system (17 MB)Open in OpenDesign

Visit: https://clay.global

📦 Browse pack contents →

01

Identity DNA

brandingUXagencyglobaldesigncreative

A premium design agency showcasing high-end portfolio work.

02

Color

#06070AInk
#666C7AInk soft
#FFFFFFBG
#EFEDEEBG soft
#F3F4F6BG quiet
#B2B8C2Muted
rgba(6,7,10,1.0)Line

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

03

Typography

geometric-sans

04

Spacing

4px
8px
16px
24px
32px
48px
64px
96px

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

05

Surfaces

sm · 4px
md · 8px
lg · 12px
pill · 999px

Minimal 1px solid lines, mostly borderless cards, with a prominent pill-shaped Contact button.

0 4px 24px rgba(6,7,10,0.08)

06

Layout

1280container
12columns
24pxgutter
768 / 1024breakpoints

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

07

Motion & Interaction

150msmicro
650mssmall
900msmedium
cubic-bezier(0.16, 1, 0.3, 1)easing

Smooth opacity fades on page load · Gentle transforms on scroll · Hover color transitions on navigation links

Subtle color transition on nav links (0.15s). · Immediate response with cursor pointer on interactive elements.

08

Components

09

Voice & Don'ts

10

Inside the pack — real screenshots

Clay — 桌面首屏（hero）
桌面首屏（hero）
Clay — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Clay — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Clay — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Clay — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Clay — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Clay — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Clay — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Clay — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Clay — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Clay — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Clay — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Clay — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Clay — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Clay — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Clay — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Clay — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Clay — 移动首屏
移动首屏

Captured from the live site · real computed styles

11

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko