CURATED · OPEN · FREE

Lusion

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

Studio3DExperimental

↓ Download design system (10 MB)Open in OpenDesign

Visit: https://lusion.co

📦 Browse pack contents →

Identity DNA

3DVisual StorytellingInteractiveWeb ExperiencesCreative Studio

A digital forge for crafting immersive 3D narratives.

Color

#1A2FFBAccent

#000000Ink

#2B2E3AInk soft

#F0F1FABG

#E4E6EFBG soft

rgba(0, 0, 0, 0.1)Line

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

Typography

geometric-sans · monospace

display144px · 500
heading143px · 400
body16px · 400
caption14px · 400

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

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Consistent 8px base increments for vertical and horizontal rhythm.

Surfaces

sm · 4px

md · 8px

lg · 15px

pill · 100px

No visible borders except for subtle box-shadows on cards.

0px 2px 4px rgba(0, 0, 0, 0.04) · 0px 6px 10px rgba(0, 0, 0, 0.04)

Layout

1440container

12columns

24pxgutter

768 / 1024breakpoints

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

Motion & Interaction

300msmicro

400mssmall

600msmedium

cubic-bezier(0.35, 0, 0, 1)easing

Smooth transform animations on hover · Subtle opacity transitions for UI elements · Continuous 3D object movement in hero sections

Scale and color transitions on interactive elements. · Immediate visual feedback with subtle transform shifts.

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.

Voice & Don'ts

Tone Confident, professional, and innovative.
Headlines Bold, concise statements that emphasize visual impact and storytelling.
CTAs Direct and action-oriented, often using uppercase text.

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.
Avoid: Jargon-heavy descriptions
Avoid: Passive voice
Avoid: Cluttered layouts

Inside the pack — real screenshots

Lusion — 桌面滚动分段（90% viewport 步进） — 桌面滚动分段（90% viewport 步进）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko