Design System
Analysis of Lusion

A gallery-white canvas, pure-black Aeonik type, and a single electric-blue spark — a deliberately flat UI that lets the 3D stage carry all the colour and depth.

01 — Foundations

Colour Palette

02 — Foundations

Typography

Set in Aeonik, a proprietary geometric grotesque — shown here in Space Grotesk, the nearest Google substitute. Hierarchy comes from size and tight negative tracking, almost never from weight: nearly everything sits at regular 400, with 500 reserved for small uppercase labels.

03 — Components

Button Variants

button-primary
The signature charcoal pill. Fully rounded, uppercase 14px medium, floats over content.
button-secondary
White pill with a 1px black outline — the lightweight inverse used for back / secondary nav.
button-accent
The electric-blue fill, used rarely for a single high-intent moment.
button-pill
Soft grey utility chip for tags and toggles within content.
link · inline
About usProjects
Black underlined links that shift to electric blue on hover.
04 — Components

Cards & Surfaces

Featured-work tiles: square media, a small radius, no resting shadow — depth arrives only on hover as a whisper-soft lift.

05 — Components

Form Elements

text-input
textarea
06 — Foundations

Spacing Scale

An 8px base expanding through a generous rhythm — section padding errs large to protect the negative space the design depends on.

07 — Foundations

Border Radius

Two shape stories: content uses a small-to-medium radius, while every control resolves to a full pill or circle.

08 — Foundations

Elevation & Depth

Level 0 — 1px hairline only. The default: the UI is flat by design, with separation coming from space rather than shadow.
Level 1 — a ~4% black double-layer, the only shadow found on the site, used on the odd floating card or hovered tile.
Level 2 — a deeper modal/popover lift (inferred), kept restrained to match the otherwise shadowless system.
09 — Responsive

Responsive Behavior

NameWidthKey changes
Mobile< 768pxHero display drops to ~48–56px; galleries collapse to one column; pill nav becomes a menu toggle.
Tablet768–1023pxFour-up tiles become two-up; display sizes ease down; column gutters tighten.
Laptop1024–1279pxFull layout returns; display headings near full scale; 3D moments stay full-bleed.
Desktop≥ 1280pxCentered ~1200px column with edge-to-edge 3D bands; display type at full 96–112px.

The monochrome-on-white, pill-control, big-quiet-heading identity holds at every breakpoint — only the display sizes and column counts change.

Engagement Tiers

Illustrative only — Lusion is a studio, not a SaaS. These cards demonstrate the system's pricing-card pattern, with the featured tier inverted to the near-black band Lusion uses for full-bleed moments.

Sprint
$25k/ engagement
A focused 3–4 week build for a single hero moment.
  • One interactive scene
  • Concept + art direction
  • WebGL prototype
  • 2 revision rounds
Studio● Most requested
$80k/ engagement
A full site experience — design, motion, 3D, and build.
  • Full multi-scene experience
  • Bespoke 3D + motion system
  • Performance optimisation
  • Dedicated creative lead
Partner
Custom/ retainer
Ongoing creative partnership across multiple launches.
  • Rolling roadmap
  • Priority studio capacity
  • R&D in Lusion Labs
  • Quarterly creative reviews

Project Pipeline

Illustrative data table demonstrating list, status-pill, and pagination patterns in the Lusion palette.

IDProjectClientStatusWhen
LSN-412Particle FieldAetherLiveThis week
LSN-411Liquid TypeMonolithLive2 weeks ago
LSN-409Spatial ReelVantageIn buildIn progress
LSN-407Kinetic LogoNorthwindIn buildIn progress
LSN-405Depth MapOrbitalLiveLast month
1–5 of 412
‹123›

Account Forms

Illustrative auth pattern — minimal fields, full-pill buttons, electric-blue focus states.

Sign in

Welcome back

OR
Create account

Join the Labs

OR