Skip to content
DesignMunkDesignMunk Submit a site

Sunsama

sunsama.com
Sunsama. Start Calm. Stay Focused. End Confident.
Productivity Software Webflow Homepage DM Sans
Share Visit site
sunsama.com DESKTOP · 1440
Sunsama

AI Breakdown

Design export

---
version: alpha
name: Sunsama
description: Sunsama. Start Calm. Stay Focused. End Confident.
colors:
  primary: "#202228"
  secondary: "#343434"
  tertiary: "#ff891c"
  neutral: "#ffffff"
  brand-rich-gardenia: "#f37e4d"
  brand-pink-abalone: "#ecb4a4"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: DM Sans
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.19
  headline-md:
    fontFamily: DM Sans
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.21
  headline-sm:
    fontFamily: DM Sans
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.2
  headline-xs:
    fontFamily: DM Sans
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.22
  body-md:
    fontFamily: DM Sans
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: -0.01em
rounded:
  sm: 10px
  md: 30px
spacing:
  xs: 8px
  sm: 16px
  md: 28px
  lg: 40px
  xl: 96px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.md}"
    padding: 10px 22px
    height: 47px
  button-secondary:
    backgroundColor: "#f6f5f1"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 10px 22px
    height: 47px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "#fafafa"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 32px 20px 0px
---

# Sunsama: Warm Orange CTAs and a Spacious Planner Preview

## Overview

A warm, focused interface for busy professionals. The tone is calm and supportive; density is medium with ample whitespace between sections. Color is mostly neutral with a single bright accent that carries calls to action. Content skews left-aligned for quick scanning, anchored by large headlines and a live product preview.

## Colors

