slack.com

DESIGN.md

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

---
version: alpha
name: slack.com
description: "Light product system built on #ffffff with #611f69 as the primary CTA accent. Type anchored in Salesforce-Avant-Garde at 64px / weight 700. Extracted automatically from https://slack.com/ — rendered styles via getComputedStyle() + CSS custom properties (token-only values may not be painted)."
narrative: |
  slack.com is built on a pure-white canvas (rgb(255,255,255)).
  The system uses rgb(97, 31, 105) as the singular interactive color.
  Crisp CTAs (4px radius) reinforce a precise, technical aesthetic alongside Salesforce-Avant-Garde as the primary typeface.
  A layered elevation system (7 distinct shadows) building a clear front-to-back hierarchy.
  Motion is a first-class concern — 28 keyframe animations plus transition-driven interactions.

colors:
  background: "#ffffff"
  surface-1: "#e8f5fa"
  surface-2: "#ebeaeb"
  ink-subtle: "#1d1d1d"
  primary: "#611f69"
  on-primary: "#ffffff"
  primary-hover: "#1264a3"
  hairline: "#696969"

typography:
  display-xl:
    fontFamily: "Salesforce-Avant-Garde, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 64px
    fontWeight: 700
    lineHeight: 1.12
    letterSpacing: -0.768px
  display-md:
    fontFamily: "Salesforce-Avant-Garde, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: -0.096px
  body:
    fontFamily: "Salesforce-Sans, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.43
    letterSpacing: 0
  body-sm:
    fontFamily: "Salesforce-Sans, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.55
    letterSpacing: -0.0216px
  caption:
    fontFamily: "Salesforce-Sans, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.43
    letterSpacing: 0
  button:
    fontFamily: "Salesforce-Sans, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: normal
    letterSpacing: 0
  eyebrow:
    fontFamily: "Salesforce-Sans, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: normal
    letterSpacing: 0

rounded:
  none: 0px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 30px
  pill: 999px

spacing:
  xxs: 2px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 24px
  xl: 32px
  xxl: 56px

components:
  button-ghost:
    backgroundColor: "transparent"
    textColor: "#000000"
    typography: "{typography.button}"
    rounded: "{rounded.xs}"
  button-secondary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.xs}"
    padding: 19px 40px 20px
  button-ghost-2:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    typography: "{typography.button}"
    rounded: "{rounded.xs}"
    padding: 12px 16px
  cta-banner-full-width-cta:
    backgroundColor: "transparent"
    textColor: "#000000"
    typography: "{typography.button}"
    rounded: "{rounded.none}"
    padding: 0px 8px 0px 0px

extracted_at: "2026-06-11T06:16:49.217Z"
completeness: 69
scoreVersion: "v2"

---

# Design System — slack.com
> Extracted automatically by Prism from https://slack.com
> Date: 2026-06-11
> 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**: product-neutral

| Dimension | Value | Signal |
|---|---|---|
| Canvas | neutral | `#ffffff` |
| Type posture | sans-led (Salesforce-Sans) | "All your people and AI agents " |
| Color assertion | dual-accent | #611f69 |
| Whitespace | moderate | section rhythm 48px |
| Interaction | expressive | 28 keyframes, 8 transitions |
| Radius language | 4px-rounded | from token scale |

**Prism fingerprint**: `neutral-canvas · sans-display · dual-accent · 4px-rounded · 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(97, 31, 105)` for primary CTAs ONLY. Never decorative.
> - **Body type**: 16px (token: `typography.body`). Default for ALL text not in a heading role.
> - **Section rhythm**: 48px between major bands. Card padding: 24px.
> - **Default radius**: 8px 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. This is the brand's most recognizable visual — reproduce it, don't replace it with a generic card or flat panel.

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

Headlines are set in **Salesforce-Avant-Garde**, a sans-serif display face (the dominant type signature, e.g. "All your people and AI agents working together." at 64px). Body text is set in **Salesforce-Sans**. Headlines use weight 700 for confident, assertive presence — the brand wants to be heard. Negative letter-spacing at display sizes (-0.768px at 64px) compresses headlines into engineered blocks, dense and precise. 

Body text reads in Pure Black (`#000000`) (contrast ratio 21.0:1, well above WCAG AA). **#611f69** (`#611f69`) provides interactive distinction without visual aggression. Elevation is built from multi-layer shadow stacks (7 distinct) — each combines several blurred layers at varying offsets to build a clear front-to-back hierarchy. 
Border radius varies from pill-shaped (fully rounded) to moderately rounded elements, creating visual rhythm. Motion design uses smooth easing curves for polished state transitions. 

**Key Characteristics:**
- Background: Pure White (`#ffffff`)
- Primary typeface: Salesforce-Avant-Garde
- Accent: #611f69 (`#611f69`)
- Display: 64px weight 700, letter-spacing -0.768px
- Shadow system: 7 distinct elevation levels
- Custom fonts loaded: Salesforce-Avant-Garde, Salesforce-Sans, MXiangHeHeiSCProBold, MXiangHeHeiTCBold, SeolSansHeavy, NotoSansTC

## 2. Color Palette & Roles

### Background & Surface
- **Pure White** (`#ffffff`): Page background (primary)
- **Light Gray** (`#e8f5fa`): Surface / elevated background
- **Whitesmoke** (`#ebeaeb`): Surface / elevated background
- **Ghost White** (`#f9f0ff`): Surface / elevated background
- **Ghost White** (`#f9edff`): Surface / elevated background

### Text & Content
- **Pure Black** (`#000000`): Primary body text
- **#611f69** (`#611f69`): Secondary text
- **Near-Black** (`#1d1d1d`): Secondary text
- **#2e0039** (`#2e0039`): Secondary text
- **#481a54** (`#481a54`): Secondary text

### Accent & Interactive
- **#1264a3** (`#1264a3`): Interactive / accent
- **#4a154b** (`#4a154b`): Interactive / accent
- **Cobalt Blue** (`#0b4c8c`): Interactive / accent
- **Steel Blue** (`#2f8ab7`): Interactive / accent
- **#730394** (`#730394`): Interactive / accent
- **Pink** (`#f6bbc1`): Interactive / accent
- **#779846** (`#779846`): Interactive / accent

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

- `#696969` — Slate Grey
- `#757575` — Slate Grey
- `#808080` — Slate Grey
- `#1d1c1d` — Near-Black
- `#eac8fe` — Soft Pink
- `#3d0157` — #3d0157
- `#9602c7` — #9602c7
- `#d17dfe` — #d17dfe
- `#454245` — Charcoal
- `#edeaed` — Whitesmoke
- `#eccdfe` — Soft Pink
- `#400d40` — #400d40 *(token)*
- `#007aff` — #007aff *(token)*

