sunsama.com

DESIGN.md

Narrative design system document — paste directly into Claude Code, Cursor, or Bolt.

---
version: alpha
name: sunsama.com
description: "Light product system built on #ffffff with #ff891c as the primary CTA accent. Type anchored in DM Sans at 56px / weight 600. Extracted automatically from https://sunsama.com/ — rendered styles via getComputedStyle() + CSS custom properties (token-only values may not be painted)."
narrative: |
  sunsama.com is built on a pure-white canvas (rgb(255, 255, 255)).
  The system uses rgb(255, 137, 28) as the high-saturation accent for primary actions.
  Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside DM Sans as the primary typeface.
  A restrained elevation system (3 distinct shadows) — shadows reserved for the few elements that must lift off the page.
  Motion is a first-class concern — 10 keyframe animations plus transition-driven interactions.

colors:
  background: "#ffffff"
  surface-1: "#e6e6e6"
  surface-2: "#f6f5f1"
  ink: "#202228"
  ink-subtle: "#202228"
  primary: "#ff891c"
  on-primary: "#111111"
  primary-hover: "#4672ff"
  hairline: "#303030"

typography:
  display-xl:
    fontFamily: "DM Sans, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 51.2px
    fontWeight: 600
    lineHeight: 1.16
    letterSpacing: -0.512px
  display-md:
    fontFamily: "Open Sans, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 2.17
    letterSpacing: 0
  body:
    fontFamily: "Open Sans, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  caption:
    fontFamily: "Open Sans, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 17px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0
  button:
    fontFamily: "Open Sans, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  mono:
    fontFamily: "DM Sans, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0

rounded:
  none: 0px
  xs: 4px
  sm: 9px
  md: 14px
  lg: 20px
  xl: 30px
  pill: 999px

spacing:
  xxs: 2px
  xs: 6px
  sm: 8px
  md: 12px
  lg: 24px
  xl: 32px
  xxl: 60px

components:
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink-subtle}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 1px 6px
  button-pill:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.ink-subtle}"
    typography: "{typography.caption}"
    rounded: "{rounded.xl}"
    padding: 10px 22px
  button-pill-2:
    backgroundColor: "{colors.surface-2}"
    textColor: "{colors.background}"
    typography: "{typography.display-xl}"
    rounded: "{rounded.lg}"
    padding: 6px 12px
  input-text-input:
    backgroundColor: "transparent"
    textColor: "#333333"
    typography: "{typography.mono}"
    rounded: "{rounded.lg}"
    padding: 8px 12px
  navigation-main-nav:
    backgroundColor: "transparent"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 20px 95.0312px
  testimonial-quote-card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-subtle}"
    typography: "{typography.caption}"
    rounded: "{rounded.md}"
    padding: 20px

extracted_at: "2026-06-14T13:17:22.079Z"
completeness: 74
scoreVersion: "v2"

---

# Design System — sunsama.com
> Extracted automatically by Prism from https://www.sunsama.com/
> Date: 2026-06-14
> Viewport: Desktop 1440x900 + Mobile 390x844
> Values are extracted, not hand-written: rendered styles via getComputedStyle() + colors declared in CSS custom properties (token-only values are marked `(token)` and may not be painted).


## 0. Design DNA

**Density**: moderate  |  **Motion**: expressive  |  **Weight**: heavy  |  **Aesthetic**: soft-rounded

| Dimension | Value | Signal |
|---|---|---|
| Canvas | neutral | `#ffffff` |
| Type posture | sans-led (DM Sans) | "Make every day count." |
| Color assertion | dual-accent | #ff891c |
| Whitespace | moderate | section rhythm 44px |
| Interaction | expressive | 10 keyframes, 2 transitions |
| Radius language | soft-pill | from token scale |

**Prism fingerprint**: `neutral-canvas · sans-display · dual-accent · soft-pill · expressive-motion`

> **🤖 TL;DR for AI agents** (read this first — saves you scanning the full doc):
>
> - **Canvas**: `rgb(255, 255, 255)` is the page background. Every component composits against this.
> - **Accent**: `rgb(255, 137, 28)` for primary CTAs ONLY. Never decorative.
> - **Body type**: 16px (token: `typography.body`). Default for ALL text not in a heading role.
> - **Section rhythm**: 44px between major bands. Card padding: 24px.
> - **Default radius**: 9px on buttons/inputs. Pills (`9999px`) only for icon-buttons or status chips.
>
> **Before generating UI**: import this DESIGN.md, scan §2 (Color Palette) + §4 (Components) + §10 (Agent Guide). Skip §11–12 unless extending.

## 1. Visual Theme & Atmosphere

**Signature:** a radial gradient glow in the hero — colours: #f4f4f4. This is the brand's most recognizable visual — reproduce it, don't replace it with a generic card or flat panel.

sunsama.com uses a pure-white canvas (`#ffffff`), letting typography, color and imagery carry the visual weight. 

Typography is anchored in **DM Sans**. Headlines use weight 600 for confident, assertive presence — the brand wants to be heard. Negative letter-spacing at display sizes (-0.512px at 51.2px) compresses headlines into engineered blocks, dense and precise. 

Body text reads in Near-Black (`#202228`) — softened from pure black, a small but deliberate detail that lowers reading friction. **#ff891c** (`#ff891c`) is the single high-saturation color in the system — it earns its presence only on interactive elements, making CTAs and links the unmistakable focal points against the otherwise neutral palette. Elevation comes from a small, deliberate set of shadows (3 distinct), each a multi-layer stack — several blurred layers at varying offsets — used sparingly rather than across the whole UI. 
Border radius varies from pill-shaped (fully rounded) to moderately rounded elements, creating visual rhythm. 

**Key Characteristics:**
- Background: Pure White (`#ffffff`)
- Primary typeface: Avenir
- Primary text: Near-Black (`#202228`)
- Accent: #ff891c (`#ff891c`)
- Display: 51.2px weight 600, letter-spacing -0.512px
- Shadow system: 3 distinct elevation levels
- Custom fonts loaded: Avenir, DM Sans, Inconsolata, Inter, Outfit

## 2. Color Palette & Roles

