--- version: alpha name: "Sunsama" description: "Sunsama's marketing surface reads like a thoughtful daily-planning journal that decided to ship as software. The canvas is a warm paper-cream `#f8f4ec` — significantly warmer than Notion's, leaning toward dawn light — and the type is Inter at modest mid-weights set in deliberately slow rhythm. Brand voltage comes from a hand-picked earth palette: `#e07a5f` terracotta for primary moments, `#81b29a` sage for calm-confirm states, `#f2cc8f` ochre for warmth, `#3d405b` dusk-blue for accents, all anchored against the cream canvas and an ink `#1a1a1c` for type. Demo cards carry product UI fragments (a daily ritual list, a time-box weekly plan, a shutdown reflection prompt) framed inside generous 64–80px padding. The voice is calm, unhurried, almost meditative — headlines describe practice and rhythm, not productivity gains. Section padding is **128px**, not 96px — Sunsama gives every band more breathing room than its peers." colors: bg: "#f8f4ec" bg-soft: "#f4eee0" bg-elev: "#fdfaf2" bg-strong: "#ebe2ce" bg-dark: "#1a1a1c" bg-dark-elev: "#252426" surface: "#f4eee0" text: "#1a1a1c" text-body: "#3a3737" text-muted: "#6b6560" text-faint: "#9a948c" brand: "#e07a5f" brand-hover: "#cd6a51" brand-active: "#b85b44" brand-soft: "#fadbd0" brand-deep: "#a04d39" on-brand: "#fdfaf2" on-dark: "#f8f4ec" sage: "#81b29a" sage-soft: "#dceadf" sage-deep: "#5d8a72" ochre: "#f2cc8f" ochre-soft: "#fce8c5" dusk: "#3d405b" dusk-soft: "#dcdde8" link: "#3d405b" link-hover: "#2c2f47" pastel-rose: "#fadbd0" pastel-sage: "#dceadf" pastel-ochre: "#fce8c5" pastel-dusk: "#dcdde8" pastel-cream: "#f4eee0" border: "#dccfb6" border-strong: "#bba98a" border-soft: "#ebe2ce" shadow-tint: "rgba(40, 25, 12, 0.06)" shadow-deep: "rgba(40, 25, 12, 0.18)" info: "#3d405b" success: "#5d8a72" success-soft: "#dceadf" warning: "#c69022" warning-soft: "#fce8c5" danger: "#c25450" danger-soft: "#fadbd0" selection: "rgba(224, 122, 95, 0.18)" ring: "rgba(224, 122, 95, 0.45)" typography: display: fontFamily: "Inter Display" fontSize: "64px" lineHeight: 1.65 letterSpacing: "-0.018em" body: fontFamily: "Inter" fontSize: "17px" lineHeight: 1.65 mono: fontFamily: "JetBrains Mono" rounded: button: "12px" card: "18px" pill: "9999px" spacing: xs: "4px" sm: "8px" md: "16px" lg: "48px" xl: "80px" --- ## Overview ## Overview Sunsama's marketing surface reads like a thoughtful daily-planning journal that decided to ship as software. The canvas is a paper-cream `#f8f4ec` — significantly warmer than Notion's, leaning toward dawn light — and the type is Inter at modest mid-weights set in deliberately slow rhythm. Body line-height is unusually generous (1.65 at 17px) — the page reads paper-like, designed for long scroll without urgency. Brand voltage comes from a **hand-picked earth palette**: `#e07a5f` terracotta for primary moments, `#81b29a` sage for calm-confirm states, `#f2cc8f` ochre for warmth, `#3d405b` dusk-blue for accents. The four colors borrow directly from a Pacific-Northwest natural-pigment palette — terracotta-pottery, sage-leaf, sun-faded ochre, twilight dusk. Used together they feel like a curated Anthropologie color story, not a tech-brand accent kit. Demo cards carry product UI fragments — a daily ritual list, a time-box weekly plan, a shutdown reflection prompt, a focus-block calendar view — framed inside generous 64–80px internal padding. The pastel surfaces (rose, sage, ochre, dusk) carry distinct semantic weight: rose for daily ritual, sage for shutdown reflection, ochre for weekly review, dusk for focus block. The voice is calm, unhurried, almost meditative — Sunsama writes about practice and rhythm, not productivity gains. Headlines say "Plan your day with intention" not "Boost your output." Section padding is **128px**, not the 96px Linear/Notion convention — Sunsama gives every band more breathing room than its peers. The result is a productivity tool that feels closer to a meditation app than a calendar app, without losing the workflow-software credibility. **Key Characteristics:** - Canvas is **warm cream** `#f8f4ec` — the warmest in the productivity-tool space. - Four-color earth voltage: terracotta + sage + ochre + dusk-blue. No bright accents. - Display weight stays at **500** — never bold. Sunsama's confidence is gentle. - Body line-height is **1.65** (not 1.5) — paper-book reading rhythm. - Section padding is **128px** — more whitespace than Linear/Notion. - Tiempos Text serif appears in pull-quotes — editorial accent, not headline. - Card radius scale is gentler: 24px (xl) for pastel surfaces, 18px for primary CTAs, 12px for content cards. - Pastel surface meaning is fixed: rose=ritual, sage=shutdown, ochre=review, dusk=focus. ## Colors ### Primary - **Bg / Canvas** (`#f8f4ec`): Warm paper-cream — the warmest in the productivity space. The off-tint is decisively warm, not cool. - **Text / Ink** (`#1a1a1c`): Warm ink for display + body emphasis. - **Brand / Terracotta** (`#e07a5f`): Primary CTA, brand wordmark accent, ritual-card voltage. ### Brand & Dark - **Brand Hover** (`#cd6a51`): Press state. - **Brand Active** (`#b85b44`): Focused. - **Brand Soft** (`#fadbd0`): Rose pastel surface for daily ritual moments. - **Brand Deep** (`#a04d39`): Layered terracotta-on-rose compositions. - **Bg Dark** (`#1a1a1c`): Warm-ink near-black for the single mid-page CTA band. - **On-Dark** (`#f8f4ec`): Canvas-cream over dark — never pure white. ### Accent — Earth Palette - **Sage** (`#81b29a`): Calm-confirm states, shutdown / reflection moments, success. - **Sage Soft** (`#dceadf`): Pastel sage card surface. - **Sage Deep** (`#5d8a72`): Sage text-on-sage compositions. - **Ochre** (`#f2cc8f`): Warmth, milestone, weekly review accents. - **Ochre Soft** (`#fce8c5`): Pastel ochre card surface. - **Dusk** (`#3d405b`): Quiet titles, link color, focus-block accents — twilight blue. - **Dusk Soft** (`#dcdde8`): Pastel dusk card surface. ### Pastel Card Surfaces (semantic-fixed) - **Pastel Rose** (`#fadbd0`): Daily ritual / morning planning demo. - **Pastel Sage** (`#dceadf`): Shutdown / reflection demo. - **Pastel Ochre** (`#fce8c5`): Weekly review / milestone demo. - **Pastel Dusk** (`#dcdde8`): Calendar / focus block demo. - **Pastel Cream** (`#f4eee0`): Neutral demo framing — when no semantic carries. ### Interactive - **Link** (`#3d405b`): Inline body links — dusk-blue, decidedly not bright. No underline by default. - **Link Hover** (`#2c2f47`): Pressed state. - **Selection** (`rgba(224, 122, 95, 0.18)`): Terracotta selection. - **Disabled**: `text-faint` (`#9a948c`) for type, `border-soft` (`#ebe2ce`) for outlines. ### Neutral Scale - **Ink** (`#1a1a1c`): Warm near-black for display + emphasis. - **Text Body** (`#3a3737`): Slightly warm running-text. - **Text Muted** (`#6b6560`): Warm-gray captions, footer links. - **Text Faint** (`#9a948c`): Placeholder, disabled. - **Bg Strong** (`#ebe2ce`): Deeper cream pre-footer. - **Bg Soft** (`#f4eee0`): Default soft surface. - **Bg Elev** (`#fdfaf2`): Near-white elevated card surface (still warm-tinted). ### Surface & Borders - **Bg** (`#f8f4ec`): Canvas. - **Bg Soft** (`#f4eee0`): Default card. - **Bg Elev** (`#fdfaf2`): Elevated cards (pricing, integration). - **Border** (`#dccfb6`): Default 1px hairline — warm cream-tinted. - **Border Strong** (`#bba98a`): Stronger card border. - **Border Soft** (`#ebe2ce`): Softest divider. ### Shadow Colors All shadows use earth-tinted ink `rgba(40, 25, 12, …)` — warmer than Height's, with a faint amber cast that reads as candlelight rather than office-fluorescent. Focus ring is terracotta at 45% — the brand voltage scaled to ring intensity. ### Semantic - **Info** (`#3d405b`): Dusk-blue info badges and quiet alerts. - **Success** (`#5d8a72`) on `#dceadf` sage-soft: confirmation states. - **Warning** (`#c69022`) on `#fce8c5` ochre-soft: caution. - **Danger** (`#c25450`) on `#fadbd0` rose-soft: destructive actions. ## Typography ### Font Family - **Primary**: `"Inter Display"` for display sizes (≥ 28px); `"Inter"` for body and UI. - **Serif**: `"Tiempos Text"` (with Lyon Text and Georgia fallbacks) for pull-quotes and editorial accents only. - **Mono**: `"JetBrains Mono"` (with `SF Mono` fallback) — rare, for code snippets and time displays. - **Fallback chain**: `-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif`. - **OpenType features**: `ss01` (single-storey g) for Inter character; `tnum` inside time displays. ### Hierarchy | Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes | |---|---|---|---|---|---|---|---| | display-hero | Inter Display | 64 | 500 | 1.08 | -0.018em | ss01 | Mega hero — single anchor | | display-xl | Inter Display | 52 | 500 | 1.10 | -0.016em | ss01 | Homepage hero h1 | | display-lg | Inter Display | 40 | 500 | 1.14 | -0.014em | ss01 | Feature section h2 | | display-md | Inter Display | 32 | 500 | 1.20 | -0.01em | ss01 | Pricing section heads | | quote-serif | Tiempos Text | 28 | 400 | 1.40 | 0 | — | Pull-quote accent — testimonial / philosophical | | title-lg | Inter Display | 24 | 500 | 1.30 | 0 | — | Section titles | | title-md | Inter Display | 20 | 500 | 1.35 | 0 | — | Card titles | | title-sm | Inter | 17 | 500 | 1.40 | 0 | — | Small card titles | | label-md | Inter | 16 | 500 | 1.45 | 0 | — | List labels | | button | Inter | 15 | 500 | 1.20 | 0 | — | CTA labels | | body-lg | Inter | 19 | 400 | 1.65 | 0 | — | Editorial body — generous line-height | | body-md | Inter | 17 | 400 | 1.65 | 0 | — | Default running-text | | body-sm | Inter | 14 | 400 | 1.55 | 0 | — | Caption support | | caption | Inter | 13 | 500 | 1.40 | 0.06em | — | Gentle uppercase eyebrow | | caption-tabular | Inter | 13 | 500 | 1.30 | 0 | tnum | Time / metric chips | | legal | Inter | 12 | 400 | 1.40 | 0.01em | — | Footer legal | | code-md | JetBrains Mono | 14 | 400 | 1.50 | 0 | — | Code snippets (rare) | ### Principles - **Display weight is locked at 500.** Never 600 or 700. Sunsama's confidence is gentle. - **Body line-height is 1.65, not 1.5.** This is the typographic signature: paper-book rhythm at long-scroll length. - **Tiempos Text serif appears only for pull-quotes.** Editorial accent, never a headline. The serif:sans pairing borrows from print magazines. - **Eyebrow tracking is unusually wide** (0.06em) — gentle uppercase, slightly more spaced than peers, signaling unhurried voice. - **Body type runs at 17px** as the default running-text size — slightly larger than the 16px tech convention, contributing to the paper-book feel. - **No Inter `cv` features applied.** Sunsama uses Inter in its default form (with only `ss01` for the single-storey g). The brand reads as "thoughtful default" rather than "designer's custom cut." ## Layout ### Spacing System Base unit **4px**. Scale: `4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 80 · 96 · 128 · 160`. Section padding **128px** between bands — Sunsama's signature whitespace generosity. Card padding 40px (default), 64px (pastel), 80px (dark hero). Top nav is 72px tall (vs 64px elsewhere) — same generosity rule. ### Grid & Container - **Max content width**: 1160px centered (slightly tighter than Linear's 1200) — paper-page proportion. - **Prose width**: 680px for hero copy and editorial body. - **Pastel-card grid**: 2-up at desktop with semantic pairing (rose+sage, ochre+dusk). 1-up on mobile. - **Pricing tier grid**: 3-up at desktop, 1-up at mobile. ### Whitespace Philosophy Whitespace is the dominant atmospheric tool, used more generously than peers. Hero sits in 128px+ of cream above and below the headline. Card internal padding is generous (40–80px). The page reads paper-like and unhurried — the explicit anti-thesis of the dense-info-density landing page. ### Section Cadence Cream hero → rose pastel ritual demo → cream caption-band → sage shutdown demo → cream feature grid → ochre weekly-review demo → dark mid-page band (sparingly) → dusk focus-block demo → cream pricing → deep-cream pre-footer → footer. The canvas resets between every pastel; the dark band is rare. | Name | Width | Key Changes | |---|---|---| | Mobile | < 640px | Single-column body; nav collapses to hamburger; pastel grid 1-up; hero h1 scales to 36px / 500; section padding reduces to 80px | | Tablet | 640–1024px | 2-up pastel grid (with semantic pairing — rose+sage, ochre+dusk); nav stays horizontal; hero at 44px | | Desktop | 1024–1200px | 2-up pastel grid; full nav with all menu items; hero at 52px | | Wide | > 1200px | Same as desktop with more outer breathing room; max content width caps at 1160px | ### Touch Targets - `button-primary` renders at 48 × 48px minimum (14 vertical padding + 20px line-height). - `button-icon` is 40 × 40px (under WCAG 44 — used inside dense desktop UI clusters). - `text-input` height is 48px throughout — comfortable touch target. - `ritual-checklist-item` checkboxes are 24 × 24px with 12px padding around — full row is 48px tall. ### Collapsing Strategy - Top nav collapses to hamburger at < 640px; full-screen sheet menu. - Pastel grids reduce columns rather than scaling cards down. - Pricing comparison table converts to horizontally-scrollable swipe at < 1024px. - Hero subhead width caps at 680px; never spans full content width. ### Image Behavior - Pastel-card UI screenshots crop to fit container. - Hero illustrations bleed full-width on mobile. - Customer logo strip wraps to 2 rows at tablet, 3 at mobile. ### Container Queries Pricing tier cards use `@container (min-width: 360px)` to switch from stacked-vertical to inline-row pricing layout. ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | 0 — Flat | No shadow | Canvas, pastel cards, top nav, footer | | 1 — Hairline | 1px `#dccfb6` border | Default cards, inputs, secondary buttons | | 2 — Ambient | `0 1px 2px rgba(40,25,12,0.05)` | Resting cards | | 3 — Standard | `0 8px 24px rgba(40,25,12,0.08)` | Card hover, sticky nav at scroll | | 4 — Elevated | `0 18px 48px rgba(40,25,12,0.12), 0 4px 8px rgba(40,25,12,0.05)` | Pricing tiers, integration cards | | 5 — Deep | `0 30px 64px rgba(40,25,12,0.18), 0 8px 16px rgba(40,25,12,0.08)` | Modals, command palette | ### Shadow Philosophy All shadows are earth-tinted (`rgba(40, 25, 12, …)`) — warmer than Height's warm-ink. The amber cast reads as candlelight, deepening the unhurried atmosphere. Pastel cards stay flat — they carry depth through color and generous padding alone. Modals stack two shadows for compound depth. ## Shapes | Tier | Token | Value | Use | |---|---|---|---| | Micro | micro | 2px | Cookie / legal CTAs | | Standard | sm | 6px | Inputs (rare — most inputs use md), small chips | | Comfortable | md | 12px | Default content cards, ritual-checklist-item, table cells | | Relaxed | lg | 18px | Primary CTAs, secondary buttons, default cards | | Featured | xl | 24px | Pastel surface cards, dark hero, modals | | Pill | pill | 9999px | Badges, status pills | | Full | full | 9999px / 50% | Avatars, icon buttons, sun-glyph wordmark | Sunsama's radius scale runs slightly larger than peers — 18px primary buttons (vs 14px elsewhere) and 24px pastel cards (vs 20px) — contributing to the softer, paper-rounded feel. ## Components ### Buttons (4 variants) **`button-primary`** — Background `#e07a5f` terracotta, text `#fdfaf2` cream-tinted white, type 15px / 500 Inter, padding 14 × 24px, radius 18px. "Start free trial" / "Get Sunsama". One per viewport. Hover lightens via 4% white overlay; active darkens to `#cd6a51`. Focus shows a 3px terracotta ring at 45% alpha with 2px offset. **`button-secondary`** — Cream-on-cream pair. Background `#f8f4ec` (matches canvas), text `#1a1a1c`, 1px border `#bba98a`. The "Watch demo" / "Sign in" pair next to primary. **`button-tertiary`** — Inline link-style. Transparent background, dusk-blue text `#3d405b`, padding 12 × 16px, radius 18px. **`button-on-dark`** — Cream-on-dark variant. Background `#f8f4ec`, text `#1a1a1c`. Used over the dark mid-page band. **`button-icon`** — 40 × 40px circular. Bg-elev surface, 1px hairline, ink icon. Carousel arrows, share. ### Cards **`card-default`** — Bg-elev `#fdfaf2` near-white, 18px radius, 40px padding, 1px border `#dccfb6`. Default content card on cream canvas — slightly elevated tone differentiates from canvas. **`card-elevated`** — Same shape, with standard shadow and softer border. Pricing tiers, integration cards. **`card-pastel-rose`** — Daily ritual / morning planning demo. Background `#fadbd0`, 24px radius, 64px padding. Frames a ritual checklist UI. **`card-pastel-sage`** — Shutdown / reflection demo. Background `#dceadf`, same shape. Frames a shutdown prompt UI. **`card-pastel-ochre`** — Weekly review / milestone demo. Background `#fce8c5`, same shape. Frames a weekly review UI. **`card-pastel-dusk`** — Calendar / focus block demo. Background `#dcdde8`, same shape. Frames a focus-block calendar UI with dusk-blue time-blocks. **`hero-card-dark`** — Single mid-page dark CTA band. Background `#1a1a1c`, text `#f8f4ec` cream-tinted, 24px radius, 80px padding. Used sparingly — Sunsama prefers cream-on-cream contrast over dark inversions. **`quote-card`** — Testimonial card. Bg, 18px radius, 48px padding, 1px soft border. Carries a Tiempos Text 28px / 400 pull-quote with attribution beneath in caption type. **`ritual-checklist-item`** — A signature component. Each item is a horizontal cream row inside a 12px-radius bg-elev container with 1px soft border. Round checkbox left, label center, time-estimate right-aligned in `tnum` caption-tabular. Carries the Sunsama-specific UX vocabulary into marketing demos. ### Badges & Pills - **`badge-tag`** — Default category pill. Bg-soft, muted text, rounded pill, 4 × 12px, 12px font. - **`badge-status-confirmed`** — "Planned" / "Done" status. Sage-soft background, sage-deep text. ### Inputs / Forms **`text-input`** — Bg-elev `#fdfaf2`, 12px radius, 12 × 16px padding, 48px height, 1px `#bba98a` border. Inter 17px / 400 — the body default. **`text-input-focus`** — Border recolors to terracotta `#e07a5f`; 3px terracotta ring at 20% alpha appears. **`text-input-error`** — Border `#c25450`, helper text `#c25450`. ### Navigation **`top-nav`** — 72px-tall sticky bar (taller than peers — Sunsama uses generous nav height). `rgba(248,244,236,0.85)` cream-tinted backdrop with 16px blur. Sunsama wordmark left in ink, with a small terracotta sun-glyph icon. Horizontal menu (Product, Pricing, Resources, Customers) center. Right cluster carries "Sign in" text link, "Start free trial" `button-primary`. Stays cream on every page. **`footer`** — Deep-cream `bg-strong`, 128px padding, multi-column link list, small wordmark. ### Toasts & Modals **`toast`** — Warm-ink dark, cream text, 12px radius, deep shadow. "Day planned" / "Ritual completed" / "Shutdown logged". Auto-dismiss 3s. **Modal** — Bg-elev white, 24px radius, 64px padding, deep shadow. Backdrop overlay 70% alpha cream-tinted. ### Decorative **Sun-glyph wordmark accent** — A small terracotta sun-circle icon placed left of the Sunsama wordmark in the top nav and footer. The glyph is a flat circle, 12px diameter, brand color, no rays — a quiet symbol of the brand's morning-rhythm metaphor. ### Easing Curves - **Standard** `cubic-bezier(0.4, 0, 0.2, 1)` — color, opacity. - **Emphasized** `cubic-bezier(0.16, 1, 0.3, 1)` — pastel reveals, modal entrance. - **Spring** `cubic-bezier(0.5, 1.4, 0.5, 1)` — gentle bounce on ritual-checklist completion. ### Duration Buckets - **Instant (100ms)**: Color hover, cursor changes — slightly slower than peers (Sunsama's unhurried baseline). - **Fast (180ms)**: Button hover, focus ring, input border recolor. - **Standard (280ms)**: Card hover, dropdown, tab switch — slower than the 220ms convention. - **Slow (460ms)**: Pastel card scroll reveal, modal entrance — Sunsama gives reveals more time to land. - **Page (560ms)**: Inter-page transition. ### Per-Component Micro-States - **Button hover (primary)**: 4% white overlay; no transform; 180ms. - **Card hover (default)**: Border darkens `#dccfb6` → `#bba98a`; ambient → standard shadow; 180ms. - **Card hover (pastel)**: 4px translate-y lift + standard shadow; 280ms emphasized. - **Ritual checkbox check**: Scale 1.0 → 1.15 → 1.0 spring bounce (460ms); checkbox fill animates from canvas to terracotta. - **Link hover**: Underline grows 0 → 1px under the text; 180ms. - **Input focus**: Border recolors `#bba98a` → `#e07a5f`; 3px terracotta ring expands 0 → 3px at 20% alpha; 180ms. ### Page Transitions Default fade. Inter-page route is 560ms emphasized fade-in with 16px translate-y — slower than peers, contributing to the unhurried voice. Section-on-scroll reveals are 460ms with 24px offset, gated by `IntersectionObserver`. Pastel cards stagger left-to-right at 120ms increments. ### Reduced Motion `prefers-reduced-motion: reduce` honored: all transforms removed, transitions reduced to opacity-only at 100ms, ritual-checklist bounce becomes instant fill, pastel scroll reveals fade in without offset. ### Contrast Pairs - **Text on bg**: `#1a1a1c` on `#f8f4ec` = **14.6** — AAA at every size. - **Body on bg**: `#3a3737` on `#f8f4ec` = **9.4** — AAA. - **Muted on bg**: `#6b6560` on `#f8f4ec` = **4.6** — AA at body sizes. - **On-brand**: `#fdfaf2` on `#e07a5f` = **4.5** — AA at body sizes; AAA at display. - **On-dark**: `#f8f4ec` on `#1a1a1c` = **14.4** — AAA. - **Link on bg**: `#3d405b` on `#f8f4ec` = **7.6** — AAA. - **Pastel rose text**: `#1a1a1c` on `#fadbd0` = **13.2** — AAA. - **Sage deep on sage soft**: `#5d8a72` on `#dceadf` = **3.8** — AA at large sizes only; reserve for headings inside sage cards. ### Focus Indicators 3px solid terracotta at 45% alpha with 2px offset on every focusable element. The terracotta-purple-tinted ring reads as branded but never aggressive. ### ARIA Patterns - **Buttons**: Native `