Preview image. Unlock full-res
Animated digital canvas – an interactive, slightly playful yet authoritative workspace.
Wix.com's system is a canvas of light, subtly animated surfaces, where interactive elements pulse with a vivid blue. The visual style balances a strong, opinionated display typography with more conventional body text for clarity. Cards and interactive components feature generous rounded corners, giving the interface a friendly, approachable feel, while the dominant white background is punctuated by soft, pastel-toned background fills and gradients. Prioritize Canvas White (#ffffff) for primary backgrounds and Cloud Gray (#f1f5f9) for secondary content sections, ensuring a bright, spacious feel. Use Sky Blue (#166aea) exclusively for primary interactive elements, reserving it for clear calls to action and active states. Apply 50px border-radius to all buttons and tags, creating a consistent, friendly pill shape. Employ madefor-display for all headlines, utilizing its generous sizes and tight letter-spacing for impact. Maintain a comfortable rhythm with an 81px section gap, creating clear visual separation between content blocks. Use subtle borders and dividers with Silver Mist (#d0d0d0) to structure content without adding visual weight. Infuse dynamism into hero sections with gradient backgrounds like Sky Gradient (#bdc5ec) or Electric Gradient (#2c34af) for visual interest. Avoid using Midnight Ink (#000000) as a solid background fill for large sections; its primary role is text and sparse borders. Refrain from using Sky Blue (#166aea) for purely decorative purposes; it's reserved for functional interactions. Do not deviate from the established 20px radius for cards and images, as it's a signature element of the design language. Avoid excessive letter-spacing on display fonts; madefor-display benefits from its naturally tight tracking. Do not introduce strong, opaque shadows for elevation, as the system relies on subtle, tinted shadows or no shadows at all for depth. Do not use generic system fonts for branding or display text, as the custom madefor family is key to visual identity. Avoid overly complex nested layouts; prefer clear sectioning with alternating backgrounds and distinct component areas.