### Background & Surface
- **Pure White** (`#ffffff`): Page background (primary)
- **Bg Light Grey New** (`#fafafa`): Surface / elevated background (CSS var)
- **Bg Secondary New** (`#f6f5f1`): Surface / elevated background (CSS var)
- **Whitesmoke** (`#e1e3e6`): Surface / elevated background
- **Whitesmoke** (`#e6e6e6`): Surface / elevated background

### Text & Content
- **Near-Black** (`#202228`): Primary body text
- **Pure Black** (`#000000`): Secondary text
- **Charcoal** (`#303030`): Secondary text
- **Charcoal** (`#333333`): Secondary text
- **Translucent #721f18 (10%)** (`rgba(114, 31, 24, 0.1)`): Secondary text

### Accent & Interactive
- **Ring Blue** (`#4672ff`): Interactive / accent
- **#ff891c** (`#ff891c`): Interactive / accent
- **Tangerine** (`#f59549`): Interactive / accent
- **Warm Terracotta** (`#f06351`): Interactive / accent
- **Cornflower Blue** (`#519bf0`): Interactive / accent
- **#4ddb59** (`#4ddb59`): Interactive / accent
- **Soft Pink** (`#fed5ff`): Interactive / accent

### Border & Divider
- **Border 2 New** (`rgba(238, 236, 230, 0.8901960784313725)`): Border (CSS var)
- **Border New** (`#f2f2f2`): Border (CSS var)
- **Border Dark** (`#e5e4e0`): Border (CSS var)
- **Transparent** (`transparent`): Borders / dividers
- **Whitesmoke** (`#dddddd`): Borders / dividers
- **Light Gray** (`#f2e7e6`): Borders / dividers

### Full Extracted Palette
**40 colors rendered on the page** + **6** more declared in design tokens (CSS custom properties — not necessarily painted). (23 categorized above + 23 additional below.)
Rendered values are read via `getComputedStyle()`; token values come from CSS variable declarations. Third-party logo colors are filtered out.

- `#4c4f56` — Charcoal
- `#ebeff7` — Light Gray
- `#fff7f1` — Off-Cream
- `#413f39` — Charcoal
- `#111111` — Near-Black
- `#dfdfdf` — Whitesmoke
- `#e8f9ff` — Ghost White
- `#ecfff2` — Off-Cream
- `#f8f8f8` — Off-White
- `#f7f7ff` — Off-White
- `#e3e8f3` — Light Gray
- `rgba(135, 93, 29, 0.1)` — Translucent #875d1d (10%)
- `rgba(55, 143, 233, 0.2)` — Translucent Ring Blue (20%)
- `rgba(170, 170, 170, 0.2)` — Translucent Cool Gray (20%)
- `#f4f4f4` — Off-White
- `#787878` — Slate Grey
- `#a7a7a7` — Grey
- `#cbcaca` — Light Grey
- `#ffdede` — Soft Pink
- `#2da8ff` — Sky Bright *(token)*
- `#2c3034` — Charcoal *(token)*
- `#e9e9ea` — Whitesmoke *(token)*
- `#ffe8e4` — Warm Cream *(token)*

### CSS Custom Properties (Design Tokens)

- `--bg-light-grey-new`: `#fafafa`
- `--gradient-bg-grey`: `#f4f4f4`
- `--bg-secondary-new`: `#f6f5f1`
- `--card-bg-white-50-new`: `#ffffff80`

## 3. Typography Rules

### Font Families
- **Primary**: `DM Sans`
- **Secondary**: `webflow-icons`
- **Font 3**: `Avenir`
- **Font 4**: `Inconsolata`
- **Font 5**: `Inter`

### Custom Fonts Loaded
- **webflow-icons** weight 400 (normal)
- **Avenir** weight 300 (normal)
- **Avenir** weight 400 (normal)
- **Avenir** weight 500 (normal)
- **Avenir** weight 600 (normal)
- **DM Sans** weight 300 (normal)
- **DM Sans** weight 400 (normal)
- **DM Sans** weight 500 (normal)
- **DM Sans** weight 600 (normal)
- **DM Sans** weight 700 (normal)
- **Inconsolata** weight 400 (normal)
- **Inconsolata** weight 700 (normal)
- **Inter** weight 300 (normal)
- **Inter** weight 400 (normal)
- **Inter** weight 500 (normal)
- **Inter** weight 600 (normal)
- **Inter** weight 700 (normal)
- **Outfit** weight 300 (normal)
- **Outfit** weight 400 (normal)
- **Outfit** weight 500 (normal)
- **Outfit** weight 600 (normal)
- **Outfit** weight 700 (normal)

### Typography Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | DM Sans | 51.2px | 600 | 1.16 | -0.512px | Main headline (div) |
| Caption / Badge | Open Sans | 17px | 700 | 1.5 | normal | small text (17px) |
| Card Title | DM Sans | 16px | 400 | 1.5 | normal | Card headings |
| Caption / Badge | DM Sans | 15px | 400 | 1.5 | normal | small text (15px) |
| Input | DM Sans | 14px | 400 | 1.43 | normal | Form input (14px) |
| Sub-heading | Open Sans | 12px | 700 | 2.17 | normal | Section titles (h2) |
| Button Small | Open Sans | 12px | 400 | 1.5 | normal | Button label (12px) |

### Full Font Size Scale

Sizes detected in the design (descending): `56px`, `51.20px`, `48px`, `44px`, `40px`, `27px`, `24px`, `20px`, `18px`, `17.60px`, `17px`, `16px`, `15px`, `14px`, `13px`, `12px`

> 10 size(s) detected outside the sampled hierarchy (56px, 48px, 44px, 40px, 27px, 24px, 20px, 18px, 17.6px, 13px). These appear on elements not in the sampled set — likely additional display sizes, marketing-section overrides, or third-party-widget styles.

## 4. Component Stylings

### Buttons

**Ghost**
- Background: `transparent`
- Text: `#202228` `{colors.ink-subtle}`
- Padding: 1px 6px
- Radius: 0px
- Font: 16px weight 400
- Use: Subtle action, toolbar, nav button

**Pill**
- Background: `#ff891c` `{colors.primary}`
- Text: `#202228` `{colors.ink-subtle}`
- Padding: 10px 22px
- Radius: 30px
- Font: 16px weight 400
- Use: Status pills, tags, chips

