Sunsama — trial-first pricing page

---
version: alpha
name: Sunsama — trial-first pricing page
colors:
  primary: '#FF891C'
  surface: '#FFFFFF'
  text: '#202228'
  mutedSurface: '#F6F5F1'
typography:
  primaryRole:
    fontFamily: DM Sans, sans-serif
    fontSize: 56px
    fontWeight: 600
    lineHeight: 70px
  supporting:
    fontFamily: Inter, sans-serif
    fontSize: 12px
    fontWeight: 400
    lineHeight: 18px
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 complete pricing page leads with a free-trial panel, then contrasts Pro and Enterprise cards before customer shoutouts, a pricing manifesto, FAQs and a conversion footer.

Captured from https://www.sunsama.com/pricing at 2026-10-16T06:08:11.966306+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

- h1 “Try it for free for 2 weeks.”: "DM Sans", sans-serif, 56px, weight 600, line height 70px.
- h2 “14 day free trial”: "DM Sans", sans-serif, 24px, weight 600, line height 25.44px.
- h1 “Only pay if you love it.”: "DM Sans", sans-serif, 56px, weight 600, line height 70px.
- h2 “Pro Plan”: "DM Sans", sans-serif, 24px, weight 600, line height 25.44px.
- h2 “Enterprise”: "DM Sans", sans-serif, 24px, weight 600, line height 25.44px.

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

Center a large trial headline above a translucent trial card. Put the two paid-plan cards side by side under a second headline, with oversized price typography on the left and a contact action on the right. Follow with source testimonials, explanatory pricing principles and FAQ rows. Preserve the full page rather than presenting only the plan cards as the pricing page.

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

At 390px the opening headline reduces from 56px to 32px and the two pricing cards stack. Long explanatory sections wrap into a single reading column. The captured annual price is source copy at capture time, not a guaranteed current offer.

## Elevation & Depth

White pricing cards use diffuse shadows against a warm peach glow; later content remains flatter. Exact shadow blur was not measured.

## Shapes

Rounded plan cards, circular list checks and orange pill buttons define the page. Enterprise uses a contrasting blue contact button.

## Components

A complete pricing page leads with a free-trial panel, then contrasts Pro and Enterprise cards before customer shoutouts, a pricing manifesto, FAQs and a conversion 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.