Customer.io
A bright, data-platform marketing surface built on a white canvas with near-black Saans display headlines, oversized hero type (96px), and dark CTA pills. The system pairs a clean monochrome editorial layer with embedded product-UI screenshots, crimson inline-text highlights, pale-green AI suggestion chips, and a single deep near-black "enterprise" band that anchors the lower page. Visual voltage comes from very large Saans headlines and from real product chrome shown inside the marketing flow rather than from broad use of accent color.
Works with
Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit
Color Palette
Accent
Neutrals
Typography
h1
96px · 475 · 1.0
The quick brown fox jumps
h2
40px · 475 · 1.125
The quick brown fox jumps
h3
20px · 600 · 1.125
The quick brown fox jumps
body
14px · 700 · 1.4
The quick brown fox jumps
button
16px · 700 · 1.375
The quick brown fox jumps
Spacing & Shape
Spacing
| Name | Value | Preview |
|---|---|---|
| xxs | 4px | |
| xs | 6px | |
| sm | 8px | |
| md | 12px | |
| lg | 16px | |
| xl | 24px | |
| xxl | 32px | |
| huge | 48px | |
| giant | 64px |
Border Radius
| Name | Value | Preview |
|---|---|---|
| xs | 2px | |
| sm | 4px | |
| md | 6px | |
| full | 9999px |
FAQ
- What colors does Customer.io use?
- Customer.io's core palette includes #ffffff, #242427, #ffffff, #242427, #000000. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the Customer.io DESIGN.md.
- What font does Customer.io use?
- Customer.io's primary typeface is Saans. The complete type scale (sizes, weights, line-height and letter-spacing per role), with an open substitute where the original is licensed, is documented in the DESIGN.md.
- What is the Customer.io design system?
- A bright, data-platform marketing surface built on a white canvas with near-black Saans display headlines, oversized hero type (96px), and dark CTA pills. The system pairs a clean monochrome editoria…