# Whimsical — Design System
> A collaborative visual workspace for flowcharts, mind maps, and wireframes.
- **Canonical:** https://uiuxskills.com/library/whimsical
- **Source:** https://whimsical.com
- **Category:** Productivity & SaaS
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:17:08.374Z

---

---
version: alpha
name: Whimsical
description: A collaborative visual workspace for flowcharts, mind maps, and wireframes.
tone: Playful, high-energy, professional, and efficient.
color-scheme: light
colors:
  primary: "#250835"
  secondary: "#AB2FED"
  surface: "#F7F7F8"
  on-primary: "#FFFFFF"
  on-surface: "#250835"
  error: "#FF5733"
  surface-bright: "#FFFFFF"
  outline: "#E0E0E0"
  focus-ring: "#AB2FED"
  surface-container: "#F0F0F2"
typography:
  display-lg:
    fontFamily: Agrandir
    fontSize: 48px
    fontWeight: 700
  headline-md:
    fontFamily: Agrandir
    fontSize: 32px
    fontWeight: 700
  body-md:
    fontFamily: Manrope
    fontSize: 16px
    fontWeight: 400
  body-sm:
    fontFamily: Manrope
    fontSize: 14px
  label-lg:
    fontFamily: Manrope
    fontSize: 16px
    fontWeight: 600
  label-md:
    fontFamily: Manrope
    fontSize: 14px
  label-sm:
    fontFamily: Manrope
    fontSize: 12px
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 16px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 32px
  xl: 64px
  2xl: 128px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-lg}"
    width: auto
  button-primary-hover:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: "{colors.surface-bright}"
    textColor: "{colors.primary}"
    typography: "{typography.label-lg}"
  card:
    backgroundColor: "{colors.surface-bright}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
  card-elevated:
    backgroundColor: "{colors.surface-bright}"
    rounded: "{rounded.lg}"
  input-field:
    backgroundColor: "{colors.surface-bright}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "{colors.secondary}"
  badge:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.primary}"
    typography: "{typography.label-sm}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "{colors.error}"
    textColor: "{colors.on-primary}"
  card-default:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 16px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
motion:
  duration-short: 150ms
  duration-medium: 300ms
  easing-standard: ease-out
elevation:
  sm: 0 1px 3px rgba(0,0,0,0.1)
  md: 0 2px 6px rgba(0,0,0,0.15)
  lg: 0 4px 12px rgba(0,0,0,0.2)
---

## Overview

Whimsical is a high-energy, playful visual collaboration tool designed for creative professionals and technical teams. Its aesthetic relies on a deep, rich purple primary palette contrasted against clean, light surfaces to keep the focus on user-generated content.

## Colors

The color strategy centers on a high-contrast relationship between deep brand identity colors and neutral, airy backgrounds to maintain a professional yet approachable workspace.

