Wix Design System Deep Dive

1. Brand Overview

Wix is unapologetically modular. The whole front-end feels like it’s built from Lego bricks you can swap out without breaking the aesthetic. This is a brand for people who want control but don’t have time for pixel-perfect fussing. The design language says: “We’ll give you the parts, you make the thing.”

The vibe? Clean, functional, approachable. It’s not pretending to be a “creative agency” site — it’s an in-browser tool, and the UI mirrors that. Lots of neutral grounding (black, white, light greys), with occasional hits of bright, almost playful color. They’re not shy about big typography; some H1s are 248px tall. That’s billboard territory.

The philosophy seems to be: clarity first, personality in doses. They let the user’s content shine, so the system itself is restrained. When color appears, it’s intentional — to signal interactivity or provide a moment of delight. Rounded shapes (border-radius up to 999px) keep it feeling friendly.

Who’s it for?

• Small business owners setting up a site.
• Designers who want templates but still tweak.
• People who think “design system” means “I don’t have to worry about consistency.”

The interesting thing is how Wix balances tool UI with marketing site. The marketing side gets the oversized headings, playful color tokens, and generous spacing. The app side sticks to tight grids, clear buttons, and functional color coding. This dual personality is embedded in their tokens — you see both subtle greys and candy pastels living in the same CSS variables.

2. Color System

2.1 Primary Colors