- Primary (#202228): Deep ink for headlines and core text.
- Secondary (#343434): Graphite for subdued headings and supporting text.
- Tertiary (#ff891c): Sunset orange for primary CTAs and key highlights.
- Neutral (#ffffff): Pure white base for pages and containers.
- Brand-rich-gardenia (#f37e4d): Gardenia orange accent used in warm tints/gradients.
- Brand-pink-abalone (#ecb4a4): Abalone pink accent for subtle background warmth.
- Surface (#ffffff): Surface white for app backgrounds and content areas.
- On-surface (#202228): On-surface ink for text placed on light surfaces.

## Typography

All type uses DM Sans. Roles: headline-lg at 32px/700/1.19 for hero statements; headline-md at 24px/700 for section leads; headline-sm at 20px/600 and headline-xs at 18px/600 for subheads and labels; body-md at 16px/500/1.5 (-0.01em) for paragraphs and UI copy.
Availability: DM Sans is a free Google font and can be loaded directly. If it cannot be used, substitute Inter, Manrope, or Work Sans (all Google) for similar geometry and x-height. Keep weights parallel (500 body, 600–700 headings).

## Layout

Spacing follows an 8-based scale: 8, 16, 28, 40, 96px. Use xl (96px) for vertical section rhythm, lg (40px) for block gaps inside sections, md (28px) for card padding, and sm/xs for item gutters. A two-column hero (text + preview) is typical; below, stack into a single column on narrow viewports with 40–96px vertical separation. Consider a 12-column grid with 16–28px gutters to match the scale.

## Elevation & Depth

Depth is restrained. Cards and preview frames use sm or md shadows: sm adds a faint edge and small lift; md is reserved for prominent previews. Large shadow tiers are off (lg/xl "none"). When not using shadow, rely on the #fafafa card surface and whitespace; borders are minimal and should be soft, if used at all.

## Shapes

Two radii communicate affordance: sm at 10px for cards and small surfaces; md at 30px for high-touch elements like primary/secondary buttons, yielding a pill profile. Maintain internal consistency — avoid mixing square corners with 30px pills in the same cluster.

## Components

Buttons
- Primary: #ff891c background, #ffffff text, 30px radius, 47px height, 10px × 22px padding. Use for the main CTA per page.
- Secondary: #f6f5f1 background, #202228 text, 30px radius, 47px height, 10px × 22px padding. Use adjacent to primary for low-risk actions.
- Link: #202228 text, no radius. Use inline, no container.

Card
- Background #fafafa, text #202228, 10px radius, padding 32px 20px 0, subtle sm shadow as needed.

### Hero Header
- Layout: Two columns with xl (96px) vertical padding. Left column uses headline-lg (32px/700) and body-md (16px/500). Right column holds the App Preview Frame.
- Actions: One primary button (#ff891c, 30px radius) plus optional secondary.

### App Preview Frame
- Container: Card surface #fafafa, 10px radius, md shadow for emphasis, lg (40px) outer margin from text column.
- Content: Screenshot or live UI scaled to fit with sm (16px) inner padding if framed.

### Trust Bar
- Elements: Small avatar cluster and grayscale logo row.
- Spacing: md (28px) between avatar group and caption; lg (40px) above logos.

### Feature Step Blocks
- Structure: Repeating sections for "Start your Day", "Work through your day", "Make every day count".
- Styling: headline-md (24px/700) titles, body-md paragraphs, lg (40px) gaps; optional warm tint using brand-pink-abalone/brand-rich-gardenia in backgrounds.

### Integrations Grid
- Grid: Responsive tiles in 3–5 columns with sm (16px) gutters.
- Each tile: center-aligned label, optional icon on a #ffffff surface; use 10px radius if carded.

### Comparison Table
- Layout: Two columns of features with checkmarks; use body-md labels and sm (8–16px) row padding.
- Emphasis: Heading set in headline-sm (20px/600); avoid heavy borders — use row spacing and subtle backgrounds.

### Testimonial Quote
- Text: body-md for quote, author line in headline-xs (18px/600).
- Container: Optional #fafafa card, 10px radius, sm shadow, md (28px) padding.

### Newsletter Signup
- Fields: Single input + primary button (#ff891c) inline on desktop, stacked on mobile.
- Spacing: md (28px) internal, lg (40px) external; validation messages in body-md.

## Do's and Don'ts

- Do reserve #ff891c for the primary CTA and key highlights; avoid using it for secondary links or long text.
- Do keep section spacing generous (use 96px vertical padding) to preserve the calm tone.
- Do pair cards with #fafafa and sm/md shadows; prefer whitespace over borders.
- Don't mix sharp corners with 30px-radius buttons in the same cluster.
- Don't exceed headline-lg (32px/700) for hero copy; long lines should fall back to headline-md (24px/700).
- Don't introduce new accent colors; use brand-rich-gardenia and brand-pink-abalone only for subtle backgrounds or tints.

## Agent Prompt Guide

Quick color reference
- Text: #202228
- Background: #ffffff
- Border/Rule: #f6f5f1
- Accent/CTA: #ff891c
- Card Surface: #fafafa

1) Build a two-column hero
- Font: DM Sans (Google). Headline: 32px, 700, line-height 1.19, color #202228. Body: 16px, 500, line-height 1.5, letter-spacing -0.01em, color #202228.
- Layout: Left text column, right preview column. Section padding: 96px top/bottom. Column gap: 40px.
- Primary button: background #ff891c, text #ffffff, height 47px, padding 10px 22px, border-radius 30px.
- Secondary button (optional): background #f6f5f1, text #202228, same size/radius.

2) App preview frame
- Wrapper: background #fafafa, border-radius 10px, shadow rgba(44,48,52,0.05) 0px 3px 10px 0px, padding 16px, margin-left 40px.
- Place an image that scales to fit the rounded container.

3) Feature step block
- Title: 24px, 700, DM Sans, color #202228. Copy: 16px, 500.
- Use a light tint background referencing #ecb4a4 or #f37e4d at very low opacity.
- Internal spacing: 40px; item spacing: 28px.

4) Integrations grid
- Grid: 4 columns desktop, 2 mobile. Gutter 16px.
- Tile: background #ffffff or #fafafa, border-radius 10px, padding 20–28px, label in 16px/500.

5) Testimonial card
- Container: background #fafafa, border-radius 10px, shadow rgba(61,71,83,0.08) 0px 2px 4px 0px, padding 28px.
- Quote: 16px/500, color #202228. Author: 18px/600.

## Similar Brands

- Asana — similarly warm neutrals and a single bright accent; Asana leans more colorful in illustrations.
- Todoist — focused productivity pitch with one strong accent; Sunsama uses softer shadows and more spacious sections.
- Notion — calm monochrome base and disciplined typography; Notion is colder and more minimal, with fewer warm tints.
- Monday.com — productivity SaaS with bold CTA color; Monday is louder and more saturated across secondary elements.

More like this

Browse Productivity →
blogcms.io
BlogCMS AI
BlogCMS
Static blogs built to rank higher—SEO and speed built in.
Homepage · 6 hours ago
maillayer.com
MailLayer Developer Tools
MailLayer
Everything you need. Nothing you don't.
Homepage · 18 hours ago
superdevpro.com
SuperDev Pro Developer Tools
SuperDev Pro
One extension replaces your browser toolbox—no clutter, no context switching.
Homepage · 19 hours ago
quickpick.space
QuickPick Design Tools
QuickPick
Keep your entire creative world organized in one space.
Homepage · 22 hours ago