**Pill**
- Background: `#f6f5f1` `{colors.surface-2}`
- Text: `#ffffff` `{colors.background}`
- Padding: 6px 12px
- Radius: 20px
- Border: 1px solid rgb(229, 228, 224)
- Font: 40px weight 400
- Use: Status pills, tags, chips

**Light / Invert**
- Background: `#ffffff` `{colors.background}`
- Text: `#202228` `{colors.ink-subtle}`
- Padding: 8px
- Radius: 10px
- Border: 1px solid rgb(235, 239, 247)
- Shadow: `rgba(61, 71, 83, 0.05) 0px 1px 0px 0px, rgba(61, 71, 83, 0.08) 0px 2px 4px 0px`
- Font: 16px weight 400
- Use: Bright CTA on dark sections

### Inputs & Forms

**Text Input**
- Background: `transparent`
- Text: `#333333`
- Padding: 8px 12px
- Radius: 20px
- Border: 0px none rgb(0, 0, 0)
- Font: 14px weight 400
- Use: Text fields, search inputs
- Focus: border: `0px none rgb(56, 152, 236)`, borderColor: `rgb(56, 152, 236)`, outline: `rgb(51, 51, 51) none 0px`

### Navigation

**Main Nav**
- Background: `transparent`
- Padding: 20px 95.0312px
- Radius: none
- Font: 16px weight 400
- Use: Fixed/sticky flex nav — N/A items

### Testimonials

**Quote Card**
- Background: `#ffffff` `{colors.background}`
- Text: `#202228` `{colors.ink-subtle}`
- Padding: 20px
- Radius: 14px 14px 14px 0px
- Border: 1px solid rgb(235, 239, 247)
- Shadow: `rgba(61, 71, 83, 0.05) 0px 1px 0px 0px, rgba(61, 71, 83, 0.08) 0px 2px 4px 0px`
- Font: 16px weight 400
- Use: Customer quote with avatar + company attribution


## 4b. Component Behaviors (State Matrix)

### Interaction State Narrative

- **Input**:
  - **focus:** border changes

*State transitions extracted via Playwright simulation — exact values in the YAML matrix below.*

```yaml
component-behaviors:
  button:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(32, 34, 40)"
  input:
    default:
      bg: "rgba(255, 255, 255, 0)"
      fg: "rgb(51, 51, 51)"
    focus:
      bg: "transparent"
      fg: "inherit"
  link:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(51, 51, 51)"
  card:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(32, 34, 40)"
  navLink:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(32, 34, 40)"
  badge:
    default:
      bg: "rgb(246, 245, 241)"
      fg: "rgb(32, 34, 40)"
```

**Agent usage**: Validate generated components against this matrix. If your output's `:hover` state changes properties not listed here, you are off-brand.


## 4c. Component Vocabulary (Closed System)

*This brand uses ONLY the following component vocabulary. Introducing new variants without justification breaks the system's tonal coherence.*

### Buttons
- **3 shape(s)** in this system: `Ghost`, `Pill`, `Light / Invert`
- **DO NOT introduce new buttons variants** without justification

### Inputs & Forms
- **1 shape(s)** in this system: `Text Input`
- **DO NOT introduce new inputs & forms variants** without justification

### Navigation
- **1 shape(s)** in this system: `Main Nav`
- **DO NOT introduce new navigation variants** without justification

### Testimonials
- **1 shape(s)** in this system: `Quote Card`
- **DO NOT introduce new testimonials variants** without justification

## 5. Layout Principles

### Layout Type
**hero + sections**

### Grid
Single column, centered content

### Max Width
1200px

### Spacing System
Compact spacing — information density prioritized

| Token | Value |
|-------|-------|
| xxs | 2px |
| xs | 6px |
| sm | 8px |
| md | 12px |
| base | 16px |
| lg | 24px |
| xl | 32px |
| 2xl | 44px |
| 3xl | 60px |

### Border Radius Scale
| Name | Value | Use |
|------|-------|-----|
| None | 0px | No rounding |
| Xs | 4px | Tiny corners (badges, micro elements) |
| Sm | 9px | Buttons, inputs, small elements |
| Md | 14px | Cards, containers |
| Lg | 20px | Large rounded elements, pill segments |
| Xl | 30px | Category strips, featured containers |
| Full | 999px | Pills, avatars, circular elements |

### Shape Language

| Component | Border Radius |
|-----------|---------------|
| Buttons | `0px` |
| Inputs & Forms | `20px` |
| Navigation | `none` |
| Testimonials | `14px 14px 14px 0px` |
| Page Body | `0px` |
| Primary Input | `20px` |

**Shape Personality**: Generously Rounded — Soft, friendly corners (8px+). Approachable, consumer-facing feel.

**Full Radius Spectrum**: 0px, 3px, 4px, 5px, 9px, 10px, 11px, 14px (from `allBorderRadii` scan)


## 5b. Spacing Rhythm Names

**Measured section padding**: bands use ~96px internal vertical padding (up to 288px) — **very airy / premium**. (Distinct from the gap *between* sections above.) Reproduce this generous vertical breathing room; cramped spacing is the #1 tell of a cheap clone.

*Named spacing tokens with explicit use cases. Use these names in YOUR code instead of raw pixels for consistency.*

| Name | Value | Use case |
|------|-------|----------|
| **hero** | `60px` | Top/bottom of full-bleed hero sections |
| **section** | `32px` | Between major bands (color change, content shift) |
| **subsection** | `24px` | Within a section, between content groups |
| **card** | `12px` | Card padding, list-item spacing |
| **compact** | `8px` | Form fields, tight clusters, badge padding |
| **micro** | `6px` | Icon-text gap, tag inner padding |

**Agent rule**: NEVER hardcode raw pixel values for spacing in generated UI. Always reference these named tokens (`spacing-rhythm.section`, etc.).

## 5c. Widget & Structure Library

Structural patterns extracted from the page DOM — these are the **blueprints** an agent should follow to reproduce the page architecture (not just CSS values).

**6/8 structural patterns detected.**

### Hero Pattern

- **Composition:** left-aligned — 
- **Viewport coverage:** full-viewport hero (≥70% screen height)
- **Heading:** "Preferences" — 12px left-aligned
- **Subheading:** "We use different types of cookies to optimize your experience on our website. Click on the categories below to learn more about their purposes. You ma"
- **CTAs:** none detected in hero (unusual — agent should verify)
- **Clone instruction:** Reproduce the **left-aligned** layout. Use the heading font-size token at the documented size. Pair the centered text with the hero’s decorative visual (gradient / SVG / hero image — see §9b), not bare text.

