# Sunsama — Marketing site Design Spec

> Source: sunsama.com (live DOM, computed styles), 2026-07-25. 0 stylesheets
> blocked. **Webflow-built**; §2 read from computed fills/text. `Roboto` and the
> `termly-*` / `go…` hashed keyframes belong to the Termly consent widget, not the
> brand — excluded. The homepage display is a styled `<div>` rather than an `<h1>`,
> so the "largest on page" read is used for §3.
> Reality check: **"warm" and "unhurried" hold; "editorial" does not.** The queue
> expected an editorial register. There is **no serif anywhere** — the site is a
> single geometric sans (DM Sans, 982 uses) at weight 600. The warmth is real but
> comes from a **peach-to-coral gradient family** and one orange pill, over a
> plain white canvas. Two details worth having: hover lifts on a **coral-tinted**
> shadow, and the hairline is a cool blue-grey #ebeff7 against all that warmth.

## 1. Visual Theme &amp; Atmosphere

Calm, warm, and deliberately plain. The canvas is white, kept quiet so a soft
peach-to-coral aurora wash can bleed in from one side and do all the emotional
work — the palette reads like early morning light, which matches a product about
starting the day well. Type is a single geometric sans at semibold, set in short
declarative lines ("Start Calm. Stay Focused. End Confident."). One orange pill is
the only saturated control. Depth is soft and low-contrast, with a wide 10px
radius and a hover lift that glows faintly coral rather than grey. Feels: calm,
warm, plain-spoken, unhurried.

## 2. Color Palette &amp; Roles

| Token | Hex / value | Role / usage |
|---|---|---|
| white | #ffffff | THE canvas (65 uses) |
| grey-50 | #fafafa | light surface |
| grey-100 | #f8f8f8 | section fill |
| grey-150 | #f2f2f2 | inset fill / border |
| warm-grey | #f6f5f1 | warm section band |
| ink | #202228 | primary text (866 uses) |
| ink-70 | rgba(32,34,40,.7) | secondary text |
| ink-60 | rgba(32,34,40,.6) | muted text |
| ink-50 | rgba(32,34,40,.5) | faint text |
| slate | #4c4f56 | alt secondary text |
| black | #000000 | rare true black |
| orange | #ff891c | THE accent — primary pill fill |
| orange-hover | #ff9839 | pill hover fill |
| orange-border | #f59549 | 1px accent border |
| coral | #f06351 | gradient end + tinted shadow |
| apricot | #ffb74d | gradient end |
| blush | #ffbaba | radial gradient start |
| red | #e94c4c | radial gradient end |
| lilac | #fed5ff | rare pastel section fill |
| hairline | #ebeff7 | THE border — a COOL blue-grey (49 uses) |
| border-warm | #e5e4e0 | warm alt border |

Rules: the canvas stays **plain white** — the warmth is delivered by gradient
washes, not by tinting the background (contrast with Our Place or Graza, which
tint the canvas instead). Note the deliberate tension: borders are a **cool**
#ebeff7 while every fill is warm.

## 3. Typography Rules

**One family: DM Sans** (982 uses), a geometric sans, with no serif and no mono
anywhere. Display runs **56/64.96 at weight 600** with -0.56px tracking; body and
nav sit at 15–16px in 400–500 with slightly negative or normal tracking. The
restraint is total — there is no second voice, and the personality comes from
short sentence-case lines rather than from type contrast.

> Specimen substitution: **DM Sans is an open Google font**, so previews use the
> real face.

| Role | Family | Size/Line | Weight | Tracking |
|---|---|---|---|---|
| Display (largest) | DM Sans | 56/64.96 | 600 | -0.56px |
| Section head | DM Sans | 32–40 | 600 | -0.4px |
| Lead body | DM Sans | 16/19.2 | 500 | -0.16px |
| Body | DM Sans | 16 | 400 | normal |
| Nav | DM Sans | 16 | 400 | normal |
| Eyebrow / label | DM Sans | 15/22.5 | 400 | normal |

## 4. Component Stylings

