Wix

Overview

Wix is a democratized web creation platform designed for entrepreneurs, small business owners, and creative professionals who want to build professional websites without technical barriers. The brand aesthetic is 'Approachable Modernism'—combining clean, minimalist surfaces with vibrant accent colors (primary blue #166aea, secondary teal #24c69a, tertiary lime #dff994) that signal energy, possibility, and forward momentum. The UI prioritizes clarity and confidence: every interaction feels intentional, every color choice purposeful. The emotional response is empowerment—users feel capable of building something remarkable, even without design or coding expertise.

Wix's voice is encouraging, practical, and slightly aspirational. The brand speaks in clear, action-oriented language that avoids jargon while maintaining professionalism. Tone patterns include direct imperatives ('Crea una página web', 'Empezar ahora'), benefit-focused copy ('totalmente personalizable, con el primer creador de sitios web híbrido'), and reassurance ('Prueba Wix gratis. No se requerirá tarjeta de crédito'). The vocabulary emphasizes speed, simplicity, and business outcomes. Example sentence in brand voice: 'Transforma tu idea en un sitio web profesional en minutos, sin código ni experiencia previa.'

Colors

The Wix color system balances a neutral, professional foundation with strategic accent colors that drive user action and emotional engagement. Surface colors (white #ffffff, grays from #f5f5f5 to #e0e0e0) provide a clean, trustworthy canvas that keeps focus on user content. Primary blue (#166aea) is the signature accent—used exclusively on call-to-action buttons, key navigation elements, and interactive states. This color commands attention without overwhelming; it appears on the hero CTA 'Empezar ahora' (48px height, 50px border-radius, padding 12px 38px), the top-right 'Entrar' button, and all primary interactions. Secondary teal (#24c69a) supports the primary as a complementary accent for success states, highlights, and secondary actions. Tertiary lime (#dff994) provides visual energy f

Typography

Wix employs a dual-typeface system: 'madefor-display' and 'madefor-text' (custom Wix fonts) for headlines and body copy, with Arial/Helvetica Neue as fallbacks for universal compatibility. The display tier (59px, font-weight 400, line-height 68px, letter-spacing -0.02em) anchors hero sections with confident, spacious letterforms. Headline-lg (40px, 400 weight, 48px line-height) and headline-md (28px, 400 weight, 36px line-height) create visual hierarchy for section titles and feature callouts. Body text uses 16px (madefor-text, 400 weight, 24px line-height) for primary content and 14px for secondary information, ensuring readability at all zoom levels. Labels and buttons use 14px with 600 font-weight to signal interactivity. On small labels over busy backgrounds (such as badges or chips),

Layout

Wix uses a fluid, responsive 12-column grid system with a maximum container width of 1280px, centered on desktop and full-width on mobile. The page rhythm is built on a semantic spacing scale: 'unit' (8px) as the base, with 'sm' (12px) for tight grouping, 'md' (24px) for standard section separation, 'lg' (40px) for major section breaks, and 'xl' (64px) for hero-to-content transitions. The hero section occupies the full viewport height with generous top/bottom padding (lg spacing), positioning the headline and CTA with breathing room. Content sections use md spacing (24px) for internal padding and lg spacing (40px) between sections. The gutter width is consistently 24px on desktop, scaling to 12px on tablet and 8px on mobile. Container max-width of 1280px ensures content remains scannable o

Elevation & Depth

Wix uses a subtle shadow system to create depth without visual heaviness, reflecting the brand's 'approachable' aesthetic. The elevation scale consists of three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle dividers and hover states on flat elements, md (0 4px 12px rgba(0, 0, 0, 0.08)) for standard cards and lifted surfaces, and lg (0 16px 40px rgba(0, 0, 0, 0.12)) for modals and prominent overlays. Cards and containers use md elevation by default; on hover, they transition to lg elevation over 200ms (cubic-bezier 0.37, 0, 0.63, 1). Input fields and form elements use no shadow at rest,

Shapes

Wix employs a 'Soft-Technical' shape philosophy: rounded corners are generous and approachable, but never organic or overly playful. The rounded scale progresses from sm (4px) for minor UI elements like input borders, DEFAULT (8px) for standard cards and containers, md (12px) for slightly emphasized surfaces, lg (18px) for feature cards and secondary CTAs, xl (30px) for larger modals and hero elements, and full (50px) for buttons and pill-shaped badges. Buttons use the full (50px) radius to signal 'clickability' and create a friendly, inviting appearance—the primary CTA 'Empezar ahora' uses 50

Components

Action Elements Buttons are the primary interaction pattern. The button-primary component uses {colors.primary} (#166aea) background, {colors.on-primary} (white) text, {typography.label-md} (14px, 600 weight), {rounded.full} (50px), and padding 12px 38px with a fixed height of 48px. On hover, the background transitions to {colors.primary-container} (#1a73e8) over 200ms using cubic-bezier(0.37, 0, 0.63, 1). The button-secondary variant uses a transparent background with a 2px solid border in {colors.primary}, padding 12px 30px, and the same 50px border-radius; on hover, it gains a light background ({colors.surface-container-high}) while maintaining the border. Disabled buttons use #d0d0d0 background with #757575 text and 0.6 opacity. All buttons have cursor: pointer and touch-action: ma

Do's and Don'ts

**Do**

• Do use primary blue (#166aea) exclusively on CTAs and key interactive elements—it's the brand's signature and should never be diluted or overused.
• Do maintain the 50px border-radius on all primary buttons to signal approachability and confidence.
• Do apply md spacing (24px) between major content sections and lg spacing (40px) between hero and body content to create breathing room.
• Do use the madefor-display typeface for headlines (40px+) to establish visual hierarchy and brand personality.
• Do transition all interactive states (hover, focus, active) over 200ms using cubic-bezier(0.37, 0, 0.63, 1) for smooth, predictable feedback.
• Do layer elevation subtly: cards use md shadow (0 4px 12px rgba(0, 0, 0, 0.08)), modals use lg shadow (0 16px 40px rgba(0, 0, 0, 0.12)).

**Don't**

• Don't use secondary or tertiary colors on primary CTAs—primary blue is reserved for the most important actions.
• Don't apply border-radius less than 18px to feature cards or modals; it reads as too corporate and contradicts the approachable brand voice.
• Don't exceed 1280px container max-width on desktop; content becomes hard to scan and loses visual focus.
• Don't use shadows heavier than lg elevation (0 16px 40px rgba(0, 0, 0, 0.12)) on standard UI elements—it creates visual clutter and reduces clarity.
• Don't mix typefaces within a single headline or body paragraph; stick to madefor-display for headlines and madefor-text or Arial for body.
• Don't apply letter-spacing greater than 0.1em on body text; it reduces readability and feels amateurish.