---
version: alpha
name: "Mural"
website: "https://www.mural.co"
description: >-
  A visual-collaboration whiteboard brand whose marketing site flips the dev-tool convention: a jet-black hero canvas carries an 80px STK Bureau serif headline in dim grey weight 300, with a jade-green pill CTA as the lone chromatic moment. Below the fold the page swaps to a near-white canvas where the same STK Bureau serif sits in ink black at 70px and editorial product cards run pastel-mint, blush-pink, and jade thumbnails. ABC Social handles every body, label, and nav surface at 14-18px in weight 300; corners round at 8px on chips and 24px on large product mockups; the system pairs editorial serif display with mint-jade voltage instead of the post-it pastel cluster Mural ran a generation earlier.

seo:
  title: "Mural Design System for React — jade green, STK Bureau serif, 14 components"
  metaDescription: "Mural's marketing system pairs an editorial STK Bureau serif at weight 300 with jade-green pill CTAs on a jet-black hero canvas. Tokens for React, Next.js, and AI coding tools."
  highlights:
    - "Black-canvas hero with jade pill — Mural's redesigned marketing inverts the post-it pastel cluster the brand was known for, holding the entire above-fold in black with jade green as the single CTA voltage"
    - "STK Bureau editorial serif — 80px hero h1 and 70px section h2 in a transitional serif at weight 300, the lightest display weight any collaboration tool uses"
    - "ABC Social as workhorse — every body, label, button, and nav surface runs ABC Social at 14-22px in weight 300, with rare 500-600 weights for chip labels"
    - "Pastel sticky thumbnails — mint, blush, jade, and yellow appear only as decorative sticky-note thumbnails inside product card mockups, never as page-level surface fills"
    - "Pill-radius CTAs — primary buttons render fully-rounded at 999rem, every other surface tops out at 24px; the system is binary, like Cloudflare's small-step-plus-pill scale"
  tags:
    - "Productivity & SaaS"
    - "Project Management"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Mural's marketing site does something most collaboration brands won't: it gives up the post-it pastel cluster that made the brand famous and replaces it with a jet-black above-fold canvas. The hero is a black slab — STK Bureau, a transitional serif from Sharp Type, at 80px in weight 300 with -4px tracking, the headline rendered in a muted dim-grey rather than pure white. Below the headline sits a small jade-green pill CTA, the single chromatic moment above the fold. Where Miro keeps its hero on warm sand and FigJam paints with cluster pastels, Mural drops the entire opening band into black and lets a 70px editorial serif do the work. The post-it pastels (mint, blush, jade, yellow) reappear later in the page — but as decorative sticky-note thumbnails inside product mockups, never as page-level surface fills.

    The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 16 color tokens drawn from the page CSS variables (jet-black ink as text-main and surface-inverse, jade green as the primary CTA voltage, mint as the secondary surface-brand tone, plus a small set of greys and pastel sticky-note tints); 12 typography tokens splitting STK Bureau across every display tier in weight 300 and ABC Social across every body / label / nav tier at weights 300-600; 5 radius tokens covering the 8px chip / 24px card / pill CTA scale; 8 spacing tokens on a 4px base; and 14 components covering the jade pill CTA, the jet-black hero, the serif display heading, the pastel product card, the metric tile, and the dark email input.

    Feed this file to an AI coding tool and it reproduces Mural's specific moves: STK Bureau editorial serif display at weight 300, jade-green pill CTAs as the only chromatic voltage above the fold, ABC Social sans body at weight 300, black-canvas hero, and pastel sticky-note thumbnails reserved for product mockups. The token references resolve cleanly — jade for the CTA voltage, jet-black for the hero canvas, STK Bureau for display, ABC Social for everything else. One move worth borrowing only if your product can sustain it: the editorial serif at weight 300 requires display copy short enough to fit one or two sentences — long product taglines collapse the editorial gesture into thin marketing fluff.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://www.mural.co"
      title: "Mural — official site"
      description: "Mural's public marketing site — the source of truth for the live tokens captured in this file."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is Mural's primary brand color?"
      answer: "Mural's brand voltage is jade green, wired into the CSS as --jade and --_primitives---color--jade. It carries the primary CTA pill on the black hero and every secondary in-card CTA across the page. The mint tint at slightly higher luminance is the surface-brand semantic — wired as --_semantics---color--surface-brand — and appears on the AI badge, pastel sticky thumbnails, and decorative card chips. Jade appears 14 times as background and zero times as text or border in the captured page; mint appears 14 times the same way. The legacy purple Mural ran in earlier brand generations is absent from the marketing system entirely."
    - id: "typography"
      title: "What typefaces does Mural use, and what should I use as substitutes?"
      answer: "Mural runs two voices: STK Bureau (a transitional serif from Sharp Type) for every display tier at weight 300, and ABC Social (a contemporary sans from Dinamo) for every body, label, button, and nav surface at weights 300-600. STK Bureau sits at 70-100px on display headlines with -2.8 to -4px tracking; ABC Social at 14-22px in weight 300 for body. Both faces are proprietary. For STK Bureau substitution, Lora at the same weight transfers cleanly; for ABC Social, Inter at weight 300 is the closest open-source match. The display weight of 300 is the move to preserve — heavier display weights collapse the editorial gesture."
    - id: "rounded-style"
      title: "What is Mural's corner-radius philosophy?"
      answer: "Mural runs a binary scale: small-step rounding on chips and inputs plus a fully-rounded pill on primary CTAs. The dominant values are 8px (frequency 40, used on inputs, secondary buttons, dropdown items) and 6px (frequency 34, used on small chips and badges); large product card frames use 24px (frequency 14), and the hero CTA renders as a full pill at 999rem (the maximum representable radius). The 16px middle radius is rare; the system intentionally skips the 12-16-20 ladder. The pill plus 24px card plus 8px chip combination is the brand's structural shape language."
    - id: "black-canvas"
      title: "Why does Mural use a jet-black hero canvas?"
      answer: "The above-fold hero is full-bleed jet-black (pure black, wired as --black and --_semantics---color--surface-inverse). The dim-grey headline color sits at the page's only intentionally-muted text moment — the headline is meant to read as soft, not aggressive, against the black. The jade pill CTA is the single chromatic moment above the fold. Below the fold the page returns to white-canvas editorial sections where the same STK Bureau serif renders in pure ink-black at 70px. The black-to-white band flip is the page's structural device: the dark hero signals the redesigned brand voice, the white editorial signals product depth."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build my own collaboration marketing site?"
      answer: "Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent reproduces Mural's specific moves: STK Bureau editorial serif at weight 300 across display, ABC Social sans at weight 300 across body, jade-green pill CTAs as the only chromatic voltage, black-canvas hero, and pastel sticky thumbnails reserved for product mockups. The token references resolve cleanly without invention. You can also paste values directly: every hex, font name, radius, and spacing value is a quoted scalar that drops into Tailwind config or CSS custom properties. The serif at weight 300 is the move worth borrowing if you can hold short display copy — long headlines collapse the editorial gesture."

