Sunsama — peach email sign-up screen

---
version: alpha
name: Sunsama — peach email sign-up screen
colors:
  primary: '#FF891C'
  surface: '#FFFFFF'
  text: '#202228'
  mutedSurface: '#F6F5F1'
typography:
  primaryRole:
    fontFamily: Outfit, sans-serif
    fontSize: 56px
    fontWeight: 500
    lineHeight: 59.36px
  supporting:
    fontFamily: Outfit, sans-serif
    fontSize: 19.2px
    fontWeight: 400
    lineHeight: 20.352px
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 minimal sign-up screen centers an email input with an inset orange trial button over a large soft peach gradient, with an existing-account link and trial reassurance below.

Captured from https://www.sunsama.com/start/signup at 2026-10-16T06:08:27.287291+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 “Sign up”: Outfit, sans-serif, 56px, weight 500, line height 59.36px.
- a “Log in”: Outfit, sans-serif, 19.2px, weight 400, line height 20.352px.

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

Keep the sign-up heading centered above a single horizontal email-and-action capsule. Place the existing-account sentence directly below, then a two-line trial reassurance. The wide white canvas and large gradient are intentional; there is no dashboard, navigation or unrelated marketing module in this state.

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

The heading reduces from 56px on desktop to 36px at 390px. The source email row remains wider than the mobile viewport and clips at both sides: a measured source limitation, not a recommended responsive implementation. A recreation should constrain the row to the viewport or stack the controls.

## Elevation & Depth

The broad peach background glow provides the depth. The form itself has a thin gray outline and a nearly flat white surface.

## Shapes

The email shell and inset orange action are fully rounded capsules. Other information is unboxed text.

## Components

A minimal sign-up screen centers an email input with an inset orange trial button over a large soft peach gradient, with an existing-account link and trial reassurance below. 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.