### CSS Custom Properties (Design Tokens)

**Font Family Token**
- `--font-family-monospace`: `"Monaco", "Menlo", "Consolas", "Courier New", monospace`

**Other tokens**
- `--article-theme-primary`: `#4a154b`
- `--sidebar-color`: `#400d40`
- `--sidebar-highlight-color`: `#1264a3`
- `--swiper-theme-color`: `#007aff`
- `--attachment-color`: `#000`

## 3. Typography Rules

### Font Families
- **Primary**: `Salesforce-Sans`
- **Secondary**: `Salesforce-Avant-Garde`
- **Font 3**: `MXiangHeHeiSCProBold`
- **Font 4**: `MXiangHeHeiTCBold`
- **Font 5**: `SeolSansHeavy`

### Custom Fonts Loaded
- **Salesforce-Avant-Garde** weight 700 (normal)
- **Salesforce-Sans** weight 100 (normal)
- **Salesforce-Sans** weight 400 (italic)
- **Salesforce-Sans** weight 200 (italic)
- **Salesforce-Sans** weight 700 (normal)
- **Salesforce-Sans** weight 600 (normal)
- **Salesforce-Sans** weight 300 (normal)
- **MXiangHeHeiSCProBold** weight 400 (normal)
- **MXiangHeHeiTCBold** weight 400 (normal)
- **SeolSansHeavy** weight 400 (normal)
- **NotoSansJP** weight 400 (normal)
- **NotoSansJP** weight 700 (normal)
- **NotoSansJP** weight 900 (normal)
- **NotoSansKR** weight 400 (normal)
- **NotoSansKR** weight 700 (normal)
- **NotoSansKR** weight 900 (normal)
- **NotoSansSC** weight 400 (normal)
- **NotoSansSC** weight 700 (normal)
- **NotoSansSC** weight 900 (normal)
- **NotoSansTC** weight 400 (normal)
- **NotoSansTC** weight 700 (normal)
- **NotoSansTC** weight 900 (normal)
- **swiper-icons** weight 400 (normal)

### Typography Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | Salesforce-Avant-Garde | 64px | 700 | 1.12 | -0.768px | Main headline (h1) |
| Sub-heading | Salesforce-Avant-Garde | 24px | 700 | 1.25 | -0.096px | Third-level heading (h3) |
| Eyebrow / Overline | Salesforce-Sans | 18px | 400 | normal | normal | Label above heading, uppercase tag |
| Card Title | Salesforce-Sans | 16px | 400 | normal | normal | Card headings |
| Button | Salesforce-Sans | 15px | 400 | normal | normal | Button label (15px) |
| Link | Salesforce-Sans | 15px | 700 | 1.55 | -0.0216px | Link (15px) — Decoration: none |
| Button | Salesforce-Sans | 14px | 700 | 1.29 | 0.798px | Button label (14px) |
| Button | Salesforce-Sans | 14px | 400 | normal | normal | Button label (14px) |
| Caption / Badge | Salesforce-Sans | 12px | 700 | 1.43 | normal | uppercase, small text (12px) |

### Full Font Size Scale

Sizes detected in the design (descending): `96px`, `76px`, `64px`, `58px`, `50.40px`, `50px`, `32px`, `24px`, `22.56px`, `22px`, `21px`, `18px`, `17.60px`, `16px`, `15.75px`, `15px`, `14px`, `13.50px`, `12px`

> 12 size(s) detected outside the sampled hierarchy (96px, 76px, 58px, 50.4px, 50px, 32px, 22.56px, 22px, 21px, 17.6px, 15.75px, 13.5px). 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: `#000000`
- Padding: 0px
- Radius: 4px
- Font: 15px weight 400
- Use: Subtle action, toolbar, nav button

**Secondary**
- Background: `#611f69` `{colors.primary}`
- Text: `#ffffff` `{colors.on-primary}`
- Padding: 19px 40px 20px
- Radius: 4px
- Font: 14px weight 700
- Use: Secondary action

**Ghost**
- Background: `transparent`
- Text: `#611f69` `{colors.primary}`
- Padding: 12px 16px
- Radius: 4px
- Shadow: `rgb(97, 31, 105) 0px 0px 0px 1px inset`
- Font: 14px weight 700
- Use: Subtle action, toolbar, nav button

**Secondary**
- Background: `#611f69` `{colors.primary}`
- Text: `#ffffff` `{colors.on-primary}`
- Padding: 12px 16px
- Radius: 4px
- Font: 14px weight 700
- Use: Secondary action

**Light / Invert**
- Background: `#ffffff` `{colors.on-primary}`
- Text: `#611f69` `{colors.primary}`
- Padding: 19px 40px 20px
- Radius: 4px
- Shadow: `rgb(97, 31, 105) 0px 0px 0px 1px inset`
- Font: 14px weight 700
- Use: Bright CTA on dark sections

### CTA Banners

**Full-width CTA**
- Background: `transparent`
- Text: `#000000`
- Padding: 0px 8px 0px 0px
- Radius: 0px
- Font: 15px weight 700
- Use: Full-width conversion strip with headline + button


## 4b. Component Behaviors (State Matrix)

### Interaction State Narrative


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

```yaml
component-behaviors:
  button:
    default:
      bg: "rgb(97, 31, 105)"
      fg: "rgb(255, 255, 255)"
  link:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(18, 100, 163)"
    hover:
      bg: "transparent"
      fg: "inherit"
  card:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(0, 0, 0)"
  navLink:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(18, 100, 163)"
    hover:
      bg: "transparent"
      fg: "inherit"
  badge:
    default:
      bg: "rgb(232, 245, 250)"
      fg: "rgb(11, 76, 140)"
      shadow: "rgba(0, 0, 0, 0.08) 0px 1px 3px 0px"
  footerLink:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(29, 29, 29)"
```

