Leonardo.ai

Overview

Leonardo.ai is a creator-first generative AI platform that transforms visual production at scale. The design system embodies "Neon Brutalism"—a collision of high-contrast dark surfaces (#000000 background, #030303 container-lowest) with electric, saturated accent colors (primary purple #6e60ee, secondary neon-green #03e65b, tertiary cyan #33d0ff). The aesthetic evokes a digital studio where creators command powerful tools without friction. The UI personality is confident, direct, and unapologetically bold: every interaction feels intentional, every color choice purposeful. Voice: energetic yet precise, never flowery. Example: "Generate 50 variations in 3 minutes. No limits, no waiting."

Colors

The color system prioritizes contrast and energy. Primary (#6e60ee) is the signature accent—used on all CTAs, focus states, and brand moments. It commands attention against the pure-black surface (#000000) with a luminosity ratio of 8.2:1, ensuring accessibility while maintaining visual drama. Secondary green (#03e65b) signals success, generation completion, and positive actions; tertiary cyan (#33d0ff) highlights secondary CTAs and interactive states. The surface stack is deliberately minimal: surface (#000000), surface-container-low (#121212), surface-container (#1a1a1a), surface-container-high (#252525), and surface-container-highest (#353535) create subtle depth without compromising the bold aesthetic. On-surface text is fixed at #ededed (a warm off-white, not pure #ffffff) to reduce e

Typography

The type system pairs two custom fonts: UfficioDisplay (weights 800–900) for headlines and display text, and CanvaSans (weights 400–600) for body and UI text. Display (120px, 900 weight, -0.02em tracking) is reserved for hero statements and brand moments; it commands the full viewport width with 108px line-height, creating a rhythm that feels expansive. Headline-lg (56px, 800 weight) and headline-md (40px, 800 weight) scale down for section headers, maintaining the bold, geometric character. Body text (16–18px, 400–500 weight) uses CanvaSans with 0.01–0.025em tracking to ensure legibility on dark backgrounds; line-height is set to 1.5× font-size (24px for 16px text) to prevent crowding. Labels (12–14px, 500–600 weight) use 0.05em tracking for UI elements and buttons, adding visual separati

Layout

The layout operates on a 12-column grid with a max-width of 1280px, centered with symmetric gutters of 24px on desktop and 12px on mobile. Sections are separated using lg spacing (40px) for major breaks and md spacing (24px) for subsections, creating a clear visual hierarchy. The container-max-width of 1280px ensures content never stretches beyond comfortable reading width on ultra-wide displays. White-space is aggressive: the hero section uses 64px (xl spacing) above and below the headline, and 40px (lg spacing) between the headline and CTAs. Cards and containers use md spacing (24px) for internal padding, with sm spacing (12px) between nested elements. The grid is fluid on mobile (single column, 12px gutter) and expands to 2–3 columns on tablet (24px gutter) and 3–4 columns on desktop (2

Elevation & Depth

Depth is conveyed through subtle shadows and layering, not through color gradients or transparency. Level 1 (Base): the pure-black background (#000000) with no shadow. Level 2 (Standard Card): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), applied to cards, modals, and floating elements; background is surface-container (#1a1a1a) with a 1px border at outline-variant (#444444). Level 3 (Elevated/Modals): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25), applied to full-screen modals, dropdowns, and top-layer overlays; background is surface-container-high (#252525) with a 1px border at outline (#666666).

Shapes

The shape philosophy is "Geometric Precision with Approachability"—sharp corners on display text and large containers, soft rounded corners on interactive elements. Buttons use full radius (9999px) for a pill shape, creating a friendly, clickable affordance; padding is 12px 24px with a minimum height of 48px. Cards and containers use lg radius (1rem / 16px) for a balanced, modern look that avoids harsh corners without feeling overly soft. Input fields use DEFAULT radius (0.5rem / 8px) for a subtle, refined appearance. Badges and small UI elements use full radius (9999px) to emphasize their com

Components

Action Elements Buttons are the primary interaction pattern. Button-primary uses background {colors.primary} (#6e60ee), text {colors.on-primary} (#ffffff), rounded full (9999px), padding 12px 24px, height 48px, and label-md typography (14px, 600 weight). On hover, background shifts to {colors.primary-container} (#5a4fd6) with a 200ms transition. Button-secondary is transparent with a 1px border at {colors.outline} (#666666), text {colors.on-surface} (#ededed), and the same rounded/padding/height. On hover, background becomes {colors.surface-container-high} (#252525) and text shifts to {colors.primary} (#6e60ee). Button-ghost uses rgba(255, 255, 255, 0.05) background, no border, and on hover shifts to rgba(255, 255, 255, 0.1) with a 150ms ease-out transition. All buttons use font-weight

Do's and Don'ts

**Do**

• Do use primary purple (#6e60ee) on all primary CTAs, focus states, and brand-critical moments—it's the signature accent that defines Leonardo's visual identity.
• Do maintain high contrast: ensure on-surface text (#ededed) is always placed on surface backgrounds (#000000–#353535) for a minimum 8:1 contrast ratio.
• Do apply full-radius (9999px) to all buttons and badges to create a consistent, inviting interaction pattern across the platform.
• Do use md spacing (24px) as the default padding inside cards and containers; use lg spacing (40px) for section separation to create visual breathing room.
• Do apply 200ms cubic-bezier(0.4, 0, 0.2, 1) transitions to all hover and focus state changes for a snappy, responsive feel.
• Do use UfficioDisplay (800–900 weight) for headlines and display text to maintain the bold, geometric brand character.

**Don't**

• Don't use pure white (#ffffff) for body text; always use on-surface (#ededed) to reduce eye strain on dark backgrounds and maintain the warm, refined aesthetic.
• Don't apply shadows larger than 0 16px 40px rgba(0, 0, 0, 0.25)—deeper shadows break the high-contrast, neon-brutalist aesthetic.
• Don't mix border-radius values on buttons: always use full (9999px) for consistency; avoid DEFAULT or md radius on CTAs.
• Don't place text directly on busy backgrounds without a text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) to ensure legibility.
• Don't use secondary colors (green #03e65b, cyan #33d0ff) as primary CTAs—reserve them for success states, secondary actions, and highlights.
• Don't exceed container-max-width of 1280px; content should never stretch beyond this to maintain comfortable reading width and visual hierarchy.