Electric Blue
#166aeaPrimary action button fill, selected nav indicator, link accents — the only saturated action color in the system
wix.com
wix.com
Website preview
The design language
Wix's visual system reads as a spacious, air-filled workspace on a bright white canvas, where oversized headlines in the custom Madefor Display typeface set a confident but airy tone. The palette is overwhelmingly achromatic — black text, white surfaces, hairline gray borders — with a single saturated electric blue (#166aea) reserved for primary action buttons and a secondary black-filled pill as the alternative action. Color appears as intentional punctuation: a lime-green surface wash, a soft lavender gradient, a yellow highlight, a violet accent — each used sparingly to mark sections, not to decorate. Components are flat, rounded, and lightweight: pill buttons at 50px radius, cards at 20px, images at 8.9px, minimal shadows. The grid breathes — generous section gaps near 80px, centered hero compositions, alternating product mockups that feel like editorial spreads rather than SaaS screenshots.
Color palette
brand
Deep Violet
#101585Brand violet for headings, link underlines, decorative accent — anchors the identity when blue is too functional
Indigo Pulse
#2c34afGradient endpoint, section heading accent — lighter companion to Deep Violet for layered brand moments
accent
Lime Highlight
#dff994Surface wash, background tints, decorative highlight zones — injects energy into otherwise monochrome sections
Lemon Note
#fdf4a1Subtle highlight wash on text and borders, callout markers — warm counterpoint to cool brand colors
Lavender Mist
#bfc8e8Soft section background gradient start, card shadow tint — atmospheric color for gradient washes
neutral
Pure Canvas
#ffffffNeutral form states, badge text, and quiet UI feedback where color should stay understated. Do not promote it to the primary CTA color
Slate Mist
#f1f5f9Elevated surface tier, input backgrounds, subtle section panels
Carbon Ink
#000000Primary text, icon strokes, borders, dark button fills — the typographic and structural black
Graphite
#1c1d21Headline text alternative — slightly softened black for display type where pure black feels too clinical
Ash Border
#d0d0d0Hairline dividers, card borders, structural separators
Fog Border
#e8e6e6Subtle borders on less prominent elements
semantic
Input Blue
#538ab6Input border on focus/active state — cool desaturated blue for form interactivity
Typography
Type scale
Minor Third (1.2) · 18px basetext-184
184px · 400 · 1.3The quick brown fox jumps
display
104px · 400 · 0.95 · -3.12px trackingThe quick brown fox jumps
text-89
89px · 400 · 1The quick brown fox jumps
heading-lg
82px · 400 · 1 · -2.46px trackingThe quick brown fox jumps
text-53
53px · 400 · 1.1The quick brown fox jumps
heading
48px · 400 · 1.1 · -0.96px trackingThe quick brown fox jumps
heading-sm
31px · 400 · 1.2 · -0.62px trackingThe quick brown fox jumps
text-25
25px · 400 · 1.5The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Arial
- Weights
- 400
- Sizes
- 10px, 13px
- Line height
- 1.20
- Fallback
- system-ui or Arial
System fallback for icon labels, micro-UI tags, and utility text at 10–13px. Functions as the safety net for extremely small UI where custom fonts may not load.
Additional typeface
madefor-display
- Weights
- 400
- Sizes
- 10px, 13px, 14px, 16px, 21px, 24px, 31px, 48px, 82px, 89px, 104px, 184px
- Line height
- 0.85, 1.00, 1.10, 1.20, 1.30, 1.40, 1.48, 1.50, 1.60
- Letter spacing
- -0.03em at 82px+, -0.02em at 31–48px, -0.01em at 21–24px
- Fallback
- Inter, DM Sans, or Space Grotesk
All display headlines from 21px sub-headings up to 184px hero text. Geometric, slightly condensed sans-serif with wide apertures. The negative letter-spacing (-0.01em to -0.03em) tightens as size grows, creating a distinctive compressed display look at 82–184px. Substantial line-height range (0.85 at 184px) lets oversized type sit close together — a signature of editorial display use.
Additional typeface
madefor-text
- Weights
- 400
- Sizes
- 10px, 13px, 14px, 15px, 16px, 18px, 21px, 25px
- Line height
- 1.29, 1.30, 1.50, 1.60, 1.71
- Letter spacing
- -0.0100em
- Fallback
- Inter, IBM Plex Sans, or Noto Sans
Body text, nav links, list items, input fields, descriptions. Slightly looser than display at -0.01em. Generous line-heights (1.5–1.71) give body copy an airy, readable cadence. Pairs with display variant to create typographic contrast without switching families.
Additional typeface
madefor-text-mediumbold
- Weights
- 400
- Sizes
- 12px, 14px, 15px, 16px, 18px, 20px, 21px, 23px, 24px
- Line height
- 1.10, 1.20, 1.30, 1.50, 1.60, 1.71
- Letter spacing
- -0.0100em
- Fallback
- Inter Medium, or DM Sans Medium
Semi-emphasis body and small headings (12–24px). Functions as the medium weight for nav, subheadings, and labeled sections where extra weight is needed without going to a full bold.
Additional typeface
wix-madefor-display-v2
- Weights
- 400, 500
- Sizes
- 20px, 21px, 53px
- Line height
- 1.00, 1.10, 1.20
- Fallback
- Inter or Space Grotesk
Alternate display variant for section headings at 53px and body emphasis at 20–21px. Provides a slightly different geometry for variety within sections.
Additional typeface
wix-madefor-text-v2
- Weights
- 400
- Sizes
- 15px, 21px
- Line height
- 1.30, 1.35, 1.50
- Fallback
- Inter or DM Sans
Secondary text body for links and supporting copy where the primary text variant is too dense.
Additional typeface
madefor-text-bold
- Weights
- 400
- Sizes
- 15px
- Line height
- 1.6
madefor-text-bold — detected in extracted data but not described by AI
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 80px
- Card padding
- 24px
- Element gap
- 12px
Border radius
tags
20pxcards
20pximages
8.9pxbuttons
50pxnavPills
50pxbuttonsAlt
20pxcardsSmall
8.9pxSpacing scale
1px2px3px4px5px6px7px8px9px10px11px12px14px15px16px17px18px19px20px22px23px24px26px27px28px29px30px31px33px35px36px37px38px40px42px43px44px45px48px50px52px54px58px66px67px68px73px75px81px83px84px101px105px144px158px173pxGuidelines
Do
- Use Madefor Display at 48–104px for all headlines; the negative letter-spacing (-0.02em to -0.03em) is signature
- Reserve #166aea electric blue exclusively for primary action buttons; never use it for text, icons, or decoration
- Set border-radius to 50px for all interactive buttons and tags — the pill shape is a defining system trait
- Apply generous section gaps of 80px between content blocks; the air-filled rhythm is critical to the feel
- Use the Lavender Mist gradient (#bfc8e8 → white) as a full-bleed section background to break up white-on-white sections
- Set images and product mockups to 8.9px border-radius for a slightly rounded tech-product feel
- Pair black filled buttons with blue filled buttons as the two-tier action system; never use three different button fill colors in one section
Don’t
- Don't use Deep Violet (#101585) or Indigo Pulse (#2c34af) for action buttons — they are brand/heading colors only
- Don't add visible drop shadows to cards or buttons; the system relies on flat surfaces with hairline borders, not elevation
- Don't use border-radius below 8px on cards or 20px on buttons — sharp corners break the rounded, friendly tone
- Don't set headline line-height above 1.2 at 48px+; the tight leading (0.95–1.1) is what makes the display type feel editorial
- Don't apply Lime Highlight (#dff994) or Lemon Note (#fdf4a1) to text longer than a word; they are wash/accent colors, not text backgrounds
- Don't introduce new accent colors beyond the defined palette; the system's restraint is its strength
- Don't center body text longer than a subtitle; the layout is left-aligned for paragraphs and right-aligned for supporting metadata
Components
Primary Action Button
Main CTA (Get Started, Sign Up)Filled electric blue (#166aea) with white text. Pill shape at 50px border-radius. Padding 12px right/left, Madefor Text 16px. Single chromatic action in the system — use sparingly, one per section maximum.
Secondary Action Button
Alternative CTA when primary is unavailableFilled black (#000000) with white text. Same 50px pill radius, 12px horizontal padding, Madefor Text 16px. Sits next to or replaces the blue primary on dark-background sections.
Ghost Button
Tertiary action, navigation controlsTransparent background with 1px border (#000000 or contextual color), Madefor Text 15–16px. 50px pill radius. Used for less important actions or on sections with strong colored backgrounds.
Rounded Button (20px)
Compact action for cards and tight layouts20px border-radius variant of the action buttons. Same color system (blue/black/ghost) but with a softer rectangular feel. Common in card overlays and inline actions.
Template Preview Card
Showcase website templates in grid20px border-radius, 8.9px inner image radius, no visible border, soft shadow. Image fills most of card with a small text label below (eCommerce →, Portfolio →). Arranged in 4-column grid on desktop.
Product Mockup Card
Display product UI screenshots in hero/sections8.9px border-radius for sharp tech feel, subtle border or no border, sits directly on canvas. Often shows browser chrome (URL bar, page controls) to feel like a real product capture.
Navigation Bar
Top-level site navigationTransparent or white background, Wix logo left, nav items center (Product, Solutions, Resources, Pricing), utility items right (Login, Get Started). Clean horizontal layout with dropdown indicators (▾). Get Started is a blue pill button, Login is a ghost text link.
Input Field
Text input for prompts, search, formsWhite or Slate Mist (#f1f5f9) background, 1px border transitioning to #538ab6 on focus, Madefor Text 15–16px. 8–12px border-radius. Placeholder text in light gray. Rounded but not pill-shaped.
Hero Headline Block
Page-level H1 with subtitleCentered or left-aligned Madefor Display 82–104px, line-height 0.95–1.0, letter-spacing -2.46 to -3.12px. Subtitle in Madefor Text 18–21px below. CTA button positioned below subtitle with 24–32px gap.
Section Heading
H2 for content sectionsMadefor Display 48px, line-height 1.1, letter-spacing -0.96px. Left-aligned with supporting paragraph to the right or below. Sets a quieter tone than hero display.
Gradient Section Background
Atmospheric section differentiationVertical or angled gradient from Lavender Mist (#bfc8e8) fading to white. Applied as full-bleed background to alternate sections, creating visual rhythm without hard dividers.
Badge / Tag
Category labels, status indicatorsSmall pill or 20px-radius tag with optional colored fill. Madefor Text 13–14px. Used for template categories, feature tags, and metadata. Often appears as ghost (border only) rather than filled.
Side Panel (AI Assistant)
Contextual tools panel (Aria AI)White card on right side of screen, subtle shadow or border, 20px radius. Contains chat interface or tool controls. Fixed positioning, collapsible. Header with close button.
Surfaces & elevation
Level 0
Canvas
#ffffffPrimary page background, default state for all sections
Level 1
Mist
#f1f5f9Elevated panels, input fields, subtle section differentiation
Level 2
Lime Wash
#dff994Accent surface for highlight sections, feature callouts
Level 3
Lavender Fade
#bfc8e8Gradient section backgrounds, atmospheric color zones
The system deliberately avoids drop shadows. Elevation is communicated through surface color shifts (white → Slate Mist → Lime Wash), hairline borders, and the occasional 1px bottom border on the nav. Cards float by being white on a light gradient background, not by casting shadows. This keeps the visual weight extremely light and lets the large display type and product mockups carry all the attention.
Navigation bar
rgba(0, 0, 0, 0.1) 0px -1px 0px 0px
Layout & imagery
Layout
Max-width 1200px centered content with full-bleed gradient sections. Hero is left-aligned headline + centered subtitle, CTA below. Alternating section rhythm: white canvas → lavender gradient → white canvas. Content blocks use a 2-column pattern (headline left, supporting text + CTA right) for feature sections. Template gallery is a 4-column equal-width grid. Generous vertical breathing room — 80px between sections, 24–32px between elements within sections. Navigation is a single horizontal bar, transparent on hero, white on scroll. Product mockups are centered below their headline, often overlapping into the next section's gradient to create flow.
Imagery
Product mockups dominate the visual language: browser-framed screenshots of the Wix editor, template previews with real photography (furniture, fashion, architecture), and UI captures showing the AI prompt interface. Photography is lifestyle-oriented for templates (eCommerce, portfolio examples) and product-focused for the editor demos. Gradients are abstract and atmospheric — soft lavender washes and periwinkle glows that fill hero spaces without competing with content. No heavy illustration system; visuals are either real UI captures or smooth gradient backgrounds. Icons are minimal, mostly stroke-based at 1px, appearing in nav and feature lists.
Design notes
Agent Guide
**Quick Color Reference:** - text: #000000 - background: #ffffff - border: #d0d0d0 - accent: #dff994 (lime wash) - primary action: #000000 (filled action) - brand violet: #101585 **3-5 Example Component Prompts:** 1. Create a Primary Action Button: #000000 background, #ffffff text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA. 2. Create a template gallery section: white background. Section heading at 48px madefor-display, #000000, letter-spacing -0.96px. 4-column grid of template cards (20px radius, no border, 8.9px image radius). Each card has a label below in madefor-text 16px with an arrow (→). 4. Create a navigation bar: white background, transparent until scroll. Wix logo left, nav links center (madefor-text 15px, #000000), Login ghost link + blue Get Started pill button right (50px radius, #166aea). 5. Create an input field for AI prompt: white background, 1px border #d0d0d0 transitioning to #538ab6 on focus, 8px border-radius, madefor-text 16px placeholder text in gray. Blue generate button (50px radius, #166aea) inside or adjacent.
Typography Philosophy
The Madefor font family (custom, Wix-internal) defines the brand's typographic identity. Display variant for headlines, Text variant for body, both sharing geometric DNA but optimized for their roles. Key signatures: (1) negative letter-spacing intensifies with size — -0.01em at body, -0.02em at subheadings, -0.03em at display 82px+. (2) Display line-height compresses to 0.85–1.0 at 104–184px, creating editorial density. (3) Weight stays at 400 throughout — no bold variants. The absence of bold is deliberate; hierarchy comes from size, spacing, and letter-spacing, not weight. This creates a quiet, confident voice that contrasts with the loud display type.
Gradient System
Gradients serve as atmospheric section dividers, not decoration. Two primary patterns: (1) vertical fades from Lavender Mist (#bfc8e8) to white — used for full-bleed section backgrounds to break white-on-white monotony. (2) Brand gradients (Deep Violet → Lime → Deep Violet at 106deg) — used sparingly for special banners or accent elements. The Periwinkle Glow gradient (#8fa3ff → #bdc9ff) appears in hero backgrounds as a subtle blue warmth. All gradients are low-saturation and low-contrast — they should feel like light, not color.
Similar brands
Squarespace
Same oversized serif/sans-serif display headlines, generous white space, single-color accent strategy, and template-driven hero compositions
Linear
Shared pill-button geometry, monochrome-dominant palette with one electric accent color, and the discipline of flat surfaces without shadows
Figma
Similar spacious landing pages with large editorial display type, gradient section backgrounds, and a product-mockup-as-hero approach
Webflow
Same visual rhythm — centered/left-aligned headlines over product screenshots, pill-shaped CTAs, and the template gallery grid pattern
Framer
Shared custom geometric sans-serif typography, black-and-white-first design with strategic color pops, and the spacious editorial layout language
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
