---
version: alpha
name: Sunsama — downloads and newsletter footer
colors:
  primary: '#FF891C'
  surface: '#FFFFFF'
  text: '#202228'
  mutedSurface: '#F6F5F1'
typography:
  primaryRole:
    fontFamily: DM Sans, sans-serif
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
  supporting:
    fontFamily: DM Sans, sans-serif
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
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 spacious footer combines platform-download chips, a newsletter capsule, four link columns and a separate legal-and-social baseline.

Captured from https://www.sunsama.com/ at 2026-10-16T06:14:54.663021+00:00. This reference isolates `.footer`.

## 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

- a “iOS/iPadOS”: "DM Sans", sans-serif, 16px, weight 400, line height 24px.
- a “Android”: "DM Sans", sans-serif, 16px, weight 400, line height 24px.
- a “macOS”: "DM Sans", sans-serif, 16px, weight 400, line height 24px.
- a “Windows”: "DM Sans", sans-serif, 16px, weight 400, line height 24px.
- a “Linux”: "DM Sans", sans-serif, 16px, weight 400, line height 24px.

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

Lead with a centered Download Apps label and a horizontal platform row. Below a thin divider, put newsletter copy and its form in the left column, followed by integrations, continued integrations, audiences and resources. Reserve a distinct bottom row for copyright, legal links and social icons.

Desktop image: 1440 × 843px at a 1440px viewport. Mobile evidence: 390 × 1658px at a 390px viewport. The selected element measured 1440.00 × 842.39px desktop and 390.00 × 1658.17px mobile. Crops use current document coordinates after a warm-up full-page screenshot; integer rounding may add at most one pixel per edge.

At 390px the platform row wraps and the directory groups reflow below the newsletter. Mobile uses a taller composition rather than compressing the desktop row. Newsletter submission was not tested; this is not an authentication form.

## Elevation & Depth

Keep the footer predominantly white with subtle separators. Platform chips use faint gray fills and gentle icon shadows, while text links stay flat.

## Shapes

Download platforms are rounded tiles; the newsletter is a gray capsule containing a smaller orange pill action. Legal links remain plain text.

## Components

A spacious footer combines platform-download chips, a newsletter capsule, four link columns and a separate legal-and-social baseline. 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.