*   Primary (#250835): The core brand color used for primary CTAs and high-emphasis elements.
*   Secondary (#AB2FED): Used for accent elements and hover highlights.
*   Surface (#F7F7F8): The primary background color for the application and marketing site.
*   On-Primary (#FFFFFF): Text color for buttons using the primary background.
*   On-Surface (#250835): Primary text color for headings and body content.
*   Error (#FF5733): Semantic color for error states and alerts.
*   Surface-Bright (inferred) (#FFFFFF): Used for cards and elevated containers.
*   Outline (inferred) (#E0E0E0): Border color for inputs and dividers.
*   Focus-Ring (inferred) (#AB2FED): Focus ring color for interactive elements.
*   Surface-Container (inferred) (#F0F0F2): Subtle background for secondary sections.

## Typography

Whimsical uses a combination of bold, geometric headers and highly readable, neutral body text to balance playfulness with utility.

*   Display-lg (inferred) (Agrandir): Used for hero headlines.
*   Headline-md (Agrandir): Used for section titles.
*   Body-md (Manrope): Standard body text.
*   Body-sm (inferred) (Manrope): Secondary body text.
*   Label-lg (inferred) (Manrope): Button labels.
*   Label-md (inferred) (Manrope): Small labels and UI text.
*   Label-sm (inferred) (Manrope): Micro-copy.

## Layout

The layout follows a centered, container-based strategy with a max-width of approximately 1200px. Spacing is governed by a 4px base unit, ensuring a consistent rhythm across all sections. The page structure typically follows the order: nav, hero, features, product-showcase, and footer. The hero pattern features a centered headline and subhead with a primary CTA button, followed by a large product screenshot. Responsive behaviour is mobile-first, with navigation collapsing into a menu drawer on smaller viewports.

## Elevation & Depth

Elevation is used sparingly to differentiate interactive cards from the background using subtle, single-layer shadows. The values are observed from CSS-extracted shadows: elevation.sm (0 1px 3px rgba(0,0,0,0.1)) provides a light lift for small elements; elevation.md (0 2px 6px rgba(0,0,0,0.15)) is used for elevated cards to create visual depth; elevation.lg (0 4px 12px rgba(0,0,0,0.2)) is reserved for modals or overlays.

## Shapes

The brand employs a rounded corner philosophy to maintain a friendly, approachable feel. A 12px radius (`rounded.lg`) is applied to primary buttons and cards, while 8px (`rounded.md`) is used for smaller UI elements like input fields and secondary containers.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
The button component uses `{colors.primary}` for its default state and `{colors.secondary}` for hover states. It features `{typography.label-lg}` and is designed to be action-oriented; use it for primary calls to action throughout the interface.

### Card
The card component provides a clean, elevated container for content using `{colors.surface-bright}` and `{rounded.lg}`. Use the `card-elevated` variant when you need to create clear visual separation from the background using `{elevation.md}`.

### Input Field
The input field component features a `{rounded.md}` shape and a subtle `{colors.outline}` border. When focused, the border color transitions to `{colors.focus-ring}` to provide clear accessibility feedback.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary CTAs. | Do not use `{colors.error}` for primary actions. |
| Apply `{rounded.lg}` to all card components. | Do not use sharp corners (0px) on `{components.card}`. |
| Use `{typography.headline-md}` for section headers. | Avoid mixing `{typography.body-md}` with non-standard fonts. |
| Maintain consistent `{spacing.md}` between grid items. | Avoid inconsistent spacing smaller than `{spacing.sm}`. |
| Use `{colors.secondary}` for hover states on buttons. | Avoid using `{colors.surface-container}` for primary text. |
| Apply `{elevation.md}` to elevated cards. | Do not exceed `{elevation.lg}` for standard UI components. |
| Use `{rounded.md}` for all `{components.input-field}`. | Do not use `{colors.primary}` for background surfaces. |
| Use `{typography.label-lg}` for button labels. | Do not use `{typography.display-lg}` for body copy. |

## Content Style

CTA labels are imperative and action-oriented, typically using short, punchy verbs like "Get started free."

Headings are benefit-driven and concise, designed to communicate value immediately. They should be phrased declaratively to maintain the high-energy tone.

Copy density is kept low; use short, scannable paragraphs and frequent bullet points to maintain a clean, minimal visual rhythm. Whitespace is used generously to prevent clutter.

## Imagery & Icons

Imagery follows a mixed treatment, combining clean product screenshots with illustrative icons that utilize rounded, friendly shapes. Icons should match the brand's playful yet professional aesthetic, avoiding overly complex detail in favor of clarity and minimal, geometric forms.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Whimsical, a playful yet minimal collaborative workspace brand. Match its high-energy, approachable tone while keeping interfaces clean and focused. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every value by its token name — `{colors.primary}`, `{typography.headline-md}`, `{spacing.md}` — never hardcode hex values, pixel sizes, or font names directly.
2. Use only the component variants defined under `components:`. Do not invent new variants (e.g. a ghost button or outlined card) unless the spec lists them.
3. Follow the Shapes and Elevation sections literally: `{rounded.lg}` on cards and primary buttons, `{rounded.md}` on inputs and secondary containers, `{elevation.md}` on elevated cards, `{elevation.lg}` reserved for modals only.
4. Treat the Do's and Don'ts table as authoritative. If a user's request conflicts with it (e.g. using `{colors.error}` for a CTA), surface the conflict explicitly before proceeding.
5. Tokens marked "(inferred)" in the spec prose are visual approximations. If an authoritative token file exists in the codebase, it overrides the spec's inferred values.

## Output contract

**Must:**
- Use all tokens by name on every generated component.
- Cover hover, focus, and disabled states for interactive components per the spec: `{components.button-primary-hover}`, `{components.input-field-focus}`, `{components.link-hover}`.
- Apply `{motion.duration-short}` and `{motion.easing-standard}` to hover transitions.
- Use the canonical spacing scale (`{spacing.xs}` through `{spacing.2xl}`) for all padding and gaps.
- Render hero headlines in `{typography.display-lg}` and section titles in `{typography.headline-md}` only where the layout narrative calls for them.
- Keep layout mobile-first with a single breakpoint at 768px; respect the nav-hero-features-showcase-footer page order.

**Must NOT:**
- Invent colors, fonts, radii, or shadow values absent from the spec.
- Use generic system defaults when a brand token exists.
- Add emoji, filler text, or marketing copy.
- Use `{colors.primary}` as a background surface or `{colors.surface-container}` for primary text.
- Rewrite, replace, or invent page copy, button labels, headings, or navigation items.
- Alter page structure or information architecture as a side effect of applying tokens.

## When in doubt
- If the spec doesn't define a needed value, ask the user before inventing one.
- Prefer composing existing components over introducing new tokens.
- For ambiguous backgrounds, default to `{colors.surface-container}`; for text on those backgrounds, use `{colors.on-surface}`.
- For unspecified interactive states, use `{colors.secondary}` as the active/hover signal — consistent with the button hover pattern.
- If a production token file (Storybook, theme file, metadata) exists, it takes precedence over any "(inferred)" value in the spec.