---
name: Sunsama
description: "Worth including as an excellent example of a premium, 'calm' productivity tool that uses warm, inviting colors and generous spacing to reduce cognitive load."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#202228"
  secondary: "#4C4F56"
  tertiary: "#FF891C"
  neutral: "#767F86"
  bg-soft: "#FAFAFA"
  bg-quiet: "#F6F5F1"
  line: "rgba(32,34,40,0.1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 48px
    lineHeight: 1.05
    fontWeight: 500
    letterSpacing: "-1.5px"
  h2:
    fontFamily: humanist-sans
    fontSize: 27px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "-0.2px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "-0.14px"
  small:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.24
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 10px
  lg: 40px
  pill: 48px

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

---

## Overview

The task manager and daily planner for modern professionals.

*A serene daily planner that helps you feel calm and stay focused.*

## Colors

Clean white backgrounds with a warm, high-chroma orange accent and soft neutral grays.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#202228`)** — uses `ink` token
- **Secondary text (`#4C4F56`)** — uses `ink-soft` token
- **Accent (`#FF891C`)** — uses `accent` token
- **Muted (`#767F86`)** — uses `muted` token
- **Borders (`rgba(32,34,40,0.1)`)** — uses `line` token

## Typography

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

## Layout

Wide content containers with a left-heavy hero section on desktop, flowing into a centered content stack on mobile.

*Rhythm:* Consistent 4px base grid with generous vertical spacing for a breathable layout.

## Elevation & Depth

- None: None
- None: None
- Borders: 1px solid rgba(32,34,40,0.1) used for subtle card and input boundaries.

## Shapes

- `sm`: 4px
- `md`: 10px
- `lg`: 40px
- `pill`: 48px

## Components

- **button:** Pill-shaped primary buttons with a bright orange background and white text.
- **card:** Lightly shadowed, white or soft gray cards with generous border-radius (10px to 40px).
- **chip:** Small, rounded tags or labels with subtle borders or light backgrounds.
- **input:** Clean inputs with subtle borders, focusing on readability.
- **hero:** A large split-section with bold typography and a product screenshot on a soft background.

## Do's and Don'ts

**Don't:**
- Don't use aggressive, high-contrast neon colors — screenshot shows a soft white, gray, and warm orange palette.
- Don't use sharp, square corners on major components — screenshot shows 10px to 40px rounded corners.
- Don't use dense, long-form text blocks — screenshot shows generous spacing and concise copy.
- Don't use decorative, highly stylized display fonts — screenshot shows a clean, geometric/humanist sans-serif system.
- Don't use dark mode or high-contrast black backgrounds — screenshot shows predominantly white and light-gray surfaces.
- Don't use complex, heavy drop shadows — screenshot shows very subtle, low-opacity shadows for depth.

---

## System Prompt (paste into AI agent)

```
This site is for Sunsama, a calm and focused daily planner for modern professionals. It uses a bright, clean white (#FFFFFF) and soft gray (#FAFAFA) palette, with a vibrant orange (#FF891C) accent. Typography is a clean mix of geometric and humanist sans-serif categories. Critical constraints: prioritize generous whitespace and a 4px grid, use 10-48px rounded corners for a friendly feel, and avoid any aggressive, dark, or cluttered visual metaphors that would disrupt the calm, productive positioning.
```