---
name: Whimsical
description: "A great example of a modern SaaS tool that balances professional restraint with a distinct brand identity."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#220A33"
  secondary: "#5C275E"
  tertiary: "#9E39E5"
  neutral: "#6A5C70"
  bg-soft: "#F5F4F5"
  bg-quiet: "#F5F4F5"
  muted-soft: "#EAE9ED"
  line: "rgba(224,219,227,1)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 96px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-0.96px"
  h2:
    fontFamily: humanist-sans
    fontSize: 32px
    lineHeight: 1.2
    fontWeight: 700
    letterSpacing: "-0.3px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    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

Purpose-built whiteboard for technical teams and agents

*A digital canvas meeting room for engineers*

## Colors

High contrast ink on clean surfaces with vibrant purple accents

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#220A33`)** — uses `ink` token
- **Secondary text (`#5C275E`)** — uses `ink-soft` token
- **Accent (`#9E39E5`)** — uses `accent` token
- **Muted (`#6A5C70`)** — uses `muted` token
- **Borders (`rgba(224,219,227,1)`)** — uses `line` token

## Typography

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

- Use tight negative tracking for large display text
- Use medium weights for interactive elements
- Maintain strict typographic hierarchy

## Layout

12-column fluid grid with centered content

*Rhythm:* 8px vertical rhythm

## Elevation & Depth

- 0px 16px 32px -4px rgba(37,8,53,0.06)
- 0px 12px 16px -4px rgba(37,8,53,0.2)
- Borders: 1px solid rgba(224,219,227,1)

## Shapes

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

## Components

- **button:** Solid dark background with white text or outlined styles
- **card:** Clean containers with subtle shadows and rounded corners
- **chip:** Small rounded tags for labels
- **input:** Clean bordered fields with clear focus states
- **hero:** Large gradient background with centered bold typography

## Do's and Don'ts

**Don't:**
- Don't use dark mode interfaces — the screenshot shows a predominantly white/light gray background
- Don't use heavy drop shadows — the screenshot shows soft, diffuse elevation shadows
- Don't use playful, rounded display fonts — the screenshot shows clean, geometric humanist sans-serif typography
- Don't use neon or highly saturated colors — the screenshot shows a restrained palette with deep purple accents
- Don't clutter the layout with excessive borders — the screenshot shows minimal border usage
- Don't use centered alignment for long paragraphs — the screenshot shows left-aligned body copy in feature grids

---

## System Prompt (paste into AI agent)

```
Whimsical is a professional productivity tool positioning itself as a purpose-built whiteboard for technical teams. The design relies on a high-contrast palette featuring a deep, rich purple as the primary accent against clean white and soft gray surfaces. The typography pairs a display font for large, impactful headlines with a highly readable sans-serif for body text. Critical constraints include avoiding dark mode or overly playful aesthetics; the interface is structured and efficient. Maintain generous whitespace and ensure all interactive elements have smooth, deliberate transitions. The layout should prioritize clarity and focused collaboration, avoiding visual noise or heavy ornamentation.
```