mockups:
  - "marketing-hero"
  - "dashboard-card-grid"

colors:
  primary: "#00c27a"
  surface-brand: "#b4f5c8"
  mint-soft: "#d5f8e0"
  spring: "#8fec7f"
  legacy-green: "#007b3b"
  ink: "#000000"
  ink-secondary: "#333333"
  ink-muted: "#626262"
  ink-tertiary: "#8c8c8c"
  canvas: "#ffffff"
  surface-soft: "#eeeeee"
  border-default: "#dce1e5"
  border-hover: "#b8c1cc"
  border-inverse: "#4f5457"
  shadow-blue: "#0b2946"
  shadow-mid: "#2a5279"

typography:
  display-xl:
    fontFamily: "\"STK Bureau\", \"Times New Roman\", serif"
    fontSize: 80px
    fontWeight: 300
    lineHeight: 88px
    letterSpacing: "-4px"
  display-lg:
    fontFamily: "\"STK Bureau\", \"Times New Roman\", serif"
    fontSize: 70px
    fontWeight: 300
    lineHeight: 70px
    letterSpacing: "-2.8px"
  display-md:
    fontFamily: "\"STK Bureau\", \"Times New Roman\", serif"
    fontSize: 54px
    fontWeight: 300
    lineHeight: 64.8px
    letterSpacing: 0
  display-sm:
    fontFamily: "\"STK Bureau\", \"Times New Roman\", serif"
    fontSize: 40px
    fontWeight: 300
    lineHeight: 48px
    letterSpacing: 0
  heading-md:
    fontFamily: "\"ABC Social\", Arial, sans-serif"
    fontSize: 22px
    fontWeight: 300
    lineHeight: 33px
    letterSpacing: 0
  body-lg:
    fontFamily: "\"ABC Social\", Arial, sans-serif"
    fontSize: 18px
    fontWeight: 300
    lineHeight: 27px
    letterSpacing: 0
  body-md:
    fontFamily: "\"ABC Social\", Arial, sans-serif"
    fontSize: 16px
    fontWeight: 300
    lineHeight: 28px
    letterSpacing: 0
  body-sm:
    fontFamily: "\"ABC Social\", Arial, sans-serif"
    fontSize: 14px
    fontWeight: 300
    lineHeight: 21px
    letterSpacing: 0
  label-md:
    fontFamily: "\"ABC Social\", Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 24px
    letterSpacing: 0
  button-md:
    fontFamily: "\"ABC Social\", Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 24px
    letterSpacing: 0
  nav-link:
    fontFamily: "\"ABC Social\", Arial, sans-serif"
    fontSize: 16px
    fontWeight: 300
    lineHeight: 24px
    letterSpacing: 0
  uppercase-eyebrow:
    fontFamily: "\"ABC Social\", Arial, sans-serif"
    fontSize: 14px
    fontWeight: 300
    lineHeight: 21px
    letterSpacing: "2.45px"