**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`, `Secondary`, `Light / Invert`
- **DO NOT introduce new buttons variants** without justification

### CTA Banners
- **1 shape(s)** in this system: `Full-width CTA`
- **DO NOT introduce new cta banners variants** without justification

## 5. Layout Principles

### Layout Type
**top-nav + content**

### Grid
Single column, centered content

### Max Width
1230px

### Spacing System
Compact spacing — information density prioritized

| Token | Value |
|-------|-------|
| xxs | 2px |
| xs | 4px |
| sm | 8px |
| md | 12px |
| base | 16px |
| lg | 24px |
| xl | 32px |
| 2xl | 48px |
| 3xl | 56px |

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

### Shape Language

| Component | Border Radius |
|-----------|---------------|
| Buttons | `4px` |
| CTA Banners | `0px` |
| Page Body | `0px` |
| Navigation | `0px` |

**Shape Personality**: Subtly Rounded — Minimal corner rounding (1–4px). Professional restraint.

**Full Radius Spectrum**: 0px, 4px, 8px, 12px, 16px, 30px, 48px, 60px (from `allBorderRadii` scan)


## 5b. Spacing Rhythm Names

**Measured section padding**: bands use ~80px internal vertical padding (up to 100px) — **generous**. (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** | `56px` | 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** | `4px` | 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:** centered — Centered composition — heading + subheading + CTAs stacked vertically, content centered horizontally. Common for SaaS marketing pages.
- **Viewport coverage:** full-viewport hero (≥70% screen height)
- **Heading:** "All your people and AI agents working together." — 64px center-aligned
- **Subheading:** "Slack connects your team. Slackbot multiplies what they can do."
- **Media:** present, positioned top
- **CTAs:** 2 (primary: "Get started")
- **Clone instruction:** Reproduce the **centered** layout. Use the heading font-size token at the documented size. Place media top of text.

### Navigation Pattern

- **Position:** static (scrolls with page)
- **Layout:** unknown — Layout not classified
- **Height:** 80px
- **Logo:** ✓ present
- **Nav links:** 4 primary items
- **CTAs in nav:** 1
- **Search:** ✓ search input visible in nav
- **Clone instruction:** Build a static unknown navigation. Reserve 1 slot for primary CTA.

### Card Grid Pattern

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

### Testimonial Pattern

- **Count:** 4 testimonial blocks
- **Layout:** grid
- **Avg quote length:** 82 chars (medium quote)
- **Includes:** ✗ no avatars | ✓ company logos | ✗ no ratings
- **Clone instruction:** Build a grid of 4 testimonials.  Include source company logos. 

### CTA Banner Pattern

- **Banner count:** 2
- **Position:** multiple
- **Visual treatment:** ✓ contrasting background
- **Primary CTA text:** "Update deals just by asking SlackbotNEW"
- **Clone instruction:** Place multiple CTA banners across page sections. Use contrasting solid background.

### Footer Pattern

- **Columns:** 1
- **Links:** 81 total
- **Height:** 968px
- **Includes:** ✗ no newsletter | ✓ social icons |  ✓ copyright
- **Clone instruction:** Build a 1-column footer with ~81 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.2) 0px 1px 10px 0px` | Cards, elevated surfaces |
| Inset (Level 2) | <br>`rgb(97, 31, 105) 0px 0px 0px 1px inset` | Buttons, pressed-state elements |
| Layered (Level 3) | <br>`rgba(0, 0, 0, 0.1) 0px 0px 32px 0px` | Cards, elevated surfaces |
| Layered (Level 4) | <br>`rgba(0, 0, 0, 0.1) 0px 5px 20px 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

### Dominant Easing Curves

| Curve | Semantic Name |
|-------|---------------|
| `cubic-bezier(0.165,0.84,0.44,1)` | Quart Out — Energetic Ease |
| `cubic-bezier(0.33,0,0.6,1.58)` | Custom Ease — Balanced |
| `linear` | Linear — No Easing |

### Duration Scale

| Value | Tier | Typical Use |
|-------|------|-------------|
| `100ms` | Fast | Hover states, micro-interactions |
| `300ms` | Normal | Panel open/close, navigation |
| `400ms` | Slow | Hero animations, page transitions |
| `420ms` | Slow | Hero animations, page transitions |
| `500ms` | Slow | Hero animations, page transitions |

### Copy-Paste Transition Snippets

**Shadow**
```css
transition: box-shadow 0.42s cubic-bezier(0.165, 0.84, 0.44, 1), color 0.42s cubic-bezier(0.165, 0.84, 0.44, 1), background 0.42s...;
```

**All Props**
```css
transition: visibility 0.4s, opacity 0.4s, transform 0.4s cubic-bezier(0.33, 0, 0.6, 1.58);
```

**Transform**
```css
transition: transform 0.3s;
```

**Opacity**
```css
transition: opacity 0.5s linear 0.1s;
```

### Keyframe Animation Catalog

| Animation Name | Type | Animated Props | Use Hint |
|----------------|------|----------------|----------|
| `moveCustomerStories` | Slide | transform | UI transition |
| `slide` | Slide | transform | UI transition |
| `delayBackgroundSwap` | Custom | background-size | UI transition |
| `scaleDownAnimation` | Scale | transform | Focus / emphasis |
| `heightAnimation` | Custom | height | UI transition |
| `widthAnimation` | Custom | width | UI transition |
| `workspace-people-bump` | Slide | transform | UI transition |
| `dotFill` | Custom | width | UI transition |
| `slideInFromRight` | Fade + Move | opacity, transform | Panel / drawer enter |
| `slideInFromLeft` | Fade + Move | opacity, transform | Panel / drawer enter |
| `slide-down` | Fade + Move | opacity, transform | Panel / drawer enter |
| `slide-in--right-quick` | Slide | transform | Panel / drawer enter |
| `bounce` | Slide | transform | Playful feedback |
| `slide-in--right` | Slide | transform | Panel / drawer enter |
| `slide-out--right` | Slide | transform | Panel / drawer exit |
| `slide-in--down` | Slide | transform | Panel / drawer enter |
| `slide-out--up` | Slide | transform | Panel / drawer exit |
| `fade-in` | Fade | opacity | Element entrance |
| `fade-out` | Fade | opacity | Element exit |
| `scale-in-br` | Fade + Move | transform-origin, opacity, transform | Focus / emphasis |

> *8 additional animations omitted (repetitive variants). See raw keyframes in `raw-css.json`.*

### Motion Fingerprint

- **Speed Character**: Deliberate & Calm (median duration: `400ms`)
- **Dominant Easing**: custom cubic-bezier curves
- **Animation Library**: 28 unique animations (28 total including variants)

> This design moves with deliberate & calm timing using custom cubic-bezier curves, creating a UI that feels calm and controlled.

## 8. Do's and Don'ts

### Do
- Use Salesforce-Sans as the primary typeface — it defines the brand personality
- Use negative letter-spacing (-0.768px) 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 #611f69 (`#611f69`) as the primary accent — it's the brand's signature interactive color
- Use small 4px radius for buttons — this design system uses subtle rounding, not pill shapes
- Maintain nav height at 80px — consistent vertical space for the navigation bar
- Respect the 4px–32px spacing range — the design uses a wide scale for visual breathing room
- Make the hero full-viewport (≥70% screen height) — this design uses an immersive hero, not a tall navbar
- Include exactly 2 CTAs in the hero (primary + secondary) — this design pattern is multi-action, not single-purpose
- Include a search input directly in the nav — discoverability is a primary UX value here
- Each card includes a top image — imagery is part of the card identity, not optional
- Show company logos with testimonials — social proof relies on brand recognition, not avatars
- Lay out testimonials in a grid (4+ items) — quantity signals scale and trust
- Repeat the primary CTA across 2 banner sections — conversion paths are layered, not single