### Navigation Pattern

- **Position:** static (scrolls with page)
- **Layout:** logo-left-links-left — Logo and links both on the left (CTAs typically right)
- **Height:** 84px
- **Logo:** ✓ present
- **Nav links:** 7 primary items
- **CTAs in nav:** 1
- **Clone instruction:** Build a static logo left links left navigation. Reserve 1 slot for primary CTA.

### Card Grid Pattern

- **Card count:** 4 cards detected
- **Columns (desktop):** 1-up grid
- **Card dimensions:** 1248×328px (aspect 3.8:1)
- **Gap:** 40px between cards
- **Content:** ✓ image
- **Image position:** top
- **Clone instruction:** Build a 1-column grid (desktop) with cards at ~3.8:1 aspect ratio. Each card has an image at the top.

### Pricing Table Pattern

- **Tier count:** 2 pricing tiers
- **Layout:** vertical stacked
- **Columns (desktop):** 2-up
- **Clone instruction:** Build a 2-column vertical-stack pricing comparison.

### Testimonial Pattern

- **Count:** 6 testimonial blocks
- **Layout:** grid
- **Avg quote length:** 115 chars (medium quote)
- **Includes:** ✓ avatars | ✗ no logos | ✗ no ratings
- **Clone instruction:** Build a grid of 6 testimonials. Each includes an avatar.  

### Footer Pattern

- **Columns:** 2
- **Links:** 7 total
- **Height:** 94px
- **Includes:** ✗ no newsletter | ✓ social icons |  ✓ copyright
- **Clone instruction:** Build a 2-column footer with ~4 links per column, social media links, and a copyright line.

## 6. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | Page background, content blocks |
| Layered (Level 1) | <br>`rgba(0, 0, 0, 0.3) 0px 0px 8px 0px` | Cards, elevated surfaces |
| Layered (Level 2) | <br>`rgba(61, 71, 83, 0.05) 0px 1px 0px 0px`,<br>`rgba(61, 71, 83, 0.08) 0px 2px 4px 0px` | Cards, elevated surfaces |
| Layered (Level 3) | <br>`rgba(44, 48, 52, 0.05) 0px 3px 10px 0px` | Cards, elevated surfaces |

**Shadow Philosophy**: Multi-layered shadow system creating natural, atmospheric depth. Each shadow level combines multiple layers for realistic elevation.

## 7. Motion & Interaction

### Duration Scale

| Value | Tier | Typical Use |
|-------|------|-------------|
| `200ms` | Normal | Panel open/close, navigation |

### Copy-Paste Transition Snippets

**Background**
```css
transition: background-color 0.2s;
```

### Keyframe Animation Catalog

| Animation Name | Type | Animated Props | Use Hint |
|----------------|------|----------------|----------|
| `spin` | Rotate / Spin | transform | Loading indicator |
| `go2264125279` | Fade + Move | transform, opacity | UI transition |
| `go3020080000` | Fade + Move | transform, opacity | UI transition |
| `go463499852` | Fade + Move | transform, opacity | UI transition |
| `go1268368563` | Rotate / Spin | transform | UI transition |
| `go1310225428` | Fade + Move | transform, opacity | UI transition |
| `go651618207` | Fade | height, width, opacity | UI transition |
| `go901347462` | Fade + Move | transform, opacity | UI transition |
| `termly-styles-module-rotate-f68cf1` | Rotate / Spin | transform | Loading indicator |
| `termly-styles-module-dash-e05a10` | Custom | stroke-dasharray, stroke-dashoffset | UI transition |

### Motion Fingerprint

- **Speed Character**: Balanced Pacing (median duration: `200ms`)
- **Dominant Easing**: standard CSS easings
- **Animation Library**: 10 unique animations (10 total including variants)

> This design moves with balanced pacing timing using standard CSS easings, creating a UI that feels natural and fluid.

## 8. Do's and Don'ts

### Do
- Use Near-Black (`#202228`) for text — not pure black, it's warmer and more readable
- Use DM Sans as the primary typeface — it defines the brand personality
- Use negative letter-spacing (-0.512px) at display sizes for compressed, editorial headlines
- Use the extracted shadow patterns for elevation — they are tuned to match the brand palette
- Use full-pill radius (9999px) only for specific elements (avatars, pills, toggles)
- Use #ff891c (`#ff891c`) as the primary accent — it's the brand's signature interactive color
- Use 30px border-radius on primary buttons — the brand uses generously-rounded CTAs
- Make the hero full-viewport (≥70% screen height) — this design uses an immersive hero, not a tall navbar
- Each card includes a top image — imagery is part of the card identity, not optional
- Show person avatars with testimonials — social proof is human-centric here
- Lay out testimonials in a grid (6+ items) — quantity signals scale and trust

### Don't
- Don't use pure black (`#000000`) for text — the near-black adds warmth
- Don't substitute with generic sans-serif or serif — the custom font carries the brand
- Don't increase letter-spacing on headings — the type is designed to run tight at scale
- Don't invent new shadow values — use only the extracted shadow levels
- Don't apply pill radius on rectangular buttons or cards — it's reserved for specific interactive elements
- Don't introduce additional saturated accent colors — the palette is intentionally controlled
- Don't use sharp-cornered or pill buttons — 30px is the CTA border-radius standard
- Don't make the nav sticky — this design lets it scroll away to maximize content focus
- Don't over-build the footer — this design keeps it minimal (2 cols, 7 links)


## 7b. Enforceable Brand Rules

*Structured Do/Don't with reasoning and validation tests. Agents can programmatically verify generated UI.*

```yaml
rules:
  - id: brand-canvas-001
    type: do
    rule: "Always use the page background `rgb(255, 255, 255)` as the base canvas"
    why: "Every component is designed to composit against this exact tone"
    test: "document.body.style.backgroundColor === 'rgb(255, 255, 255)'"
  - id: brand-accent-001
    type: do
    rule: "Reserve `rgb(255, 137, 28)` for primary CTAs and brand-mark signals only"
    why: "Single chromatic assertion device — overuse dilutes meaning"
    test: "querySelectorAll('[style*=\"rgb(255, 137, 28)\"]').length <= 3 per fold"
```

