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

# Clearbit — Homepage · Design System

> A crisp data story on a cloud-white canvas

**Theme:** light · **Industry:** saas · **Source:** https://clearbit.com/ · **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._

A restrained B2B SaaS page introduces Clearbit as part of HubSpot, then explains its data-enrichment capabilities through a sequence of product-led feature stories. Dark navy typography, subtle blue-violet glows, and floating interface mockups keep the page polished without distracting from the content.

## North star

Let clear navy typography and generous white space lead; use blue-violet glow and product mockups only to support the story.

## Overview

The visual strategy is built on a white canvas and deep navy typography, with muted gray supporting copy and sparse violet accents. A bright blue login CTA provides the strongest functional color cue; lavender badge styling marks short feature labels rather than large sections. Inter Variable gives the page a consistent, modern voice, using large centered headlines for the opening and smaller, left-aligned headings for feature stories. The content sits in a centered, constrained column, while the long feature sequence alternates text and product-interface imagery to maintain a measured editorial rhythm. Generous whitespace separates the announcement, capability overview, feature examples, and footer. Product mockups are layered over pale blue and violet atmospheric glows, but these gradients stay soft and subordinate to the interface details. Hairline borders and subtle shadows define badges and floating UI without turning the page into a card-heavy dashboard.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Cloud White | `#ffffff` | `--color-cloud-white` | surface | Main page canvas and dominant background behind every content section. |
| Midnight Ink | `#091135` | `--color-midnight-ink` | brand | Primary color for hero and feature headings, navigation text, and dark interface text. |
| Lavender Line | `#ddd6fe` | `--color-lavender-line` | semantic | Thin badge borders and restrained lavender outlines; not a section background. |
| Focus Violet | `#8b5cf6` | `--color-focus-violet` | accent | Short badge labels and selected emphasis, notably on pale lavender badge fills. |
| Slate Copy | `#36394a` | `--color-slate-copy` | neutral | Muted supporting paragraphs and secondary explanatory text. |
| Signal Blue | `#127ee3` | `--color-signal-blue` | accent | Blue customer-login CTA with white text; the clearest functional accent on the page. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Cloud White) · `--color-text` → `#091135` (Midnight Ink) · `--color-text-muted` → `#36394a` (Slate Copy) · `--color-border` → `#ddd6fe` (Lavender Line) · `--color-accent` → `#8b5cf6` (Focus Violet) · `--color-accent-2` → `#127ee3` (Signal Blue) · `--color-on-accent` → `#ffffff` (Cloud White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#091135` | `#ffffff` | 18.37:1 | AAA |
| `#36394a` | `#ffffff` | 11.41:1 | AAA |
| `#8b5cf6` | `#ffffff` | 4.23:1 | AA-large |

### Gradients

- `linear-gradient(rgba(246, 248, 250, 0.376) 0%, rgba(246, 248, 250, 0) 100%)`
- `linear-gradient(rgba(255, 255, 255, 0.16) 100%, rgba(255, 255, 255, 0) 0px), none`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| InterVar | `--font-body` | webfont | 400, 500, 600 | All headings, body copy, labels, navigation, and buttons. | Inter |

- **InterVar:** Use 600 for prominent headings, 400 for body, and 500 for labels and buttons; sentence case with subtly open tracking.

### Type scale — Golden Ratio (ratio ≈ 1.587, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 600 | 1.25 | 0.004em | — | InterVar | Large central statement introducing the data foundation. |
| h1 | 56px | 600 | 1.25 | 0.004em | — | InterVar | Primary announcement headline at the top of the page. |
| h2 | 32px | 600 | 1.25 | 0.008em | — | InterVar | Feature titles such as enrichment and buying intent. |
| body | 16px | 400 | 1.5 | 0.016em | — | InterVar | Supporting explanations and feature descriptions. |
| caption | 14px | 500 | 1.25 | 0.018em | — | InterVar | Compact badge labels and small secondary text. |
| button | 14px | 500 | 1.43 | 0.018em | — | InterVar | Customer-login CTA label. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 2, 8, 16, 20, 24, 44, 48, 64, 80, 128, 142 px.
- Section rhythm 64px · element gap 8px · card padding — · max content width 996px.

Use a centered page frame with a measured maximum width of 996px. The opening announcement and data-foundation statement are centered; subsequent feature stories shift into a two-column split, pairing copy with product imagery and alternating emphasis down the page. Keep the overall density comfortable, with broad whitespace between blocks and a measured section gap of 64px. Feature details may break into smaller supporting columns. Finish with a compact, single-row footer rather than a large closing panel.

## Shape & elevation

- Radius: button `8px` · badge `9999px` · pill `9999px`
- Shadow `md` (button): `rgb(15, 119, 255) 0px 0px 0px 1px, rgba(12, 43, 100, 0.32) 0px 1px 2px 0px, rgba(12, 43, 100, 0.32) 0px 6px 16px 0px`
- Shadow `hairline` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(107, 144, 192, 0.15) 0px 0px 0px 1px, rgba(0, 0, 0, 0.05) 0px 1px 2px 1px`
- Motion: standard transition `0.3s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The page is mostly flat: white canvas, minimal surface changes, and no heavy card system. Use light hairline treatment around compact UI elements and badges. Product mockups can sit above the background with restrained shadows; reserve the stronger blue-accent shadow treatment for the customer-login button.

## Imagery

Use crisp product-interface mockups instead of lifestyle photography. Show data records, scoring panels, and visitor-intent views as layered UI cards with readable labels and restrained borders. Float the mockups beside feature copy, adding soft pale-blue or violet atmospheric glows behind them. Keep decoration subtle and avoid full-bleed media.

## Components

### Customer login CTA

Use a #127ee3 button with white text, 14px medium InterVar, an 8px radius, and measured 8px 16px padding.

### Feature label badge

A compact pill using #f5f3ff fill, #8b5cf6 text, a 1px solid #ddd6fe border, and a 9999px radius.

### Feature split

Pair a left- or right-positioned product mockup with a concise, left-aligned heading and explanatory copy.

### Floating product UI

Present data records and scoring details as layered interface panels with subtle borders, shadows, and soft glow behind them.

### Opening announcement

Center the joined-HubSpot headline and its short supporting line near the page top, beneath the compact header.

### Footer utility row

Keep brand mark, policy and support links, cookie control, and copyright in a compact single-row layout.

### Measured component styles

- **Primary button** (“Clearbit customer login”): background #127ee3 · text #ffffff · radius 8px · padding 8px 16px · 500 14px InterVar · shadow rgb(15, 119, 255) 0px 0px 0px 1px, rgba(12, 43, 100, 0.32) 0px 1px 2px 0px, rgba
- **Badge** (“Focus on what matters”): background #f5f3ff · text #8b5cf6 · border 1px solid #ddd6fe · radius 12px · padding 2px 8px · 500 14px InterVar
- **Navigation item** (“Clearbit customer login”): transparent background · text #091135 · radius 0px · padding 0px · 400 16px InterVar

## Do

- Keep the page canvas white and visually quiet.
- Use navy for the main headline and feature titles.
- Center the opening announcement and data-foundation message.
- Alternate feature copy and interface mockups down the page.
- Use blue for the primary customer-login action.
- Reserve lavender for small labels and accents.
- Give major content blocks generous breathing room.

## Don't

- Do not add large saturated background bands.
- Do not turn every feature into a boxed card.
- Do not let decorative glows obscure product UI.
- Do not use photography where interface examples tell the story.
- Do not use violet as a full-page CTA color.
- Do not crowd the headline or feature copy.
- Do not invent additional palette colors for core UI.

## Agent prompt

Build a new B2B SaaS page in Clearbit’s restrained product-led style. Use a white canvas (#ffffff), Midnight Ink (#091135) for primary headings, and Slate Copy (#36394a) for supporting text. Keep Signal Blue (#127ee3) for the main action, with Focus Violet (#8b5cf6) and Lavender Line (#ddd6fe) reserved for compact feature badges. Set all type in Inter or InterVar, with bold, sentence-case headings and readable body copy. Center the opening statement, then use alternating text-and-interface feature splits within a constrained centered frame. Create detailed product UI mockups with subtle borders, soft shadows, and pale atmospheric blue-violet glows. Maintain generous whitespace, avoid heavy card framing, and close with a concise utility footer.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Compact header above a centered announcement, followed by a centered data-foundation introduction. | Clear primary login action, Headline then supporting explanation | Centered typography, Blue login button, Soft glow behind icon |
| 2 | feature-split | Long sequence of alternating two-column product mockups and feature copy, ending with supporting capability details. | Feature-by-feature explanation, Visual proof beside copy, Compact category labels | Floating data panels, Lavender label badges, Soft blue-violet glows |
| 3 | footer | Single compact horizontal row of brand, legal and support links, cookie control, and copyright. | Utility navigation, Cookie management | Small logo, Inline text links, Minimal white background |

## Source CSS custom properties (selected)

```css
--padding-y-gap: 10rem;
--padding-x-gap: 2.75rem;
--tw-border-opacity: 1;
--tw-bg-opacity: 1;
--tw-text-opacity: 1;
```

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