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

# Elementor · Design System

> Quiet monochrome, expansive creative canvas

**Theme:** light · **Industry:** saas · **Source:** https://elementor.com/ · **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._

Elementor pairs an expansive white canvas with bold black typography, restrained neutral section bands, and immersive product imagery. Spacious editorial layouts and direct, high-contrast calls to action keep the builder’s tools and creative outcomes at the center.

## North star

Keep the interface monochrome and spacious, letting bold Roobert typography and vivid product media carry the story.

## Overview

The visual strategy is built around a predominantly white canvas, with black and near-black typography providing clear hierarchy and occasional light-gray bands separating feature content. A black primary CTA with white text is the strongest recurring interface accent; outlined emphasis is otherwise restrained. Roobert is used consistently across navigation, headings, body copy, and buttons. Headings are bold and compact, while body text remains regular and easy to scan. The page alternates broad, quiet stretches of white space with concentrated product demonstrations, video, and feature cards, creating an editorial scroll rhythm rather than a dense dashboard feel. Hero and showcase media provide the visual color and texture, including human photography and website-editor previews; pink or other hues inside those visuals should not be mistaken for the interface palette. The layout uses centered and left-aligned compositions, with a measured maximum content width and generous section spacing. Fine borders and subtle navigation elevation are secondary to flat surfaces.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Canvas White | `#ffffff` | `--color-canvas-white` | surface | Dominant page canvas and light card surface; also used for text on black sections and dark CTA contrast. |
| Charcoal Ink | `#212121` | `--color-charcoal-ink` | neutral | Near-black navigation and text tone, providing softer contrast than pure black. |
| Mist Gray | `#f6f6f6` | `--color-mist-gray` | surface | Pale gray background for feature bands and selected content sections. |
| Pure Ink | `#000000` | `--color-pure-ink` | brand | Primary CTA fill, strong text, and full-width dark sections; pair with white for contrast. |
| Hairline Gray | `#d1d1d1` | `--color-hairline-gray` | semantic | Subtle navigation divider and fine interface border. |
| Muted Gray | `#a6a6a6` | `--color-muted-gray` | neutral | Minor muted navigation text; measured sparingly and not a defining brand color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Canvas White) · `--color-surface` → `#f6f6f6` (Mist Gray) · `--color-surface-2` → `#000000` (Pure Ink) · `--color-text` → `#000000` (Pure Ink) · `--color-text-muted` → `#212121` (Charcoal Ink) · `--color-text-subtle` → `#ffffff` (Canvas White) · `--color-border` → `#d1d1d1` (Hairline Gray)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f6f6f6` | 19.43:1 | AAA |
| `#212121` | `#ffffff` | 16.1:1 | AAA |
| `#212121` | `#f6f6f6` | 14.9:1 | AAA |
| `#212121` | `#000000` | 1.3:1 | fail |
| `#ffffff` | `#f6f6f6` | 1.08:1 | fail |
| `#ffffff` | `#000000` | 21:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Roobert | `--font-body` | webfont | 400, 600, 700, 500 | Site-wide typeface for navigation, headings, body copy, links, and buttons. | Inter |

- **Roobert:** Use measured regular, medium, semibold, and bold weights. Headings are large and compact; keep casing natural and tracking subtly tight where measured.