## 9. Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | 479px | Single column, compact spacing |
| Mobile Large | 736px | Expanded mobile layout |
| Mobile Large | 767px | Expanded mobile layout |
| Desktop | 1120px | Full feature layout |
| Desktop | 1280px | Full feature layout |
| Large Desktop | 1440px | Maximum content width |

### Token Diff — Desktop vs Mobile

| Element | Property | Desktop | Mobile |
|---------|----------|---------|--------|
| heading | font-size | `51.2px` | `40px` |
| heading | font-weight | `600` | `400` |
| heading | line-height | `59.392px` | `60px` |
| heading | letter-spacing | `-0.512px` | `normal` |
| nav | display | `flex` | `none` |
| nav | flex-direction | `row` | `column` |
| nav | height | `30.5px` | `auto` |
| hero | height | `155.375px` | `137.156px` |
| card | width | `592px` | `327.312px` |

### Collapsing Strategy
- Headlines: 51.2px → 40px on mobile
- Navigation: flex → none on mobile
- Cards: multi-column → stacked vertical on mobile
- Footer: multi-column → stacked single column on mobile

### Touch Targets
- Buttons: 1px 6px padding
- Navigation: adequate spacing between items
- Interactive elements: minimum 44px touch target recommended

### Collapsing Narrative

How the structural patterns adapt from desktop to mobile (extracted from both viewport extractions):

- **Navigation collapses to hamburger** — 7 links visible on desktop, 0 on mobile (the rest hide behind a menu toggle).


## 7c. Visual Effects & Dynamic Behavior

*The live/dynamic layer beyond static CSS — reproduce these, not flat substitutes. This is often what separates a faithful clone from a wireframe.*

- **Glassmorphism** — 1 frosted/blur layer(s) (e.g. `blur(1.33991px)`).
- **Clip-path shapes** — 2 non-rectangular cut(s).

> **Motion fingerprint**: glassmorphism (1 layers), non-rectangular shapes (2)


## 7d. Motion Choreography (measured)

*Real timing extracted from `getComputedStyle` at load — not guessed. Match these curves and durations to reproduce the brand's motion feel; flat clones miss this entirely.*

**Transition profiles** — the interactive easing fingerprint (hover/focus/state changes):

| Property | Duration | Easing | Delay | Count |
|---|---|---|---|---|
| background-color | 0.2s | `ease` | — | 10× |
| all | 0.2s | `ease` | — | 2× |

> **Motion coverage** (measured on 2213 sampled elements; scroll-reveal is heuristic): 2 transition profiles.

## 9b. Visual Tone & Photography

**Tone:** Illustration-driven

The site relies primarily on illustrations, vector art, and decorative SVG elements rather than photography. Use commissioned illustrations, icon sets, or generated graphics for clones — stock photos will feel off-brand.

**Canonical Brand Image (OG):**
- https://cdn.prod.website-files.com/62d1ff8aa73d90740883d447/632d75c435342c54efe7c40d_OG%20IMage.jpg
  *This is the image shown when the site is shared on social media — represents the brand visual essence.*

**Hero Image (above-fold dominant visual):**
- Aspect: 1.24:1 (landscape)
- Rendered size: 1162×936px
- *Use this aspect ratio + composition for your clone's hero — mimicking the proportion preserves the visual hierarchy.*

**Aspect Ratio Distribution:**
- Landscape (1.15–2.3): 16 (94%)
- Portrait (<0.87): 0 (0%)
- Square (0.87–1.15): 1 (6%)

**Media Format Mix:**
- PNG: 2 (logos, transparent UI elements, mockups)
- SVG: 5 (icons, illustrations, decorative geometry)

**Average rendered image size:** 431×288px
**Above-fold image count:** 2 / 17

**Decorative Patterns Detected:**
- 6 multi-stop linear gradients (mesh-like, 3+ color stops) — the brand leans on rich color transitions for visual depth
- 3 radial gradients — circular color blooms used for spotlight/glow effects
- 1 large decorative SVG shape (≥200×200px, non-icon) — likely blob/illustration accents
- 1 background pattern (non-photo url() backgrounds) — textures/illustrations as backdrops

**Clone instruction for decorative work:** This is a gradient-rich design — invest in multi-stop CSS gradients (3+ color stops), not solid backgrounds.

**Imagery Guidance for clones:**
- Use vector illustration as the primary visual language — photos will read as off-brand.
- Maintain consistent illustration style (line weight, color palette) across the site.

## 10. Agent Prompt Guide

### Quick Reference
- Background: Pure White (`#ffffff`)
- Primary text: Near-Black (`#202228`)
- Accent: #ff891c (`#ff891c`)
- Border: Charcoal (`#303030`)
- Font: DM Sans
- Body: 16px weight 400

### Example Component Prompts
- "Create a hero section on Pure White background (#ffffff). Headline at 51.2px DM Sans weight 600, line-height 1.16, letter-spacing -0.512px, color #202228."
- "Create the primary CTA button: `#ff891c` background, `#202228` text, 30px border-radius, 10px 22px padding, 700 weight, DM Sans font."
- "Design a card on `transparent` background. Border: none. Radius: 0px. Shadow: none. Padding: 0px."
- "Build navigation: relative on `#ffffff`. DM Sans 16px weight 400 for links."

### Iteration Guide
1. **Canvas**: Set the light canvas to Pure White (`#ffffff`) — every component is composited against this exact base.
2. **Typography**: All type in DM Sans, weight range 400–700. Never exceed 700 — heavier weights break the brand's tonal restraint.
3. **Accent**: #ff891c (`#ff891c`) — one accent, applied consistently to CTAs, active states, and links. Never introduce a second saturated color.
4. **Shape**: CTAs at `0px`, cards at `0px`. Apply border-radius from the extracted scale only — don't invent intermediate values.
5. **Spacing**: Use the `--ca-space-*` token scale (6px–32px). All padding, margin, and gap values are multiples from this scale — no magic numbers.
6. **Tokens**: Import from §11 CSS Export (`--ca-*` vars). Never hardcode hex values — always reference a token so theming remains consistent.

## 11. CSS Design Tokens Raw Export