The primary CTA is a **44px orange #ff891c pill** at 30px radius with `10px 22px`
padding and a 16px DM Sans label. Nav items are 31px ghost pills at 50px radius.
The dominant page radius is **10px** (62 uses) with a pill family above it
(20/24/30/40/48/50px). Borders are the cool 1px #ebeff7 (49 uses), plus #f2f2f2
and a 1px #f59549 accent outline.

| Component | Rest | Hover | Focus | Active | Disabled |
|---|---|---|---|---|---|
| Primary pill | #ff891c, #202228, 30px, 44px | bg → **#ff9839** *plus* `box-shadow: rgba(240,99,81,.28) 0 12px 1.5rem` — a **coral-tinted lift** | not defined | — | not observed |
| Outline button | transparent, 1px #f59549 | bg → #ff891c, text → #ffffff, border → #ff891c | not defined | — | — |
| Secondary (grey text) | transparent | bg → #ff891c, text → #ffffff | not defined | — | — |
| Nav ghost pill | transparent, 50px | `background-color 0.2s ease` | not defined | — | — |

The hover recipe is the detail to copy: the primary doesn't just brighten, it
**lifts on a coral-tinted shadow** (`rgba(240,99,81,.28)`, note the mixed
`1.5rem` blur), which keeps the glow inside the warm palette instead of
introducing grey. Focus, however, is **not defined anywhere** — record as an
accessibility gap and add a ring (e.g. `0 0 0 3px rgba(255,137,28,.4)`).

## 5. Layout Principles

A borderless white top bar: wordmark left, six centred links, then Login and an
orange Start-for-Free pill. The hero is left-aligned — a small award chip, a
three-line 56px display, a paragraph and CTAs — with the peach-to-coral aurora
occupying the right half of the viewport. Content below stacks in white and
#f8f8f8 bands with 10px-radius cards. 2 container queries.

## 6. Depth &amp; Elevation

Radius: **10px** dominant (62 uses), then a pill family — 14px, 20px, 24px, 30px
(buttons), 40px, 48px, 50px. Shadows are soft and low-contrast, and notably
**blue-tinted at rest but coral-tinted on hover**:

- `rgba(61,71,83,.05) 0 0 0 0` + layers — the resting card shadow (45 uses, cool)
- `rgba(44,48,52,.05) 0 3px 10px` — subtle lift
- `rgba(0,0,0,.25) 0 0 35px` — one strong ambient glow
- `rgba(240,99,81,.28) 0 12px 1.5rem` — **the coral hover lift**

