---
version: alpha
name: Lusion
description: Cinematic dark creative-studio system — near-black WebGL canvas, off-white grotesque type at billboard scale with tight tracking, a single electric lime accent reserved for interaction, near-zero radii, and motion treated as the primary material.
colors:
  # Canvas + ink
  background: "#0a0a0a"
  surface: "#111111"
  surface-soft: "#181818"
  ink: "#f2f2f0"
  ink-secondary: "#9a9a98"
  ink-muted: "#5c5c5a"

  # Signature accent — electric lime, used only for interaction/highlight
  primary: "#c6ff3a"
  accent-glow: "#d8ff6e"

  # Neutral scale (dark-first)
  neutral-1000: "#0a0a0a"
  neutral-900: "#111111"
  neutral-800: "#1c1c1c"
  neutral-700: "#2a2a2a"
  neutral-600: "#3d3d3d"
  neutral-400: "#7a7a78"
  neutral-200: "#bdbdba"
  neutral-50: "#f2f2f0"

  # Borders / hairlines on dark
  border: "#262626"
  border-strong: "#3a3a3a"

  # On-color
  on-primary: "#0a0a0a"
  on-ink: "#0a0a0a"

  # Selection / overlay
  selection-bg: "#c6ff3a"
  selection-text: "#0a0a0a"
  overlay-scrim: "#000000"

typography:
  display-hero:
    fontFamily: "Space Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 88px
    fontWeight: 500
    lineHeight: 0.98
    letterSpacing: -3.5px
  display:
    fontFamily: "Space Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 64px
    fontWeight: 500
    lineHeight: 1.02
    letterSpacing: -2.4px
  section-heading:
    fontFamily: "Space Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 44px
    fontWeight: 500
    lineHeight: 1.08
    letterSpacing: -1.6px
  sub-heading:
    fontFamily: "Space Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.8px
  card-title:
    fontFamily: "Space Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: -0.4px
  body-large:
    fontFamily: "Space Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: -0.2px
  body:
    fontFamily: "Space Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-small:
    fontFamily: "Space Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  label-mono:
    fontFamily: "Space Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 1.5px
  caption:
    fontFamily: "Space Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 1.2px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 64px
  3xl: 96px
  4xl: 160px

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  md: 8px
  pill: 9999px
  circle: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.accent-glow}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.pill}"
    padding: 14px 28px

  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.border-strong}"
  button-ghost-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.primary}"

  tag:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 6px 14px
    borderColor: "{colors.border}"

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 24px
    borderColor: "{colors.border}"

  card-project:
    backgroundColor: "{colors.neutral-1000}"
    textColor: "{colors.ink}"
    rounded: "{rounded.sm}"
    padding: 0px
    borderColor: "{colors.border}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label-mono}"
    padding: 20px 40px

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 14px 16px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.sm}"
    padding: 14px 16px
    borderColor: "{colors.primary}"

  link-inline:
    textColor: "{colors.primary}"
    typography: "{typography.body}"
---

# Lusion Design System

## Overview

Lusion is a creative development studio, and its website is a portfolio that behaves like a film reel — the design system exists to get out of the way of motion, WebGL, and 3D storytelling. The canvas is near-black (`{colors.background}`), a deliberate cinema-house darkness that lets rendered scenes, video reels, and shader work glow against it. Chrome is whisper-quiet: off-white text (`{colors.ink}`), hairline borders (`{colors.border}`), and almost no decoration. The interface is a frame around the work, not the work itself.

Typography carries the brand's voice. A geometric grotesque (Space Grotesk as the closest Google match to Lusion's bespoke display face) runs at billboard scale — hero lines push past 80px with aggressive negative tracking (-3.5px), giving headlines a compressed, confident, gallery-poster presence. The type is set in a narrow weight band (400 reading, 500 display), trusting size and tracking rather than heaviness to create hierarchy. A monospace companion (Space Mono) handles eyebrows, navigation labels, captions, and project metadata in uppercase with wide positive tracking — the "studio index card" voice that grounds the cinematic display type in technical credibility.

Color is radically restrained: a dark neutral scale from `{colors.background}` to `{colors.ink}` does almost all the work, and a single electric lime (`{colors.primary}`) is the only saturated color in the system. That lime is precious — it appears on primary CTAs, link hovers, focus rings, and text selection, and nowhere else. Reserving one high-voltage accent against a monochrome dark field is the system's entire color thesis: interaction is the only thing allowed to be bright.

Geometry is sharp and quiet. Radii are tiny (2–8px) on cards and inputs, project tiles are nearly square-cornered to read as full-bleed media, and the only generous curve is the `{rounded.pill}` on buttons and tags. Motion is the real material here — staggered reveals, scroll-driven scenes, cursor-reactive 3D — but the static token system stays austere so the animation reads as the signal.