*Copy-paste ready `:root {}` block — all values extracted directly from the live site.*

```css
/* Colors */
:root {
  --ca-background: #ffffff;
  --ca-surface-1: #e6e6e6;
  --ca-surface-2: #f6f5f1;
  --ca-ink-subtle: #202228;
  --ca-primary: #ff891c;
  --ca-on-primary: #111111;
  --ca-primary-hover: #4672ff;
  --ca-hairline: #303030;
}

/* Typography */
:root {
  --ca-font-primary: "DM Sans", system-ui, sans-serif;
  --ca-text-display: 51.2px;
  --ca-text-body: 12px;
  --ca-text-caption: 17px;
  --ca-text-button: 12px;
  --ca-text-mono: 14px;
}

/* Spacing & Radius */
:root {
  --ca-space-xxs: 2px;
  --ca-space-xs: 6px;
  --ca-space-sm: 8px;
  --ca-space-md: 12px;
  --ca-space-base: 16px;
  --ca-space-lg: 24px;
  --ca-space-xl: 32px;
  --ca-space-2xl: 44px;
  --ca-space-3xl: 60px;
  --ca-radius-none: 0px;
  --ca-radius-xs: 4px;
  --ca-radius-sm: 9px;
  --ca-radius-md: 14px;
  --ca-radius-lg: 20px;
  --ca-radius-xl: 30px;
  --ca-radius-full: 999px;
}
```


## 13. Page Structure Skeleton

*The actual layout the source site uses. Reproduce these sections in order to match the site structure.*

```yaml
page-skeleton:
  - section: unknown
    tag: div
    classes: ["newfixedbg"]
    height: 900px
    width: full-bleed
    layout: block
    children: 1
  - section: content-section
    tag: div
    classes: ["pagewrapper"]
    height: 12000px
    width: full-bleed
    layout: flex-column justify=flex-start
    children: 10
    vertical-padding: ~160px (airy)
    contains: chart/canvas (reproduce as live data-viz, not a flat image)
  - section: header
    tag: div
    classes: ["newnav", "w-nav"]
    height: 84px
    width: full-bleed
    layout: flex-row justify=center
    children: 2
    bg: "rgba(221, 221, 221, 0)"
    padding: "20px 95.0312px"
  - section: content-section
    tag: div
    classes: ["hero"]
    height: 805px
    width: full-bleed
    layout: flex-column justify=flex-start
    children: 2
    vertical-padding: ~40px
    padding: "40px 44px 40px 96px"
  - section: content-section
    tag: div
    classes: ["hero-objects"]
    height: 576px
    width: 1300px
    layout: flex-row justify=space-between
    children: 2
  - section: unknown
    tag: div
    classes: ["herovisual"]
    height: 576px
    width: 790px
    layout: block
    children: 1
    vertical-padding: ~288px (airy)
  - section: content-section
    tag: div
    classes: ["content-container"]
    height: 347px
    width: 478px
    layout: flex-column justify=flex-start
    children: 2
  - section: content-section
    tag: div
    classes: ["herocopy"]
    height: 423px
    width: 478px
    layout: flex-column justify=flex-start
    children: 2
  - section: content-section
    tag: div
    classes: ["headline-container"]
    height: 290px
    width: 478px
    layout: flex-column justify=flex-start
    children: 2
  - section: content-section
    tag: div
    classes: ["compare-table"]
    height: 977px
    width: full-bleed
    layout: flex-row justify=center
    children: 1
    vertical-padding: ~160px (airy)
    padding: "160px 96px"
  - section: content-section
    tag: div
    classes: ["comparecontainer"]
    height: 657px
    width: 1248px
    layout: flex-row justify=space-between
    children: 2
  - section: unknown
    tag: div
    classes: ["container-6"]
    height: 97px
    width: 378px
    layout: flex-column justify=flex-start
    children: 1
  - section: unknown
    tag: div
    classes: ["listwrapper"]
    height: 136px
    width: 378px
    layout: flex-column justify=flex-start
    children: 3
  - section: unknown
    tag: div
    classes: ["listwrapper"]
    height: 136px
    width: 448px
    layout: flex-column justify=flex-start
    children: 3
  - section: unknown
    tag: div
    classes: ["content-container-2"]
    height: 210px
    width: 869px
    layout: flex-column justify=flex-start
    children: 2
  - section: content-section
    tag: div
    classes: ["animwrap"]
    height: 2103px
    width: 1248px
    layout: block
    children: 3
  - section: unknown
    tag: div
    classes: ["hero-section"]
    height: 155px
    width: 414px
    layout: flex-column justify=flex-start
    children: 2
  - section: unknown
    tag: div
    classes: ["hero-section"]
    height: 155px
    width: 414px
    layout: flex-column justify=flex-start
    children: 2
  - section: content-section
    tag: div
    classes: ["featurewrap"]
    height: 1049px
    width: 1248px
    layout: flex-row justify=normal
    children: 2
  - section: unknown
    tag: div
    classes: ["hero-section"]
    height: 179px
    width: 414px
    layout: flex-column justify=flex-start
    children: 2
  - section: content-section
    tag: div
    classes: ["integrations"]
    height: 1343px
    width: full-bleed
    layout: flex-column justify=flex-start
    children: 1
    bg: "rgb(255, 255, 255)"
    vertical-padding: ~80px (generous)
    padding: "80px 160px"
  - section: content-section
    tag: div
    classes: ["sectionwrapper"]
    height: 1152px
    width: 1120px
    layout: flex-column justify=flex-start
    children: 2
  - section: header
    tag: div
    classes: ["section-header"]
    height: 186px
    width: 720px
    layout: flex-column justify=flex-start
    children: 2
  - section: unknown
    tag: div
    classes: ["sectiontitlewraper"]
    height: 98px
    width: 720px
    layout: flex-column justify=flex-start
    children: 2
  - section: unknown
    tag: div
    classes: ["intcontentwrapper"]
    height: 181px
    width: 430px
    layout: flex-column justify=flex-start
    children: 2
    vertical-padding: ~40px
    padding: "40px"
```

**Agent rule**: rebuild sections in this order (sorted by vertical position). Match the layout primitive (grid N-col / flex direction / block).


## 14. Copy Library (Real Content from Source)

*Actual text content extracted from the live page. Use these strings verbatim when reproducing the site — they carry the brand voice.*

