---
name: Leonardo.Ai
description: "The extreme use of massive, 3D-perspective uppercase typography creates a highly memorable and immersive brand identity typical of modern premium creative tools."
version: alpha

colors:
  background: "#030303"
  primary: "#FFFFFF"
  secondary: "#EDEDED"
  tertiary: "#6B5CE7"
  neutral: "#353535"
  bg-soft: "#0A0A0A"
  muted-soft: "#10151F"
  line: "rgba(255,255,255,0.1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 120px
    lineHeight: 0.9
    fontWeight: 900
    letterSpacing: "-3.3px"
  heading:
    fontFamily: humanist-sans
    fontSize: 48px
    lineHeight: 1.0
    fontWeight: 900
    letterSpacing: "-1px"
  body:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "0"
  caption:
    fontFamily: humanist-sans
    fontSize: 10px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 6px
  md: 8px
  lg: 8px
  pill: 999px

spacing:
  xs: 2px
  sm: 4px
  md: 8px
  lg: 12px
  xl: 16px
  2xl: 24px
  3xl: 32px

---

## Overview

A bold, immersive landing page for an AI image generation platform featuring a high-contrast dark theme, vibrant violet accents, and extreme 3D-perspective typography.

*A portal into a generative AI creative workshop*

## Colors

Extreme high-contrast dark theme punctuated by a single vibrant violet accent color

- **Background (`#030303`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Secondary text (`#EDEDED`)** — uses `ink-soft` token
- **Accent (`#6B5CE7`)** — uses `accent` token
- **Muted (`#353535`)** — uses `muted` token
- **Borders (`rgba(255,255,255,0.1)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** humanist-sans
- **Mono:** monospace

- Uppercase is used extensively for display and navigation
- Negative letter spacing applied to large display type
- Extreme tight line height for massive display type

## Layout

Full-bleed dark hero with massive 3D typography spanning the viewport, transitioning into standard content width sections below

*Rhythm:* Consistent 4px base scale with generous padding for interactive elements

## Elevation & Depth

- 0px 16px 48px 0px rgba(0,0,0,0.4)
- 0px 24px 80px 0px rgba(0,0,0,0.5)
- Borders: Subtle semi-transparent white borders for low-key contrast on dark backgrounds

## Shapes

- `sm`: 6px
- `md`: 8px
- `lg`: 8px
- `pill`: 999px

## Components

- **button:** Pill-shaped and rounded-rectangle buttons with high contrast fills (white on dark) or subtle bordered variants
- **card:** Dark background cards with subtle borders and generous internal padding
- **chip:** Small pill-shaped tags with subtle borders
- **input:** Standard text inputs with subtle rounded borders and dark backgrounds
- **hero:** Immersive full-screen section featuring massive 3D perspective typography with a strong call-to-action overlay

## Do's and Don'ts

**Don't:**
- Don't use a light or colorful background — screenshot shows a deep, near-black dark theme.
- Don't use small, delicate typography for primary messages — screenshot shows massive, ultra-bold display text.
- Don't introduce multiple competing accent colors — screenshot shows a single, dominant violet/blue accent.
- Don't use strictly flat, 2D grid layouts for hero sections — screenshot shows extreme 3D perspective text.
- Don't use lowercase for main navigation and headlines — screenshot shows exclusively uppercase text.
- Don't use thin, low-contrast borders — screenshot shows subtle but clear borders defining component boundaries.

---

## System Prompt (paste into AI agent)

```
This system designs for Leonardo.Ai, a creator-first generative AI platform. The aesthetic is bold, immersive, and high-contrast. The palette relies heavily on a deep near-black background (#030303) with stark white (#FFFFFF) text and a single, vibrant violet/blue accent (#6B5CE7). Typography uses a bold geometric sans-serif for display elements with extreme negative letter-spacing and tight line heights, especially in massive 3D perspective hero sections. Body text uses a clean humanist sans-serif. Layouts are full-bleed and expansive in hero areas, transitioning to standard container widths. Critical donts: avoid light backgrounds, avoid multiple accent colors, avoid small/delicate display typography, avoid strictly flat 2D hero layouts, avoid lowercase headlines, and avoid high-contrast decorative borders.
```