Relate
A bright, modern-SaaS CRM marketing surface anchored on a near-white canvas (#fcfcfc) with a single saturated electric-blue primary action (#145aff). The system reads as clean, product-forward B2B software — Inter throughout, a very large weight-600 hero headline with negative tracking, fully pill-shaped buttons (100px radius), soft white product-UI cards floating on a faint blue-tinted hero gradient, and a deep near-black footer (#020520) that closes the page. Brand voltage comes from one electric-blue accent and from real CRM pipeline UI fragments shown directly inside cards.
Works with
Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit
Color Palette
Accent
Neutrals
Typography
display
80px · 600 · 1.05
The quick brown fox jumps
lead
20px · 400 · 1.4
The quick brown fox jumps
title
20px · 600 · 1.5
The quick brown fox jumps
body
16px · 500 · 1.0
The quick brown fox jumps
Spacing & Shape
Spacing
| Name | Value | Preview |
|---|---|---|
| xxs | 4px | |
| xs | 6px | |
| sm | 8px | |
| md | 10px | |
| lg | 12px | |
| xl | 16px | |
| xxl | 20px | |
| x3 | 24px | |
| x4 | 28px |
Border Radius
| Name | Value | Preview |
|---|---|---|
| xs | 4px | |
| sm | 6px | |
| md | 8px | |
| lg | 12px | |
| xl | 16px | |
| xxl | 20px | |
| xxxl | 32px | |
| pill | 100px |
FAQ
- What colors does Relate use?
- Relate's core palette includes #145aff, #3b82f6, #000000, #14141e, #111827. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the Relate DESIGN.md.
- What font does Relate use?
- Relate's primary typeface is Inter. 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 Relate design system?
- A bright, modern-SaaS CRM marketing surface anchored on a near-white canvas (#fcfcfc) with a single saturated electric-blue primary action (#145aff). The system reads as clean, product-forward B2B so…