```yaml
copy:
  section-headings:
    - "Preferences"
  ctas:
    - "Cookie Policy"
    - "Details"
    - "Decline All"
    - "Start for Free"
    - "View integration"
    - "Read the review"
  navigation:
    - "Features"
    - "Integrations"
    - "Pricing"
    - "Love"
    - "About"
    - "Blog"
    - "Login"
    - "Start for Free"
    - "Asana"
    - "ClickUp"
```

**Agent rule**: reuse these exact strings when generating UI. Do NOT translate or rephrase — brand voice is preserved through the original wording.


## 15. Asset Inventory (Image Roles & Ratios)

*Image inventory classified by role and aspect ratio. When reproducing the site, allocate this number of assets per role.*

```yaml
assets:
  logo:
    count: 9
    avg-ratio: 3.81
    common-aspect: "~16:6 banner"
    sample-alts:
      - "Zapier logo displayed in lowercase"
      - "MiT logo displayed in gray"
  thumbnail:
    count: 20
    avg-ratio: 1.01
    common-aspect: "~1:1 square"
    sample-alts:
      - "Smiling man with short black hair, glasses, and a white shir"
      - "Portrait of a young woman with long red hair and a neutral e"
      - "Smiling young woman with curly hair wearing a white shirt an"
```

**Agent rule**: when generating placeholder images, match these counts and aspect ratios. Use neutral placeholder backgrounds for `product` (e.g. `#f5f5f5`), full-color photography hints for `hero` and `editorial`.


## 16. Component HTML Templates

*Suggested HTML markup for reproducing the key components — based on what was detected in the source DOM.*

### Button (primary action)
```html
<button class="btn btn-primary">
  Action
</button>
```
_Source pattern detected: padding `1px 6px` · radius `0px` · weight `400`_

### Generic Card
```html
<div class="card">
  <!-- content -->
</div>
```
_Source pattern detected: padding `0px` · radius `0px` · shadow `none`_

**Agent rule**: use these markup skeletons as the structural baseline. Apply tokens from §2-3 for visual styling.


## 17. Content Architecture & Resources (Links by Purpose)

*The page's links classified by purpose — the information architecture to reproduce. Categories, featured images, devices and projects are extracted from the rendered DOM, not guessed.*

**By purpose:** **nav** 6 · **cta** 3 · **auth** 1 · **pricing** 1 · **blog** 1 · **social** 5 · **footer** 20 · **other** 23

**Primary actions (conversion path):**
- Primary call-to-action — "Learn how to get started with Sunsama." (the conversion path) → `https://help.sunsama.com/docs/setting-up-your-sunsama`
- Account access — "Login" (login/signup) → `https://app.sunsama.com/login`
- Primary call-to-action — "Try for free" (the conversion path) → `https://www.sunsama.com/start/signup`
- Primary call-to-action — "Try it today" (the conversion path) → `https://www.sunsama.com/start/signup`

**Projects / case studies detected** (clustered by URL + featured image):

*Integrations* — medium confidence, 12 items:

| Title | Featured image | Link |
|---|---|---|
| Google Calendar logo | `65dda4c1a5593de7789732a4_calendar%20` (ar 1.03) | https://www.sunsama.com/integrations/google-calendar |
| Google Calendar logo | `65dda4c1a5593de7789732a4_calendar%20` (ar 1.03) | https://www.sunsama.com/integrations/outlook-calendar |
| Asana | `6878ec274a4721230e1ccbd1_Asana.svg` (ar 1) | https://www.sunsama.com/integrations/asana |
| Clickup | `6878ec274a4721230e1ccbd1_Asana.svg` (ar 1) | https://www.sunsama.com/integrations/clickup |
| Github | `6878ec274a4721230e1ccbd1_Asana.svg` (ar 1) | https://www.sunsama.com/integrations/github |
| Linear | `6878ec274a4721230e1ccbd1_Asana.svg` (ar 1) | https://www.sunsama.com/integrations/linear |
| Monday Com | `6878ec274a4721230e1ccbd1_Asana.svg` (ar 1) | https://www.sunsama.com/integrations/monday-com |
| Jira | `6878ec274a4721230e1ccbd1_Asana.svg` (ar 1) | https://www.sunsama.com/integrations/jira |

**Signals:** 34/60 links carry a featured image · device mockups detected: phone ×1 · dominant link roles: footer-link (26), content-card (14), logo-link (8).


---
## Coverage: 74% of dimensions extracted

> Coverage measures how much of the design we could read, **not** how pixel-faithful a clone is. For fidelity, see the SSIM/structure score.

| Category | Score | Max | Detail |
|----------|-------|-----|--------|
| Colors & Palette | 25 | 25 | 23 named colors |
| Typography | 18 | 20 | 7 roles defined |
| Components | 16 | 20 | 4 specs extracted |
| Motion & Interaction | 10 | 15 | Keyframes |
| CSS Custom Properties | 1 | 10 | 15 vars |
| Responsive Breakpoints | 5 | 5 | 6 breakpoints |
| Variable Fonts | 0 | 5 | None detected |

## 12. Known Gaps & Confidence

Explicit list of what this extraction could NOT capture. Agents should not invent values for these — either skip the feature or use the documented baseline + heuristic fallback.

*Auto-detected extraction limitations — understand before building:*

- **Licensed web fonts (webflow-icons, Avenir)** — detected but not downloaded. Substitute with your licensed copy or a close fallback (see Typography section for metrics).
- **Sparse component extraction** — fewer than 5 component types detected. Highly dynamic sections (modals, datepickers, carousels) require interaction to render and are not captured in a static pass.

| Category | What's missing | Fallback strategy |
|----------|----------------|-------------------|
| **Design tokens** | Only 15 CSS custom properties (low signal for semantic naming) | Color names are nearest-neighbor approximations; verify against brand guidelines if available |

### Per-section confidence

| Section | Confidence | Reason |
|---------|------------|--------|
| §1 Visual Theme | High | Body bg extracted via getComputedStyle() |
| §2 Colors | Medium | 15 CSS vars (semantic naming requires ≥20 for high) |
| §3 Typography | High | 7 typography roles inferred |
| §4 Components | Medium | 4 component variants captured |
| §7 Motion | High | Keyframes + transitions |
| §8 Do's/Don'ts | High | 20 rules generated; design-decisions.json has evidence per rule |
| §9 Responsive | High | 6 breakpoints detected |
| §9b Photography | High | 17 images, hero present |