Wix’s main brand power comes from black (#000000) and white (#ffffff). That’s the baseline for all layouts. The “primary action” blue isn’t in the core palette list but appears in button borders: rgb(22,106,234) — a vivid, saturated blue used for hover borders and focus outlines.

Psychology:

• Black → authority, clarity, neutrality.
• White → openness, space.
• Blue → trust and action.
• Yellow (#fdf4a1) → warmth, attention-grabber. Often background or highlight.

Compared to Squarespace (which leans hard into black-and-white minimalism) and Shopify (green), Wix’s palette is friendlier because it’s peppered with pastels (rgb(255,194,254), rgb(205,197,255)) and soft greens (rgb(209,230,209)). That’s unusual for a tool brand — it’s almost like a lifestyle site.

2.2 Complete Palette

2.3 Color Relationships

Contrast: Black on white — perfect WCAG AAA. Yellow on white? Not great. Yellow on black? High contrast, works well for CTAs. Pastels on white often fail accessibility contrast ratios for body text — they’re decorative, not functional. Blue (#166aea) on white easily passes AA.

Dark mode? Not explicitly implemented here — but the palette supports inversion because the neutrals are balanced.

2.4 Usage Guide

Works:

• Black text on white background — always readable.
• Blue accents for interactive states — clear affordance.
• Yellow backgrounds with black text — strong attention grabber.

Avoid:

• Pastel text on white — fails contrast.
• Yellow text on white — invisible.
• Mixing too many pastels in functional UI — confuses hierarchy.

3. Typography

3.1 Font Families

Primary font: Madefor family — in display and text variants.
Fallbacks: Helvetica Neue, Arial, plus Japanese system fonts (メイリオ, ヒラギノ角ゴ Pro). Clearly aiming for global compatibility.

No Google or Adobe font sources — suggests custom hosting.

3.2 Type Scale

3.3 Hierarchy

They go huge for hero headings — 248px is massive. This creates instant hierarchy. Mid-range headings (64px–72px) are used for section intros. Body text lives around 16px–20px — safe, readable. Captions at 14px. The weight is mostly 400 (regular), relying on size and spacing rather than bolding.

4. Spacing & Layout

4.1 Spacing Scale

Base unit: 8px grid — confirmed by multiple multiples (8px, 16px, 24px, etc.).

Common values:

• 0.078px — micro adjustments.
• 3.84px — subtle nudges.
• 8px — smallest “real” gap.
• 12px, 18px, 24.96px — for padding inside components.
• 35px, 38.4px — section spacing.
• 60px — large section gap.

4.2 Layout

Breakpoints: 750px, 767px, 768px, 769px, 1099px — tells me they’re fine-tuning tablet vs desktop triggers. No single “mobile” cutoff — they’re adapting to the content.

5. Visual Elements

Border Radius

They use everything from sharp to fully rounded:

• 4px — small cards.
• 10px — images.
• 12px — divs.
• 18px — pictures.
• 20px — buttons.
• 50px — pill buttons.
• 999px — super pill (inputs).
• Odd large radii like 4474.5px — likely SVG shapes.

Shadows

Not flat — shadows are here:

• rgba(0,0,0,0.14) -4.478px -7.764px 35.832px — soft, ambient.
• rgba(0,0,0,0.2) 5.25px 7.25px 23.88px — deeper.

They’re layered — two shadows per element for depth.

Borders

1px solid black — common.
1px solid yellow (#fdf4a1) — accent boxes.
Directional borders (1px 0px 0px) for dividers.

6. Components

6.1 Buttons

Example: Primary blue button.

Default:

• bg: rgb(22,106,234)
• color: black
• padding: 0 12px 0 38px
• radius: 50px
• border: none

Hover:

• bg: rgb(253,255,203)
• box-shadow: var(--hover-box-shadow)

Active:

• bg: rgba(255,255,255,0.32)
• transform: translateY(-50%)

Focus:

• outline: rgb(17,109,255) solid 2px

Other variants swap bg color: deep navy (rgb(16,21,133)), yellow (rgb(253,244,161)), transparent.

6.2 Links

Styles vary:

• Black, underlined.
• White, no underline.
• Yellow (#fdf4a1), no underline, hover to black.
• Blue (#0000ee), no underline.

6.3 Forms

Text input:

• bg: white
• border: 2px solid rgb(83,138,182)
• radius: 999px (pill)
• padding: 3px 259.2px 3px 52px
• focus: outline rgb(17,109,255) 2px solid

6.4 Cards

Padding: multiples of 8px.
Shadows: dual-layer for depth.
Radius: 12px or 20px depending on size.

7. Design Tokens

:root {
  /* Colors */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-yellow: #fdf4a1;
  --color-grey-light: #d0d0d0;
  --color-soft-green: #d1e6d1;
  --color-deep-teal: #012029;
  --color-pale-yellow: #fef9d0;
  --color-dark-teal: #024051;
  --color-action-blue: #166aea;
  --color-pink: #ffc2fe;
  --color-brown: #863a29;
  --color-olive: #beb779;
  --color-olive-brown: #7f7a51;
  --color-lime: #dff994;
  --color-dark-olive: #3f3d28;
  --color-deep-navy: #101585;
  --color-sky-blue: #8cbaff;
  --color-base-shade-3: #1c1d21;
  --color-base-shade-1: #eceff3;
  --color-slate: #406f7d;
  --color-lavender: #cdc5ff;
  --color-navy-grey: #223246;
  --color-periwinkle: #8fa3ff;
  --color-pale-blue: #add7ff;

  /* Typography */
  --font-madefor-display: "Madefor Display", "Helvetica Neue", Arial, メイリオ, Hiragino Kaku Gothic Pro;
  --font-madefor-text: "Madefor", "Helvetica Neue", Arial, メイリオ, Hiragino Kaku Gothic Pro;
  --font-size-h1: 248px;
  --font-size-body: 16px;
  --font-size-caption: 14px;

  /* Spacing */
  --space-xxs: 3.84px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 18px;
  --space-lg: 24.96px;
  --space-xl: 38.4px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 50px;
  --radius-full: 999px;

  /* Shadows */
  --shadow-soft: rgba(0,0,0,0.14) -4.478px -7.764px 35.832px;
  --shadow-deep: rgba(0,0,0,0.2) 5.25px 7.25px 23.88px;
}

8. AI Coding Assistant Prompt

# Wix Design System Specification

You are a Wix design expert. Build UIs matching their visual language exactly.

## Brand Context
Wix balances a neutral, functional base with doses of playful color. Large typography, rounded shapes, and an 8px spacing grid define the look. Accessibility is important for primary UI; pastels are decorative.

## Color Palette
- Black: #000000 — Base text, icons, borders
- White: #ffffff — Page background, text on dark
- Warm Yellow: #fdf4a1 — Accent backgrounds, highlights
- Light Grey: #d0d0d0 — Neutral dividers, inactive states
- Soft Green: #d1e6d1 — Success accents, backgrounds
- Deep Teal: #012029 — Hero backgrounds
- Pale Yellow: #fef9d0 — Hover backgrounds
- Dark Teal: #024051 — Navigation headers
- Action Blue: #166aea — CTA hover borders, focus outlines
- Pink: #ffc2fe — Decorative fills
- Brown: #863a29 — Rare accents
- Olive: #beb779 — Background fills
- Olive-Brown: #7f7a51 — Text accents
- Lime: #dff994 — Decorative fills
- Dark Olive: #3f3d28 — Text on yellow
- Deep Navy: #101585 — Dark backgrounds
- Sky Blue: #8cbaff — Links, highlights
- Base Shade-3: #1c1d21 — Dark surfaces
- Base Shade-1: #eceff3 — Light surfaces
- Slate: #406f7d — Text accents
- Lavender: #cdc5ff — Background fills
- Navy Grey: #223246 — Dark surfaces
- Periwinkle: #8fa3ff — Links
- Pale Blue: #add7ff — Background fills

## Typography
- Headings: "Madefor Display", Helvetica Neue, Arial
- Body: "Madefor", Helvetica Neue, Arial
- H1: 248px / 1.30 / 400
- H2: 140px / 1.00 / 400
- H3: 96px / 1.00 / 400
- Body: 16px / 1.50 / 400
- Caption: 14px / — / 400

## Spacing & Grid
Base: 8px
Scale: 3.84px, 8px, 12px, 18px, 24.96px, 38.4px, 60px
Use multiples for padding, gaps, margins.

## Border Radius
- None: 0px — tables
- sm: 4px — small cards
- md: 12px — cards
- lg: 20px — buttons
- pill: 50px — CTA buttons
- full: 999px — inputs

## Shadows & Depth
- Soft: rgba(0,0,0,0.14) -4.478px -7.764px 35.832px
- Deep: rgba(0,0,0,0.2) 5.25px 7.25px 23.88px

## Components

### Primary Button
```css
.btn-primary {
  background: #166aea;
  color: #000;
  padding: 0 12px 0 38px;
  border-radius: 50px;
  font-size: 10px;
  font-weight: 400;
  border: none;
}
.btn-primary:hover { background: #fdffcB; }
.btn-primary:focus { outline: 2px solid #116dff; }
```

### Input Field
```css
.input {
  background: #fff;
  border: 2px solid #538ab6;
  border-radius: 999px;
  padding: 3px 259.2px 3px 52px;
}
.input:focus {
  outline: 2px solid #116dff;
  border-color: #a3d9f6;
}
```

## Layout & Responsive Rules
- Breakpoints: 750px, 767px, 768px, 769px, 1099px
- Maintain 8px grid

## Interaction Rules
- Transition: 150ms ease
- Focus: 2px solid blue outline

## DO
- Use only palette colors
- Maintain 8px grid
- Use Madefor Display for headings
- Keep buttons pill-shaped

## DON'T
- Use pastels for text
- Mix sharp and rounded corners
- Invent new blues

## Code Examples
```css
.card {
  background: #fff;
  border-radius: 12px;
  padding: 24.96px;
  box-shadow: var(--shadow-soft), var(--shadow-deep);
}
```

9. Summary

TL;DR — Wix plays in two modes: clean functional UI for tools, oversized playful design for marketing. Black-and-white core, pastel accents, pill buttons, and billboard headings.

Brand Keywords: neutral-playful, modular-friendly, oversized-type, pastel-accent