Leonardo.ai. Inverted editorial gallery.
- AI
- Dark theme
- 16 colors
- 3 typefaces
Leonardo.ai is a cinematic dark-mode creative arena: near-black canvas (#000000) serves as an infinite gallery floor, and the interface speaks through sheer typographic mass rather than chrome. The brand voice is built on one saturated violet (#6e60ee) used sparingly as identity punctuation, surrounded by a vivid six-color tag palette (green, violet, yellow, pink, coral, blue) that acts as categorical color-coding for plans, styles, and creator types. Display type reaches absurd scale (up to 165px) with compressed line-heights of 0.80–0.90 and tight -0.02em tracking, making headlines feel like sculptural objects rather than text. Controls are soft and pill-shaped (60px radius), surfaces are nearly borderless, and the layout breathes with generous negative space punctuated by a tight card grid of generated imagery. The system is editorial-meets-product: it treats the page itself as a generative canvas where the UI recedes and the creator's output dominates.
Leonardo.ai design system
Brand1
Brand identity color — logo mark, active tab indicator, brand surface highlights, signature wordmark
Accent6
Green wash for highlight backgrounds, decorative bands, and soft emphasis behind content
Warm accent for category tags, feature highlight chips, energy-coded badges
Hot accent for tag chips, creator-type badges, vibrant category markers
Warm accent for tag chips, plan indicators, red-orange category coding
Magenta-violet accent for card backgrounds, secondary brand surface treatment
Cool accent for tag chips, informational category markers, data-state indicators
Neutrals9
Primary page background, hero canvas, footer base
SVG decorative fills, near-black accent inside dark composition
Elevated surface, nav backdrop, deep overlay wash
Card surface, image card background, raised panel
De-emphasized text, disabled states, tertiary metadata
Muted body text, list items, secondary link color
Hairline borders, dividers, subtle structural lines across all surfaces
Light surface inversion, subtle highlight wash
Primary text, filled primary action background, high-contrast iconography
Try a pairing
Pick any two colors from the palette to check whether text stays readable on top.
Aa
Bone White on Leonardo Violet
4.59 : 1 contrast
- Body textPasses AA 4.5
- Large textPasses AA 3
- StrictFails AAA 7
