Calm, warm and deliberately plain — a daily-planner brand whose palette reads like early morning light, which is a neat fit for a product about starting the day well. Notably the canvas stays PLAIN WHITE and all the warmth is delivered by gradient washes rather than by tinting the background, which is the opposite move to most warm brands. One family does everything: DM Sans, a geometric sans with no serif and no mono anywhere, at 56/64.96 weight 600 for display and 15-16px for body, so the personality comes from short declarative sentence-case lines rather than type contrast. Its atmosphere is a four-gradient warm family with oddly precise angles — 16deg coral to apricot, 104.24deg, 114.23deg, and a radial circle closest-corner from blush #ffbaba to red #e94c4c. The detail most worth stealing is the hover: the orange #ff891c pill brightens to #ff9839 and lifts on a CORAL-TINTED shadow, rgba(240,99,81,.28) 0 12px 1.5rem, so the glow stays inside the warm palette instead of going grey. Running underneath is a deliberate tension — resting shadows and the 1px hairline border are a COOL blue-grey #ebeff7 against uniformly warm fills, and the palette only shifts warm at the moment of interaction. Radii run 10px dominant with a pill family above, CSS motion is a tiny 0.2s ease, and GSAP handles the scroll work.
Browse Sunsama in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: sunsama.com (live DOM, computed styles), 2026-07-25. 0 stylesheets blocked. Webflow-built; §2 read from computed fills/text.Robotoand thetermly-*/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.
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.
| 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.
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 |
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.