Borders are 1px and cool (#ebeff7, #f2f2f2) with warm exceptions (#e5e4e0,
#f59549). One tiny `backdrop-filter: blur(1.33991px)`.

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| background-color | 0.2s | ease | hover fills (dominant, 10x) |
| all | 0.2s | ease | controls |

**The CSS motion budget is genuinely tiny** — two transition signatures, both
0.2s ease, and no CSS animations running. But that is not the whole story:
**GSAP is detected** and drives the scroll and hero motion, and the declared
easing list is rich, led by `cubic-bezier(0.165, 0.84, 0.44, 1)` (easeOutQuart)
with an **overshoot** `cubic-bezier(0.678, -0.0…)` also present. The only CSS
keyframe belonging to the brand is `spin`; the `go…` hashed and `termly-*`
keyframes are the consent widget. There is **no `prefers-reduced-motion` block**
(`reducedMotionBlocks:0`) — worth adding given GSAP scroll animation.

## 8. Backgrounds, Effects &amp; WebGL

A **four-gradient warm family** does all the atmospheric work, and it is worth
reproducing exactly:

- `linear-gradient(16deg, #f06351, #ffb74d)` — coral → apricot
- `linear-gradient(104.24deg, #f59549, #f06351)` — apricot → coral
- `linear-gradient(114.23deg, #ff891c, #f06351)` — orange → coral
- `radial-gradient(circle closest-corner at 65% 36%, #ffbaba, #e94c4c)` — blush → red

Note the fractional angles (104.24deg, 114.23deg) and the
`circle closest-corner` radial. One `backdrop-filter: blur(1.33991px)`, 2 raster
layers. No canvas/WebGL, no video, no grain.

## 9. Do's and Don'ts

### Do
- Keep the canvas plain white and deliver warmth through gradient washes, not by tinting the background.
- Use one geometric sans (DM Sans) at weight 600 for display, 400–500 for body — no second voice.
- Write short declarative sentence-case lines; the copy carries the personality.
- Make the primary an orange #ff891c pill at 30px radius, 44px tall.
- Lift on hover with a **coral-tinted** shadow `rgba(240,99,81,.28) 0 12px 1.5rem`, never a grey one.
- Keep the 10px dominant radius with a pill family above it.
- Reproduce the four-gradient warm family with its fractional angles.

### Don't
- Don't add a serif — there is none.
- Don't tint the canvas warm; that is a different brand's move.
- Don't use grey hover shadows; the glow stays in the warm palette.
- Don't ship without a focus ring — the site defines none.
- Don't add a reduced-motion block's worth of CSS animation without the block.

## 10. Responsive Behavior

A compact mixed-unit Webflow ladder (em-based max-widths plus a px overlay):

| Breakpoint | What changes |
|---|---|
| max 36.5em (584px) | phone |
| max 46em (736px) | large phone |
| max 58em (928px) | tablet |
| max 70em (1120px) | small desktop |
| max 479 / 767px, min 768px | px phone/tablet seam |
| max 991px | tablet upper |
| min 1280 / 1440px | wide desktop |

**2 container queries.** No dark-scheme blocks (`darkSchemeBlocks:0`), no
reduced-motion block.

## 11. Agent Prompt Guide

- Canvas `#ffffff` · Surfaces `#fafafa` / `#f8f8f8` / warm `#f6f5f1` · Ink `#202228` · Border **cool** `1px #ebeff7` · Accent `#ff891c` · Gradient family coral `#f06351` → apricot `#ffb74d`
- Font: **DM Sans** (open, real face) · Display 56/64.96 **600** -0.56px · Body 16 400/500 · Radius: **10px** + pill family (30px buttons) · Control height: 44px
- Focus: **none defined** — add `0 0 0 3px rgba(255,137,28,.4)` · Hover: `#ff9839` + `rgba(240,99,81,.28) 0 12px 1.5rem` coral lift · Motion: 0.2s ease + GSAP

<sunsama_design_language>
Calm, warm and deliberately plain — a daily-planner brand that reads like early
morning light. The canvas stays PLAIN WHITE #ffffff (with #fafafa, #f8f8f8 and a
warm #f6f5f1 band) and all the warmth is delivered by gradient washes rather than
by tinting the background. Ink is #202228 stepping through rgba(32,34,40,.7/.6/.5).
ONE family does everything — DM Sans, an open geometric sans, with NO serif and no
mono anywhere: display at 56/64.96 weight 600 and -0.56px tracking, body and nav
at 15-16px in 400-500 — so the personality comes from short declarative
sentence-case lines, not from type contrast. One orange #ff891c pill at 30px
radius and 44px tall is the only saturated control, and its hover is the detail to
copy: it brightens to #ff9839 AND lifts on a CORAL-TINTED shadow
rgba(240,99,81,.28) 0 12px 1.5rem, keeping the glow inside the warm palette
instead of going grey. Atmosphere is a four-gradient warm family with fractional
angles — linear-gradient(16deg, #f06351, #ffb74d), 104.24deg #f59549 to #f06351,
114.23deg #ff891c to #f06351, and a radial circle closest-corner at 65% 36% from
#ffbaba to #e94c4c. Note the deliberate tension: every fill is warm while the
hairline border is a COOL blue-grey #ebeff7. Radii run 10px dominant with a pill
family above (20/24/30/40/48/50px), resting shadows are cool and low-contrast, and
CSS motion is a tiny 0.2s ease while GSAP drives the scroll work. Feels: calm,
warm, plain-spoken, unhurried. Avoid: adding a serif, tinting the canvas warm,
grey hover shadows, shipping without a focus ring (the site defines none).
</sunsama_design_language>