Mural Design System

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

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.