rounded:
  none: "0px"
  sm: "6px"
  md: "8px"
  lg: "16px"
  xl: "24px"
  pill: "9999px"

spacing:
  xs: "4px"
  sm: "8px"
  base: "16px"
  md: "24px"
  lg: "32px"
  xl: "48px"
  2xl: "80px"
  3xl: "128px"

components:
  hero-section:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.ink-tertiary}"
    typography: "{typography.display-xl}"
    padding: "128px 32px"
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink-tertiary}"
    typography: "{typography.display-xl}"
  section-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-lg}"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
  body-paragraph-inverse:
    backgroundColor: "transparent"
    textColor: "{colors.canvas}"
    typography: "{typography.body-lg}"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: "8px 16px"
    height: "40px"
  top-nav:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.nav-link}"
    padding: "16px 80px"
    height: "64px"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.canvas}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.md}"
    padding: "8px 16px"
  card-light:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.xl}"
    padding: "32px"
    borderColor: "{colors.border-default}"
  card-soft:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.xl}"
    padding: "32px"
  card-product:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.xl}"
    padding: "24px"
    borderColor: "{colors.border-default}"
  sticky-thumbnail-mint:
    backgroundColor: "{colors.surface-brand}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.sm}"
    padding: "8px"
  text-input-dark:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "8px 16px"
    height: "36px"
    borderColor: "{colors.border-inverse}"
  uppercase-eyebrow:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.uppercase-eyebrow}"
---

## Overview

Mural's marketing site abandons the post-it pastel cluster the brand was known for and lands on something different. **Black-canvas serif.** The above-fold hero is full-bleed jet-black (`{colors.ink}` — #000000) with an 80px STK Bureau serif headline in dim-grey `{colors.ink-tertiary}` weight 300, sitting beside a single jade-green pill CTA. Where Miro keeps its hero on warm sand and FigJam paints with cluster pastels, Mural drops the entire opening band into black and lets a transitional serif at weight 300 carry the page's editorial argument. The pastels (mint, blush, jade, yellow) reappear later as decorative sticky-note thumbnails inside product card mockups — but never as page-level surface fills. The brand voltage is now jade green, not the legacy purple Mural ran a generation earlier.

