# destiny-ui-css
> A modular CSS framework for building Destiny 1 & 2 style user interfaces in plain
> HTML. This file is the complete usage reference, written for LLMs and humans alike:
> if you are an AI assistant generating markup with this framework, everything you
> need is on this page. Live docs: https://eververse.trade/ · Interactive demos:
> https://eververse.trade/demos.html · Source: https://github.com/itssimple/destiny-ui-css
## Setup
Include the stylesheet and put the `destiny` class on a wrapping element (usually
``). ALL framework classes only work inside that scope.
…components…
The design uses the "Neue Haas Grotesk Display Pro" webfont when `@font-face`
declarations for it exist on the page (see docs/fonts/style.css in the repo for the
expected family names); otherwise it falls back to Helvetica/Arial automatically.
Pages look best on a very dark background (`body` defaults to black).
## Rules of thumb for generated markup
- Wrap everything in an element with class `destiny`; never emit framework classes
outside it.
- Item rarity classes are: `common`, `uncommon`, `rare`, `legendary`, `exotic`.
Damage/element classes are: `kinetic`, `arc`, `solar`, `void`, `stasis`, `strand`.
These same names work as `.text-` and `.bg-` utilities, as `.item-tile`
modifiers, as `.tooltip-header` modifiers, as `.progress` modifiers (damage types
only) and as `.card` accents (`.accent-`).
- Buttons, tabs, labels and prompts are auto-uppercased by CSS — write natural-case
text in the HTML.
- Interactive behavior (switching tabs, hold-to-confirm actions, filling progress
bars) is NOT included; wire your own JS. The framework only styles states via
classes like `active`, `selected`, `disabled`, `owned`, or native `:checked`.
- Do not restyle framework internals; to change colors, override the `--d2-*` custom
properties (see Theming).
## Theming
Every color is a CSS custom property on `.destiny`. Derived shades (gradients, hover
borders, translucent fills) are computed from the same variables with `color-mix()`,
so overriding one token re-colors everything derived from it:
.destiny {
--d2-rarity-exotic: #e0c257;
--d2-accent-green: #6ab87a;
--d2-damage-solar: #ff7b2e;
}
Available tokens (defaults in parentheses):
- Text: `--d2-header-text` (#fff), `--d2-alt-header` (#fcedd3 cream/gold),
`--d2-text` (#b6bbb7 body gray)
- Surfaces/borders: `--d2-background` (#12171d), `--d2-surface`, `--d2-surface-raised`,
`--d2-border`, `--d2-border-faint`, `--d2-hover-overlay`, `--d2-hr`
- Rarity: `--d2-rarity-common` (#c2bcb4), `--d2-rarity-uncommon` (#356f42),
`--d2-rarity-rare` (#5076a2), `--d2-rarity-legendary` (#522f65),
`--d2-rarity-exotic` (#ceae33)
- Damage: `--d2-damage-kinetic` (#d5d5d5), `--d2-damage-arc` (#7aecf3),
`--d2-damage-solar` (#f0631e), `--d2-damage-void` (#b184c5),
`--d2-damage-stasis` (#4d78be), `--d2-damage-strand` (#35e366)
- States: `--d2-accent-green` (#5aa56a confirm/checkbox), `--d2-accent-green-hover`
(#388348), `--d2-danger` (#c73632 dismantle red), `--d2-warning` (#eade8b power
yellow), `--d2-xp` (#c0e8b4), `--d2-quest` (#b9af69)
- Progress: `--d2-progress-track`, `--d2-progress-fill`
## Typography
Section title
wide-tracked gold header
Big screen title
huge bold, e.g. "CHARACTER"
Medium heading
Tracked title
wide letter-spacing
Small heading
HUD header
HUD sub-header
HUD description
italic
General body copy
Sub-title
add `bold` for medium weight
Flavor text
italic lore style
1810
big stat number
On-screen button text
Weapons
small gold label + rule line
## Color utilities
`.text-` and `.bg-` for every rarity and damage type, plus
`.text-gold`, `.text-success`, `.text-danger`, `.text-warning`, `.text-muted`,
`.uppercase`. Example: `Fatebringer`.
## Buttons
green
red
gold
borderless
/
`.hold` animates a fill sweep while pressed (1.2s); fire your action from JS after the
hold completes. Group buttons with `
` (add `center` or `end`).
## Key hints
E InteractA controller face button
Esc outlined variant for dark overlays
## Form controls
Add class `block` for one-per-line; `leftCheck`/`leftRadio` puts the label on the left.
Add `inline` to `.text-input` for auto width; `block` to `.select` for full width.
Settings row (label left, control right, hover highlight):
Crossplay
## Menu lists (pause-menu style)
Continue
Character Hunter · 1810
Journey
## Navigation
`.nav-subtabs` is the smaller underlined variant for category rows. Move the `active`
class yourself on click.
## Items & rarity
gold masterwork frame
selected/hover frame
sizes: small / (default) / large
99
1810
Use a real icon with an inline background-image; the rarity gradient is the fallback:
``
…up to 9 tiles, 3 per row…
add `wide` for 9 across
rotated engram diamond
## Item tooltip (inspection card)
Gjallarhorn
Rocket LauncherExotic
1810Solar · Heavy
Wolfpack RoundsRounds split into tracking missiles.
"…" —Feizel Crux
The header takes a rarity class. Repeat `.tooltip-body` blocks for extra sections
(they get separator lines). All sections are optional.
## Progress bars
Season rank 8473,410 / 100,000
Variants on `.progress`: `xp` (thin green), damage types (`arc`, `solar`, `void`,
`stasis`, `strand` color the fill), and `objective`:
Defeat combatants12/20
Set the fill width inline or from JS.
## Stat bars (weapon/armor stats)
Impact84
…repeat the three spans per stat…
Optional delta preview inside `.stat-bar` (gain, or loss with `negative`):
``
## Cards
The Arms DealerStrike
…
Accents: `accent-exotic`, `accent-legendary`, `accent-arc`, `accent-solar`,
`accent-void`, `accent-stasis`, `accent-strand`. `selectable` makes the card respond
to hover; `selected` pins the highlighted state.
## Tables (scoreboard style)
Guardian
Score
You
3,320
Saint-14
2,940
`.highlight` marks your own row; `.num` right-aligns numeric cells.
## Dialogs
Dismantle
Dismantle Fatebringer?
This weapon will be lost forever.
## Composition patterns
- Character/inventory screen: `.nav-tabs` on top, rows of an equipped
`.item-tile.large` next to an `.item-grid`, a sticky `.item-tooltip` as the detail
pane. See https://eververse.trade/demos.html#character
- Vendor screen: grid of tiles/cards with prices, detail tooltip + `.button.gold.hold`
purchase button. See https://eververse.trade/demos.html#vendor
- Settings screen: `.nav-subtabs` + a `.card` full of `.setting-row`s.
- Post-game scoreboard: `.header` block, two labeled `.progress` team bars, a
`.table` with a `.highlight` row, centered `.button-row`.