Overview
Design portfolio pages that feel like a restrained gallery around a few immaculate 3D statements. The shell should stay bright, minimal, and editorial so the stage imagery carries the brand personality.
Lusion
Lusion is a Bristol based award-winning creative production studio specializing in 3D visual storytelling and interactive web experiences.
4.0
8
Visits
Version History
Workflow Collections
Design Analysis
Lusion Home design analysis
Design portfolio pages that feel like a restrained gallery around a few immaculate 3D statements. The shell should stay bright, minimal, and editorial so the stage imagery carries the brand personality.
Image Direction
Make 3D art the protagonist. Use cobalt, black, and off-white sculptural forms with crisp lighting, deep shadow, and plenty of breathing room. When showing project previews, let the media occupy a single dominant frame rather than many small cards.
Colors
Base the shell in white and soft fog neutrals. Use graphite for controls and black for stage depth. Cobalt should feel like a material property inside the imagery, not a generic interface accent sprayed everywhere.
Typography
Use a simple sans with large scale and little ornament. Headlines should feel editorial and calm. Labels and supporting metadata can flip into a mono voice, but only as a subtle layer.
Design.md
System Overview
Core identity and authoring metadata from the refto.one design model.
Mono Cobalt Object Stage
A gallery-grade portfolio system pairing white editorial air with cobalt-black 3D object theaters.
editorial, sculptural, and intentionally sparse around bold 3D imagery
Primary mode: lightinteractive studio portfolioportfolio showcase
Theme
Fields outside the primary renderer remain visible here as structured fallback content.
Visual atmosphere
Summary
editorial, sculptural, and intentionally sparse around bold 3D imagery
Density
2
Variance
3
Motion
4
Signals
white editorial shell · cobalt 3D objects · black stage panels · rounded utility controls
Colors
Primitive palettes and resolved token colors for the active preview mode.
Palette colors
Gallery White
#FFFFFF
Studio Cobalt
#0016EC
Graphite
#2B2E3A
Pitch Black
#111111
Soft Fog
#E4E6EF
Object White
#F4F5FA
Usage rules
Keep the shell bright and restrained so the 3D objects dominate attention.
Use cobalt as the hero material color, not as generic UI paint.
Let graphite and black define utility controls and stage boundaries.
Token Spacing
Spacing scales rendered as tokens with a simple length specimen.
xs
6px
sm
12px
md
20px
lg
32px
section
120px
Token Radii
Corner radii tokens with a live surface sample.
sm
10px
md
18px
lg
28px
full
999px
Typography Families
Font families from the current design YAML, including fallback stacks and usage character.
Display
Aeonik
neutral but oversized editorial sans
Body
Aeonik
clean studio copy
Mono
IBM Plex Mono
labels, counters, and process cues
Typography Scale
Top-level typography scale rendered as live text specimens.
Display
4rem/—
Display
H2
2rem/—
H2
Body
1rem/—
Body
Caption
0.8125rem/—
Caption
Typography Rules
Fields outside the primary renderer remain visible here as structured fallback content.
Rules
Use large black sans headlines with minimal adornment. · Treat support copy as calm editorial text, never as technical UI copy. · Use mono sparingly for wayfinding, counters, and subtle meta information.
Motion
Motion tokens rendered as resolved values for timing and personality.
Duration
260ms-700ms
Easing
cubic-bezier(.18,.84,.16,1)
Spring
stiffness 90, damping 16
Motion
Resolved motion token values.
| Property | Value |
|---|---|
duration | 260ms-700ms |
easing | cubic-bezier(.18,.84,.16,1) |
spring | stiffness 90, damping 16 |
Layout Principles
Give the top of the page to a large statement headline and one dominant stage asset.
Use long vertical gaps so each project chapter feels like a gallery room.
Keep controls small and quiet relative to the image field.
Component Preview
Low-complexity component tokens rendered as design-system specimens.
Buttons primary
Base Attributes
Background
#2B2E3A
Text
#FFFFFF
Border
0px none transparent
Radius
999px
Padding
14px 24px
Min height
44px
Buttons secondary
Base Attributes
Background
#E4E6EF
Text
#111111
Border
0px none transparent
Radius
999px
Padding
14px 20px
Min height
44px
Navigation utility
OverviewFeaturesDocs
Base Attributes
Background
#E4E6EF
Text
#111111
Border
0px none transparent
Radius
999px
Item padding
10px 18px
Cards stage
Feature Card
Component preview content
Base Attributes
Background
#111111
Text
#FFFFFF
Border
0px none transparent
Radius
28px
Padding
0px
Labels mono
Base Attributes
Background
transparent
Text
#111111
Radius
0px
Typography
mono
Image direction
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
Role
load-bearing
Media types
- -3D object render
- -studio project still
- -immersive black stage
Subject patterns
- -modular sculptural forms
- -cobalt cylinders and crosses
- -clean black environments
Composition logic
- -Use one oversized image field per section.
- -Treat 3D material quality as the brand signature.
Treatment rules
- -Keep lighting crisp and sculptural.
- -Favor neutral environments that let cobalt and object-white stand out.
Generation cues
- -minimal studio website with cobalt 3D forms
- -white editorial shell with black stage
Avoid
- -No glossy app-store gradients.
- -No busy illustration systems.
Anti Patterns
Compact list of patterns the design system explicitly avoids.
- -Do not clutter the shell with lots of competing UI chrome.
- -Do not replace 3D object focus with stock photography mosaics.
- -Do not soften the system into pastel startup friendliness.