---
version: alpha
name: Sunsama — warm daily-planning landing
colors:
  primary: '#FF891C'
  surface: '#FFFFFF'
  text: '#202228'
  mutedSurface: '#F6F5F1'
typography:
  primaryRole:
    fontFamily: DM Sans, sans-serif
    fontSize: 16px
    fontWeight: 500
    lineHeight: 19.2px
  supporting:
    fontFamily: DM Sans, sans-serif
    fontSize: 16px
    fontWeight: 500
    lineHeight: 19.2px
omitted:
- section: spacing
  reason: Per-reference dimensions and observed composition are given in Layout; no
    global scale is inferred.
- section: rounded
  reason: Observed shape roles are described in Shapes without inventing a global
    radius scale.
- section: components
  reason: Reference-specific components are described in prose rather than an inferred
    implementation API.
---

## Overview

A warm white productivity landing page pairs orange pill actions with a large daily-planner screenshot, narrative feature panels, integration rows, a comparison table and an expansive newsletter footer.

Captured from https://www.sunsama.com/ at 2026-10-16T06:09:06.401112+00:00. This is a full-page capture.

## Colors

primary: `#FF891C`; surface: `#FFFFFF`; text: `#202228`; mutedSurface: `#F6F5F1`. These values describe observed interface roles, not a complete brand palette. Keep text and surfaces distinct; do not spread the primary accent across every element.

## Typography

- p “Start your Day”: "DM Sans", sans-serif, 16px, weight 500, line height 19.2px.
- p “Start eachday with clarity”: "DM Sans", sans-serif, 40px, weight 600, line height 44px.
- p “Plan your day with intention by aligning your goals, prioritizing”: "DM Sans", sans-serif, 16px, weight 500, line height 23.68px.
- p “Plan what you need to get done today, without losing focus on tom”: "DM Sans", sans-serif, 16px, weight 500, line height 19.84px.
- p “Visualize and block time forwork on your calendar”: "DM Sans", sans-serif, 16px, weight 500, line height 19.84px.

The primary token describes a sampled heading or link, not an inferred global type scale. Use the accompanying composition to establish hierarchy rather than applying one size everywhere.

## Layout

Place benefit-led copy to the left of a large calendar screenshot. Follow with social proof, a two-column problem/solution contrast, and three sequential day-planning feature panels. Alternate broad white space with pale bordered cards. Use a separate four-row integration module, a feature-card grid, comparison matrix, community cards and a warm-gradient closing CTA before the footer.

Desktop image: 1440 × 12067px at a 1440px viewport. Mobile evidence: 390 × 844px at a 390px viewport. Measured document widths were 1440px desktop and 390px mobile.

At 390px the navigation collapses to a menu icon beside the retained start action; hero copy and product image stack. The main headline is three lines in both observations. The source logo ticker has an observed HubSpot/Zapier spacing overlap even after assets loaded and a cached reload; this is a source defect, not a pattern to reproduce. The primary desktop screenshot retains the original page faithfully.

## Elevation & Depth

Use very pale borders, soft screenshot shadows and broad peach/orange glow behind the hero and final CTA. Avoid heavy dark card outlines. Blur radii are visual estimates, not measured tokens.

## Shapes

Orange primary actions are pill-shaped. Calendar previews and content cards use rounded rectangles; thin outlined category chips label sections.

## Components

A warm white productivity landing page pairs orange pill actions with a large daily-planner screenshot, narrative feature panels, integration rows, a comparison table and an expansive newsletter footer. Preserve the selected reference's hierarchy and reading order. This is one visible state: hover, focus, validation, menus, downloads and successful transactions are untested unless explicitly described. No credentials were entered, forms submitted, accounts created or purchases made. Any customer statements, pricing or performance claims visible in the source are source-owned copy, not independently verified facts.

## Do's and Don'ts

- Do preserve the specific spacing relationships, content grouping and type hierarchy described above.
- Do provide accessible focus indicators and responsive controls in a new implementation; this is a recommendation, not a claim that every source state passed testing.
- Do use original content and substantiated claims when adapting the pattern.
- Don't reproduce observed source overflow, clipping or ticker-spacing defects.
- Don't infer animation timing, validation behavior or completed transactions from a static frame.