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

# Wix · Design System

> Airy, confident design for making anything online

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

Wix pairs expansive white space and oversized black typography with a restrained blue call to action. Soft, pale gradients and vivid website previews add colour while keeping the overall page clean and product-led.

## North star

Keep the page predominantly white and spacious, using oversized black typography, restrained blue actions, and colorful product previews as the focal contrast.

## Overview

The page is anchored by a white canvas, black text, and a compact top navigation that lets the oversized, centered hero headline take focus. Wix Madefor Display gives headlines a light, open character; Wix Madefor Text handles supporting copy and navigation with a restrained, readable rhythm. Blue is reserved for the prominent primary CTA and selected interface details, while most secondary CTAs appear as black pills. Pale green, blue, and warm cream gradients soften large transitions without replacing the white foundation. Product imagery is presented as layered website previews, devices, and interface mockups; their brighter colors belong to the showcased examples, not the core brand palette. Below the hero, alternating editorial text-and-image arrangements, sparse feature rows, and broad section gaps create a spacious scroll. Thin gray rules organize functional lists, and rounded controls contrast with otherwise flat, border-light sections.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Primary page canvas, navigation background, and the clean ground behind content and product previews. |
| Wix Ink | `#000000` | `--color-wix-ink` | brand | Headlines, navigation, body text, links, and black pill-shaped secondary CTAs. |
| Mint Wash | `#bdead5` | `--color-mint-wash` | surface | Soft green surface tint and atmospheric wash around selected product and feature areas. |
| Quiet Rule | `#c6c6c6` | `--color-quiet-rule` | neutral | Subtle dividers and fine interface boundaries, including list-like sections. |
| Sage Mist | `#d2e4c7` | `--color-sage-mist` | surface | Pale green section surface tint; use as a soft backdrop rather than a strong brand block. |
| Builder Blue | `#166aea` | `--color-builder-blue` | accent | Primary blue CTA fill and occasional interface emphasis against the white canvas. |
| Warm Graphite | `#514b3d` | `--color-warm-graphite` | semantic | Muted supporting copy where softer contrast is needed than the black headline text. |
| Sky Tint | `#dcf0ff` | `--color-sky-tint` | surface | Pale blue gradient stop behind product demonstrations and softly tinted sections. |
| Soft Gray | `#f0f0f0` | `--color-soft-gray` | surface | Light neutral section surface and subdued interface background. |
| Cream Glow | `#fefef0` | `--color-cream-glow` | surface | Warm cream gradient stop in atmospheric hero and section backgrounds. |
| Ice Blue | `#e6f7ff` | `--color-ice-blue` | surface | Light blue gradient endpoint behind content; supports a gentle shift from white. |
| Bright Mint | `#a8f8cf` | `--color-bright-mint` | accent | Small mint surface accent and occasional gradient color, not a dominant CTA color. |
| Nav Divider | `#eaeaea` | `--color-nav-divider` | neutral | Faint navigation-area divider detail. |
| Lilac Gray | `#d2ddf3` | `--color-lilac-gray` | surface | Subtle cool-toned interface or border detail, secondary to the white and blue palette. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#bdead5` (Mint Wash) · `--color-surface-2` → `#d2e4c7` (Sage Mist) · `--color-surface-3` → `#f0f0f0` (Soft Gray) · `--color-surface-4` → `#a8f8cf` (Bright Mint) · `--color-text` → `#000000` (Wix Ink) · `--color-text-muted` → `#514b3d` (Warm Graphite) · `--color-border` → `#c6c6c6` (Quiet Rule) · `--color-accent` → `#166aea` (Builder Blue) · `--color-accent-2` → `#a8f8cf` (Bright Mint) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#bdead5` | 15.89:1 | AAA |
| `#000000` | `#d2e4c7` | 15.66:1 | AAA |
| `#000000` | `#f0f0f0` | 18.43:1 | AAA |
| `#514b3d` | `#ffffff` | 8.66:1 | AAA |
| `#514b3d` | `#bdead5` | 6.56:1 | AA |
| `#514b3d` | `#d2e4c7` | 6.46:1 | AA |
| `#514b3d` | `#f0f0f0` | 7.6:1 | AAA |
| `#166aea` | `#ffffff` | 4.9:1 | AA |
| `#166aea` | `#bdead5` | 3.71:1 | AA-large |

