Identity

The AURUM system

A dark-first, gradient-led system for premium course commerce. Deep indigo ground, vibrant purple energy, glass surfaces and generous rhythm.

Brand gradients

The signature. Used for primary actions, display text and focal glow.

Brand--gradient-brand

Brand soft--gradient-brand-soft

Surface sheen--gradient-surface

Core palette

Primary--primary

Secondary--secondary

Accent--accent

Success--success

Warning--warning

Danger--danger

Surfaces

Four elevation steps. Toggle the colour mode above — every token remaps.

Base--bg-primary

Surface--bg-secondary

Raised--bg-tertiary

Elevated--bg-elevated

Radii & elevation

sm · 8

md · 14

lg · 22

xl · 30

pill

Shadow sm

Shadow md

Shadow lg

Brand glow

Spacing rhythm

A 4px base. Sections breathe at 7–9; components sit at 3–5.

space-2

space-4

space-6

space-8

space-10

Composition

Patterns

Glass & gradient surfaces

Glass sits over colour, never over flat background — otherwise it reads as grey.

Glass panel

20px blur, 170% saturation.

Gradient hairline

Masked 1px brand border.

Brand card

Soft gradient wash.

Bento grid

Six columns at ≥1100px, two at ≥768px, one below. Tiles claim 2/3/4/6.

bento-4

bento-2

Course card

The workhorse. Fixed 16:10 thumb, flexible body, pinned footer.

Bestseller

Design 8h 20m

Design systems that survive engineering

$249$390 Lifetime

Motion

Everything eases on cubic-bezier(.16,1,.3,1). Scroll reveal rises 26px over 700ms, staggered 80ms per sibling. Reduced-motion is fully honoured.

float · 7s

fade-in · 500ms

slide-up · 600ms

See the system in production

Six screens built entirely from these tokens — no hardcoded colours.

Open the product Browse catalog

The AURUM system

Brand gradients

Core palette

Surfaces

Radii & elevation

Spacing rhythm

Three faces, one voice

Scale

Gradient text

Components

Buttons

Badges & chips

Form controls

Progress