**Key Characteristics:**
- Near-black cinema canvas (`{colors.background}`) so WebGL/3D and video reels glow
- Geometric grotesque display type at billboard scale with aggressive negative tracking (-3.5px at 88px)
- Single electric-lime accent (`{colors.primary}`) reserved strictly for interaction — CTAs, hovers, focus, selection
- Monospace uppercase labels with wide positive tracking for eyebrows, nav, and metadata
- Narrow weight band (400/500) — hierarchy from size and tracking, not weight
- Tiny radii on surfaces (near-square project tiles), pill radius only on buttons/tags
- Hairline borders on dark instead of fills for structure
- Motion as primary material; static chrome kept austere so animation reads as signal

## Colors

### Canvas & Ink
- **Canvas Black** (`{colors.background}`): Page background — the cinema-house darkness everything renders against.
- **Surface** (`{colors.surface}`): Cards, inputs, raised panels — one step up from canvas.
- **Surface Soft** (`{colors.surface-soft}`): Hover/nested surfaces.
- **Off-White Ink** (`{colors.ink}`): Primary text and headings — slightly warm, never pure white.
- **Secondary Ink** (`{colors.ink-secondary}`): Supporting copy, metadata.
- **Muted Ink** (`{colors.ink-muted}`): Disabled text, faint captions.

### Accent
- **Electric Lime** (`{colors.primary}`): The single saturated color — primary CTAs, link hovers, focus rings, selection. Never used as a large fill or background.
- **Lime Glow** (`{colors.accent-glow}`): Brighter hover state of the accent.

### Neutral Scale
- **Neutral 1000–50** (`{colors.neutral-1000}` → `{colors.neutral-50}`): Dark-first ramp for surfaces, borders, and text tiers.

### Borders
- **Border** (`{colors.border}`): Default hairline on dark — structure without fills.
- **Border Strong** (`{colors.border-strong}`): Ghost button outline, emphasized dividers.

### On-Color & Overlay
- **On Primary** (`{colors.on-primary}`): Black text on the lime accent (the only legible pairing).
- **Selection** (`{colors.selection-bg}` / `{colors.selection-text}`): Lime selection highlight with black text.
- **Overlay Scrim** (`{colors.overlay-scrim}`): Full-black scrim behind modals/menus.

## Typography

