---
name: Lusion
description: "A premium example of a creative studio website that uses 3D visuals and bold typography to establish a strong, innovative brand identity."
version: alpha

colors:
  background: "#F0F1FA"
  primary: "#000000"
  secondary: "#2B2E3A"
  tertiary: "#1A2FFB"
  bg-soft: "#E4E6EF"
  line: "rgba(0, 0, 0, 0.1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 144px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-2.88px"
  heading1:
    fontFamily: geometric-sans
    fontSize: 43.2px
    lineHeight: 1.15
    fontWeight: 400
    letterSpacing: "-2.304px"
  body:
    fontFamily: geometric-sans
    fontSize: 16px
    lineHeight: 1.15
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: geometric-sans
    fontSize: 14.4px
    lineHeight: 1.15
    fontWeight: 400
    letterSpacing: "-1.152px"

rounded:
  sm: 4px
  md: 8px
  lg: 15px
  pill: 100px

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

---

## Overview

Lusion creates 3D visual storytelling and interactive web experiences that help brands stand out.

*A digital forge for crafting immersive 3D narratives.*

## Colors

High-contrast canvas with a single electric blue accent against monochrome forms.

- **Background (`#F0F1FA`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#2B2E3A`)** — uses `ink-soft` token
- **Accent (`#1A2FFB`)** — uses `accent` token
- **Borders (`rgba(0, 0, 0, 0.1)`)** — uses `line` token

## Typography

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

- Use tight negative letter-spacing for large display text
- Maintain a clean, geometric aesthetic for all typography
- Prefer left-aligned text for readability in long-form content

## Layout

A fluid, responsive layout dominated by a large 3D visual hero section.

*Rhythm:* Consistent 8px base increments for vertical and horizontal rhythm.

## Elevation & Depth

- 0px 2px 4px rgba(0, 0, 0, 0.04)
- 0px 6px 10px rgba(0, 0, 0, 0.04)
- Borders: No visible borders except for subtle box-shadows on cards.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 15px
- `pill`: 100px

## Components

- **button:** Pill-shaped buttons with dark backgrounds and light text, featuring rounded corners.
- **card:** Large, rounded-corner containers for showcasing 3D project thumbnails.
- **chip:** Simple uppercase text labels for navigation or categories.
- **input:** Minimalist input fields with rounded corners and subtle borders.
- **hero:** A full-width section dominated by a 3D visual and large-scale typography.

## Do's and Don'ts

**Don't:**
- Don't use multiple accent colors — screenshot shows a single electric blue accent (#1A2FFB) dominating.
- Don't use decorative or serif fonts — screenshot shows a clean, geometric sans-serif typeface (Aeonik).
- Don't use busy backgrounds or complex patterns — screenshot shows a solid, light off-white background (#F0F1FA).
- Don't use square corners — screenshot shows rounded corners (15px-100px) on all containers and buttons.
- Don't use thin, delicate typography — screenshot shows a heavy, geometric font weight for headings.
- Don't use bright, saturated backgrounds — screenshot shows a muted, low-saturation palette with a single pop color.

---

## System Prompt (paste into AI agent)

```
Positioning: A high-end creative studio specializing in 3D visual storytelling and interactive web experiences for premium brands. Key Colors: Light off-white background (#F0F1FA), deep black ink (#000000), and a single vibrant electric blue accent (#1A2FFB). Font Categories: Geometric sans-serif (Aeonik) for display and body, with a monospace option for technical details. Critical Donts: 1. Don't use multiple accent colors — the design relies on a single, powerful blue. 2. Don't use serif or decorative fonts — maintain a clean, modern geometric aesthetic. 3. Don't use square corners — the design consistently uses large border-radius (15px+). 4. Don't clutter the UI with unnecessary elements — prioritize the 3D visual and large-scale typography. 5. Don't use low-contrast colors — ensure high readability with black text on light backgrounds.
```