---
title: "Clutch Security design system"
variant: extended
source: https://www.clutch.security/
captured_at: 2026-10-12
theme: light
industry: saas
generator: Design DNA (https://four.wiralomi.com/style/clutch-security)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Clutch Security · Design System

> Identity security, rendered with monochrome clarity.

**Theme:** light · **Industry:** saas · **Source:** https://www.clutch.security/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Clutch’s homepage pairs a restrained black-and-white interface with vivid blue accents and sculptural 3D security imagery. Large, confident headings and carefully separated sections make a complex enterprise security platform feel legible and composed.

## North star

Keep the interface almost entirely white and black, using blue sparingly while giving the 3D identity artwork room to command attention.

## Overview

The visual strategy is built on a white canvas, near-black typography and fine pale-gray rules. Strong blue appears sparingly in badges, small illustration details and the hero’s radiant focal artwork; pale lavender and blue-gray are secondary accents rather than broad interface fills. PP Radio Grotesk gives headlines a distinctive, rounded display voice, while Inter keeps navigation, paragraphs and controls practical and quiet. The homepage is organized as a sequence of spacious, mostly white bands, with thin borders defining cards and section boundaries instead of colored panels. Headlines alternate between centered introductions and left-aligned editorial statements, supported by compact copy and modular columns. Abstract 3D identity objects, orbiting app marks and restrained connector diagrams supply the visual interest. The result feels enterprise-ready without relying on dense dashboards, heavy shadows or decorative interface chrome.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary canvas and section background throughout the homepage; also the light color in restrained artwork fades. |
| Carbon Ink | `#000000` | `--color-carbon-ink` | brand | Logo, headings, body text, navigation, footer links and dark details in the identity illustrations. |
| Rule Gray | `#dfdfdf` | `--color-rule-gray` | neutral | Fine borders around cards, controls, logo bands and section divisions. |
| Quiet Graphite | `#6e6e6e` | `--color-quiet-graphite` | semantic | Muted supporting copy, subtle footer text and low-emphasis interface labels. |
| Signal Blue | `#004dff` | `--color-signal-blue` | accent | Identity badge and selective bright details in the hero and integration artwork; reserve for emphasis. |
| Soft Orchid | `#e6c5f7` | `--color-soft-orchid` | accent | AI agents badge and small category highlights, not a large page background. |
| Mist Blue | `#d9e4ff` | `--color-mist-blue` | accent | Pale blue detail within illustration gradients and occasional supporting visual accents. |
| Card Silver | `#d9d9d9` | `--color-card-silver` | neutral | Subtle card edge or illustration-adjacent gray; secondary to the measured Rule Gray border. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-text` → `#000000` (Carbon Ink) · `--color-text-muted` → `#6e6e6e` (Quiet Graphite) · `--color-border` → `#dfdfdf` (Rule Gray) · `--color-accent` → `#004dff` (Signal Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#6e6e6e` | `#ffffff` | 5.1:1 | AA |
| `#004dff` | `#ffffff` | 5.99:1 | AA |

### Gradients

- `radial-gradient(37% 37% at 98.12% 50.68%, rgba(255, 255, 255, 0) 70.77%, rgb(255, 255, 255) 100%)`
- `conic-gradient(from 206.55deg at 18.84% 51%, rgba(255, 255, 255, 0) -137.29deg, rgba(255, 255, 255, 0) 181.31deg, rgb(0, 77, 255) 197.22deg, rgb(217, 228, 255) 200.69deg, rgb(0, 77, 255) 204.02deg, rgb(0, 0, 0) 205.15deg`
- `linear-gradient(0deg, rgba(255, 255, 255, 0) 40%, rgb(0, 0, 0) 100%)`
- `linear-gradient(111.56deg, rgb(0, 0, 0) 2.79%, rgb(255, 255, 255) 99.72%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 500, 700 | Navigation, body copy, buttons, links, captions and functional labels. | Inter |
| PP Radio Grotesk | `--font-display` | webfont | 400, 600, 500 | Display and section headings, selected feature titles, and uppercase eyebrow labels. | Space Grotesk |

- **Inter:** Use regular weights for most interface text and medium weight for calls to action; keep case natural.
- **PP Radio Grotesk:** Use regular display headings with slightly tight tracking; reserve semibold for smaller subheads and uppercase for eyebrows.

### Type scale — Perfect Fourth (ratio ≈ 1.353, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 68px | 400 | 1.1 | -0.01em | — | PP Radio Grotesk | Oversized hero or campaign statements. |
| h1 | 56px | 400 | 1.2 | -0.01em | — | PP Radio Grotesk | Primary hero and major page headings. |
| h2 | 38px | 400 | 1.2 | 0.01em | — | PP Radio Grotesk | Section titles such as platform and approach introductions. |
| h3 | 32px | 600 | 1.2 | -0.01em | — | PP Radio Grotesk | Feature titles and emphasized content headings. |
| h4 | 26px | 400 | 1.2 | 0.01em | — | PP Radio Grotesk | Secondary module and card headings. |
| body | 15px | 400 | 1.5 | 0 | — | Inter | Explanatory paragraphs and feature descriptions. |
| caption | 14px | 400 | 1.5 | 0 | — | Inter | Supporting labels, attribution and fine-print text. |
| button | 15px | 400 | 1.5 | 0 | — | Inter | Calls to action and compact action controls. |
| nav | 15px | 400 | 1.5 | 0 | — | Inter | Header navigation and footer navigation. |
| link | 15px | 400 | 1.5 | 0 | — | Inter | Feature links and text-based calls to action. |
| eyebrow | 12px | 500 | 1.5 | 0.16em | uppercase | PP Radio Grotesk | Uppercase category badges and section labels. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 2, 4, 6, 8, 10, 12, 16, 24, 32, 40, 48, 64, 80, 88 px.
- Section rhythm 80px · element gap 16px · card padding 84px · max content width 1124px.

Use a centered content frame capped at the measured 1124px page width. Build a long, comfortable scroll of full-width white section bands, separated by fine borders rather than colored backgrounds. The hero is centered, while platform, approach, integration and footer areas shift to left-aligned modular columns. Alternate centered logo and trust bands with split feature sections and two- or three-column content. Keep content density low, align text and media to consistent column edges, and retain generous section rhythm; measured section spacing is 80px.

## Shape & elevation

- Radius: button `6px` · badge `4px` · nav `6px` · link `6px` · xs `4px` · sm `5px` · md `6px` · lg `8px` · pill `9999px`
- Shadow `sm` (link, nav): `rgba(0, 0, 0, 0.16) 0px 2px 6px 0px`
- Motion: standard transition `0.2s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The system is predominantly flat: white surfaces, thin Rule Gray outlines and clear section boundaries do most of the structural work. Use only subtle, restrained shadowing around select navigation or link controls. Create visual depth inside the hero artwork through 3D lighting and gradients, not through stacked UI cards or heavy drop shadows.

## Imagery

Lead with a custom monochrome 3D identity mark floating over a dark circular field, surrounded by small service or identity tokens. Later sections use compact sculptural objects, simple node diagrams, integration logos and award marks rather than lifestyle photography. Keep artwork on white, with black-and-gray modeling and selective Signal Blue or pale accent details. Treat product visuals as isolated focal compositions, not busy full-bleed backgrounds.

## Components

### Header and demo action

A sparse horizontal header with the black Clutch mark, compact Inter navigation and a dark, rounded Book a demo control.

### Hero

Centered large Grotesk headline, compact supporting copy and a prominent floating 3D identity illustration on white.

### Trust strip

A short caption and a row of customer marks inside a white band with thin gray section rules.

### Category badges

Compact uppercase Grotesk labels; identity uses Signal Blue with white text and AI agents uses Soft Orchid with black text.

### Feature panels

Border-defined, spacious white modules combining a strong heading, concise copy, lists or links, and occasional product imagery.

### Tabbed security module

A three-category strip for Identities, AI Agents and Secrets above a sparse explanatory content panel.

### Footer and signup

A broad multi-column footer pairing the brand and demo link with a newsletter form, dense link groups and muted legal copy.

### Measured component styles

- **Primary button** (“Identities”): transparent background · text #000000 · border 1px solid #dfdfdf · radius 0px · padding 16px · 400 16px Inter
- **Link** (“Discovery & Inventory”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Inter
- **Input**: transparent background · text #000000 · radius 0px · padding 12px 80px 16px 0px · 400 15px Inter
- **Card** (“They Exist Everywhere. They're Managed N”): transparent background · text #000000 · border 1px solid #dfdfdf · radius 0px · padding 88px 80px · 400 16px Inter
- **Badge** (“IDENTITIES”): background #004dff · text #ffffff · radius 4px · padding 4px 10px · 500 10px PP Radio Grotesk · uppercase
- **Navigation item** (“Platform Solutions Use Cases Resources C”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Inter

## Do

- Keep white as the dominant surface.
- Use black for the primary text hierarchy.
- Reserve Signal Blue for small, high-value accents.
- Use PP Radio Grotesk for prominent headings.
- Separate major bands with fine gray rules.
- Give the hero illustration generous breathing room.

## Don't

- Do not introduce saturated section backgrounds.
- Do not turn every card into a raised, shadowed tile.
- Do not use blue for all links and controls.
- Do not crowd the page with dashboard-like data.
- Do not treat illustration-only colors as core interface fills.
- Do not replace the clean section rhythm with dense grids.

## Agent prompt

Build a new enterprise security page in the Clutch visual style. Use Gallery White (#ffffff) for the canvas, Carbon Ink (#000000) for typography and primary marks, and Rule Gray (#dfdfdf) for quiet borders. Keep Signal Blue (#004dff) selective; Soft Orchid (#e6c5f7) and Mist Blue (#d9e4ff) belong in small category or artwork accents. Set headlines in PP Radio Grotesk or a close geometric substitute, with Inter for navigation, body text and controls. Use a centered content frame, spacious white section bands, thin dividers, and alternating centered and left-aligned modules. Feature abstract, monochrome 3D identity imagery rather than lifestyle photography. Favor flat surfaces and restrained shadowing. Keep paragraphs concise, align columns carefully, and make the primary demo action easy to find without making the page feel promotional or crowded.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered heading and copy above a large centered 3D illustration in a white framed area. | primary message first, visual proof point | large display heading, centered copy, 3D illustration, thin side rules |
| 2 | logo-cloud | Centered trust caption above four evenly distributed brand marks. | social proof | logo row, centered caption, top and bottom divider |
| 3 | stats | Centered section title over three horizontally aligned identity categories. | problem framing, category comparison | three-column layout, small 3D objects, connector labels |
| 4 | feature-split | Left-aligned heading and copy paired with a platform relationship diagram; compact proof strip below. | explain platform, follow-up action | split columns, node diagram, bordered callout |
| 5 | feature-grid | Centered title followed by spacious, alternating two-column security category modules. | browse capabilities, category discovery | category badges, feature links, thin card borders |
| 6 | product-showcase | Left-aligned intro, three-category tab strip and an open feature description panel. | switch categories, learn more | tabs, selected underline, compact content panel |
| 7 | feature-grid | Left-aligned heading above three equal columns of short feature explanations. | compare benefits, progressive explanation | three-column grid, small arrow buttons, text-first cards |
| 8 | integrations | Three-column section with a large title, integration artwork and compact benefit summaries. | show compatibility, explore integrations | logo orbit artwork, primary action, three benefit columns |
| 9 | testimonials | A horizontal four-part band pairing attribution with a wide testimonial quote. | customer validation | quote block, person attribution, divided band |
| 10 | other | Centered heading above a single horizontal row of award and recognition marks. | credibility signals | centered heading, award logo row, section divider |
| 11 | newsletter | Four-column footer area with brand actions, signup form and grouped navigation links. | newsletter signup, site navigation | email input, consent copy, multi-column link groups |
| 12 | footer | A short, single-column continuation beneath the main footer. | brand sign-off | minimal footer band, oversized brand artwork |

## Source CSS custom properties (selected)

```css
--tw-bg-opacity: 1;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/clutch-security