### Type scale — Perfect Fourth (ratio ≈ 1.345, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 88px | 600 | 1.1 | -0.01em | — | Roobert | Oversized campaign or hero headline. |
| h1 | 64px | 600 | 1.1 | -0.01em | — | Roobert | Primary page headline and major statement. |
| h2 | 56px | 600 | 1.1 | -0.01em | — | Roobert | Section headings introducing core product stories. |
| h3 | 40px | 600 | 1.3 | 0 | — | Roobert | Feature and editorial subheadings. |
| h4 | 36px | 600 | 1.4 | -0.02em | — | Roobert | Smaller card or supporting section headings. |
| body | 20px | 400 | 1.4 | 0 | — | Roobert | Explanatory paragraphs beneath feature headings. |
| caption | 18px | 500 | 1.4 | 0 | — | Roobert | Supporting labels and compact media descriptions. |
| button | 18px | 500 | 1.4 | 0 | — | Roobert | Primary and secondary CTA labels. |
| nav | 16px | 700 | normal | 0 | — | Roobert | Top-level navigation labels. |
| link | 18px | 500 | 1.4 | 0 | — | Roobert | Inline and standalone action links. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 2, 4, 9, 10, 12, 16, 24, 32, 40, 48, 64, 88, 96, 112 px.
- Section rhythm 96px · element gap 10px · card padding 40px · max content width 1248px.

Use a spacious editorial page with content contained within the measured 1248px maximum width. Sections alternate centered statements, left-aligned feature introductions, media-led showcases, and card rows; use a measured 96px section rhythm and generous internal gaps rather than filling every viewport. The measured spacing system is based on an 8px unit, with a spacious density. Keep headings aligned to their content column, reserving centered alignment for selected hero messaging. Large blank intervals and quiet white sections are intentional parts of the composition.

## Shape & elevation

- Radius: button `8px` · card `16px` · media `16px` · nav `8px` · link `8px` · xs `8px` · sm `12px` · md `16px`
- Shadow `md` (nav): `rgba(0, 0, 0, 0.05) 0px 0px 15.008px 3.008px`
- Motion: standard transition `0.3s ease` on interactive elements.

Favor flat surfaces and clean transitions between white, pale gray, and black section bands. The measured navigation has a restrained shadow; do not add broad, dramatic elevation to content. Fine gray dividers are appropriate for navigation, while cards rely more on white space and rounded corners than visible outlines.

## Imagery

Use immersive video or photography for large product-story moments, including people using devices and dark, atmospheric performance imagery. Pair these with crisp website-editor previews and interface mockups in feature showcases. Frame media as supporting proof of the product, not as a source of interface colors: pinks, oranges, and other hues in mockups belong to the pictured websites. Cards and media have rounded corners.

## Components

### Primary CTA

Black button with white Roobert medium text, measured 18px, an 8px radius, and horizontal padding of 24px.

### Inverse CTA

White button with black text for use against dark media or black section backgrounds; retain the measured 8px radius.

### Navigation

Compact horizontal header with Roobert navigation labels, a subtle gray divider, and restrained shadow; measured nav text is 16px bold.

### Feature card

White content card with a measured 16px radius, generous measured padding, concise heading, and supporting description.

### Feature media

Rounded video, image, or editor preview placed beside or beneath a clear product-oriented heading.

### Dark section band

Full-width black background with white heading and supporting content; use a white CTA where appropriate.

### Measured component styles

