Mural

Mural, dark-hero, monochromatic

Preview image. Unlock full-res

Blackboard flipping to whiteboard — same hand, same authority, opposite ground.

Palette
#00c27a
#b4f5c8
#00843f
#d5f8e0
#007b3b
#000000
#ffffff
#f3f3f3
#eeeeee
#dce1e5
#8c8c8c
#808080

Mural hits like a blackboard in a bright studio — the hero opens pitch-black with oversized serif-adjacent display type bleeding edge to edge, then the page snaps into clinical white with the same confidence. The dual-font system is the signature move: STK Bureau (weight 300 only) handles all display and headline work with tight negative tracking (-0.04 to -0.05em), while ABC Social runs everything from captions to body in a humanist groove. Electric jade (#00c27a) is the single chromatic anchor — appearing on CTAs and key links against both black and white backgrounds, creating identical urgency in both contexts. Cards live in a borderless, shadow-free world where containment comes from background-color switches (#eeeeee, #ffffff) rather than depth. The Mural logomark's rainbow-spectrum identity is carefully quarantined from the page palette — the product itself runs monochromatic with jade as its only relief valve. Use STK Bureau weight 300 exclusively for all display and hero headlines at -0.04em to -0.05em tracking. Never use it at body or UI sizes. Apply #00c27a only to primary CTA buttons (with 1px #000000 border) and active link states. Do not use it for decorative color blocks or illustrations. Use 26px border-radius for all pill badges and 8px for all buttons and inputs. Keep 24px for large content cards only. Open letter-spacing to +0.175em only for uppercase eyebrow labels in ABC Social at 11-12px. All other sizes track at -0.02em or default. Establish section separation through background-color switching (#000000 → #ffffff → #eeeeee) rather than dividers or shadows between sections. Use the blue-tinted shadow (rgba(11,41,70,0.32) 0px 0px 1px 0px, rgba(42,82,121,0.08) 0px 24px 20px 0px) exclusively for overlaying floating elements like the chat widget. Keep photography on cards full-bleed to the card edge with no internal padding — let the 24px card radius clip the image corners. Do not use STK Bureau for body copy, UI labels, or anything below 32px — the tight tracking at small sizes becomes illegible. Do not add colored backgrounds using the extended CSS token palette (--lavender, --flamingo, --mural-blue, etc.) on any marketing page — those are reserved for in-canvas product contexts only. Do not use shadows for card grouping or section organization — use background-color differences instead. Shadows are only for floating overlays. Do not apply #00c27a to text on white backgrounds as a body link color — it only appears as a button background or hover state on black backgrounds. Do not use border-radius values other than 8px, 16px, 24px, or 26px. In particular, avoid pill shapes (9999px) on buttons — Mural uses 8px squared buttons, not pill buttons. Do not mix STK Bureau with any weight other than 300 — the light-weight display type is the deliberate choice; heavier weights destroy the contrast with the dense tracking. Do not use the #dce1e5 Cool Grey as text — it is a border and divider color only.

More like this