### Don't
- 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 over-round buttons with pill or large radius — the system uses restrained, sharp-ish corners
- Don't collapse or hide the nav on scroll without an explicit scroll-triggered animation — the design uses fixed nav presence
- Don't make the nav sticky — this design lets it scroll away to maximize content focus


## 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(97, 31, 105)` for primary CTAs and brand-mark signals only"
    why: "Single chromatic assertion device — overuse dilutes meaning"
    test: "querySelectorAll('[style*=\"rgb(97, 31, 105)\"]').length <= 3 per fold"
```

## 9. Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | 367px | Single column, compact spacing |
| Mobile | 463px | Single column, compact spacing |
| Mobile Large | 615px | Expanded mobile layout |
| Mobile Large | 735px | Expanded mobile layout |
| Mobile Large | 767px | Expanded mobile layout |
| Tablet | 1023px | Multi-column grids begin |
| Desktop | 1119px | Full feature layout |
| Desktop | 1279px | Full feature layout |
| Large Desktop | 1439px | Maximum content width |

### Token Diff — Desktop vs Mobile

| Element | Property | Desktop | Mobile |
|---------|----------|---------|--------|
| heading | font-size | `64px` | `32px` |
| heading | line-height | `71.68px` | `35.84px` |
| heading | letter-spacing | `-0.768px` | `-0.384px` |
| nav | height | `80px` | `55px` |
| button | width | `79px` | `auto` |

### Collapsing Strategy
- Headlines: 64px → 32px on mobile
- Navigation: horizontal links → hamburger menu on mobile
- Cards: multi-column → stacked vertical on mobile
- Footer: multi-column → stacked single column on mobile

### Touch Targets
- Buttons: 0px 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** — 4 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.*

- **Mesh gradients** — 1 multi-stop organic color field(s) as background atmosphere.
- **Clip-path shapes** — 8 non-rectangular cut(s).

> **Motion fingerprint**: mesh gradients, non-rectangular shapes (10)

## 9b. Visual Tone & Photography

**Tone:** Mixed photography + illustration

A balanced mix of photographic content and vector graphics. Photos likely carry product/lifestyle context while SVG handles icons, logos, and decorative accents.

**Canonical Brand Image (OG):**
- https://a.slack-edge.com/737c9d1/marketing/img/homepage/revamped-24/unfurl/hp-revamp-unfurl.en-GB.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: 2.38:1 (ultra-wide cinematic)
- Rendered size: 238×100px
- *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): 21 (88%)
- Portrait (<0.87): 0 (0%)
- Square (0.87–1.15): 2 (8%)
- Ultra-wide (>2.3): 1 (4%)

**Media Format Mix:**
- JPG: 5 (typically photographic content)
- PNG: 18 (logos, transparent UI elements, mockups)
- SVG: 1 (icons, illustrations, decorative geometry)

**Average rendered image size:** 400×244px
**Above-fold image count:** 4 / 24

**Decorative Patterns Detected:**
- 5 multi-stop linear gradients (mesh-like, 3+ color stops) — the brand leans on rich color transitions for visual depth
- 1 radial gradient — circular color blooms used for spotlight/glow effects

**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:**
- Mix photography and illustration intentionally: photos for product/context, vectors for icons + decorative accents.
- Respect the format split — replacing JPGs with illustrations (or vice versa) will shift the brand tone.

## 10. Agent Prompt Guide

### Quick Reference
- Background: Pure White (`#ffffff`)
- Primary text: Pure Black (`#000000`)
- Accent: #611f69 (`#611f69`)
- Border: Slate Grey (`#696969`)
- Font: Salesforce-Sans
- Body: 16px weight 400

### Example Component Prompts
- "Create a hero section on Pure White background (#ffffff). Headline at 64px Salesforce-Sans weight 700, line-height 1.12, letter-spacing -0.768px, color #000000."
- "Create the primary CTA button: `#611f69` background, `#000000` text, 4px border-radius, 11px 23px padding, 700 weight, Salesforce-Sans font."
- "Design a card on `transparent` background. Border: none. Radius: 0px. Shadow: none. Padding: 0px."
- "Build navigation: absolute on `#ffffff`. Salesforce-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 Salesforce-Sans, weight range 400–700. Never exceed 700 — heavier weights break the brand's tonal restraint.
3. **Accent**: #611f69 (`#611f69`) — one accent, applied consistently to CTAs, active states, and links. Never introduce a second saturated color.
4. **Motion**: All transitions use `cubic-bezier(0.165,0.84,0.44,1)`. Never use linear for UI transitions — preserve the brand's easing personality.
5. **Shape**: CTAs at `4px`, cards at `0px`. Apply border-radius from the extracted scale only — don't invent intermediate values.
6. **Spacing**: Use the `--ca-space-*` token scale (4px–32px). All padding, margin, and gap values are multiples from this scale — no magic numbers.
7. **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-on-primary: #ffffff;
  --ca-surface-1: #e8f5fa;
  --ca-surface-2: #ebeaeb;
  --ca-ink-subtle: #1d1d1d;
  --ca-primary: #611f69;
  --ca-primary-hover: #1264a3;
  --ca-hairline: #696969;
}

/* Typography */
:root {
  --ca-font-primary: "Salesforce-Avant-Garde", system-ui, sans-serif;
  --ca-text-display: 64px;
  --ca-text-body: 12px;
  --ca-text-small: 15px;
  --ca-text-caption: 12px;
  --ca-text-button: 15px;
}