- **Primary button** (“Get started”): background #000000 · text #ffffff · radius 8px · padding 0px 24px · 500 18px Roobert
- **Secondary button** (“Get started”): background #ffffff · text #000000 · radius 8px · padding 0px 24px · 500 18px Roobert
- **Link** (“Get started”): transparent background · text #000000 · radius 8px · padding 0px 24px · 500 18px Roobert
- **Card** (“Professional delivery Build high-perform”): background #ffffff · text #000000 · radius 16px · padding 48px 32px · 400 16px Times New Roman
- **Navigation item** (“Products Agency Enterprise Pricing App B”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Times New Roman

## Do

- Use #ffffff as the dominant canvas.
- Set core text in #000000 or #212121.
- Use #f6f6f6 to distinguish selected feature bands.
- Make primary actions black with white labels.
- Let product media provide the page’s visual variety.
- Preserve generous whitespace between story sections.

## Don't

- Do not turn colors inside media mockups into interface tokens.
- Do not fill quiet sections with extra cards or decoration.
- Do not use gradients as a defining interface background.
- Do not replace the measured palette with bright CTA colors.
- Do not add heavy borders or dramatic shadows to every card.
- Do not compress the editorial section rhythm into a dense grid.

## Agent prompt

Build a new Elementor-style page as a spacious editorial SaaS experience. Use Canvas White (#ffffff) for the main canvas, Pure Ink (#000000) for headings and primary CTA fills, Charcoal Ink (#212121) for softer text, and Mist Gray (#f6f6f6) for selected section bands. Use Roobert throughout, or Inter as the closest free substitute; keep headings bold and prominent, body copy regular, and CTA labels medium. Alternate concise text introductions with product videos, editor previews, and rounded feature cards. Use the measured 1248px maximum content width, 8px spacing base, and spacious section rhythm. Keep the navigation restrained, with a fine Hairline Gray (#d1d1d1) divider and only subtle elevation. Treat colors in photographs and mockups as media, not interface tokens.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered hero messaging over immersive media, with a concise supporting line and CTA. | Primary get-started action, Product promise before detail | High-contrast heading, Video background, White CTA |
| 2 | stats | Three compact proof points lead into a left-aligned platform statement and product preview. | Credibility through metrics, CTA near product claim | Large metric labels, Website preview, Black CTA |
| 3 | feature-split | Left-aligned heading and copy beside a wide video or visual panel. | Context before product detail, Split text-media story | Two-column composition, Soft media treatment |
| 4 | other | A short section-heading band introduces the feature area. | Feature group introduction | Light-gray background, Left-aligned heading |
| 5 | feature-grid | Multiple feature cards with interface imagery, headings, and brief descriptions. | Scan feature benefits, Compare capabilities | Rounded product previews, Compact card copy, Light-gray section |
| 6 | video | Full-width dark visual band centered on an immersive performance demonstration. | Visual proof of performance | Black section background, White heading, Layered media |
| 7 | feature-grid | Dark section with a left-aligned heading, CTA, and three service columns. | Explore related services, Get-started action | Black background, White text, Three-column content |
| 8 | other | A narrow charcoal band separates the dark product section from the light story below. | Visual section transition | Charcoal fill, Minimal content |
| 9 | testimonials | Light testimonial area with a customer quote and attribution. | Customer proof, Named attribution | White quote surface, Large editorial text |
| 10 | feature-grid | Pale-gray content band with a section heading and three benefit cards. | Agency-focused benefits, Scan supporting proof points | Light-gray background, White cards, Rounded surfaces |

## Source CSS custom properties (selected)

```css
--wp--preset--color--black: #000000;
--wp--preset--color--cyan-bluish-gray: #abb8c3;
--wp--preset--color--white: #ffffff;
--wp--preset--color--pale-pink: #f78da7;
--wp--preset--color--vivid-red: #cf2e2e;
--wp--preset--color--luminous-vivid-orange: #ff6900;
--wp--preset--color--luminous-vivid-amber: #fcb900;
--wp--preset--color--light-green-cyan: #7bdcb5;
--wp--preset--color--vivid-green-cyan: #00d084;
--wp--preset--color--pale-cyan-blue: #8ed1fc;
--wp--preset--color--vivid-cyan-blue: #0693e3;
--wp--preset--color--vivid-purple: #9b51e0;
--wp--preset--font-size--small: 13px;
--wp--preset--font-size--medium: 20px;
--wp--preset--font-size--large: 36px;
--wp--preset--font-size--x-large: 42px;
--wp--preset--spacing--20: 0.44rem;
--wp--preset--spacing--30: 0.67rem;
--wp--preset--spacing--40: 1rem;
--wp--preset--spacing--50: 1.5rem;
--wp--preset--spacing--60: 2.25rem;
--wp--preset--spacing--70: 3.38rem;
--wp--preset--spacing--80: 5.06rem;
--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);
--wp--preset--shadow--crisp: 6px 6px 0px rgb(0, 0, 0);
--wp--style--block-gap: 24px;
--swiper-theme-color: #007aff;
```

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