Mural Design System

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.