### Font Family
- **Display/Body**: `Space Grotesk` (closest Google match to Lusion's bespoke geometric grotesque), fallbacks `Helvetica Neue, Arial, sans-serif`
- **Mono**: `Space Mono` for labels, eyebrows, nav, captions, project metadata

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | 88px hero — billboard poster impact |
| `display` | 64px section openers |
| `section-heading` | 44px feature titles |
| `sub-heading` | 28px lighter sub-sections |
| `card-title` | Project / card headings |
| `body-large` | Lead paragraphs, intros |
| `body` | Standard reading text |
| `body-small` | Dense UI text |
| `label-mono` | Uppercase nav, eyebrows, button text |
| `caption` | Project metadata, fine print |

### Principles
- **Size over weight**: Hierarchy comes from scale and tracking, not bold. Display stays at 500, body at 400.
- **Compression at scale**: Negative tracking tightens as size grows (-3.5px at 88px), giving headlines a poster-grade density.
- **Mono as the technical voice**: Uppercase Space Mono with wide positive tracking (~1.5px) for all labels — the studio-index counterpoint to the cinematic display type.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base rhythm is 8px, expanding to very large section gaps (`{spacing.3xl}`–`{spacing.4xl}`) so work breathes against the dark canvas.

### Grid & Container
- Full-bleed hero with a WebGL/3D scene behind compressed display type
- Project grid: large near-square tiles, often 2-up, edge-aware
- Generous vertical rhythm between sections; horizontal margins stay tight on desktop to maximize media

### Whitespace Philosophy
- **Darkness as negative space**: The black canvas IS the whitespace — emptiness is rendered, not blank.
- **Media-first**: Layout defers to project visuals; type and chrome occupy the margins.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (0) | No border | Canvas, text blocks |
| Hairline (1) | `1px solid {colors.border}` | Cards, inputs, dividers |
| Strong (1b) | `1px solid {colors.border-strong}` | Ghost buttons, emphasized panels |
| Accent focus | `2px solid {colors.primary}` | Keyboard focus on interactive elements |

**Depth Philosophy**: Depth comes from real motion and 3D, not box-shadows. On flat chrome, separation is achieved with hairline borders and one-step surface lifts (`{colors.background}` → `{colors.surface}`), keeping the static UI quiet so animated and rendered layers own the perception of depth.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed media edges |
| `xs` | 2px | Project tiles, near-square media |
| `sm` | 4px | Inputs, small panels |
| `md` | 8px | Cards |
| `pill` | 9999px | Buttons, tags |
| `circle` | 50% | Avatars, cursor/scroll dots |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — Electric lime fill, black text, pill, uppercase mono label. The only bright element on the page.
- **`button-ghost`** — Transparent on canvas with `{colors.border-strong}` outline; hover flips text to lime and border to lime.

### Tags
- **`tag`** — Surface pill with `{colors.border}` hairline and secondary-ink mono caption — used for project categories/disciplines.

### Cards
- **`card`** — Surface with hairline border, small radius.
- **`card-project`** — Near-square, near-zero radius, no padding — a full-bleed media frame for portfolio work.

### Inputs
- **`input`** — Surface fill, hairline border; focus border switches to `{colors.primary}`.

### Navigation
- **`nav-bar`** — Transparent over canvas, uppercase mono links, minimal padding.

## Do's and Don'ts

### Do
- Keep the canvas near-black so rendered work and video glow
- Reserve `{colors.primary}` strictly for interaction — CTAs, hovers, focus, selection
- Drive hierarchy with size and negative tracking, not weight
- Use uppercase Space Mono with wide positive tracking for labels and metadata
- Use hairline borders on dark instead of fills for structure
- Keep project tiles near-square with tiny radii to read as full-bleed media

### Don't
- Don't introduce a second saturated accent — one lime is the whole color thesis
- Don't use the lime as a large background fill — it's a signal, not a surface
- Don't add box-shadows for depth — depth comes from motion and 3D
- Don't use pure white text — `{colors.ink}` is intentionally warm-off-white
- Don't use bold weights to create emphasis — scale up instead
- Don't put pill radius on cards or media — pills are for buttons and tags only

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, hero scales down, mono labels shrink |
| Tablet | 600–1024px | 2-up project tiles, reduced section gaps |
| Desktop | 1024–1440px | Full grid, billboard display type |
| Large | >1440px | Centered, generous margins, maximum media size |

### Touch Targets
- Buttons use 14px+ vertical padding (comfortable pill targets)
- Nav mono links spaced for tap; hamburger menu on mobile
- Scroll/cursor indicators sized as circular dots

### Collapsing Strategy
- Hero: 88px display scales down while preserving proportional negative tracking
- Project grid: 2-up → single column full-bleed
- Section spacing: `{spacing.4xl}` → `{spacing.2xl}` on mobile
- WebGL/3D scenes simplify or fall back to video/poster on low-power devices

### Image & Motion Behavior
- Project media stays full-bleed with near-zero radius at all sizes
- Motion reveals respect reduced-motion preferences
- Heavy 3D scenes degrade gracefully to static frames on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Canvas: Near-Black `{colors.background}`
- Heading/body text: Off-White `{colors.ink}`
- Secondary text: `{colors.ink-secondary}`
- Accent (CTA/hover/focus/selection): Electric Lime `{colors.primary}`
- Borders: Hairline `{colors.border}`

### Example Component Prompts
- "Build a hero on near-black `{colors.background}`. Headline 88px Space Grotesk weight 500, line-height 0.98, letter-spacing -3.5px, color `{colors.ink}`. Eyebrow above in 12px Space Mono uppercase, letter-spacing 1.5px, color `{colors.ink-secondary}`. Lime pill CTA (`{colors.primary}` fill, `{colors.on-primary}` text)."
- "Create a project tile: full-bleed media, 2px radius, `{colors.border}` hairline. Title below in 22px Space Grotesk weight 500. Category tag: surface pill with `{colors.border}` border and 11px Space Mono uppercase caption."
- "Design a ghost button: transparent on canvas, `{colors.border-strong}` 1px outline, pill radius, 12px Space Mono uppercase. Hover: text and border switch to `{colors.primary}`."
- "Style text selection lime: `{colors.selection-bg}` background, `{colors.selection-text}` text."

### Iteration Guide
1. One accent only — `{colors.primary}` marks interaction and nothing else
2. Hierarchy = size + negative tracking, never weight
3. Hairline borders on dark, never box-shadows, for structure
4. Uppercase Space Mono for every label, eyebrow, and metadata string
5. Keep media full-bleed and near-square; pills only on buttons/tags
6. Treat the black canvas as rendered negative space — let the work glow

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Lusion. Brand names and trademarks belong to their respective owners.