The voltage discipline is unusual for a collaboration tool. Jade (`{colors.primary}` — #00c27a) carries the primary CTA pill on the black hero and every secondary in-card CTA — appearing 14 times in the captured page as background fill, zero as text, zero as border. Mint (`{colors.surface-brand}` — #b4f5c8) carries the AI badge and decorative sticky-note thumbnails. The split between jade as CTA voltage and mint as surface-brand surface tint is the system's structural chromatic move; both belong to the same green hue family but operate in distinct semantic roles.

Typography is **STK Bureau editorial display, ABC Social workhorse body**. STK Bureau (a transitional serif from Sharp Type) carries every display tier in weight 300 — 80px hero h1, 70px section h2, 54px sub-display, 40px tertiary. ABC Social (a contemporary sans from Dinamo) handles every body, label, button, and nav surface at 14-22px in weights 300-600. The display weight of 300 is the lightest weight any collaboration brand uses on a hero headline — Miro sits at 500, Figma at 600, Notion at 600. Mural's weight-300 serif is closer to a magazine dek than to a SaaS hero, and the rhythm pairs with the long-form editorial product taglines below the fold.

**Key Characteristics:**
- Jet-black hero canvas (`{colors.ink}` — #000000) with dim-grey headline text — frequency 1170 for ink including 592 text and 568 border occurrences across the captured surface.
- Jade-green pill CTA (`{colors.primary}` — #00c27a) as the lone chromatic voltage above the fold — 14 occurrences total, all as background.
- STK Bureau serif at weight 300 across every display tier — 80px hero h1 is the lightest display weight any major collaboration tool runs.
- ABC Social sans at weight 300 across body, label, and nav — 37 captured samples in the workhorse 16px / 300 body style.
- Pastel sticky thumbnails (mint, blush, jade, yellow) reserved for product-mockup decoration — never used as page-level surface fills.
- Binary radius scale: 6-8px small-step on chips and inputs, 24px on large product cards, full pill at 9999px on primary CTAs.
- 4px base spacing unit but the dominant module is 16-24px (55 combined captured occurrences); section padding rises to 80px on major bands and 128px above the first product mockup.
- Customer-logo wall (Microsoft, IBM, Delta, RouterWalls) renders monochrome-white inside the black hero band — every customer logo flattens to keep voltage singular.

## Colors

### Brand

- **Jade** (`{colors.primary}` — #00c27a): frequency 14. Used as text (0), background (14), border (0). The single brand voltage — fills the primary CTA pill, the in-card "Get started" buttons, and AI-related accent fills. Wired in CSS as `--jade` and `--_primitives---color--jade`. The most semantically-loaded chromatic token in the system.
- **Mint** (`{colors.surface-brand}` — #b4f5c8): frequency 14, all background. The surface-brand semantic tone — used as the AI-product badge, decorative sticky-note thumbnails, and soft section-tint surfaces. Wired as `--mint`, `--_primitives---color--mint`, and `--_semantics---color--surface-brand`. Same green family as jade but two luminance steps lighter.
- **Mint Soft** (`{colors.mint-soft}` — #d5f8e0): frequency 3, all background. The palest mint — used inside soft section backgrounds and tinted card hover states.
- **Spring** (`{colors.spring}` — #8fec7f): frequency 1, background. The brighter mint variant wired as `--spring` and `--_primitives---color--spring`. Reserved for the most saturated decorative sticky thumbnails.
- **Legacy Green** (`{colors.legacy-green}` — #007b3b): frequency 7 — 3 text, 1 background, 3 border. The deeper mural-green wired as `--mural-green`. Used inside text on jade backgrounds and as a stable accent in the brand-icon mark. The deepest stable point in the green hue family.

### Text

- **Ink** (`{colors.ink}` — #000000): frequency 1170 — 592 text, 6 background, 568 border, 4 shadow. The dominant ink color across the system. Display headlines below the hero, body paragraphs, hairline rules, and the hero canvas surface all use pure black. Wired as `--black`, `--_primitives---color--black`, `--_semantics---color--text-main`, and `--_semantics---color--surface-inverse`. Pure #000000 — the system does not soften to slate.
- **Ink Secondary** (`{colors.ink-secondary}` — #333333): frequency 4 — 2 text, 2 border. The body-paragraph secondary tone used inside testimonial cards and footnote rows.
- **Ink Muted** (`{colors.ink-muted}` — #626262): frequency 2, background. The uppercase-eyebrow text tone wired as `--_colors-v2---text--muted`. Used on small all-caps labels above section headings.
- **Ink Tertiary** (`{colors.ink-tertiary}` — #8c8c8c): frequency 4 — 2 text, 2 border. The dim-grey hero headline color — the single intentionally-muted text moment on the page. Wired as `--grey`, `--_primitives---color--grey-500`, and `--_semantics---color--text-muted`. The hero h1 renders in this tone, not in pure white, against the black canvas.

### Surface

- **Canvas** (`{colors.canvas}` — #ffffff): frequency 66 — 22 text, 19 background, 21 border. The white floor of the editorial sections below the hero. Pure white — no warm cream variant. Wired as `--white`, `--_primitives---color--white`, `--_semantics---color--surface-base`, and `--_semantics---color--text-inverse`. Used as text color on the black hero and as surface color on every editorial band below.
- **Surface Soft** (`{colors.surface-soft}` — #eeeeee): frequency 11, background. The light-grey card surface used inside the metric cells, product-tab strips, and soft section bands. Wired as `--natural` and `--lightgrey`. The system's only neutral mid-tone surface.

### Hairlines

- **Border Default** (`{colors.border-default}` — #dce1e5): frequency 20, all border. The primary border tone — card edges, input rules, secondary-button outlines. Wired as `--cool-grey`, `--_primitives---color--grey-100`, `--_colors-v2---border-color-light`, and `--_semantics---color--border-default`.
- **Border Hover** (`{colors.border-hover}` — #b8c1cc): the hover-state border tone wired as `--_primitives---color--grey-200` and `--_semantics---color--border-hover`. One step darker than border-default for hover lift.
- **Border Inverse** (`{colors.border-inverse}` — #4f5457): frequency 1, border. The dark-mode hairline used on the email input that sits inside the black hero footer. Wired as `--_primitives---color--grey-700`, `--_semantics---color--border-inverse`, and `--_colors-v2---border-color-dark`.

### Semantic

- **Shadow Blue** (`{colors.shadow-blue}` — #0b2946): frequency 2, all shadow. The elevation tint — wired into the elevated-shadow CSS as the deep blue-grey shadow ink, not pure black. The system uses a faint navy undertone in shadows to add chromatic depth.
- **Shadow Mid** (`{colors.shadow-mid}` — #2a5279): frequency 2, shadow. The lighter shadow tint paired with shadow-blue in the same `--elevated-shadow` CSS rule.

## Typography

### Font Families

The system runs two voices: **STK Bureau** (a transitional serif from Sharp Type) for every display tier and **ABC Social** (a contemporary sans from Dinamo) for every body, label, button, and nav surface. STK Bureau sits at 70-100px on display headlines with -2.8 to -4px tracking, always at weight 300. ABC Social handles 14-22px body and chrome at weights 300-600. Both faces are licensed; substitutes for STK Bureau include Lora at weight 300 and Spectral; substitute for ABC Social is Inter at weight 300.

The pairing — editorial serif at weight 300 plus contemporary sans body — is uncommon for the collaboration category, which typically commits fully to a single sans family. The serif-plus-sans split is closer to a magazine masthead than to a SaaS marketing page, and it carries the weight of the brand redesign argument.

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display-xl}` | 80px | 300 | 88px | -4px | Hero h1 ("Sync up. Speed up. Stand out.") |
| `{typography.display-lg}` | 70px | 300 | 70px | -2.8px | Section h2 ("Seeing is how™ Mural gets you to faster outcomes") |
| `{typography.display-md}` | 54px | 300 | 64.8px | 0 | Sub-display headings |
| `{typography.display-sm}` | 40px | 300 | 48px | 0 | h3 / tertiary section heads |
| `{typography.heading-md}` | 22px | 300 | 33px | 0 | Sub-section titles |
| `{typography.body-lg}` | 18px | 300 | 27px | 0 | Section lead paragraphs |
| `{typography.body-md}` | 16px | 300 | 28px | 0 | Default running text — body paragraphs, captions |
| `{typography.body-sm}` | 14px | 300 | 21px | 0 | Small labels, breadcrumbs, footnote rows |
| `{typography.label-md}` | 16px | 500 | 24px | 0 | Bolded inline labels — chip labels, AI badge text |
| `{typography.button-md}` | 16px | 500 | 24px | 0 | Primary CTA pill labels |
| `{typography.nav-link}` | 16px | 300 | 24px | 0 | Top-nav link labels |
| `{typography.uppercase-eyebrow}` | 14px | 300 | 21px | 2.45px | All-caps eyebrows above section headings |

### Principles

Display sits at weight 300 across the entire tier. The hero h1 at 80px / 300 with -4px tracking is the lightest display moment any major collaboration brand uses — heavier than Apple's old marketing serif (200) but a full step lighter than Stripe (400). Tracking is aggressively tight (-4px on hero) which pulls the serif glyphs into a tight cluster and reads as confident rather than fragile. The serif at weight 300 needs short display copy to sustain — three sentence-fragments on the hero ("Sync up. Speed up. Stand out.") rather than a long paragraph.

Body and labels stay at weight 300 by default; weight 500 is the system's emphasis tier used for chip and button labels. Weight 600 appears rarely (6 captured samples) for emphasis runs inside body paragraphs.

### Note on Font Substitutes

STK Bureau is proprietary. **Lora** at weight 300 is the closest open-source substitute — similar transitional-serif proportions and the same tight tracking transfers cleanly to 70-80px display sizes. **Spectral** at weight 300 is a slightly more contemporary alternative. ABC Social is also proprietary; **Inter** at weight 300 is the closest open-source substitute — the proportions transfer cleanly at 14-18px body sizes.

## Layout

### Spacing System

- **Base unit:** 8px (the dominant gap value; 4px appears as a tertiary value inside small chip padding).
- **Tokens:** `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.base}` 16px · `{spacing.md}` 24px · `{spacing.lg}` 32px · `{spacing.xl}` 48px · `{spacing.2xl}` 80px · `{spacing.3xl}` 128px.
- **Section padding (vertical):** 80px between editorial bands, 128px above the first product-mockup section.
- **Card internal padding:** 24-32px on large product cards (frequency 31 for 24px and 8 for 32px), 8x16px on the primary CTA pill (frequency 8).
- **Top-nav padding:** 16x80px — the unusually wide horizontal nav padding (wired as `--_semantics---space--navbar-padding: 5rem`) keeps the nav links spread across the full width.

### Grid & Container

- **Max content width:** 64rem (~1024px) on display headlines and feature cells, 90rem (~1440px) on the full-bleed product mockup and customer logo wall.
- **Hero block:** full-bleed black canvas with the headline pinned top-left rather than centered — Mural's hero composition aligns left at the page's editorial column gutter.
- **Editorial bands:** centered displays at ~1024px, with 2-up product mockup rows splitting into two equal columns.
- **Product card grid:** 2x2 grid of pastel-thumbnail product cards ("Research & development", "Sales", "Marketing", "Consulting") below the editorial heading.
- **Customer logo wall:** 5-column grid of monochrome customer logos sitting beneath the hero band.

### Rhythm

The page alternates between **black editorial** and **white product** rather than holding a single tempo. The hero is black editorial (jet-black floor, dim-grey serif headline, single jade pill). Section 2 is white product (white floor, ink-black serif, pastel sticky thumbnails). Section 3 is grey-soft metric tile band. Section 4 is white product again with the 2x2 product card grid. The rhythm itself is the brand argument: the dark hero signals the redesigned brand voice, the white editorial signals product depth.

## Elevation

The system has a **chromatic shadow** approach — depth comes from a faint navy-undertone shadow rather than pure black ink. The captured page has 2 occurrences of `{colors.shadow-blue}` (#0b2946) and 2 of `{colors.shadow-mid}` (#2a5279) wired into the `--elevated-shadow` CSS rule. The elevated shadow stacks two layers: `0 0 1px 0 rgba(11,41,70,.32)` and `0 24px 20px 0 rgba(42,82,121,.08)` — a 1px hairline plus a soft 24px drop, both tinted navy rather than pure black.

- **Flat (no shadow):** hero, top-nav, footer — every editorial band on the black canvas.
- **Hairline elevation:** product cards, metric tiles, and pastel sticky thumbnails sit with the dual-layer navy-tinted drop shadow.
- **Interactive shadow:** `--interactive-shadow-default` and `--interactive-shadow-hover` add separate hover-state shadows at `0 4px 4px rgba(0,0,0,.08)` resting and `0 12px 12px rgba(0,0,0,.12)` on hover. These do use neutral black, not navy — the interactive shadow is distinct from the structural elevated shadow.

## Shapes

The radius scale is **binary plus pill**:

- `{rounded.none}` 0px — full-bleed band fills and the page floor.
- `{rounded.sm}` 6px (frequency 34) — small chips, badges, dropdown items.
- `{rounded.md}` 8px (frequency 40) — inputs, secondary buttons, top-nav link hover states.
- `{rounded.lg}` 16px (frequency 5) — rare; intermediate card surfaces.
- `{rounded.xl}` 24px (frequency 14) — large product cards, metric tiles, sticky-thumbnail outer frames.
- `{rounded.pill}` 9999px — primary CTA pill (wired as `--_primitives---radius--radius-scaled: 999rem`).

The 16px middle radius is rare — the system jumps from 8px chips to 24px cards. The pill on primary CTAs plus 24px on cards plus 8px on chips is the brand's structural shape language; adding a 16px middle softens the contrast and weakens the binary hierarchy.

## Components

**`hero-section`** — Full-bleed jet-black `{colors.ink}` canvas, 128x32px padding, no border-radius. Holds the hero h1 in dim-grey `{colors.ink-tertiary}` at `{typography.display-xl}`, a single-paragraph lead in `{colors.canvas}` (white text on black), and the jade pill CTA centered beneath.

**`hero-heading`** — Dim-grey `{colors.ink-tertiary}` text on the black canvas, STK Bureau 80px / 300, -4px tracking. The system's loudest display moment — intentionally muted color contrast.

**`section-heading`** — Ink-black `{colors.ink}` text on the white canvas, STK Bureau 70px / 300, -2.8px tracking. The section h2 below the fold.

**`body-paragraph`** — Default ink-black text in `{typography.body-md}` (16px / 300 / 28px line-height) — the workhorse paragraph style.

**`body-paragraph-inverse`** — White `{colors.canvas}` body text inside the hero band, at `{typography.body-lg}` (18px / 300 / 27px line-height).

**`button-primary`** — The signature CTA. Jade `{colors.primary}` fill, ink-black text, `{rounded.pill}` full pill, 8x16px padding, 40px height, weight 500 label. "Start for free" is the canonical instance, sitting beneath the hero headline and inside every secondary product card.

**`top-nav`** — Black `{colors.ink}` surface, 64px height, 16x80px padding. Mural wordmark flush left in white, product links (Product / Solutions / Resources / Pricing) center-right, "Sign up free" jade CTA flush right.

**`nav-link`** — White text on the black nav surface in `{typography.nav-link}` (16px / 300), 8x16px padding with an 8px hover-radius pill that fills on hover with a darker black tint.

**`card-light`** — White `{colors.canvas}` surface, 1px `{colors.border-default}` border, `{rounded.xl}` 24px radius, 32px internal padding. The default content card on the white editorial bands — holds testimonials, metric blocks, and feature cells.

**`card-soft`** — Light-grey `{colors.surface-soft}` surface, no border, `{rounded.xl}` 24px radius, 32px padding. Used inside the metric tile band ("50%", "1.5×", "800") below the editorial heading.

**`card-product`** — White surface with thin border and pastel sticky-thumbnail decoration inside. The 2x2 product card grid ("Research & development", "Sales", "Marketing", "Consulting") uses this component, each card carrying a unique pastel sticky-note color inside.

**`sticky-thumbnail-mint`** — Mint `{colors.surface-brand}` fill, ink-black text, `{rounded.sm}` 6px radius, 8px padding. The mint variant of the sticky-note decoration thumbnails. The blush, jade, and yellow variants share the same dimensions with different `backgroundColor` tokens.

**`text-input-dark`** — Jet-black surface, white text, 1px `{colors.border-inverse}` border, `{rounded.md}` 8px radius, 8x16px padding, 36px height. The email input that sits inside the hero band's signup form — the only dark-mode form input on the page.

**`uppercase-eyebrow`** — Muted-grey `{colors.ink-muted}` text in `{typography.uppercase-eyebrow}` (14px / 300 / 2.45px tracking), all-caps. Used as the small section eyebrow above the editorial h2 — "How it works", "Our products", "Why use Mural".

## Do's and Don'ts

**Do** treat `{colors.primary}` (#00c27a) as a pill-CTA voltage, not a panel surface. The single move that defines this system is the jade pill on the black hero — using jade as a full background fill collapses the only chromatic moment into ordinary marketing chrome.

**Do** keep display weight at 300. The STK Bureau serif at weight 300 with tight negative tracking is the editorial gesture — heavier weights (500+) on the serif read as banking-luxe rather than collaboration-redesign.

**Do** use `{colors.ink-tertiary}` (#8c8c8c) — not pure white — for headline text on the black hero canvas. The dim-grey is the intentional muting; pure white reads as harsh and breaks the editorial gesture.

**Do** reserve the pastel sticky thumbnails (mint, blush, jade, yellow, lavender) for product-mockup decoration. Multiplying them into section backgrounds floods the page with cluster pastels and undoes the brand redesign's stripped-back move.

**Don't** swap the jet-black canvas for charcoal or near-black. Mural's hero uses pure #000000, not a slightly-blue near-black like Linear or Vercel — the editorial serif gesture depends on maximum-contrast figure-ground that softer canvases muddy.

**Don't** use `{colors.surface-brand}` (#b4f5c8) as a primary CTA fill. Mint is the surface-brand semantic tone for AI badges and sticky-note decoration; using it as a CTA fill collides with jade's primary-button role and weakens the green-family hierarchy.

**Don't** introduce a 16px middle radius tier. The system is binary — 6-8px small-step on chips and inputs, 24px on large product cards, plus a full pill on CTAs. Adding a 16px middle softens the contrast between body chrome and the warm pill voltage.

**Don't** add a pure-black shadow layer. The system uses navy-undertone shadows (`{colors.shadow-blue}` and `{colors.shadow-mid}`) inside `--elevated-shadow`; switching to neutral black for structural shadows breaks the warmth gradient against the jet-black hero.

## Known Gaps

- **Dark mode:** the captured marketing surface alternates black hero and white editorial bands; a coherent dark-mode variant of the editor product is not represented here.
- **Hover and focus states:** documented for `{component.nav-link}` hover pill only; the full state matrix (button hover, focus rings, active press, disabled tints) is not captured from the marketing surface.
- **Form input states:** `{component.text-input-dark}` carries the resting state inside the hero footer; error / validation / focus styling lives inside the product surfaces and is not exposed on the marketing site.
- **Motion:** the page uses scroll-triggered fade-ins on the product card grid, but the spec captures end-state values only. Easing curves and stagger timing live in the live Mural runtime.
- **Product surfaces:** this DESIGN.md captures the marketing site only. The Mural editor (`app.mural.co`) and the Luma facilitation suite carry richer token systems — canvas grid layouts, sticky-note color matrices, facilitation-mode chrome — that are not represented here.
- **Legacy purple:** the captured CSS exposes burgundy and violet color primitives but neither appears on the marketing surface. The earlier Mural brand voltage (a deep purple) has been entirely replaced by jade green in the current marketing system.
- **Pastel sticky-note semantic mapping:** the system exposes mint, blush, jade, yellow, lavender, sky, blush, flamingo, lemon, canary, grape primitives but the rule for which sticky-thumbnail color appears in which product card mockup is determined by content rather than by a captured token mapping.