---
name: Reclaim
description: "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."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#181D25"
  secondary: "#4A4A4A"
  tertiary: "#5562EB"
  neutral: "#6B7280"
  bg-soft: "#EBEFFF"
  bg-quiet: "#F5F7FA"
  muted-soft: "#9CA3AF"
  line: "rgba(24, 29, 37, 0.1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 72px
    lineHeight: 1.05
    fontWeight: 700
    letterSpacing: "-2px"
  headline:
    fontFamily: humanist-sans
    fontSize: 40px
    lineHeight: 1.15
    fontWeight: 600
    letterSpacing: "-1px"
  subhead:
    fontFamily: humanist-sans
    fontSize: 24px
    lineHeight: 1.4
    fontWeight: 500
    letterSpacing: "0px"
  body:
    fontFamily: humanist-sans
    fontSize: 18px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

An AI-first calendar application designed to automate scheduling and reclaim work-life balance.

*Your AI-powered timekeeper that automatically organizes your work calendar.*

## Colors

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

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#181D25`)** — uses `ink` token
- **Secondary text (`#4A4A4A`)** — uses `ink-soft` token
- **Accent (`#5562EB`)** — uses `accent` token
- **Muted (`#6B7280`)** — uses `muted` token
- **Borders (`rgba(24, 29, 37, 0.1)`)** — uses `line` token

## Typography

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

- Use geometric-sans for bold, modern display type.
- Use humanist-sans for readable body copy.

## Layout

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

*Rhythm:* Based on a 4px grid, with generous white space in hero sections and tighter spacing in UI components.

## Elevation & Depth

- 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)

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Rounded pill shape (999px radius) with high contrast; primary actions use solid blue background, secondary use outline.
- **card:** Subtle rounded corners (12px) with light background colors (blue, green, dark) and integrated imagery.
- **chip:** Small rounded tags or badges used for status or feature highlights.
- **input:** Standard rounded inputs with subtle borders, often used in forms or search interfaces.
- **hero:** Massive typography paired with a product mockup or lifestyle imagery, heavily utilizing white space.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```