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

# Relate · Design System

> A bright, calm canvas for modern B2B sales

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

Relate’s homepage pairs a bright, spacious canvas with bold dark headlines and restrained blue accents. Product-interface imagery, soft blue gradients, and customer proof communicate a collaborative CRM without making the page feel dense.

## North star

Keep the page bright and spacious, using navy typography, selective blue emphasis, and real product UI as the primary visual proof.

## Overview

The page is built on a near-white canvas (#fcfcfc), with the first impression coming from a centered headline in deep navy (#020520) and a vivid blue highlight (#145aff). Muted gray copy keeps supporting information quiet, while subtle blue atmospheric gradients sit behind the hero and product imagery rather than turning the page into a stack of colored panels. Inter handles headings and navigation with compact, confident weight; Pretendard Regular supplies readable body copy. A narrow, horizontally organized header gives way to centered hero content, then wide CRM screenshots and customer logos. Feature stories alternate text and interface views, while the feature and testimonial areas return to centered section introductions. Product mockups are crisp, pale, and information-dense, balanced by generous whitespace. Rounded buttons, cards, and media edges soften the otherwise precise B2B interface; shadows are restrained and borders remain visually quiet.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Canvas White | `#fcfcfc` | `--color-canvas-white` | surface | Primary page canvas and the continuous background behind most sections. |
| Soft Graphite | `#696a72` | `--color-soft-graphite` | neutral | Muted supporting copy and secondary headings. |
| Midnight Ink | `#020520` | `--color-midnight-ink` | brand | Main headline color and the strongest dark text on the page. |
| Slate Copy | `#6b7280` | `--color-slate-copy` | neutral | Secondary body text and quieter explanatory copy. |
| Near Black | `#14141e` | `--color-near-black` | neutral | Additional dark text and navigation details. |
| Deep Blue | `#0f1f3d` | `--color-deep-blue` | brand | Dark blue text and gradient tone, including footer and interface accents. |
| Nightfall | `#000714` | `--color-nightfall` | brand | Deep gradient endpoint used in dark visual treatments, notably the footer. |
| Charcoal Text | `#262626` | `--color-charcoal-text` | neutral | Secondary dark text, including small interface content. |
| Slate Black | `#111827` | `--color-slate-black` | neutral | Dark supporting text found in content and interface elements. |
| Muted Stone | `#87888e` | `--color-muted-stone` | neutral | Low-emphasis supporting text. |
| Steel Slate | `#374151` | `--color-steel-slate` | neutral | Dark secondary text and navigation content. |
| Signal Blue | `#145aff` | `--color-signal-blue` | accent | Hero headline emphasis, links, and primary action accents. |
| UI Black | `#000000` | `--color-ui-black` | neutral | Black text detected in product mockups; treat as interface detail, not a defining brand color. |
| Frost Tint | `#f3f9ff` | `--color-frost-tint` | surface | Very pale blue surface tint appearing subtly in background details. |
| Silver Gray | `#95959b` | `--color-silver-gray` | neutral | Low-contrast text details. |
| Success Green | `#16ca2e` | `--color-success-green` | semantic | Positive status indicators, chiefly within CRM interface imagery. |
| Status Coral | `#f26052` | `--color-status-coral` | semantic | Negative or churn status indicators, chiefly within product UI. |

### Semantic aliases

`--color-canvas` → `#fcfcfc` (Canvas White) · `--color-text` → `#020520` (Midnight Ink) · `--color-text-muted` → `#696a72` (Soft Graphite) · `--color-text-subtle` → `#6b7280` (Slate Copy) · `--color-accent` → `#145aff` (Signal Blue) · `--color-accent-2` → `#16ca2e` (Success Green) · `--color-accent-3` → `#f26052` (Status Coral)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#020520` | `#fcfcfc` | 19.58:1 | AAA |
| `#696a72` | `#fcfcfc` | 5.24:1 | AA |
| `#6b7280` | `#fcfcfc` | 4.71:1 | AA |
| `#145aff` | `#fcfcfc` | 5.2:1 | AA |

### Gradients

- `radial-gradient(41.9% 83.8% at 50% 36.7%, rgb(252, 252, 252) 0%, rgba(252, 252, 252, 0) 100%)`
- `radial-gradient(86.9% 191.973% at 5.7% 15.5%, rgb(0, 7, 20) 0%, rgb(15, 31, 61) 100%)`
- `linear-gradient(120deg, rgba(24, 144, 255, 0) 0%, rgba(24, 144, 255, 0.03) 100%)`
- `linear-gradient(120deg, rgba(24, 144, 255, 0.03) 0%, rgba(24, 144, 255, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-display` | webfont | 500, 400, 600 | Headlines, navigation, captions, and interface labels. | Inter |
| Pretendard Regular | `--font-body` | webfont | 400 | Primary body and explanatory copy. | Noto Sans |
| Pretendard Medium | `--font-pretendard-medium` | webfont | 400 | Medium-weight text within interface and supporting content. | Noto Sans |
| Font Awesome 6 Pro Solid | `--font-font-awesome-6-pro-solid` | webfont | 400, 900 | Solid interface icons and small decorative glyphs. | Font Awesome Free |
| Font Awesome 6 Pro Light | `--font-font-awesome-6-pro-light` | webfont | 400 | Lightweight interface icon details. | Font Awesome Free |

- **Inter:** Use measured regular, medium, and semibold weights; headlines are compact and slightly tight, with natural sentence case.
- **Pretendard Regular:** Regular-weight sans-serif body copy; keep it readable and understated beneath bold section titles.
- **Pretendard Medium:** Measured as a separate webfont; use sparingly to add hierarchy to compact text.
- **Font Awesome 6 Pro Solid:** Keep icons small and functional, especially in product-interface details.
- **Font Awesome 6 Pro Light:** Use light icon forms as secondary UI detail rather than prominent illustration.

### Type scale — Minor Third (ratio ≈ 1.163, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 22px | 500 | 1.4 | -0.009em | — | Inter | Hero headline; dark navy with blue emphasis on the key sales term. |
| h2 | 20px | 400 | 1.4 | -0.01em | — | Inter | Section introductions and feature-story headings. |
| h3 | 18px | 400 | 1.4 | 0 | — | Inter | Subsection and product-feature titles. |
| body | 14px | 400 | 1.29 | 0.021em | — | Pretendard Regular | Explanatory copy, customer quotes, and supporting descriptions. |
| caption | 12px | 500 | 1.33 | 0 | — | Inter | Small labels, UI annotations, and customer attribution. |
| nav | 16px | 500 | 1 | 0 | — | Inter | Header navigation labels and menu items. |

## Spacing & layout

- Base unit **4px**, density **compact**.
- Scale (most used values): 2, 4, 6, 8, 9, 10, 12, 16, 20, 32, 36 px.
- Section rhythm 40px · element gap 10px · card padding 13px · max content width 1236px.

A compact top navigation aligns the Relate mark and main links on the left, with login and two actions on the right. The hero is centered above a wide product-preview panel. Subsequent blocks use broad, centered content areas: product screenshots, a compact logo cloud, feature narratives, feature cards, and testimonials. The measured page max width is 1236px; the overall spacing system is compact, but large gaps around section introductions preserve an airy rhythm. Product imagery can span wider than text blocks, while headings and descriptions stay centered or paired with their relevant UI.

## Shape & elevation

- Radius: button `12px` · input `12px` · card `8px` · media `50%` · nav `9999px` · link `9999px` · xs `2px` · sm `4px` · md `6px` · lg `8px` · xl `12px` · 2xl `16px` · pill `9999px`
- Shadow `sm` (card): `rgba(0, 0, 0, 0.1) 0px 0px 4px -2px`
- Shadow `inset` (other): `rgba(20, 90, 255, 0.65) 0px 0.120725px 0.603627px -1.75px, rgba(20, 90, 255, 0.3) 0px 1px 5px -3.5px, rgba(20, 90, 255, 0.145) 0px -0.301094px 0.541969px -1.25px inset, rgba(20, 90, 255, 0.125) 0px -1`
- Shadow `lg` (card): `rgba(0, 0, 0, 0.082) 0px 0.361312px 1.80656px -1.41667px, rgba(0, 0, 0, 0.07) 0px 1.37312px 6.8656px -2.83333px, rgba(0, 0, 0, 0.016) 0px 6px 30px -4.25px`
- Shadow `sm-2` (other): `rgba(0, 0, 0, 0.25) 0px 0px 4px -2px`
- Shadow `sm-3` (card): `rgba(20, 20, 30, 0) 0px 0px 5px -2px`
- Shadow `hairline` (nav, other): `rgba(0, 0, 0, 0) 0px 1px 2px -1px`

Most sections sit directly on the white canvas, with little visible border treatment. Product cards and interface panels gain separation through subtle shadows and rounded corners rather than heavy outlines. Use clear layering for screenshots over soft blue glow, but keep shadows restrained; the dark footer is the strongest contrasting surface.

## Imagery

The page relies on product screenshots rather than lifestyle photography, illustration, or 3D. CRM boards, inbox views, contact records, and tables are shown as pale, crisp interface mockups with fine text, colored status dots, and realistic column structure. Frame these as broad floating product views against the white canvas, with soft blue atmospheric gradients behind select screens. Customer logos and testimonial marks provide small supporting images; avoid adding unrelated decorative artwork.

## Components

### Header navigation

Compact horizontal header with the Relate mark, product and content links, login, an outlined demo action, and a filled blue signup action.

### Hero CTA

Centered headline and supporting copy above a rounded blue-gradient product stage, with a pill-shaped white action.

### CRM product preview

Large, pale interface mockup showing pipeline columns and deal cards; use subtle shadow and rounded media framing.

### Customer logo cloud

A centered customer-proof line followed by a compact multi-column collection of monochrome brand marks.

### Feature narrative

Alternating feature headings, brief copy, and wide CRM screenshots that show prospecting, pipeline, retention, and churn workflows.

### Feature cards

Quiet card-based feature area combining concise copy, CRM UI fragments, and recognizable integration logos.

### Testimonials

Centered customer section with a short introduction and spacious quote blocks, customer marks, and muted attribution.

### Footer

Rounded dark navy footer panel with brand lockup, signup input, link columns, and subdued company details.

### Measured component styles

- **Primary button** (“Sign Up”): background #fefefe · text #0f1f3d · radius 12px · padding 15px · 600 15px Inter
- **Link** (“Backed by Y Combinator”): transparent background · text #0000ee · radius 0px · padding 0px · 400 12px sans-serif
- **Input**: transparent background · text #ffffff · radius 12px · padding 15px · 400 15px Inter · shadow rgb(0, 153, 255) 0px 0px 0px 0px inset
- **Card** (“Linear $10,000 annual Scheduled a meetin”): transparent background · text #000000 · radius 8px · padding 12px 12px 12px 16px · 400 12px sans-serif · shadow rgba(0, 0, 0, 0.1) 0px 0px 4px -2px
- **Navigation item** (“Product  Pricing Customers Blog Resourc”): transparent background · text #000000 · radius 0px · padding 0px · 400 12px sans-serif · shadow rgba(0, 0, 0, 0) 0px 1px 2px -1px

## Do

- Use #fcfcfc as the dominant page canvas.
- Set primary headlines in #020520 and reserve #145aff for emphasis.
- Keep the hero, section introductions, and customer proof centered.
- Show real-looking CRM interface screens as the main visual content.
- Use pale blue gradients behind selected product views, not as full-page decoration.
- Keep card shadows subtle and corners softly rounded.
- Preserve generous breathing room around headings and screenshots.

## Don't

- Do not introduce large saturated color bands between sections.
- Do not use photography as a substitute for product-interface proof.
- Do not make body copy compete with the headline hierarchy.
- Do not turn status green or coral into dominant brand accents.
- Do not add heavy outlines or deep shadows to every card.
- Do not overcrowd the centered hero with extra navigation or badges.
- Do not use decorative illustration that distracts from the CRM screens.

## Agent prompt

Build a new Relate-style B2B SaaS page on a predominantly #fcfcfc Canvas White background. Use #020520 Midnight Ink for strong headlines and #145aff Signal Blue for selective word emphasis, links, and primary actions; keep #696a72 Soft Graphite supporting text subdued. Use Inter for headings and navigation, with Pretendard or Noto Sans for body copy. Center a concise hero above a broad, realistic CRM interface preview. Carry the page into customer logos, alternating product-feature stories, and quiet testimonial blocks with ample whitespace. Use pale blue glow sparingly behind screenshots, rounded cards, and restrained shadows. Keep green and coral confined to interface status cues. Finish with a rounded dark navy footer rather than adding bright section bands.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered hero below a compact horizontal navigation, with copy and CTA above a broad gradient-backed stage. | primary signup CTA, secondary demo action, brand credibility marker | centered headline, blue word emphasis, soft blue gradient, rounded CTA |
| 2 | product-showcase | Wide CRM pipeline screenshot centered as a full-bleed product view on the pale canvas. | show product in context, surface workflow at a glance | pipeline columns, deal cards, pale interface, soft screenshot framing |
| 3 | logo-cloud | Centered credibility statement followed by a compact multi-column grid of customer logos. | customer social proof, recognizable customer marks | small logo grid, quiet text introduction |
| 4 | feature-split | Sequential feature stories pairing centered titles and descriptions with wide CRM interface screenshots. | explain workflow stages, connect features to UI evidence | large interface panels, alternating content focus, subtle gradient backdrop |
| 5 | feature-grid | Centered section introduction followed by broad feature panels combining copy, UI fragments, and integration marks. | feature discovery, show connected integrations | feature cards, product UI fragments, integration logos |
| 6 | testimonials | Centered title and introduction above spacious customer quote blocks with logos and attributions. | customer validation, named testimonial attribution | quote-led cards, customer marks, muted attribution |

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