# Reclaim · Design system migration spec

> Source: https://reclaim.ai  ·  Curated by OpenDesign  ·  en

> This site is a prime example of modern SaaS design, balancing bold, expressive typography with a functional, clean UI to communicate complex AI-driven features.

## 1. Identity DNA

Reclaim's design system is built for an AI-powered timekeeper, an automated assistant that reorganizes your work calendar. Its identity is rooted in the logic of intelligent scheduling: clean, structured, and purposeful, with just enough vibrancy to feel active rather than passive.

**One-liner:** An AI-first calendar application designed to automate scheduling and reclaim work-life balance.
**Keywords:** intelligent · automated · productivity · scheduling
**Analogy:** Your AI-powered timekeeper that automatically organizes your work calendar.

## 2. Color

The color system establishes a clean, high-contrast base anchored by a vibrant primary blue. This is supported by a secondary green that reinforces focus and completion, creating a palette that feels both energetic and controlled.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#EBEFFF` | card background |
| `--bg-quiet` | `#F5F7FA` | quiet area |
| `--ink` | `#181D25` | body text |
| `--ink-soft` | `#4A4A4A` | secondary text |
| `--muted` | `#6B7280` | placeholder |
| `--muted-soft` | `#9CA3AF` | weak hint |
| `--accent` | `#5562EB` | single accent |
| `--line` | `rgba(24, 29, 37, 0.1)` | divider |

**Color principle:** Clean, high-contrast base with a vibrant primary blue accent and supportive green tones for focus.

The principle is clarity: every color choice serves to guide attention and delineate function.

## 3. Typography

Typography pairs a bold **geometric-sans** for expressive display headlines with a readable **humanist-sans** for body copy. This combination creates a voice that is simultaneously modern and confident in its announcements, yet approachable in its explanations.

- **Display:** geometric-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 72px | 1.05 | 700 | -2px | Primary hero headline |
| headline | 40px | 1.15 | 600 | -1px | Section headings |
| subhead | 24px | 1.4 | 500 | 0px | Subheadings and large UI text |
| body | 18px | 1.6 | 400 | 0px | Main body copy |
| caption | 14px | 1.5 | 400 | 0px | Small text, labels, and metadata |

**Type rules:**
- Use geometric-sans for bold, modern display type.
- Use humanist-sans for readable body copy.

## 4. Spacing

Spacing follows a strict 4px grid, creating a consistent rhythm that scales from generous white space in hero sections to tighter, functional gaps in UI components.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 / 128 px
- **Rhythm:** Based on a 4px grid, with generous white space in hero sections and tighter spacing in UI components.

## 5. Surfaces

Surfaces are defined by lightness and subtle depth. Elevation is achieved through carefully calibrated shadows and a consistent, thin border that separates elements without heavy visual weight.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - 0px 5px 40px 0px rgba(9, 14, 21, 0.16)
  - 0px 20px 32px -8px rgba(9, 20, 66, 0.25)
- **Borders:** 1px solid rgba(24, 29, 37, 0.1)

## 6. Layout

The layout skeleton is a responsive grid that opens with a prominent, center-aligned hero section. This is followed by alternating content blocks that structure the product narrative with clear visual breaks.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 / 1440 px

**Skeleton:** Responsive grid with a prominent center-aligned hero section followed by alternating content blocks.

## 7. Motion & Interaction

Motion is functional and restrained, using subtle fade-in and transform transitions to reveal content as it enters the viewport. Interactive elements respond with immediate feedback, using color, scale, or shadow shifts to confirm user actions.

- **Durations:** micro 150ms · small 250ms · medium 500ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Subtle fade-in and transform transitions for elements entering the viewport.
  - Color and stroke transitions for interactive elements on hover.

- **Hover:** Subtle color shifts or brightness changes on primary buttons; slight scaling or shadow lift on cards.
- **Click:** Immediate visual feedback with scale or opacity changes.
- **Transition:** Smooth transitions for most state changes, typically 0.2s to 0.5s.
- **Keyboard:** Standard focus rings, typically matching the primary accent color.

## 8. Voice & Don'ts

The editorial voice is professional, confident, and directly helpful, with headlines that are benefit-driven and emphasize the automated nature of the product. Copy avoids vague jargon and aggressive salesmanship.

- **Tone:** Professional, confident, and helpful.
- **Headline style:** Direct, benefit-driven, and emphasizes the 'AI' and 'automated' nature of the product.
- **CTA style:** Action-oriented and encouraging, often using 'Get started' or 'Book a demo'.
- **Avoid:** Vague marketing jargon / Aggressive or salesy language / Excessive use of superlatives

### Don'ts
- ❌ Don't use a dark mode as the primary interface — screenshot shows a predominantly light, white-based theme.
- ❌ Don't use a single-color gradient for headlines — screenshot shows a multi-color gradient (blue to green) for the word 'calendar'.
- ❌ Don't use sharp, square corners on primary elements — screenshot shows widely used pill shapes (999px radius) for buttons.
- ❌ Don't use a crowded or dense layout — screenshot shows generous white space and large typography for clarity.
- ❌ Don't use decorative or serif fonts for UI text — screenshot shows clean, modern sans-serif fonts throughout.
- ❌ Don't use muted or low-contrast colors for primary actions — screenshot uses a high-vibrancy blue for main buttons.

By design, it does not use dark mode as a primary interface, sharp square corners on key elements, or low-contrast colors for primary actions.

## System Prompt (paste into AI tool)

```
Reclaim.ai is an AI-powered productivity SaaS tool focused on automated calendar management. The visual system uses a clean, light-themed aesthetic with a primary accent color of #5562EB (vibrant blue) and a secondary green of #7AC17B. Typography is a mix of geometric and humanist sans-serif fonts, creating a modern and highly readable interface. Key elements include massive, benefit-driven headlines and generous white space. Critical design rules: Do not use sharp square corners on buttons (use pill shapes); do not use dark mode as the primary UI; do not use complex gradients on non-headline text; ensure high contrast for all primary CTAs; maintain a generous amount of whitespace to avoid a cluttered feel.
```