Card
Surface card
Use cards for repeated items, panels and framed tools.
Lightning Preservation Group
Design system
Reusable visual standards for building pages, blocks and templates across the site.
Colours
Gold
var(--gold)
Background
var(--bg)
Surface
var(--color-surface)
Control
var(--color-surface-control)
Typography
Eyebrow
Section title
Lead copy is used for section introductions and short descriptive text.
Body copy
Use Lato for all interface and marketing text. Headings are italic, uppercase and heavy where they need the Lightning visual treatment.
Muted text supports secondary information without competing with primary content.
Cards and Grids
Grid
.grid .grid--3
Responsive grids collapse cleanly at tablet and mobile breakpoints.
Stack
.stack
Use stack for simple vertical spacing without bespoke margins.