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

# Ready · Design System

> A calm canvas for vivid collaborative software

**Theme:** light · **Industry:** productivity · **Source:** https://ready.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._

Ready pairs a warm, quiet canvas and bold centered typography with colorful, layered product-interface previews. The page moves from a spacious introduction through feature demonstrations to a focused closing call to action.

## North star

Keep the page shell warm, quiet, and spacious; concentrate saturated colour and layered depth inside the product previews.

## Overview

The visual identity is built around a consistent warm off-white canvas (#f5f4f1), with charcoal headings and body copy providing crisp contrast. Large, heavy GT Walsheim headlines give the page an assertive editorial voice; GT America Standard handles supporting copy in a quieter, readable rhythm. Most sections remain centered and generously separated, while feature explanations shift into staggered, asymmetrical arrangements. Product imagery carries the strongest colour: calendar and meeting interfaces sit inside saturated purple, blue, teal, and coral-tinted cards. These are product-preview colours, not a reason to recolour the neutral page shell. Subtle radial purple light appears behind the large calendar showcase, and soft shadows lift interface mockups from the canvas. A thin pale-gray hairline distinguishes the compact top navigation. Overall, the page keeps its framing restrained so the detailed, colorful software previews—not decorative chrome—supply the visual energy.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Warm Canvas | `#f5f4f1` | `--color-warm-canvas` | brand | Continuous warm off-white page background across the hero, feature sections, closing call to action, and footer. |
| Soft White | `#ffffff` | `--color-soft-white` | surface | White panels and cards inside product-interface previews; also appears in interface text on saturated preview backgrounds. |
| Charcoal Ink | `#333333` | `--color-charcoal-ink` | neutral | Primary headlines, body copy, and navigation text against the light canvas. |
| Quiet Hairline | `#dcdbd8` | `--color-quiet-hairline` | neutral | Subtle divider beneath the compact top navigation. |
| Deep Signal Violet | `#351caf` | `--color-deep-signal-violet` | accent | Measured purple accent in the radial section glow and as a deep hue among product-interface artwork. |
| Calendar Periwinkle | `#6c77b0` | `--color-calendar-periwinkle` | accent | Blue-violet backgrounds on some feature cards and meeting-interface mockups. |
| Meeting Plum | `#8f4d75` | `--color-meeting-plum` | accent | Muted plum feature-card background and a supporting hue within colorful interface previews. |
| Muted Iris | `#817da6` | `--color-muted-iris` | accent | Desaturated purple card surface in the measured feature-card set. |
| Vivid Aubergine | `#7b4096` | `--color-vivid-aubergine` | accent | Purple seen in product-card imagery; treat as interface-preview colour rather than page-shell chrome. |
| Slate Periwinkle | `#6873a5` | `--color-slate-periwinkle` | accent | Blue-violet found in product-card imagery, supporting the colourful meeting-interface previews. |
| Deep Aubergine | `#55269c` | `--color-deep-aubergine` | accent | Deep purple appearing in product-card artwork and mock interface surfaces. |
| Muted Link Gray | `#8b8c96` | `--color-muted-link-gray` | semantic | Low-emphasis footer link colour, including the Privacy Policy link. |

### Semantic aliases

`--color-canvas` → `#f5f4f1` (Warm Canvas) · `--color-surface` → `#ffffff` (Soft White) · `--color-surface-2` → `#6c77b0` (Calendar Periwinkle) · `--color-surface-3` → `#8f4d75` (Meeting Plum) · `--color-surface-4` → `#817da6` (Muted Iris) · `--color-text` → `#333333` (Charcoal Ink) · `--color-text-muted` → `#ffffff` (Soft White) · `--color-border` → `#dcdbd8` (Quiet Hairline) · `--color-accent` → `#351caf` (Deep Signal Violet) · `--color-accent-2` → `#6c77b0` (Calendar Periwinkle) · `--color-accent-3` → `#8f4d75` (Meeting Plum)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#333333` | `#f5f4f1` | 11.49:1 | AAA |
| `#333333` | `#ffffff` | 12.63:1 | AAA |
| `#333333` | `#6c77b0` | 2.95:1 | fail |
| `#333333` | `#8f4d75` | 2.1:1 | fail |
| `#ffffff` | `#f5f4f1` | 1.1:1 | fail |
| `#ffffff` | `#6c77b0` | 4.28:1 | AA-large |
| `#ffffff` | `#8f4d75` | 6.02:1 | AA |
| `#351caf` | `#f5f4f1` | 9.86:1 | AAA |
| `#351caf` | `#ffffff` | 10.84:1 | AAA |
| `#351caf` | `#6c77b0` | 2.53:1 | fail |

### Gradients

- `radial-gradient(circle farthest-side at 50% 100%, rgb(53, 28, 175), rgba(245, 244, 241, 0) 80%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| GT America Standard | `--font-body` | webfont | 400, 500, 300 | Body copy, navigation, captions, links, and eyebrow labels. | Inter |
| GT Walsheim | `--font-display` | webfont | 700 | Display headlines and the main hero heading. | Manrope |

- **GT America Standard:** Use regular body weight, lighter small links and captions, and medium uppercase eyebrow labels with tracked lettering.
- **GT Walsheim:** Bold, compact display treatment with tight line height; use sentence case and centered emphasis in the hero.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 700 | 1 | 0 | — | GT Walsheim | Large bold display headlines for prominent section statements. |
| h1 | 56px | 700 | 1 | 0 | — | GT Walsheim | Hero title, split across centered lines. |
| h2 | 24px | 500 | 1.25 | 0 | — | GT America Standard | Secondary section headings and feature titles. |
| body | 16px | 400 | 1.5 | 0 | — | GT America Standard | Supporting paragraphs describing Ready and its features. |
| caption | 14px | 300 | 1.43 | 0 | — | GT America Standard | Small supporting copy within product or feature contexts. |
| link | 14px | 300 | 1.43 | 0 | — | GT America Standard | Quiet utility and footer links. |
| eyebrow | 12px | 500 | 1.33 | 0.167em | uppercase | GT America Standard | Small uppercase label above the hero title. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 2, 8, 10, 16, 20, 24, 32, 40, 48, 80, 96 px.
- Section rhythm 48px · element gap 16px · card padding — · max content width 640px.

Use a centered content column with a measured maximum width of 640px for text-led material, opening into full-bleed or wider product previews where needed. The hero is centered, while selected feature-introduction content is left-aligned and the showcase cards use staggered, asymmetrical placement. Sections share the same canvas and are separated by generous measured vertical rhythm; avoid dense stacks of unrelated content. The overall density is comfortable, with compact supporting copy and substantial breathing room around headings and media.

## Shape & elevation

- Radius: card `24px` · media `16px` · nav `50%` · xs `16px` · sm `24px` · md `32px`
- Shadow `lg` (card): `rgba(0, 0, 0, 0.1) 11px 11px 40px 0px`
- Shadow `xl` (media): `rgba(0, 0, 0, 0.1) 0px 16px 128px 0px, rgba(0, 0, 0, 0.1) 0px 1px 1px 0px`
- Shadow `xl-2` (card): `rgba(0, 0, 0, 0.2) 0px 1px 128px 0px`
- Motion: standard transition `0.2s ease-out` on interactive elements.

The page shell stays visually flat, with a fine pale-gray navigation divider rather than boxed sections. Product previews gain depth through soft, diffuse shadows and overlapping windows. Rounded card and media edges soften the interface, while inset tables, panels, and task lists retain crisp internal separators.

## Imagery

Product UI imagery is the page’s main visual content: calendar views, meeting spaces, task panels, and collaborative documents appear as detailed interface mockups rather than lifestyle photography. Large previews are framed as floating windows or rounded cards, sometimes overlapping to suggest a live workspace. Feature artwork uses saturated purple, blue, teal, and coral gradients inside the mockups; keep surrounding page areas neutral. The hero uses a large, full-width product preview.

## Components

### Compact top navigation

Minimal header with the Ready wordmark at left, small overlapping team avatars at right, and a thin #dcdbd8 divider.

### Centered hero

Uppercase tracked eyebrow above a bold centered two-line headline, brief explanatory copy, and a large full-bleed product preview.

### Meeting-space gallery

Centered section title followed by a horizontal sequence of colorful meeting-interface previews.

### Feature cards

Asymmetrically arranged feature demonstrations, including measured #6c77b0 and #817da6 card backgrounds and rounded corners.

### Workspace showcase

Large calendar interface presented as a wide product view against the warm canvas, with a subtle purple radial glow.

### Closing CTA and footer

Centered closing headline and concise copy, followed by a quiet footer with muted policy links and small social marks.

### Measured component styles

- **Link** (“Privacy Policy”): transparent background · text #8b8c96 · radius 0px · padding 0px · 300 14px GT America Standard
- **Card** (“Automated Templates Templates allow you ”): background #6c77b0 · text #ffffff · radius 32px · padding 0px · 400 14px GT America Standard
- **Navigation item**: transparent background · text #333333 · radius 0px · padding 0px · 400 14px GT America Standard

## Do

- Use #f5f4f1 as the consistent page canvas.
- Keep the hero title bold, centered, and visually dominant.
- Reserve vivid gradients for product previews and interface cards.
- Give text-led sections generous breathing room.
- Use #333333 for primary text and #8b8c96 for quiet footer links.
- Layer product windows with soft shadows and rounded edges.

## Don't

- Do not introduce new page-shell colours beyond the measured palette.
- Do not make every section a boxed card.
- Do not let decorative gradients compete with product imagery.
- Do not compress the spacious section rhythm into a dense grid.
- Do not use heavy borders around the main content.
- Do not replace the product-led previews with generic stock photography.

## Agent prompt

Build a new Ready-style SaaS page with a warm, continuous #f5f4f1 canvas and a restrained header divided by a #dcdbd8 hairline. Use bold GT Walsheim-like headlines in #333333 and calm GT America Standard-like supporting text. Center the opening statement and pair it with concise copy and a large, detailed software-interface preview. Organize later content into spacious feature introductions and staggered product demonstrations, keeping saturated hues such as #6c77b0, #8f4d75, and #817da6 inside interface cards rather than spreading them across the page shell. Use rounded media, subtle diffuse shadows, and a restrained purple glow for a large showcase. Finish with a centered CTA and quiet footer links in #8b8c96. Preserve comfortable spacing and a clear hierarchy.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered eyebrow and oversized two-line headline above copy and a full-bleed product-interface preview. | Brand promise first, Product-led introduction | Tracked uppercase eyebrow, Centered bold title, Floating interface preview |
| 2 | gallery | Centered section heading above a horizontal row of colorful meeting-space previews. | Show product variety, Scan feature examples | Centered heading, Multiple interface cards, Saturated preview surfaces |
| 3 | other | Single left-aligned heading and short explanatory paragraph on the shared canvas. | Transition into features | Left-aligned title, Compact supporting copy |
| 4 | feature-grid | Three feature demonstrations arranged in a staggered, asymmetrical composition. | Explain features in context, Progressive feature scanning | Rounded feature cards, Interface mockups, Colorful gradient artwork |
| 5 | feature-grid | Centered feature introduction followed by a loose arrangement of large product demonstrations. | Connect features to outcomes, Show supporting workflows | Centered heading, Floating product cards, Layered interface windows |
| 6 | product-showcase | Centered heading and supporting copy above a wide, full-bleed calendar interface preview. | Show complete product context, Reinforce ease of use | Large calendar mockup, Subtle purple radial glow, Wide media framing |
| 7 | cta | Centered closing title, short supporting copy, and a simple call to action. | Restate the product promise, Prompt the next step | Centered bold heading, Open neutral canvas, Minimal decorative chrome |
| 8 | footer | Quiet two-column footer with brand note and policy links. | Provide legal navigation, Keep utility links secondary | Muted footer links, Small brand signature, Minimal layout |

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