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

# Contrast · Design System

> Quiet, polished SaaS with a coral call to action

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

Contrast presents its webinar platform through a spacious, white-first SaaS homepage with bold centered headlines and coral calls to action. Product imagery, customer proof, and a contrasting dark editorial close build a clear path from discovery to trust.

## North star

Let generous white space and crisp black type carry the story, reserving coral for the next action and dark surfaces for editorial contrast.

## Overview

The page is defined by a white canvas, black typography, and restrained coral action color. The soft cream surface (#fbf9f3) appears in selected testimonial treatments, while the lower case-study and resource areas switch to a near-black band for a deliberate change of pace. Gilroy supplies the bold display and heading voice; Inter handles navigation, body copy, captions, and buttons with a light, open feel. Centered hero and section headings are paired with product demonstrations, customer logos, proof cards, and feature content, so the page alternates explanation with evidence. The layout is comfortable rather than dense: broad whitespace separates sections, with a measured maximum content width and multi-column arrangements used for cards and feature grids. Product screenshots and webinar video previews provide the main visual detail; keep them framed as supporting evidence rather than decorative backgrounds. Fine gray borders and subtle shadows distinguish cards without making the interface feel heavy.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary page canvas, white cards, and button text on coral; also appears in reverse text. |
| Signal Coral | `#ff5065` | `--color-signal-coral` | accent | Primary Start for free CTA fill and border; use sparingly for prominent actions. |
| True Ink | `#000000` | `--color-true-ink` | neutral | Main headings and high-emphasis body copy on light sections. |
| Midnight Charcoal | `#0e0f10` | `--color-midnight-charcoal` | surface | Large case-study and learning-resource bands, plus inverse interface elements. |
| Quiet Line | `#f1f1f1` | `--color-quiet-line` | semantic | Subtle card, button, and link outlines on white surfaces. |
| Warm Paper | `#fbf9f3` | `--color-warm-paper` | surface | Selective warm card and section treatment, notably testimonial-style content. |
| Soft Graphite | `#7b7b7c` | `--color-soft-graphite` | neutral | Muted supporting copy and secondary button text. |
| Silver Haze | `#b7b7b8` | `--color-silver-haze` | neutral | Low-emphasis navigation and footer text. |
| Coal Panel | `#1c1d1e` | `--color-coal-panel` | surface | Dark customer-story cards and inverse link panels. |
| Slate Note | `#626363` | `--color-slate-note` | neutral | Secondary muted text; use for restrained supporting details. |
| Pale Divider | `#e2e2e2` | `--color-pale-divider` | semantic | Dashed or secondary card outlines and low-contrast separators. |
| Badge Charcoal | `#2a2b2d` | `--color-badge-charcoal` | surface | Compact dark badges and outlines within the dark content area. |
| Ash Text | `#b0b0b0` | `--color-ash-text` | neutral | Occasional low-priority text details. |
| Warm Coral | `#ff7a59` | `--color-warm-coral` | accent | Small secondary accent, including product-card content; not the primary CTA hue. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#0e0f10` (Midnight Charcoal) · `--color-surface-2` → `#fbf9f3` (Warm Paper) · `--color-surface-3` → `#1c1d1e` (Coal Panel) · `--color-text` → `#000000` (True Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#7b7b7c` (Soft Graphite) · `--color-border` → `#f1f1f1` (Quiet Line) · `--color-accent` → `#ff5065` (Signal Coral) · `--color-accent-2` → `#ff7a59` (Warm Coral) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#0e0f10` | 1.09:1 | fail |
| `#000000` | `#fbf9f3` | 19.95:1 | AAA |
| `#000000` | `#1c1d1e` | 1.24:1 | fail |
| `#ffffff` | `#0e0f10` | 19.19:1 | AAA |
| `#ffffff` | `#fbf9f3` | 1.05:1 | fail |
| `#ffffff` | `#1c1d1e` | 16.88:1 | AAA |
| `#7b7b7c` | `#ffffff` | 4.23:1 | AA-large |
| `#7b7b7c` | `#0e0f10` | 4.54:1 | AA |
| `#7b7b7c` | `#fbf9f3` | 4.02:1 | AA-large |

### Gradients

- `linear-gradient(rgba(255, 227, 80, 0), rgba(255, 227, 80, 0.05)), linear-gradient(0deg, rgba(255, 80, 101, 0.05), rgba(255, 80, 101, 0.05)), none`
- `linear-gradient(0deg, rgb(255, 255, 255), rgba(255, 255, 255, 0))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| __inter_1361c6 | `--font-body` | webfont | 300, 500, 400, 600 | Navigation, body copy, captions, buttons, and lighter feature text. | Inter |
| __gilroy_9ec1f1 | `--font-display` | webfont | 700, 600 | Display and major section headings. | Plus Jakarta Sans |

- **__inter_1361c6:** Use light weights for spacious copy, medium for actions, and sentence case; no measured tracking adjustment.
- **__gilroy_9ec1f1:** Bold, rounded geometric headline character; use strong weight and natural casing without added tracking.

### Type scale — Perfect Fourth (ratio ≈ 1.368, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 56px | 700 | 1.11 | 0 | — | __gilroy_9ec1f1 | Large hero or standout display headlines. |
| h1 | 48px | 700 | 1.17 | 0 | — | __gilroy_9ec1f1 | Primary page headline and prominent section titles. |
| h2 | 24px | 600 | 1.08 | 0 | — | __gilroy_9ec1f1 | Secondary section headings and card headings. |
| h3 | 20px | 300 | 1.7 | 0 | — | __inter_1361c6 | Feature titles and supporting subheads. |
| body | 16px | 300 | 1.75 | 0 | — | __inter_1361c6 | Descriptions, testimonial copy, and explanatory text. |
| caption | 14px | 300 | 1.57 | 0 | — | __inter_1361c6 | Small labels, attribution, and metadata. |
| button | 16px | 400 | 1.5 | 0 | — | __inter_1361c6 | CTA labels and actionable controls. |
| nav | 16px | 300 | 1.5 | 0 | — | __inter_1361c6 | Header navigation links. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 1, 4, 5, 6, 8, 12, 16, 20, 24, 32, 40, 42, 80, 120 px.
- Section rhythm 80px · element gap 16px · card padding 40px · max content width 1280px.

Use a centered content frame with a measured maximum width of 1280px, generous section gaps, and comfortable internal spacing. The hero centers its headline, supporting copy, paired CTAs, logo cloud, and product preview. Most sections keep headings centered, then shift into three- or four-column evidence and feature arrangements; selected product explanations use split layouts. Keep the white sections visually open and let the dark case-study/resource bands read as a distinct closing chapter.

## Shape & elevation

- Radius: button `14px` · card `24px` · media `50%` · badge `9999px` · nav `16px` · link `24px` · xs `4px` · sm `8px` · md `9px` · lg `12px` · xl `14px` · 2xl `16px` · pill `9999px`
- Shadow `lg` (card, link): `rgba(38, 42, 62, 0.06) 0px 5px 25px 0px`
- Shadow `xl` (card): `rgba(38, 42, 62, 0.08) 0px 33px 60px 0px`
- Shadow `lg-2` (button): `rgba(14, 15, 16, 0.06) 0px 4.8px 28.8px 0px`
- Shadow `sm` (button): `rgba(38, 42, 62, 0.06) 0px 2px 8px 0px`
- Shadow `xl-2` (card): `rgba(38, 42, 62, 0.12) -14px 44px 60px 0px`
- Motion: standard transition `0.2s ease` on interactive elements.

Favor flat white sections, fine borders, and quiet card shadows. Cards use rounded surfaces with subtle separation rather than strong outlines or dramatic lift. Layer product previews and testimonial panels only where needed to establish hierarchy; the dark editorial bands rely on surface contrast, not extra elevation.

## Imagery

Use authentic-looking product interface captures, webinar video stills, and customer-story portraits as the primary imagery. Keep screenshots in clear, polished frames with softly rounded corners and restrained shadow; avoid turning them into full-bleed backgrounds. Customer logos and small portraits act as supporting proof, while coral within product previews may be illustration-specific rather than a site-wide surface color.

## Components

### Primary CTA

Coral #ff5065 fill with white text, a compact rounded shape, and medium Inter weight; pair with an outlined or pale secondary action.

### Hero

Centered bold Gilroy headline, two-line supporting copy, paired actions, a subdued logo cloud, and a large framed product demonstration.

### Proof cards

Rounded testimonial and review cards with fine gray borders, generous padding, customer details, and occasional soft shadow.

### Feature grid

Short feature statements and simple icons arranged in open multi-column rows with ample separation.

### Product preview

Screenshots and video stills framed as tangible product evidence; keep UI detail legible and surrounding layout uncluttered.

### Dark editorial band

Near-black background with white headings, dark charcoal story cards, and fine dividers for case studies and learning links.

### Badge

Small charcoal pill or compact label with white text, used for integrations or editorial status such as trending.

### Measured component styles

- **Primary button** (“Start for free”): background #ff5065 · text #ffffff · border 1px solid #ff5065 · radius 12px · padding 20px 40px · 500 16px __inter_1361c6
- **Secondary button** (“Marketing Events”): transparent background · text #0e0f10 · border 1px solid · radius 14px · padding 6px 12px 6px 8px · 400 16px __inter_1361c6
- **Link** (“Zoom → Contrast “Switching from Zoom is ”): background #1c1d1e · text #ffffff · radius 24px · padding 42px 40px · 300 20px __inter_1361c6 · shadow rgba(38, 42, 62, 0.06) 0px 5px 25px 0px
- **Card** (“Contrast is an amazing platform! Lisa Bi”): transparent background · text #000000 · border 1px solid #f1f1f1 · radius 24px · padding 40px · 300 20px __inter_1361c6 · shadow rgba(38, 42, 62, 0.06) 0px 5px 25px 0px
- **Badge** (“Zoom → Contrast”): background #2a2b2d · text #ffffff · radius 124px · padding 4px 12px 5px 12px · 500 14px __inter_1361c6
- **Navigation item** (“Features”): transparent background · text #ffffff · radius 0px · padding 0px · 300 16px __inter_1361c6

## Do

- Keep the main canvas bright white and uncluttered.
- Use Signal Coral #ff5065 for primary actions, not broad decorative fills.
- Set large headlines in bold Gilroy-style geometry.
- Use Inter for navigation, supporting copy, and controls.
- Alternate product evidence with concise benefit explanations.
- Reserve dark bands for case studies and learning resources.
- Separate cards with subtle borders and restrained shadows.

## Don't

- Do not make every section a colored panel.
- Do not use coral as the default text or background color.
- Do not crowd the centered hero with extra decorative elements.
- Do not let product screenshots become full-bleed page backgrounds.
- Do not use heavy shadows or harsh card outlines.
- Do not replace the quiet page rhythm with dense dashboard-like grids.

## Agent prompt

Build a new SaaS page in Contrast’s visual style: use a white-first canvas, bold geometric headings, light supporting copy, and a comfortable centered content frame. Use Gallery White #ffffff for the main surface, True Ink #000000 for headline contrast, and Signal Coral #ff5065 only for the primary action. Use Warm Paper #fbf9f3 selectively for testimonial warmth and Midnight Charcoal #0e0f10 for a clear editorial closing band. Set headlines in a Gilroy-like face and interface copy in Inter. Give sections generous breathing room; center the hero and major headings, then use restrained multi-column cards and product-focused splits. Show product captures and customer proof in softly rounded, lightly bordered frames. Keep elevation subtle, hierarchy clear, and the page’s conversion path easy to scan.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and copy, paired CTAs, customer logos, then a wide product preview. | primary and secondary CTA, social proof, product preview | bold centered heading, logo cloud, framed screenshot |
| 2 | testimonials | Centered heading above three proof columns with review and customer-story cards. | customer testimonials, ratings, marketplace proof | rounded cards, dark feature card, review columns |
| 3 | feature-grid | Centered heading and short introduction followed by a spacious three-column feature grid. | scannable benefits, feature discovery | small icons, open grid, short descriptions |
| 4 | testimonials | Single-column testimonial panel with prominent quote and customer attribution. | long-form testimonial, customer attribution | warm surface, large quote, star rating |
| 5 | integrations | Centered heading and supporting copy above a wide workflow screenshot with an explanatory overlay. | integration proof, workflow explanation | product screenshot, floating information card |
| 6 | feature-grid | Centered heading and subcopy above three product-preview cards. | feature comparison, AI workflow discovery | media cards, product screenshots, mixed light and dark cards |
| 7 | feature-split | Centered section title, split text and video demonstration, then a row of team benefits. | video demonstration, role-based benefits | split layout, portrait video, small benefit items |
| 8 | cta | Centered closing headline, concise reassurance, and paired actions. | free-start offer, demo alternative, friction reassurance | large heading, paired buttons, open whitespace |
| 9 | reviews | Multi-column collection of review cards with a rating summary and show-more control. | review aggregation, expand reviews | testimonial cards, customer portraits, rating summary |
| 10 | testimonials | Dark full-width section with a heading and three horizontally arranged case-study cards. | case-study discovery, customer outcome proof | dark band, story cards, customer portraits |
| 11 | content-feed | Centered heading above a single-column list of article links within the dark band. | related content discovery, article navigation | divided link rows, status badges, arrow affordances |
| 12 | footer | Four-column link directory with brand and social area, followed by legal details. | site-wide navigation, policy access, social links | multi-column lists, muted link text, dark surface |

## Source CSS custom properties (selected)

```css
--home-features-background-color: #f4f4f8;
```

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