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

# Reclaim — Homepage · Design System

> Calm calendar clarity, energized by vivid AI accents.

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

Reclaim pairs a bright, spacious canvas with crisp black typography and periwinkle accents to present AI scheduling as calm and approachable. Calendar interface mockups, metric tiles, and alternating dark bands make the product tangible while keeping the long page easy to scan.

## North star

Keep a generous white canvas and use periwinkle, product UI, and dark bands as deliberate, limited signals of action and structure.

## Overview

The page is built on a white canvas, with pale periwinkle bands grouping the three core feature areas and black full-width sections creating deliberate contrast later in the story. Black carries headings and primary text; muted gray supports supporting copy, while vivid blue-purple buttons and links guide attention. Poppins is the defining typeface: rounded, geometric letterforms keep large centered headings friendly rather than corporate, with lighter weights in secondary headings and body copy. The hero uses a large calendar-and-assistant interface mockup instead of lifestyle photography. Across the page, repeated calendar screenshots, metric tiles, small logos, and evidence cards make the software the main visual subject. Wide section spacing and a centered content frame give the long homepage a measured rhythm; cards stay mostly flat, relying on fine borders and restrained shadows rather than heavy elevation.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Periwinkle Mist | `#c2caf9` | `--color-periwinkle-mist` | brand | Pale feature-card fill and fine borders, also used for initiative tiles and soft link surfaces. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas, white cards, and reverse text on saturated buttons and dark panels. |
| Signal Indigo | `#5562eb` | `--color-signal-indigo` | brand | Primary filled CTA buttons and select accent details; the main action color. |
| True Ink | `#000000` | `--color-true-ink` | neutral | Headings, body text, links, and full-width dark sections. |
| Soft Charcoal | `#474747` | `--color-soft-charcoal` | neutral | Muted supporting text on the light canvas. |
| Link Cobalt | `#3451e8` | `--color-link-cobalt` | accent | Occasional inline link accent; subordinate to the main button blue. |
| Lavender Haze | `#96a0f3` | `--color-lavender-haze` | accent | Minor button-related accent; use sparingly rather than as a page-wide surface. |
| Cloud Periwinkle | `#ebefff` | `--color-cloud-periwinkle` | surface | Background band behind the stacked focus, meeting, and interruption feature panels. |
| Neutral Fade | `#b2b2b2` | `--color-neutral-fade` | semantic | Gradient-related measured color; not a defining interface color in the screenshots. |
| Quiet Divider | `#dbdbdb` | `--color-quiet-divider` | neutral | Subtle card and interface hairlines, especially around FAQ and UI mockups. |
| Blue Black | `#181d25` | `--color-blue-black` | neutral | Dark section and card text color, distinct from pure black in some product-focused areas. |
| Graphite Text | `#2b2b2b` | `--color-graphite-text` | neutral | Occasional deeper supporting heading or text tone. |
| Interface Gray | `#808080` | `--color-interface-gray` | semantic | Minor neutral interface details and subdued controls. |
| Calendar Green | `#7ac17b` | `--color-calendar-green` | semantic | Metric tiles and calendar event blocks; also appears in product mockups and gradients. |
| Midnight Blue | `#151f8b` | `--color-midnight-blue` | semantic | Gradient stop in decorative treatments, not a dominant flat page color. |
| Deep Calendar Green | `#14532d` | `--color-deep-calendar-green` | semantic | Dark green gradient stop and occasional illustration or metric-card content. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#ebefff` (Cloud Periwinkle) · `--color-surface-2` → `#000000` (True Ink) · `--color-surface-3` → `#c2caf9` (Periwinkle Mist) · `--color-surface-4` → `#181d25` (Blue Black) · `--color-text` → `#000000` (True Ink) · `--color-text-muted` → `#474747` (Soft Charcoal) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#c2caf9` (Periwinkle Mist) · `--color-accent` → `#3451e8` (Link Cobalt) · `--color-accent-2` → `#5562eb` (Signal Indigo) · `--color-accent-3` → `#c2caf9` (Periwinkle Mist) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#ebefff` | 18.32:1 | AAA |
| `#000000` | `#c2caf9` | 13.11:1 | AAA |
| `#474747` | `#ffffff` | 9.29:1 | AAA |
| `#474747` | `#ebefff` | 8.11:1 | AAA |
| `#474747` | `#000000` | 2.26:1 | fail |
| `#474747` | `#c2caf9` | 5.8:1 | AA |
| `#ffffff` | `#ebefff` | 1.15:1 | fail |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#c2caf9` | 1.6:1 | fail |

