Theming

Every component reads Destiny's look from one set of typed CSS variables — @engram/tokens. Colors are semantic (never raw hex in a component); type, tracking, and shape follow Destiny's flat FUI rules. Both lightness themes (darkness / light) re-tune the same token names, and you can override any of them.

Install the theme

@engram/tokens

npx shadcn@latest add @engram/tokens

Every component depends on this theme, so it's pulled in automatically when you add a component. Import it once in your global stylesheet:

/* app/globals.css — after your Tailwind import */
@import "@engram/tokens/theme.css";

Palette

CSS variables

Surfaces & accents

Background

--engram-bg

Surface

--engram-surface

Raised

--engram-raised

Raised 2

--engram-raised-2

Border

--engram-border

Border strong

--engram-border-strong

Foreground

--engram-fg

Muted

--engram-muted

Faint

--engram-faint

Accent

--engram-accent

Accent 2

--engram-accent-2

Gold

--engram-gold

Damage elements

Kinetic

--engram-kinetic

Arc

--engram-arc

Solar

--engram-solar

Void

--engram-void

Stasis

--engram-stasis

Strand

--engram-strand

Prismatic

--engram-prismatic

Ammo

Primary

--engram-ammo-primary

Special

--engram-ammo-special

Heavy

--engram-ammo-heavy

Rarity & tier

Basic

--engram-basic

Common

--engram-common

Rare

--engram-rare

Legendary

--engram-legendary

Exotic

--engram-exotic

Masterwork

--engram-masterwork

Deepsight

--engram-deepsight

Class & status

Titan

--engram-class-titan

Hunter

--engram-class-hunter

Warlock

--engram-class-warlock

--engram-ok

Warn

--engram-warn

Bad

--engram-bad

Typography

Archivo

Display 700 / tight

Sub-screen header

Tracked label 600

Tracked title

Kicker / eyebrow

Eyebrow · Context

Body 400

General body copy — a clean humanist grotesque for readability.

Fiction / italic

"Lead by example."

Numerics (tabular)

2,010 · 182,400

Mono (code / ids)

find_god_rolls

Shape & tracking

layout rules

Title tracking

tracking-engram-title · var(--engram-tracking-title)

Label tracking

tracking-engram-label · var(--engram-tracking-label)

Corners

0Surfaces are square — FUI depth comes from translucency + blur, not rounded elevation.

Spacing

Tailwind's 4px scale (gap-2 = 8px, p-5 = 20px). Dense by default; sections separated by gap-10.

Override

re-tune any token

Because it's all CSS variables, you own the look — override any token in your own stylesheet and every component follows. No forking, no prop drilling.

/* Re-tune any token in your own CSS — components follow. */
:root {
  --engram-accent: #36a8e0;   /* focus / links / active */
  --engram-gold: #f5c93f;     /* masterwork / premium */
}
[data-theme="light"] {
  --engram-accent: #1583c2;
}