---
title: "Mural design system"
variant: extended
source: https://www.mural.co/
captured_at: 2026-10-12
theme: light
industry: saas
generator: Design DNA (https://four.wiralomi.com/style/mural-co)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Mural · Design System

> Editorial clarity meets a vivid collaborative workspace

**Theme:** light · **Industry:** saas · **Source:** https://www.mural.co/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Mural pairs dramatic editorial typography with clean, spacious SaaS layouts. A vivid green CTA and immersive workspace imagery give the otherwise restrained page its energy.

## North star

Use oversized editorial serif headlines and generous white space, reserving green for clear actions and meaningful product details.

## Overview

The page contrasts an expansive black hero with a long sequence of white, open sections. Green is reserved for primary actions and selected interface details, while fine gray borders quietly define cards and controls. Large, lightly weighted serif headlines create an editorial character; compact sans-serif body copy and navigation keep product information practical and easy to scan. The hero anchors its copy and email form on the left, balancing them with a large collaborative-workspace composition. Farther down, broad whitespace separates customer proof, outcome metrics, audience cards, product capabilities, and testimonials. Photography and interface imagery show teams working together and Mural's canvas in use, rather than relying on decorative illustration. The visual rhythm comes from alternating text and media, varied card groupings, and ample vertical breathing room—not colored section bands.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Dominant canvas and light section background; also used for inverse text over the black hero. |
| Canvas Ink | `#000000` | `--color-canvas-ink` | brand | Hero surface, main text, navigation text, and dark card treatment. |
| Mural Green | `#00c27a` | `--color-mural-green` | accent | Primary signup and conversion buttons; a small, high-contrast accent against white or black. |
| Quiet Divider | `#dce1e5` | `--color-quiet-divider` | semantic | Subtle card, navigation, and link borders that define edges without heavy framing. |
| Midtone Gray | `#808080` | `--color-midtone-gray` | neutral | Occasional muted link and text treatment; not a dominant brand surface. |
| Soft Panel | `#f3f3f3` | `--color-soft-panel` | surface | Light link and control background, including subdued utility surfaces. |
| Pale Interface | `#eeeeee` | `--color-pale-interface` | surface | Minor light neutral detail in interface areas, not a defining section color. |
| Editorial Gray | `#8c8c8c` | `--color-editorial-gray` | neutral | Occasional subdued heading and body text, including secondary headline emphasis. |
| Slate Control | `#4f5457` | `--color-slate-control` | semantic | Input outline detail; use only for form-control edging. |
| Mint Highlight | `#b4f5c8` | `--color-mint-highlight` | accent | Minor pale-green interface and navigation accent; secondary to the saturated CTA green. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#000000` (Canvas Ink) · `--color-text` → `#000000` (Canvas Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-border` → `#dce1e5` (Quiet Divider) · `--color-accent` → `#00c27a` (Mural Green) · `--color-accent-2` → `#b4f5c8` (Mint Highlight) · `--color-on-accent` → `#000000` (Canvas Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#00c27a` | `#ffffff` | 2.33:1 | fail |
| `#00c27a` | `#000000` | 9:1 | AAA |

### Gradients

- `linear-gradient(rgb(255, 255, 255), rgba(255, 255, 255, 0))`
- `linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| ABC Social | `--font-body` | webfont | 300, 500 | Body copy, navigation, labels, buttons, and compact utility text. | Inter |
| STK Bureau | `--font-display` | webfont | 300 | Display and section headlines. | Instrument Serif |

- **ABC Social:** Light, restrained sans-serif; use compact uppercase eyebrow labels with letter spacing and clear, practical body copy.
- **STK Bureau:** Light editorial serif with generous scale; tight negative tracking on major headings and natural sentence case.

### Type scale — Augmented Fourth (ratio ≈ 1.409, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 100px | 300 | 1 | 0 | — | STK Bureau | Oversized editorial statement or hero headline. |
| h1 | 80px | 300 | 1.1 | -0.05em | — | STK Bureau | Primary hero heading, with tight tracking and a light serif face. |
| h2 | 70px | 300 | 1 | -0.04em | — | STK Bureau | Major section titles, including customer and product sections. |
| h3 | 54px | 300 | 1.2 | 0 | — | STK Bureau | Secondary feature and audience-card headings. |
| h4 | 40px | 300 | 1.2 | -0.04em | — | STK Bureau | Smaller card or supporting section headlines. |
| body | 18px | 300 | 1.5 | 0 | — | ABC Social | Paragraphs, feature descriptions, and supporting product copy. |
| caption | 16px | 300 | 1.5 | 0 | — | ABC Social | Compact supporting details and secondary descriptions. |
| nav | 16px | 300 | 1 | 0 | — | ABC Social | Header navigation and compact account actions. |
| link | 11px | 300 | 1 | 0 | — | ABC Social | Small utility links and legal or card-level destinations. |
| eyebrow | 14px | 300 | 1.5 | 0.175em | uppercase | ABC Social | Spaced uppercase section labels above editorial headings. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 4, 6, 8, 10, 12, 16, 23, 24, 28, 32, 39, 40, 41, 42, 44, 48 px.
- Section rhythm 48px · element gap 24px · card padding 56px · max content width 1360px.

Use a centered, wide page canvas with a measured maximum width of 1360px and a comfortable density. The hero is a dark, near-full-bleed two-column composition, while the remaining sections return to white and alternate text with product or team imagery. Align most content to the left; center the customer-testimonial heading. Organize outcome metrics and audience content into clear columns or cards. Section spacing is generous, with a measured 48px section gap and 24px element gap as useful references; preserve substantial open space around product capability panels.

## Shape & elevation

- Radius: button `8px` · input `8px` · card `24px` · nav `8px` · link `8px` · xs `6px` · sm `7px` · md `8px` · lg `16px` · xl `24px`
- Shadow `md` (nav, card): `rgba(11, 41, 70, 0.32) 0px 0px 1px 0px, rgba(42, 82, 121, 0.08) 0px 24px 20px 0px`
- Shadow `sm` (card): `rgba(0, 0, 0, 0.08) 0px 5.53px 7.38px 0px`
- Motion: standard transition `0.3s cubic-bezier(0.23, 1, 0.32, 1)` on interactive elements.

Most content sits on flat white surfaces, with thin #dce1e5 borders defining cards and controls. Cards use generously rounded corners, measured at 24px, while buttons and inputs use 8px corners. Keep shadows restrained; reserve soft depth for floating navigation or layered workspace elements. Let hero imagery overlap the dark canvas rather than adding extra decorative panels.

## Imagery

Prioritize genuine-looking team photography and interface-led workspace compositions. The hero places a large, bright collaborative canvas across the lower area of a black stage, with floating UI panels overlapping its edge. Further down, use rectangular team photos in staggered audience cards and product visuals that support feature stories. Keep imagery crisp and colorful enough to distinguish content, but let white surroundings and restrained framing carry the page.

## Components

### Floating navigation

A white, rounded horizontal bar sits over the dark hero, with logo, compact ABC Social links, account actions, and a green signup CTA.

### Hero signup form

Left-aligned editorial headline and short copy lead into a dark email field with a #4f5457 border and a #00c27a submit action.

### Workspace showcase

A bright product canvas overlaps the black hero, accompanied by floating collaboration and team-selection interface panels.

### Outcome metrics

Three customer proof columns pair compact logos with large serif figures, brief explanations, and small links.

### Audience cards

Alternating team photography and short role descriptions form staggered, rounded cards with restrained border treatment.

### Capability links

Product feature panels combine a serif heading, concise sans-serif description, and #00c27a action button.

### Customer testimonial

A large lightly bordered, rounded quote card centers customer voice content beneath a centered serif heading.

### Measured component styles

- **Primary button** (“Sign up free”): background #00c27a · text #000000 · radius 8px · padding 0px · 300 16px ABC Social
- **Secondary button** (“Map your sales funnel now”): background #000000 · text #000000 · border 2px solid #000000 · radius 8px · padding 0px · 300 16px ABC Social
- **Link** (“Real-time collaborative workspaces”): background #f3f3f3 · text #000000 · radius 8px · padding 23px 44.5px · 300 16px ABC Social
- **Input**: background #000000 · text #ffffff · border 2px solid #4f5457 · radius 8px · padding 8px 16px · 300 16px ABC Social
- **Card** (“"We went from collaborating on whiteboar”): background #fbfbfb · text #000000 · border 1px solid #dce1e5 · radius 24px · padding 55px 57px · 300 16px ABC Social
- **Navigation item** (“Product Solutions Services Enterprise Re”): transparent background · text #000000 · radius 0px · padding 0px · 300 16px ABC Social

## Do

- Use black for a distinct hero stage, then return to white content surfaces.
- Set major headlines in a light editorial serif.
- Keep body copy and navigation in a clean sans-serif.
- Use #00c27a for primary actions, not broad decorative fills.
- Frame cards with restrained #dce1e5 borders.
- Build visual interest through product imagery and generous whitespace.

## Don't

- Do not turn the whole page into a dark theme.
- Do not introduce unmeasured brand colors.
- Do not make every heading sans-serif or heavy.
- Do not fill empty space with decorative gradients or ornaments.
- Do not use thick borders or conspicuous shadows on every card.
- Do not crowd the page with dense copy or tightly packed sections.

## Agent prompt

Create a new Mural-style SaaS page using a wide, spacious white canvas and a strong black hero stage. Use #ffffff for the main surface, #000000 for the hero and primary text, #00c27a for key actions, and #dce1e5 for quiet borders; keep #b4f5c8 as a minor interface accent. Set large, light editorial headlines in a serif similar to Instrument Serif, paired with an Inter-like sans-serif for body copy, navigation, labels, and buttons. Arrange hero copy and a conversion form beside a large collaborative product visual, using overlapping interface panels sparingly. Continue with open, left-aligned sections, alternating text and media, customer proof, and rounded cards. Keep imagery focused on real collaboration and product use. Use subtle elevation, generous whitespace, and measured corner styles rather than decorative effects.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Black two-column hero with left-side headline and signup form; large workspace interface overlaps the lower area. | Email signup, Primary signup CTA, Product demonstration | Dark canvas, Floating white navigation, Overlapping workspace panels |
| 2 | logo-cloud | A quiet horizontal customer-logo row followed by a two-column statement and visual area. | Customer credibility, Product benefit introduction | Small uppercase eyebrow, Sparse logo row, Open white space |
| 3 | stats | Editorial heading and supporting copy above three evenly spaced metric columns. | Customer proof, Metric scanning, Case-study links | Large serif figures, Small customer marks, Fine column dividers |
| 4 | feature-split | Single-row editorial headline on the left, short supporting copy and link on the right. | Feature discovery, Learn-more CTA | Uppercase eyebrow, Large serif headline, Green action |
| 5 | product-showcase | Standalone, wide visual area with minimal surrounding copy. | Visual product exploration | Large image region, Open white surround |
| 6 | feature-split | Large multi-line headline and supporting copy with an action in a spacious single-column band. | Audience orientation, Demo CTA | Small eyebrow, Serif headline, Open layout |
| 7 | feature-grid | Staggered two-column sequence combining role descriptions with collaborative team photography. | Audience browsing, Role-specific links | Rounded image cards, Thin borders, Short text blocks |
| 8 | category-nav | A short centered section heading above a horizontal row of capability categories. | Capability navigation, Jump-to-section browsing | Centered serif heading, Pale category tabs, Compact labels |
| 9 | feature-grid | Four-column capability sequence with spacious feature panels and alternating product-visual areas. | Feature exploration, Capability-level CTAs | Serif feature headings, Green action buttons, Open image regions |
| 10 | feature-split | Two-column feature card with black editorial copy panel beside team photography. | Related product discovery, Innovation CTA | Black copy surface, Rounded outer card, Bright green graphic accents |
| 11 | testimonials | Centered section title above a wide quote card with carousel controls at the sides. | Customer testimonial, Carousel navigation | Centered serif heading, Rounded bordered quote card, Green quote mark |

## Source CSS custom properties (selected)

```css
--_typography-old---text-size--nl: 1rem;
--_spacing-old---spacing--none: 0rem;
--_spacing-old---spacing--tiny: .125rem;
--_spacing-old---spacing--2xs: .25rem;
--_spacing-old---spacing--xs: .5rem;
--_spacing-old---spacing--sm: 1rem;
--_spacing-old---spacing--nl: 1.5rem;
--_spacing-old---spacing--md: 2rem;
--_spacing-old---spacing--lg: 3rem;
--_spacing-old---spacing--xl: 4rem;
--_spacing-old---spacing--2xl: 5rem;
--_spacing-old---spacing--hg: 6rem;
--_spacing-old---spacing--xh: 8rem;
--_spacing-old---spacing--2xh: 12rem;
--_typography-old---text-size--md: 1.25rem;
--_typography-old---text-size--hg: 2.5rem;
--_typography-old---text-size--lg: 1.5rem;
--_typography-old---text-size--sm: .875rem;
--_typography-old---text-size--xh: 4rem;
--_typography-old---text-size--2xh: 5rem;
--_typography-old---text-size--2xl: 2rem;
--_typography-old---text-size--xl: 1.75rem;
--_typography-old---text-size--gi: 6rem;
--_typography-old---text-size--xs: .75rem;
--_utilities---radius--md: .5rem;
--_semantics---color--border-default: #dce1e5;
--_colors-v2---border-color-light: #dce1e5;
--_utilities---radius--lg: 1rem;
--_semantics---color--surface-inverse: black;
--_semantics---color--text-inverse: white;
--_primitives---space--space-1rem: 1rem;
--_utilities---radius--xl: 1.5rem;
--_utilities---radius--sm: .25rem;
--_primitives---space--space-2rem: 2rem;
--_utilities---radius--2xl: 2rem;
--_colors-v2---border-color-light-hover: #b8c1cc;
--_primitives---text--size-18: 1.125rem;
--_semantics---space--spacer-0-25rem: .25rem;
--_semantics---space--spacer-0-5rem: .5rem;
--_semantics---space--spacer-0-75rem: .75rem;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/mural-co