### Gradients

- `linear-gradient(rgb(254, 254, 249) 0%, rgb(254, 254, 240) 20%, rgba(253, 255, 203, 0.333) 65%, rgb(254, 254, 240) 90%, rgb(254, 254, 249) 100%)`
- `linear-gradient(rgb(255, 255, 255) 38.456%, rgb(230, 247, 255) 100%)`
- `linear-gradient(0deg, rgba(253, 254, 215, 0) 0%, rgba(255, 255, 255, 0) 73.5471%)`
- `linear-gradient(0deg, rgb(220, 240, 255) 2.14501%, rgb(230, 255, 203) 42.7495%, rgb(239, 255, 229) 61.215%, rgb(255, 255, 255) 81.3151%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| wix-madefor-text-v2 | `--font-body` | webfont | 400, 500 | Body copy, supporting text, and most measured links. | Inter |
| wix-madefor-display-v2 | `--font-display` | webfont | 400, 500 | Display headlines, section headings, and captions. | DM Sans |
| Madefor-Display | `--font-madefor-display` | webfont | 400 | Navigation labels and primary CTA text. | DM Sans |

- **wix-madefor-text-v2:** Use regular weight for compact supporting copy; keep case natural and tracking neutral.
- **wix-madefor-display-v2:** Large headlines are regular-weight, open, and minimally tracked; avoid heavy, condensed, or all-caps styling.
- **Madefor-Display:** Use regular weight with natural casing and clear, compact UI presentation.

### Type scale — Augmented Fourth (ratio ≈ 1.388, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 82.5px | 400 | 1.2 | -0.02em | — | wix-madefor-display-v2 | Oversized hero message and prominent brand statements. |
| h1 | 72px | 400 | 1 | 0 | — | wix-madefor-display-v2 | Primary hero headline. |
| h2 | 54px | 400 | 1.1 | -0.02em | — | wix-madefor-display-v2 | Major section headings and feature introductions. |
| h3 | 48px | 400 | 1.14 | -0.01em | — | wix-madefor-display-v2 | Secondary feature and product-section headings. |
| h4 | 21px | 500 | 1.14 | -0.01em | — | wix-madefor-display-v2 | Compact feature titles and emphasized subheads. |
| body | 16px | 400 | 1.44 | 0 | — | wix-madefor-text-v2 | Supporting descriptions and explanatory copy. |
| caption | 12px | 400 | 1.25 | 0 | — | wix-madefor-display-v2 | Small notes, labels, and image captions. |
| nav | 16px | 400 | normal | 0 | — | Madefor-Display | Top navigation links and menu labels. |
| link | 7.5px | 400 | 1.6 | 0 | — | wix-madefor-text-v2 | Inline text links within supporting content. |

## Spacing & layout

- Base unit **1px**, density **spacious**.
- Scale (most used values): 1, 2, 5, 6, 7, 8, 10, 12, 13, 15, 18, 20, 21, 30, 38, 45 px.
- Section rhythm 98px · element gap 15px · card padding — · max content width —.

Use a wide desktop composition with a compact full-width navigation and a centered hero. The hero headline and CTA sit on the central axis, with a large product-preview visual below. Continue with broad, spacious section bands and editorial two-column text-and-image layouts; alternate alignments where useful. Keep copy blocks narrow beside large media, and use generous vertical separation rather than dense card grids. The measured page is spacious; no reliable maximum content width was captured, so match the screenshot proportions instead of inventing one.

## Shape & elevation

- Radius: button `9999px` · input `9999px` · media `15px` · xs `7px` · sm `9px` · md `10px` · lg `11px` · xl `14px` · 2xl `15px` · pill `9999px`
- Shadow `inset` (other): `rgb(255, 255, 255) -2.51px -2.51px 2.51px 0px inset, rgb(252, 252, 252) 2.51px 2.51px 2.51px 0px inset, rgba(0, 0, 0, 0.1) 0px 19.19px 39.51px 0px`
- Shadow `lg` (other): `rgba(60, 125, 196, 0.1) 0px 38px 40px -27px`
- Shadow `xl` (input): `rgba(133, 154, 255, 0.4) 0px 30px 250px 20px, rgba(139, 142, 238, 0.16) 0px 16px 50px 0px`
- Motion: standard transition `0.2s ease` on interactive elements.

The interface is mostly flat: white canvas, clean section transitions, and restrained gray hairlines do most of the structural work. Use only soft atmospheric shadows or glows around product mockups and search-style controls. Rounded pill CTAs provide shape contrast; avoid adding heavy card shadows or thick borders across the page.

## Imagery

Use large, colorful website previews and interface mockups as the main imagery, often layered with device frames, floating panels, or overlapping examples. Keep the surrounding page mostly white or softly gradient-tinted so the imagery reads clearly. Product screenshots may contain vivid photography, color, and illustration; treat these as showcase content rather than extending them into the core brand palette.

## Components

### Top navigation

A white horizontal bar with the black Wix wordmark, compact text links, small dropdown indicators, utility icons, login link, and a blue pill-shaped “Start for free” CTA.

### Hero headline

Large centered black display type over a spacious white and softly tinted backdrop, followed by a short supporting sentence.

### Primary CTA

Blue #166aea pill button with white text; keep the label concise and the treatment clean.

### Secondary CTA

Black pill button used repeatedly in content sections, paired with white text and minimal surrounding decoration.

### Product showcase

Large website and builder interface previews, layered with floating UI panels and occasional soft shadow or glow.

### Feature row

Spacious editorial split: concise heading and explanation alongside a large interface or website preview.

### Hairline list

Large black feature labels organized by subtle gray horizontal separators, with supporting details kept compact.

### Domain search

Wide rounded input and blue search action centered within a pale gradient field, with small explanatory text below.

### Measured component styles

- **Primary button** (“Start for free”): background #166aea · text #ffffff · radius 42px · padding 8px 30px · 400 16px Madefor-Display
- **Secondary button** (“Get Started”): background #000000 · text #000000 · radius 50px · padding 0px 10px 0px 30px · 400 10px Arial
- **Link** (“eCommerce website templates”): transparent background · text #000000 · radius 0px · padding 0px · 400 7.49995px wix-madefor-text-v2
- **Input**: transparent background · text #000000 · border 1px solid · radius 999px · padding 3px 194.4px 3px 52px · 400 22px wix-madefor-text-v2 · shadow rgba(133, 154, 255, 0.4) 0px 30px 250px 20px, rgba(139, 142, 238, 0.16) 0px 16px
- **Card**: transparent background · text #000000 · border 1px solid #ffffff · radius 0px · padding 0px · 400 10px Arial
- **Navigation item** (“Skip to Main Content Product Solutions R”): transparent background · text #000000 · radius 0px · padding 0px · 400 10px Arial

## Do

- Keep the canvas predominantly white.
- Use large, regular-weight black display headlines.
- Center the hero headline and main action.
- Reserve blue for primary actions and select interface cues.
- Use pale gradients as soft atmospheric backdrops.
- Show product previews prominently and let their imagery supply color.
- Separate sections with generous whitespace and occasional hairlines.

## Don't

- Do not turn the page into a dense dashboard.
- Do not use strong saturated colors as large brand backgrounds.
- Do not make every CTA blue; secondary actions are black pills.
- Do not add heavy card borders or shadows.
- Do not use bold, condensed, or all-caps display typography.
- Do not mistake colors inside showcased websites for Wix brand colors.

## Agent prompt

Build a new Wix-style page with a white #ffffff canvas, black #000000 typography, and spacious editorial pacing. Use a compact full-width navigation, an oversized centered hero headline, concise supporting copy, and a clear pill-shaped primary CTA in Builder Blue #166aea with white text. Use black pill CTAs for secondary actions. Set headlines in an open, regular-weight display sans similar to DM Sans and supporting text in a readable sans like Inter. Add pale Sky Tint #dcf0ff, Cream Glow #fefef0, and Mint Wash #bdead5 only as soft background atmosphere. Structure lower content as generous text-and-image feature rows, using colorful website previews as the main visual focus. Keep borders subtle in Quiet Rule #c6c6c6, avoid dense card grids, and make product imagery—not decorative UI—the strongest color source.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Long, mostly white single-column page; centered hero followed by spacious alternating product and feature sections. | top navigation, primary signup CTA, product previews, feature explanations | oversized display headline, black and blue pill CTAs, pale gradient washes, thin dividers |

## Source CSS custom properties (selected)

```css
--wst-button-color-fill-primary: rgb(26,106,255);
--wst-button-color-border-primary: rgb(26,106,255);
--wst-button-color-text-primary: rgb(255,255,255);
--wst-button-color-fill-primary-hover: rgb(26,106,255);
--wst-button-color-border-primary-hover: rgb(26,106,255);
--wst-button-color-text-primary-hover: rgb(255,255,255);
--wst-button-color-fill-primary-disabled: rgb(194,194,194);
--wst-button-color-border-primary-disabled: rgb(194,194,194);
--wst-button-color-text-primary-disabled: rgb(255,255,255);
--wst-button-color-fill-secondary: rgb(255,255,255);
--wst-button-color-border-secondary: rgb(26,106,255);
--wst-button-color-text-secondary: rgb(26,106,255);
--wst-button-color-fill-secondary-hover: rgb(255,255,255);
--wst-button-color-border-secondary-hover: rgb(26,106,255);
--wst-button-color-text-secondary-hover: rgb(26,106,255);
--wst-button-color-fill-secondary-disabled: rgb(255,255,255);
--wst-button-color-border-secondary-disabled: rgb(194,194,194);
--wst-button-color-text-secondary-disabled: rgb(194,194,194);
--wst-color-fill-base-1: rgb(255,255,255);
--wst-color-fill-base-2: rgb(0,0,0);
--wst-color-fill-base-shade-1: rgb(240,240,240);
--wst-color-fill-base-shade-2: rgb(194,194,194);
--wst-color-fill-base-shade-3: rgb(110,110,110);
--wst-color-fill-accent-1: rgb(26,106,255);
--wst-color-fill-accent-2: rgb(26,106,255);
--wst-color-fill-accent-3: rgb(26,106,255);
--wst-color-fill-accent-4: rgb(26,106,255);
--wst-color-fill-background-primary: rgb(255,255,255);
--wst-color-fill-background-secondary: rgb(240,240,240);
--wst-color-text-primary: rgb(0,0,0);
--wst-color-text-secondary: rgb(110,110,110);
--wst-color-action: rgb(26,106,255);
--wst-color-disabled: rgb(194,194,194);
--wst-color-title: rgb(0,0,0);
--wst-color-subtitle: rgb(110,110,110);
--wst-color-line: rgb(0,0,0);
--wst-font-style-body-large: normal normal 400 calc(18 * clamp(0px, 100 * 1cqw * 1, min(9999px, 9999px)) / 1920)/1.3em wix-madefor-text-v2,sans-serif;
--wst-font-style-body-medium: normal normal 400 calc(24 * clamp(0px, 100 * 1cqw * 1, min(9999px, 9999px)) / 1920)/1.6em wix-madefor-text-v2,sans-serif;
--wst-font-style-body-small: normal normal 500 calc(14 * clamp(0px, 100 * 1cqw * 1, min(9999px, 9999px)) / 1920)/1.6em wix-madefor-text-v2,sans-serif;
--wst-font-style-body-x-small: normal normal normal 12px/1.4em din-next-w01-light,sans-serif;
```

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