### Gradients

- `radial-gradient(circle at 75% 35%, rgba(122, 193, 123, 0.5), rgba(255, 255, 255, 0) 17%), radial-gradient(circle at 22% 57%, rgba(85, 98, 235, 0.5), rgba(255, 255, 255, 0) 21%), radial-gradient(circle, rgba(255, 255, 255`
- `linear-gradient(rgba(0, 0, 0, 0.3), rgb(0, 0, 0)), url("https://cdn.prod.website-files.com/67859049c02d67b2cfcceebf/6a17713b696aedabb1566744_grid_bck.svg")`
- `linear-gradient(140deg, rgb(21, 31, 139), rgb(112, 123, 246) 80%), linear-gradient(140deg, rgb(21, 31, 139), rgb(20, 83, 45) 65%)`
- `linear-gradient(120deg, rgb(85, 98, 235) 40%, rgb(122, 193, 123) 61%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Poppins | `--font-body` | webfont | 400, 300, 500, 600, 700 | Primary font for headings, body, buttons, and links. | Nunito Sans |
| Inter | `--font-inter` | webfont | 400 | Minor supporting interface text. | Inter |

- **Poppins:** Rounded geometric sans; measured weights span light through bold. Use sentence case, neutral tracking, and lighter secondary headings.
- **Inter:** Measured at low share and regular weight; keep it limited to small utility details.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 400 | 1.2 | 0 | — | Poppins | Centered hero headline and primary page statement. |
| h2 | 40px | 400 | 1.25 | 0 | — | Poppins | Major section headings, usually centered or left aligned. |
| h3 | 22px | 300 | 1.36 | 0 | — | Poppins | Light-weight feature and subsection headings. |
| h4 | 20px | 400 | 1.4 | 0 | — | Poppins | Card titles and smaller section labels. |
| body | 16px | 400 | 1.5 | 0 | — | Poppins | Product explanations, feature descriptions, and general copy. |
| caption | 14px | 300 | 1.43 | 0 | — | Poppins | Compact notes, helper labels, and small supporting text. |
| button | 18px | 300 | 1.78 | 0 | — | Poppins | CTA labels, rendered in a light-weight rounded pill style. |
| link | 16px | 400 | 1.5 | 0 | — | Poppins | Inline actions, initiative links, and navigation links. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 5, 7, 8, 10, 12, 15, 16, 20, 26, 30, 40, 60, 100 px.
- Section rhythm 100px · element gap 5px · card padding — · max content width 1218px.

A spacious, long-form homepage organized around a measured 1218px maximum content width. The hero centers its headline and actions above a large product mockup; lower sections alternate centered metric displays, two-column feature splits, and multi-column card groups. White sections dominate, with pale blue feature bands and full-width black panels establishing chapter breaks. Headings may be centered for broad statements or left-aligned beside supporting content. Preserve generous separation between sections and keep dense interface details inside contained mockups.

## Shape & elevation

- Radius: button `9999px` · card `5px` · link `5px` · xs `3px` · sm `5px` · md `10px` · pill `9999px`
- Shadow `inset` (other): `rgb(243, 246, 255) 0px -1px 5px 2px inset`
- Shadow `md` (card): `rgba(0, 0, 0, 0.05) 5px 5px 10px 0px`
- Shadow `lg` (media): `rgba(9, 20, 66, 0.25) 0px 20px 32px -8px`
- Motion: standard transition `0.15s ease` on interactive elements.

The overall treatment is mostly flat, with color bands and fine outlines providing separation. Cards use subtle borders, and selected product media may carry a restrained soft shadow. The hero dashboard creates depth through overlapping interface panels rather than conspicuous card elevation. Keep rounded treatment concentrated on pill CTAs and small interface elements.

## Imagery

Software UI is the main imagery: calendar grids, assistant panels, analytics charts, and product screenshots appear in broad, clean frames. The hero mockup is large and layered, with a calendar beside an assistant interface; feature sections use smaller interface examples aligned opposite copy. Metric cards use saturated blue and greens, while customer logos and small icons provide supporting proof. Avoid lifestyle photography or decorative imagery that competes with the product.

## Components

### Primary CTA

Pill-shaped #5562eb button with white Poppins text; a smaller outlined secondary action sits beside it in the hero.

### Announcement strip

Slim pale periwinkle banner above the navigation, with centered promotional copy and an arrow link.

### Hero product display

Centered headline and actions above a wide calendar-and-assistant mockup, with customer logos below.

### Metric tiles

Three large rectangular cards use blue, green, and deep green fills to foreground time-saving statistics.

### Feature split panels

Stacked pale #ebefff bands pair feature copy and compact checklist cards with calendar UI imagery.

### Initiative cards

Compact #c2caf9 tiles form a multi-column grid, with one black tile reserved for the exploration link.

### FAQ rows

Single-column questions separated by thin neutral rules, each with a small disclosure control.

### Dark content band

Full-width black section with white copy, small checklist items, and subdued outlined actions or UI.

### Measured component styles

- **Primary button** (“Get started free!”): background #5562eb · text #ffffff · radius 100px · padding 15px 30px · 300 18px Poppins
- **Secondary button** (“AI Focus Time Set your weekly goal, auto”): background #ffffff · text #000000 · border 1px solid #c2caf9 · radius 0px · padding 0px 30px · 400 18px Poppins
- **Link** (“Prevent burnout”): background #c2caf9 · text #000000 · radius 5px · padding 10px 20px 30px 20px · 400 18px Poppins
- **Card** (“AI schedules focus time, optimizes meeti”): background #c2caf9 · text #181d25 · border 1px solid #ffffff · radius 0px · padding 0px · 400 18px Poppins

## Do

- Use white as the dominant page canvas.
- Reserve #5562eb for primary actions.
- Use #ebefff to group related feature content.
- Let product UI screenshots carry the visual storytelling.
- Alternate dark bands with generous white sections.
- Use Poppins with rounded, sentence-case typography.

## Don't

- Do not make the whole page dark.
- Do not use saturated gradients as the default background.
- Do not add decorative photography that competes with the UI.
- Do not replace spacious section breaks with dense content blocks.
- Do not give every card a heavy shadow.
- Do not use multiple competing CTA colors.

## Agent prompt

Build a new Reclaim-style productivity SaaS page with a spacious white canvas (#ffffff), Poppins typography, and a centered content frame no wider than the measured 1218px maximum. Use #000000 for strong headings, #474747 for supporting copy, and #5562eb for primary pill CTAs. Group related feature content in pale #ebefff bands, using #c2caf9 for cards and fine borders. Show the product through calendar and assistant interface mockups, not lifestyle photography. Alternate centered statements and metrics with two-column feature splits and occasional full-width black sections. Keep cards restrained, hierarchy clear, and section spacing generous. Treat green metric and calendar colors as product data accents rather than broad brand surfaces.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered hero copy and CTAs above a wide calendar-and-assistant product mockup. | Primary and secondary CTA, Calendar compatibility cue | Large Poppins headline, Layered calendar dashboard |
| 2 | logo-cloud | A horizontal trust strip beneath the hero product display. | Social proof, Customer count note | Small monochrome logos, Centered caption |
| 3 | stats | Centered heading above three evenly arranged metric cards. | Scannable proof points | Blue and green solid tiles, Large numerical values |
| 4 | feature-split | Pale blue band with feature copy and checklist on one side, product UI on the other. | Feature checklist, Product demonstration | #ebefff background, Outlined checklist card |
| 5 | feature-split | Repeats the two-column feature composition within the pale blue section band. | Feature checklist, Calendar workflow preview | Light checklist rows, Calendar screenshot |
| 6 | feature-split | Third stacked two-column feature panel with copy and calendar UI. | Feature checklist, Product proof | Pale blue surface, Calendar event mockup |
| 7 | feature-grid | Centered section heading above a grid of compact initiative tiles. | Explore use cases, Selectable initiative links | Periwinkle tiles, Single black exploration tile |
| 8 | feature-split | Full-width black section with text and checklist beside analytics imagery. | Report CTA, Analytics feature list | Black backdrop, White copy and subdued controls |
| 9 | category-nav | Left-aligned heading followed by a horizontal row of colored role tiles. | Role-based navigation, Browse team use cases | Narrow colored category cards, Short role labels |
| 10 | feature-grid | Three broad side-by-side cards for individuals, teams, and enterprise. | Audience comparison, Choose a use case | Pastel card surfaces, Short explanatory text |
| 11 | feature-split | Copy and initiative list to the left, performance chart to the right. | Demo CTA, Initiative links | Checklist-style links, Framed analytics chart |
| 12 | integrations | Black three-column section with integration copy and a grid of tool tiles. | Integration discovery, Coming-soon indicators | Dark grid, Thin outlined tiles |
| 13 | testimonials | Light section with CEO quote on one side and two case-study cards on the other. | Customer testimony, Case-study links | Quote attribution, Outlined evidence cards |
| 14 | stats | Left-aligned heading above four evenly distributed outcome labels. | Work-culture outcomes | Minimal open layout, Short metric labels |
| 15 | feature-grid | Heading and trust-center link above a three-column, two-row card grid. | Trust-center link, Security and support overview | Outlined white cards, Small line icons |
| 16 | faq | Single-column FAQ list below a left-aligned heading. | Accordion questions, Expandable answers | Thin horizontal dividers, Small disclosure icons |
| 17 | cta | Full-width dark blue-purple closing band with prominent text and signup action. | Final conversion CTA, Free-plan reassurance | Blue-violet gradient treatment, High-contrast light text |

## Source CSS custom properties (selected)

```css
--osano-clear-dialog-background: rgba(255,255,255,0);
--osano-button-border-color: #fff;
--osano-button-background-color: #5562eb;
--osano-button-foreground-color: #ffffff;
--osano-dialog-background-color: #ffffff;
--osano-dialog-foreground-color: #000000;
--osano-info-dialog-overlay-color: rgba(0,0,0,0.8);
--osano-link-color: #5665f0;
--osano-toggle-off-track-color: #dddddd;
--osano-toggle-off-thumb-color: #ffffff;
--osano-toggle-on-track-color: #5562eb;
--osano-toggle-on-thumb-color: #ffffff;
--osano-widget-color: #37cd8f;
--osano-widget-outline-color: #29246a;
--osano-widget-fill-color: #fff;
--osano-focus-outline-color: Highlight;
--osano-button-close-color: #000000;
--osano-button-accept-background-color: #5562eb;
--osano-button-accept-border-color: #fff;
--osano-button-accept-foreground-color: #ffffff;
--osano-button-deny-background-color: #d85656;
--osano-button-deny-border-color: #fff;
--osano-button-deny-foreground-color: #ffffff;
--osano-button-reject-all-background-color: #5562eb;
--osano-button-reject-all-background-color-hover: #6976ff;
--osano-button-reject-all-border-color: #fff;
--osano-button-reject-all-foreground-color: #ffffff;
--osano-button-manage-background-color: #5562eb;
--osano-button-manage-border-color: #fff;
--osano-button-manage-foreground-color: #ffffff;
--osano-info-dialog-link-color: #5665f0;
--osano-info-dialog-button-close-color: #181d25;
--osano-info-dialog-toggle-off-track-color: #dddddd;
--osano-info-dialog-toggle-off-thumb-color: #ffffff;
--osano-info-dialog-toggle-on-track-color: #5562eb;
--osano-info-dialog-toggle-on-thumb-color: #ffffff;
--osano-info-dialog-button-background-color: #5562eb;
--osano-info-dialog-button-border-color: #ffffff;
--osano-info-dialog-button-foreground-color: #ffffff;
--osano-dialog-gpc-background-color: #ffffff;
```

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