Lustro

Lustro is a dark-first design language: a deep indigo-black canvas, translucent glass surfaces, and an indigo-to-pink/cyan gradient accent system. Reference implementation: TemplateMo tm-624. This page is the build guide - copy tokens straight from here.

Colors

Core palette

Indigo
#6366f1

Indigo soft
#818cf8

Indigo softer
#a5b4fc

Pink
#ec4899

Pink soft
#f472b6

Cyan
#22d3ee

Surfaces

Background
#07070f

Glass
rgba(148,140,255,.07)

Glass raised
rgba(148,140,255,.12)

Glass border
rgba(148,140,255,.16)

• Body text: #ffffff. Secondary text: #b8b3b0.
• Semantic: success #00d992, error #ef4444, warning #fbbf24. Keep status chips on semantic colors, not brand gradients.

Gradients

Primary accent (buttons, active tabs, highlights):

linear-gradient(90deg, #6366f1, #ec4899)

Full spectrum (hero headings, decorative):

linear-gradient(90deg, #818cf8, #ec4899, #22d3ee)

Ambient background glow (fixed, behind everything):

background-image:
  radial-gradient(60rem 30rem at 85% -10%, rgba(99, 102, 241, 0.18), transparent 60%),
  radial-gradient(50rem 25rem at -10% 110%, rgba(236, 72, 153, 0.12), transparent 60%);
background-attachment: fixed;

Gradients go on background-image, never background-color

CSS background-color cannot hold a gradient. Frameworks that paint buttons via a background-color variable (Bootstrap's --bs-btn-bg does this) will silently drop the gradient. Put gradient fills on background-image and leave background-color transparent.

Typography

Role	Font	Usage
Display / headings	Space Grotesk (500-700)	h1-h3, hero copy, tight -0.01em tracking
Body / UI	DM Sans (400-700)	paragraphs, labels, controls
Code / data	JetBrains Mono	code, hex values, IDs, timestamps

<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">

Components

Glass card

.card {
  background: rgba(148, 140, 255, 0.07);
  border: 1px solid rgba(148, 140, 255, 0.16);
  border-radius: 16px;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

Raised state: swap the background for rgba(148, 140, 255, 0.12).

Primary button

.btn-primary {
  background-image: linear-gradient(90deg, #6366f1, #ec4899);
  background-color: transparent;
  border: 0;
  color: #fff;
  border-radius: 12px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
}

Active nav tab

Same gradient as the primary button, with a soft glow: box-shadow: 0 0 16px rgba(99, 102, 241, 0.45).

Data visualization

Series order for charts and sparklines: indigo #6366f1, pink #ec4899, cyan #22d3ee, indigo-soft #818cf8, emerald #10b981, amber #fbbf24. Sparklines default to the indigo stroke with a 20%-opacity fill of the same color.

Rules of thumb

1. Dark canvas always; Lustro has no light mode.
2. One gradient accent per view - if the primary button is a gradient, nearby accents stay flat.
3. Text over glass sits at full opacity; only surfaces are translucent.
4. Status stays semantic: success/error/warning never use brand gradients.