/* Spacing & Radius */
:root {
  --ca-space-xxs: 2px;
  --ca-space-xs: 4px;
  --ca-space-sm: 8px;
  --ca-space-md: 12px;
  --ca-space-base: 16px;
  --ca-space-lg: 24px;
  --ca-space-xl: 32px;
  --ca-space-2xl: 48px;
  --ca-space-3xl: 56px;
  --ca-radius-none: 0px;
  --ca-radius-xs: 4px;
  --ca-radius-sm: 8px;
  --ca-radius-md: 12px;
  --ca-radius-lg: 16px;
  --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: hero
    tag: main
    height: 10454px
    width: full-bleed
    layout: block
    children: 13
    vertical-padding: ~100px (airy)
  - section: hero
    tag: section
    classes: ["asset-text-carousel", "switch_timing--22", "visible"]
    height: 1217px
    width: full-bleed
    layout: block
    children: 4
    bg-treatment: radial-gradient
    vertical-padding: ~77px (generous)
    padding: "104px 0px 50px"
  - section: navigation
    tag: nav
    classes: ["c-nav", "c-nav--yext", "verbose-lang"]
    height: 80px
    width: full-bleed
    layout: block
    children: 1
  - section: navigation
    tag: nav
    height: 80px
    width: 1105px
    layout: flex-row justify=normal
    children: 5
  - section: navigation
    tag: div
    classes: ["o-content-container", "FR"]
    height: 80px
    width: 1230px
    layout: flex-row justify=space-between
    children: 3
  - section: feature-section
    tag: div
    classes: ["o-content-container", "headline-container", "u-flex"]
    height: 939px
    width: 1230px
    layout: flex-column justify=normal
    children: 5
  - section: logo-strip
    tag: div
    classes: ["o-content-container"]
    height: 88px
    width: 848px
    layout: flex-row justify=center
    children: 5
  - section: feature-section
    tag: section
    height: 863px
    width: full-bleed
    layout: block
    children: 1
    bg: "rgb(74, 21, 75)"
    tone: dark
    vertical-padding: ~80px (generous)
    padding: "80px 0px"
  - section: feature-section
    tag: div
    classes: ["o-content-container"]
    height: 687px
    width: 1230px
    layout: block
    children: 3
  - section: navigation
    tag: nav
    classes: ["c-switcher-nav"]
    height: 395px
    width: 492px
    layout: flex-column justify=space-evenly
    children: 6
  - section: testimonials
    tag: section
    height: 395px
    width: 1230px
    layout: block
    children: 1
  - section: testimonials
    tag: div
    classes: ["o-content-container"]
    height: 395px
    width: 1230px
    layout: block
    children: 1
  - section: testimonials
    tag: div
    classes: ["c-switcher-container"]
    height: 395px
    width: 1230px
    layout: block
    children: 2
  - section: testimonials
    tag: div
    classes: ["o-content-container", "c-switcher-desktop", "asset-text-carousel", "c-homepage-ai-switcher-v2"]
    height: 395px
    width: 1230px
    layout: grid: 2-col gap=normal 5%
    children: 2
  - section: unknown
    tag: div
    classes: ["c-arc", "concave-down", "c-dark-ai-arc"]
    height: 128px
    width: full-bleed
    layout: block
    children: 2
  - section: feature-section
    tag: section
    height: 736px
    width: full-bleed
    layout: block
    children: 1
    vertical-padding: ~72px (generous)
    padding: "48px 0px 96px"
  - section: header
    tag: header
    height: 104px
    width: 1230px
    layout: flex-row justify=space-between
    children: 2
  - section: feature-section
    tag: div
    classes: ["o-content-container"]
    height: 592px
    width: 1230px
    layout: block
    children: 2
  - section: feature-section
    tag: div
    classes: ["swiper-wrapper"]
    height: 440px
    width: 1230px
    layout: flex-row justify=normal
    children: 10
  - section: header
    tag: header
    height: 154px
    width: 400px
    layout: block
    children: 3
    padding: "0px 24px 16px"
  - section: header
    tag: header
    height: 179px
    width: 400px
    layout: block
    children: 3
    padding: "0px 24px 16px"
  - section: header
    tag: header
    height: 204px
    width: 400px
    layout: block
    children: 3
    padding: "0px 24px 16px"
  - section: header
    tag: header
    height: 154px
    width: 400px
    layout: block
    children: 3
    padding: "0px 24px 16px"
  - section: header
    tag: header
    height: 129px
    width: 400px
    layout: block
    children: 3
    padding: "0px 24px 16px"
  - section: header
    tag: header
    height: 209px
    width: 400px
    layout: block
    children: 3
    padding: "0px 24px 16px"
```

**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:
    - "Reimagine what’s possible with AI and agents."
    - "What’s new in Slack"
    - "We’re in the business of growing businesses."
    - "Millions of people love to work in Slack."
  sub-headings:
    - "Today View"
    - "Miles Davis in Slack Experience"
    - "How OpenAI Connects with Customers and Expands ChatGPT with Slack"
    - "Unlock Agentic Productivity for Every Employee"
    - "See all you can accomplish in Slack."
  ctas:
    - "SKIP TO MAIN CONTENT"
    - "Features"
    - "REQUEST A DEMO"
    - "GET STARTED"
    - "FIND YOUR PLAN"
    - "Update deals just by asking Slackbot NEW"
    - "Summarize a conversation you missed"
  navigation:
    - "See all updates"
    - "Download Slack"
    - "Your Privacy Choices"
    - "Enterprise"
    - "Pricing"
    - "Sign in"
    - "REQUEST A DEMO"
    - "GET STARTED"
    - "Watch Demo"
    - "Paid vs. Free"
  footer-links:
    - "Watch Demo"
```

**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: 8
    avg-ratio: 2.32
    common-aspect: "~16:9 landscape"
    sample-alts:
      - "Slack"
  thumbnail:
    count: 8
    avg-ratio: 1.02
    common-aspect: "~1:1 square"
    sample-alts:
      - "GM Logo"
      - "Target Logo"
  icon:
    count: 4
    avg-ratio: 1.38
    common-aspect: "~1:1 square"
```

**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">
  SKIP TO MAIN CONTENT
</button>
```
_Source pattern detected: padding `19px 40px 20px` · radius `4px` · weight `700`_

### 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** 3 · **cta** 3 · **auth** 1 · **product** 9 · **pricing** 3 · **blog** 2 · **social** 10 · **footer** 13 · **other** 16

**Primary actions (conversion path):**
- Account access — "Sign in" (login/signup) → `https://slack.com/signin`
- Primary call-to-action — "GET STARTED" (the conversion path) → `https://slack.com/get-started?entry_point=nav_menu`
- Primary call-to-action — "GET STARTED" (the conversion path) → `https://slack.com/get-started?entry_point=home_page`
- Primary call-to-action — "GET STARTED" (the conversion path) → `https://slack.com/get-started?entry_point=footer`

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

*Embed* — medium confidence, 4 items:

| Title | Featured image | Link |
|---|---|---|
| How OpenAI Connects with Customers and Expan | `logo-openai@2x.png` (ar 3.65) | https://www.youtube.com/embed/SyuBcwa0bqQ |
| How Spotify Boosted Ad Sales and Streamlined | `logo-spotify@2x.png` (ar 3.65) | https://www.youtube.com/embed/enYP8gI8VmE |
| How Signable leads the digital shift with si | `logo-signable@2x.png` (ar 3.2) | https://www.youtube.com/embed/qYQXbxjrTuA |
| To Seamlessly Serve Millions, ezCater Taps i | `logo-ezcater@2x.png` (ar 3.97) | https://www.youtube.com/embed/N4kpe-J8kP0 |

**Signals:** 28/60 links carry a featured image · dominant link roles: footer-link (28), content-card (22), inline-link (5).


---
## Extraction Completeness: 69/100 (C)

| Category | Score | Max | Detail |
|----------|-------|-----|--------|
| Colors & Palette | 24 | 25 | 17 named colors |
| Typography | 20 | 20 | 9 roles defined |
| Components | 8 | 20 | 2 specs extracted |
| Motion & Interaction | 12 | 15 | Keyframes |
| CSS Custom Properties | 1 | 10 | 11 vars |
| Responsive Breakpoints | 5 | 5 | 9 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 (swiper-icons)** — 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 |
|----------|----------------|-------------------|
| **Dark mode** | No dark-mode CSS variables or media queries detected | Light mode is canonical; do not generate dark-mode variants unless explicitly requested |
| **Form inputs** | No text input fields detected on this page | Use the documented border-radius + accent border on focus; 12-16px padding inside |
| **Design tokens** | Only 11 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 | 11 CSS vars (semantic naming requires ≥20 for high) |
| §3 Typography | High | 9 typography roles inferred |
| §4 Components | Low | 2 component variants captured |
| §7 Motion | High | Keyframes + transitions |
| §8 Do's/Don'ts | High | 23 rules generated; design-decisions.json has evidence per rule |
| §9 Responsive | High | 9 breakpoints detected |
| §9b Photography | High | 24 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

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

**@font-face declarations to use:**
```css
@font-face {
  font-family: 'swiper-icons';
  /* src: url('/fonts/swiper-icons.woff2') format('woff'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Salesforce-Avant-Garde';
  /* src: url('/fonts/Salesforce-Avant-Garde.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Salesforce-Sans';
  /* src: url('/fonts/Salesforce-Sans.woff2') format('woff2'); */
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Salesforce-Sans';
  /* src: url('/fonts/Salesforce-Sans.woff2') format('woff2'); */
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Salesforce-Sans';
  /* src: url('/fonts/Salesforce-Sans.woff2') format('woff2'); */
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Salesforce-Sans';
  /* src: url('/fonts/Salesforce-Sans.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Salesforce-Sans';
  /* src: url('/fonts/Salesforce-Sans.woff2') format('woff2'); */
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Salesforce-Sans';
  /* src: url('/fonts/Salesforce-Sans.woff2') format('woff2'); */
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Salesforce-Sans';
  /* src: url('/fonts/Salesforce-Sans.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Salesforce-Sans';
  /* src: url('/fonts/Salesforce-Sans.woff2') format('woff2'); */
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Salesforce-Sans';
  /* src: url('/fonts/Salesforce-Sans.woff2') format('woff2'); */
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Salesforce-Sans';
  /* src: url('/fonts/Salesforce-Sans.woff2') format('woff2'); */
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'MXiangHeHeiSCProBold';
  /* src: url('/fonts/MXiangHeHeiSCProBold.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'MXiangHeHeiTCBold';
  /* src: url('/fonts/MXiangHeHeiTCBold.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SeolSansHeavy';
  /* src: url('/fonts/SeolSansHeavy.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NotoSansJP';
  /* src: url('/fonts/NotoSansJP.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NotoSansJP';
  /* src: url('/fonts/NotoSansJP.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NotoSansJP';
  /* src: url('/fonts/NotoSansJP.woff2') format('woff2'); */
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NotoSansKR';
  /* src: url('/fonts/NotoSansKR.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NotoSansKR';
  /* src: url('/fonts/NotoSansKR.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NotoSansKR';
  /* src: url('/fonts/NotoSansKR.woff2') format('woff2'); */
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NotoSansSC';
  /* src: url('/fonts/NotoSansSC.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NotoSansSC';
  /* src: url('/fonts/NotoSansSC.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NotoSansSC';
  /* src: url('/fonts/NotoSansSC.woff2') format('woff2'); */
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NotoSansTC';
  /* src: url('/fonts/NotoSansTC.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NotoSansTC';
  /* src: url('/fonts/NotoSansTC.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NotoSansTC';
  /* src: url('/fonts/NotoSansTC.woff2') format('woff2'); */
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
```

### Keyframe Animations (Intercepted from CSS)

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

```
@keyframes swiper-preloader-spin { ... }
@keyframes moveCustomerStories { ... }
@keyframes slide { ... }
@keyframes delayBackgroundSwap { ... }
@keyframes scaleDownAnimation { ... }
@keyframes heightAnimation { ... }
@keyframes widthAnimation { ... }
@keyframes workspace-people-bump { ... }
@keyframes dotFill { ... }
@keyframes slideInFromRight { ... }
@keyframes slideInFromLeft { ... }
@keyframes slide-down { ... }
@keyframes slide-in--right-quick { ... }
@keyframes bounce { ... }
@keyframes slide-in--right { ... }
@keyframes slide-out--right { ... }
@keyframes slide-in--down { ... }
@keyframes slide-out--up { ... }
@keyframes fade-in { ... }
@keyframes fade-out { ... }
@keyframes scale-in-br { ... }
@keyframes scale-in-tl { ... }
@keyframes scale-out-tl { ... }
@keyframes scale-out-br { ... }
@keyframes fade-in--up { ... }
@keyframes scale-out-center { ... }
@keyframes loading-spinner { ... }
@keyframes onetrust-fade-in { ... }
@keyframes ytp-party-background-color { ... }
@keyframes ytp-party-color { ... }
@keyframes ytp-party-fill { ... }
@keyframes ytp-bezel-fadeout { ... }
@keyframes ytp-delhi-modern-bezel-fadeout { ... }
@keyframes ytp-delhi-modern-bezel-text-fadeout { ... }
@keyframes ytp-title-channel-fade-in { ... }
@keyframes ytp-title-channel-fade-out { ... }
@keyframes ytp-title-channel-fade-in-big-mode { ... }
@keyframes ytp-title-channel-fade-out-big-mode { ... }
@keyframes ytp-title-expanded-fade-in { ... }
@keyframes ytp-title-expanded-fade-out { ... }
@keyframes ytp-title-beacon-pulse { ... }
@keyframes arrow-fade-out-1 { ... }
@keyframes arrow-fade-out-2 { ... }
@keyframes arrow-fade-out-3 { ... }
@keyframes grow-circle { ... }
@keyframes ytp-equalizer-animation { ... }
@keyframes ytp-fullscreen-button-corner-0-animation { ... }
@keyframes ytp-fullscreen-button-corner-1-animation { ... }
@keyframes ytp-fullscreen-button-corner-2-animation { ... }
@keyframes ytp-fullscreen-button-corner-3-animation { ... }
@keyframes ytp-jump-spin { ... }
@keyframes ytp-jump-spin-backwards { ... }
@keyframes bezel-fade-in { ... }
@keyframes ytp-spinner-linspin { ... }
@keyframes ytp-spinner-easespin { ... }
@keyframes ytp-spinner-left-spin { ... }
@keyframes ytp-right-spin { ... }
@keyframes ytp-unmute-width-anim { ... }
@keyframes ytp-unmute-alpha-anim { ... }
```

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

```css
@keyframes swiper-preloader-spin{to{transform:rotate(360deg)}}
@keyframes moveCustomerStories{to{transform:translate(-2900px)}}
@keyframes slide{0%{transform:translate(0)}
@keyframes delayBackgroundSwap{to{background-size:0}}
@keyframes scaleDownAnimation{0%{transform:scale(1)}50%{transform:scale(.95)}
@keyframes heightAnimation{0%{height:0}
@keyframes widthAnimation{0%{width:0}
@keyframes workspace-people-bump{0%,30%,to{transform:translateY(0)}10%{transform:translateY(-3px)}}
@keyframes dotFill{0%{width:0}
@keyframes slideInFromRight{0%{opacity:0;transform:translate(40%)}
@keyframes slideInFromLeft{0%{opacity:0;transform:translate(-40%)}
@keyframes slide-down{0%{opacity:0;transform:translateY(-35%)}
@keyframes slide-in--right-quick{0%{transform:translate(0,0)}
@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-30px)}60%{transform:translateY(-15px)}}
@keyframes slide-in--right{0%{transform:translate(100%)}
@keyframes slide-out--right{0%{transform:translate(0)}
@keyframes slide-in--down{0%{transform:translateY(-100%)}
@keyframes slide-out--up{0%{transform:translateY(0)}
@keyframes fade-in{0%{opacity:0}
@keyframes fade-out{0%{opacity:1}
@keyframes scale-in-br{0%{transform-origin:100% 100%;opacity:0;transform:scale(0)}
@keyframes scale-in-tl{0%{transform-origin:0 0;opacity:0;transform:scale(0)}
@keyframes scale-out-tl{0%{transform-origin:0 0;opacity:1;transform:scale(1)}
@keyframes scale-out-br{0%{transform-origin:100% 100%;opacity:1;transform:scale(1)}
@keyframes fade-in--up{0%{opacity:0;transform:translateY(50px)}
@keyframes scale-out-center{0%{transform-origin:50%;opacity:0;transform:scale(0)}
@keyframes loading-spinner{0%{transform:rotate(0)}
@keyframes onetrust-fade-in{0%{opacity:0}100%{opacity:1}}
@-webkit-keyframes ytp-party-background-color{0%{background-color:#f00}20%{background-color:#0f0}40%{background-color:#00f}60%{background-color:#f0f}80%{background-color:#ff0}
@-webkit-keyframes ytp-party-color{0%{color:#f00}20%{color:#0f0}40%{color:#00f}60%{color:#f0f}80%{color:#ff0}
@-webkit-keyframes ytp-party-fill{0%{fill:#f00}20%{fill:#0f0}40%{fill:#00f}60%{fill:#f0f}80%{fill:#ff0}
@-webkit-keyframes ytp-bezel-fadeout{0%{opacity:1}
@-webkit-keyframes ytp-delhi-modern-bezel-fadeout{0%{opacity:0}25%,75%{opacity:1;-webkit-transform:scale(1.33);transform:scale(1.33)}
@-webkit-keyframes ytp-delhi-modern-bezel-text-fadeout{0%{opacity:0}25%,75%{opacity:1}
@-webkit-keyframes ytp-title-channel-fade-in{0%{background-color:transparent;max-width:10%}25%{background-color:rgba(35,35,35,.9)}75%{max-width:100%}}
@-webkit-keyframes ytp-title-channel-fade-out{0%{background-color:rgba(35,35,35,.9);width:500px}75%{background-color:rgba(35,35,35,.9);width:50px}}
@-webkit-keyframes ytp-title-channel-fade-in-big-mode{0%{background-color:transparent;max-width:15%}25%{background-color:rgba(35,35,35,.9)}75%{max-width:100%}}
@-webkit-keyframes ytp-title-channel-fade-out-big-mode{0%{background-color:rgba(35,35,35,.9);width:500px}75%{background-color:rgba(35,35,35,.9);width:70px}}
@-webkit-keyframes ytp-title-expanded-fade-in{0%{opacity:0}25%{opacity:0}
@-webkit-keyframes ytp-title-expanded-fade-out{0%{opacity:1}25%{opacity:1}
@-webkit-keyframes ytp-title-beacon-pulse{0%{background:black;width:40px;height:40px;left:5px;top:5px}50%{background:transparent;width:50px;height:50px;left:0;top:0}}
@-webkit-keyframes arrow-fade-out-1{0%{opacity:0}17%{opacity:.9}33%{opacity:.6}50%{opacity:.3}67%{opacity:.3}83%{opacity:.3}
@-webkit-keyframes arrow-fade-out-2{0%{opacity:0}17%{opacity:.3}33%{opacity:.9}50%{opacity:.6}67%{opacity:.3}83%{opacity:.3}
@-webkit-keyframes arrow-fade-out-3{0%{opacity:0}17%{opacity:.3}33%{opacity:.3}50%{opacity:.9}67%{opacity:.6}83%{opacity:.3}
@-webkit-keyframes grow-circle{0%{-webkit-transform:scale(0);transform:scale(0)}
@-webkit-keyframes ytp-equalizer-animation{0%{-webkit-transform:scaleY(1);transform:scaleY(1)}50%{-webkit-transform:scaleY(.5);transform:scaleY(.5)}
@-webkit-keyframes ytp-fullscreen-button-corner-0-animation{50%{-webkit-transform:translate(-1px,-1px);transform:translate(-1px,-1px)}}
@-webkit-keyframes ytp-fullscreen-button-corner-1-animation{50%{-webkit-transform:translate(1px,-1px);transform:translate(1px,-1px)}}
@-webkit-keyframes ytp-fullscreen-button-corner-2-animation{50%{-webkit-transform:translate(1px,1px);transform:translate(1px,1px)}}
@-webkit-keyframes ytp-fullscreen-button-corner-3-animation{50%{-webkit-transform:translate(-1px,1px);transform:translate(-1px,1px)}}
@-webkit-keyframes ytp-jump-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
@-webkit-keyframes ytp-jump-spin-backwards{0%{-webkit-transform:rotate(1turn);transform:rotate(1turn)}
@-webkit-keyframes bezel-fade-in{0%{opacity:0}25%,75%{opacity:1;-webkit-transform:scale(2);transform:scale(2)}
@-webkit-keyframes ytp-spinner-linspin{to{-webkit-transform:rotate(1turn)}}
@-webkit-keyframes ytp-spinner-easespin{12.5%{-webkit-transform:rotate(135deg)}25%{-webkit-transform:rotate(270deg)}37.5%{-webkit-transform:rotate(405deg)}50%{-webkit-transform:rotate(540deg)}62.5%{-webkit-transform:rotate(675deg)}75%{-webkit-transform:rotate(810deg)}87.5%{-webkit-transform:rotate(945deg)}
@-webkit-keyframes ytp-spinner-left-spin{0%{-webkit-transform:rotate(130deg)}50%{-webkit-transform:rotate(-5deg)}
@-webkit-keyframes ytp-right-spin{0%{-webkit-transform:rotate(-130deg)}50%{-webkit-transform:rotate(5deg)}
@-webkit-keyframes ytp-unmute-width-anim{0%{width:0}
@-webkit-keyframes ytp-unmute-alpha-anim{0%{opacity:0}
```
</details>

### Brand Gradient Palette

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

```css
/* Gradient 1 */
background: linear-gradient(#1d1c1d00 22.75%,#1d1c1d0f 28.48%,#1d1c1d1f 34.34%,#1d1c1d40 42.06%,#1d1c1d61 49.79%,#1d1c1d80 57.51%,#1d1c1d8c 69.1%,#1d1c1d99 80.03%,#1d1c1dcc 90.52%);

/* Gradient 2 */
background: linear-gradient(248deg,#f2defe 0%,#d6e6ff 52%,#bec7f6 100%);

/* Gradient 3 */
background: linear-gradient(242deg,#f2defe 8%,#e0e5f8 55%,#a8cbff 93%);

/* Gradient 4 */
background: linear-gradient(248deg,#f2defe 0%,#e1f0fb 52%,#a9d0ff 100%);

/* Gradient 5 */
background: linear-gradient(242deg,#f2defe 8%,#d9e8fb 55%,#a1c8ff 93%);

```

### Hover State CSS (Intercepted)

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

```css
.c-billboard__icons .c-billboard__icon .c-billboard__icon-text:hover{background-color:#f9f0ff}

.c-billboard__icons .c-billboard__icon.active .c-billboard__icon-text:hover{background-color:#2e0039}

.c-home-whats-new-module__see-all:visited,.c-home-whats-new-module__see-all:hover,.c-home-whats-new-module__see-all:focus{box-shadow:none;background-image:none;border:0;text-decoration:none}

.c-home-whats-new-module__see-all:hover .c-home-whats-new-module__see-all-text{text-decoration:none}

.c-home-whats-new-module__see-all:hover .c-home-whats-new-module__see-all-icon{transform:translate(.25rem)}

.c-home-whats-new-module__nav-button:hover{background-color:#1d1d1d1a}

.c-home-whats-new-module__card:hover{transform:scale(1.02)}

.c-bento-sticky-toc .c-bento-sticky-toc__item:hover{background-color:#e5b9fe}
```

> **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 1745 rendered nodes** — not a sample. These are the values the page *actually paints*, weighted by how often they appear.

### Real Responsive Breakpoints
**85 breakpoints** read from the live `@media` rules (not guessed) — 14 most relevant:
`240px` · `249px` · `288px` · `289px` · `299px` · `300px` · `320px` · `325px` · `327px` · `330px` · `331px` · `349px` · `367px` · `380px` … (+71 more)

### Measured Design Scale
**Type scale by usage** (× = paint count): `16px`×447 · `14px`×381 · `15px`×355 · `18px`×272 · `12px`×121 · `24px`×66 · `22px`×15 · `96px`×13

**Radius scale** (× = paint count): `16px`×67 · `4px`×43 · `999px`×13 · `48px`×11 · `8px`×8 · `90px`×8 · `50%`×5 · `12px`×1

**Weights** (× = paint count): `400`×1390 · `700`×270 · `600`×62 · `300`×10 · `500`×10

**Layout gaps** (× = paint count): `normal 16px`×13 · `8px normal`×12 · `8px`×8 · `normal 5%`×5 · `12px`×2 · `19px`×1 · `24px`×1 · `normal 24px`×1

**Elevation (real shadows)**:
```css
rgba(0, 0, 0, 0.1) 0px 0px 32px 0px
rgb(97, 31, 105) 0px 0px 0px 1px inset
rgba(0, 0, 0, 0.08) 0px 1px 3px 0px
rgba(0, 0, 0, 0.2) 0px 1px 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 { font-family:var(--font-family-body) }
h1 { font-size:2em }
h1 { color:#000 }
h1 { font-family:var(--font-family-heading); font-size:clamp(2rem,2.88462vw + 1.27885rem,3.125rem); font-weight:700 }
h1 { color:var(--theme-text) }
h1 { font-size:4rem }
h2 { color:#000 }
h2 { font-family:var(--font-family-heading); font-size:clamp(1.75rem,.641026vw + 1.58974rem,2rem); font-weight:700 }
h2 { color:#fff; font-size:3.625rem; font-family:var(--font-family-heading); font-weight:600 }
button { background:0 0; border-radius:4px; background-color:initial }
a { background:0 0; background-color:initial }
a { color:#1264a3 }
```

> 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://slack.com | 2026-06-11T06:16:49.234Z*
*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.*