# Sunsama · Design system migration spec

> Source: https://sunsama.com  ·  Curated by OpenDesign  ·  en

> Worth including as an excellent example of a premium, 'calm' productivity tool that uses warm, inviting colors and generous spacing to reduce cognitive load.

## 1. Identity DNA

The design system for Sunsama is built on an analogy of a serene daily planner. Its identity DNA is rooted in keywords like **calm**, **focus**, and **daily-routine**, aiming to reduce cognitive load through deliberate visual quiet.

**One-liner:** The task manager and daily planner for modern professionals.
**Keywords:** calm · focus · productivity · planning · daily-routine
**Analogy:** A serene daily planner that helps you feel calm and stay focused.

## 2. Color

The color system is built on a foundation of clean white and soft gray surfaces, creating a calm canvas. A single, warm, high-chroma orange acts as the primary accent for actionable and focal elements, punctuating the neutral palette with purpose.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#FAFAFA` | card background |
| `--bg-quiet` | `#F6F5F1` | quiet area |
| `--ink` | `#202228` | body text |
| `--ink-soft` | `#4C4F56` | secondary text |
| `--muted` | `#767F86` | placeholder |
| `--accent` | `#FF891C` | single accent |
| `--line` | `rgba(32,34,40,0.1)` | divider |

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

The governing principle is that color should serve clarity and direct attention, never to overwhelm or distract from the core task of planning.

## 3. Typography

The typographic voice is professional and reassuring, pairing a clean geometric sans-serif for headlines with a humanist sans-serif for body copy. This combination provides structure and warmth, supporting the system's calm and focused tone.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 48px | 1.05 | 500 | -1.5px | Main marketing headlines |
| h2 | 27px | 1.5 | 400 | -0.2px | Subheadlines and feature titles |
| body | 16px | 1.5 | 400 | -0.14px | Standard body text and descriptions |
| small | 14px | 1.24 | 400 | 0px | Captions and meta text |

## 4. Spacing

The spatial rhythm is established by a consistent 4px base grid, creating a predictable and harmonious vertical cadence.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px base grid with generous vertical spacing for a breathable layout.

## 5. Surfaces

Depth is communicated through very subtle, low-opacity shadows that lift cards and modals from the background. Boundaries are defined by thin, almost invisible borders, maintaining the system's emphasis on lightness and openness.

- **Radius:** sm 4px · md 10px · lg 40px · pill 48px
- **Shadows:**
  - None: None
  - None: None
- **Borders:** 1px solid rgba(32,34,40,0.1) used for subtle card and input boundaries.

## 6. Layout

The layout skeleton uses wide content containers on desktop, typically featuring a left-heavy hero section. On mobile, this structure gracefully condenses into a centered, single-column stack for optimal readability.

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

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

## 7. Motion & Interaction

Motion is used sparingly and with clear intent. The philosophy prioritizes smooth, 0.2-second transitions and gentle hover states that provide feedback without introducing visual noise.

- **Durations:** micro 200ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth hover transitions on buttons and links
  - Subtle background-color shifts for interactive states

- **Hover:** Subtle background-color darkening or lightening depending on the element's base color.
- **Click:** Immediate response with a slight scale-down effect for tactile feedback.
- **Transition:** Standard 0.2s duration for color and background transitions.
- **Keyboard:** Focus states are visible but not overly dramatic, ensuring accessibility.

## 8. Voice & Don'ts

The editorial voice is calm, professional, and benefit-driven, using short, declarative headlines and low-pressure calls to action. Language is kept clear and reassuring, avoiding technical jargon and aggressive sales rhetoric.

- **Tone:** Calm, professional, and reassuring.
- **Headline style:** Short, declarative, and benefit-driven (e.g., 'Start Calm. Stay Focused.').
- **CTA style:** Direct and low-pressure (e.g., 'Try for free', '14-day free trial').
- **Avoid:** Overly technical jargon / Aggressive sales language / Dark or cluttered visual metaphors

### Don'ts
- ❌ 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.

The system deliberately avoids dark, cluttered visual metaphors and high-contrast neon accents, as they would contradict the core principle of a calm and focused workspace.

## System Prompt (paste into AI tool)

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