## 11.1 CSS Implementation Guide (CSS Interception Engine v2.15+)

*Ready-to-use CSS from Prism's CSS Interception Engine — intercepted directly from the site's CSS files (bypasses CORS). Copy-paste into your `<style>` block.*

### Font Loading

4 font file(s) captured (148KB total). When running `prism add`, fonts are saved to `extractions/sunsama.com/fonts/` and embedded as base64 in the output HTML.

**@font-face declarations to use:**
```css
@font-face {
  font-family: 'webflow-icons';
  /* src: url('/fonts/webflow-icons.woff2') format('woff'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Avenir';
  /* src: url('/fonts/Avenir.woff2') format('truetype'); */
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Avenir';
  /* src: url('/fonts/Avenir.woff2') format('truetype'); */
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Avenir';
  /* src: url('/fonts/Avenir.woff2') format('truetype'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Avenir';
  /* src: url('/fonts/Avenir.woff2') format('truetype'); */
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Avenir';
  /* src: url('/fonts/Avenir.woff2') format('truetype'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Avenir';
  /* src: url('/fonts/Avenir.woff2') format('truetype'); */
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Avenir';
  /* src: url('/fonts/Avenir.woff2') format('truetype'); */
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Avenir';
  /* src: url('/fonts/Avenir.woff2') format('truetype'); */
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
```

### Keyframe Animations (Intercepted from CSS)

**1 @keyframes found** — these are the real animation definitions:

```
@keyframes spin { ... }
```

<details><summary>Full keyframes CSS (1 animations)</summary>

```css
@keyframes spin{0%{transform:rotate(0)}
```
</details>

### Brand Gradient Palette

**5 complex gradients captured** from the site's CSS. The first few are the most prominent visual decorations:

```css
/* Gradient 1 */
background: linear-gradient(45deg,#eef,#e7e5ff 10%,#eeeef5 23%,#f6f0ff 40%,#eeedff 61%,#ecf2ff 80%,#f5eafa);

/* Gradient 2 */
background: linear-gradient(315deg,#fffbee,#fff2ec 10%,snow 23%,#fbf8ff 40%,#faf5ff 61%,#fbecff 80%,#f6e2ff);

/* Gradient 3 */
background: radial-gradient(circle closest-corner at 65% 36%,#ffbaba,#e94c4c);

/* Gradient 4 */
background: radial-gradient(circle closest-corner at 75% -40%,var(--ss-orange);

/* Gradient 5 */
background: radial-gradient(circle closest-corner at 70% -10%,#ff891c33,#f0635133 60%);

```

### Hover State CSS (Intercepted)

**1 hover rule lines** captured from CSS files. Key interactive transitions from real CSS (not inferred):

```css
a:active,a:hover{outline:0}

.w-lightbox-control:hover{opacity:1}

.w-lightbox-inactive,.w-lightbox-inactive:hover{opacity:0}

.button:hover{background-color:#ff9839;box-shadow:0 12px 1.5rem #f0635147}

.button.max-width-full.secondary-grey-text:hover{border-color:var(--ss-orange);background-color:var(--ss-orange);color:#fff}

.button.max-width-full.secondary-grey-text.tablet:hover{box-shadow:none;color:#2c303499;background-color:#0000}

.button.outline:hover{border-color:var(--ss-orange);background-color:var(--ss-orange);color:#fff}
```

> **Note**: All values above are extracted from the live site's CSS files. The font files are saved locally by Prism and embedded in the output HTML. Use them as-is for maximum fidelity.

## 11.2 Measured Reality (CDP Engine)

Captured directly from Chrome's engine across **all 2292 rendered nodes** — not a sample. These are the values the page *actually paints*, weighted by how often they appear.

### Real Responsive Breakpoints
**7 breakpoints** read from the live `@media` rules (not guessed):
`479px` · `576px` · `767px` · `768px` · `991px` · `1280px` · `1440px`

### Measured Design Scale
**Type scale by usage** (× = paint count): `16px`×874 · `27px`×806 · `20px`×194 · `14px`×166 · `12px`×103 · `17px`×30 · `18px`×21 · `40px`×19

**Radius scale** (× = paint count): `10px`×42 · `3px`×16 · `40px`×11 · `14px`×11 · `30px`×10 · `48px`×10 · `50px`×7 · `24px`×6

**Weights** (× = paint count): `400`×1080 · `500`×1039 · `700`×88 · `600`×83

**Layout gaps** (× = paint count): `16px normal`×24 · `normal 8px`×22 · `20px`×13 · `12px normal`×12 · `normal 40px`×11 · `32px normal`×9 · `normal 20px`×8 · `normal 4px`×7

**Elevation (real shadows)**:
```css
rgba(61, 71, 83, 0.05) 0px 1px 0px 0px, rgba(61, 71, 83, 0.08) 0px 2px 4px 0px
rgba(0, 0, 0, 0.3) 0px 0px 8px 0px
rgba(44, 48, 52, 0.05) 0px 3px 10px 0px
```

### Provenance — measured styles on key elements
Read from the live CSSOM (includes runtime-injected CSS). This is *what actually styles the page*, by element:

```css
body { color:#333; background-color:#fff; font-family:Arial,sans-serif; font-size:14px }
body { color:var(--black); font-family:Avenir,sans-serif; font-size:1rem; font-weight:400 }
body { font-family:DM Sans,sans-serif }
h2 { font-size:32px }
h2 { font-family:Outfit,sans-serif; font-size:2.875rem; font-weight:500 }
h2 { font-size:26px; font-weight:bold; color:#303030 }
a { color:var(--black) }
a { color:#333 }
```

> Selectors normalised to their semantic element — source class names are often build-hashed (`.bgDIHX`) and not reusable. The declarations + CSS vars are the transferable part.

---
*Generated by Prism — automated Playwright extraction + design analysis.*
*Source: https://www.sunsama.com/ | 2026-06-14T13:17:22.098Z*
*Values extracted via getComputedStyle() (rendered) + CSS custom properties (tokens, marked `(token)`). Token-only values may not be painted — verify against the live site before shipping.*