A modular CSS framework for building Destiny 1 & 2 style user interfaces in HTML.
Typography, colors and components are modeled after the in-game UI of Destiny 2 — item rarity tiers, damage types, menu buttons, item tiles, tooltips, progress bars and more.
Live showcase & documentation (built from /docs)
Grab the compiled stylesheet from dist/ and add the destiny class to a wrapping
element (usually <body>). All framework styles are scoped under that class.
<link href="destiny2-full-framework.min.css" rel="stylesheet" />
<body class="destiny">
<button class="button">Launch</button>
</body>Every color is a CSS custom property on the .destiny scope. Derived shades
(gradients, hover borders, translucent fills) are computed from the same variables with
color-mix(), so overriding one token re-colors everything that uses it — no rebuild
needed:
.destiny {
--d2-rarity-exotic: #e0c257; /* item tiles, tooltips, buttons, text… */
--d2-accent-green: #6ab87a; /* checkbox, radio, toggle, confirm buttons */
--d2-damage-solar: #ff7b2e;
}The full token list (text, surfaces, borders, five rarity tiers, six damage types,
states and progress colors) lives in src/_variables.scss, and the showcase has a
live theme editor to try values out.
Destiny 2 uses Neue Haas Grotesk Display Pro. If you have access to the font, add
@font-face declarations for these weights (see docs/fonts/style.css for an example);
otherwise the framework falls back to Helvetica/Arial:
- Neue Haas Grotesk Display Pro 55 Roman
- Neue Haas Grotesk Display Pro 56 Roman Italic
- Neue Haas Grotesk Display Pro 65 Medium
- Neue Haas Grotesk Display Pro 75 Bold
| Module | Classes | Description |
|---|---|---|
| Typography | .spaced-header, .header, .hud, .fui, .active-text, .section-label |
Header, HUD and body copy treatments |
| Buttons | .button (+ .confirm, .danger, .gold, .ghost, .hold, sizes) |
Menu buttons with the white fill hover |
| Key hints | .key, .key-prompt |
Keyboard / controller prompts |
| Forms | .checkbox, .radio, .toggle, .text-input, .text-area, .select, .setting-row |
Settings-screen style controls |
| Menu lists | .menu-list, .menu-item |
Pause-menu style option lists |
| Navigation | .nav-tabs, .nav-subtabs |
Director / character screen tabs |
| Items | .item-tile, .item-grid, .engram (+ rarity classes) |
Inventory tiles with rarity gradients, masterwork, overlays |
| Tooltips | .item-tooltip |
Item inspection cards with rarity headers, perks and flavor text |
| Progress | .progress (+ .xp, .objective, element colors), .progress-label |
XP, objective and super charge bars |
| Stat bars | .stat-list |
Weapon / armor stat readouts with delta previews |
| Cards | .card (+ accent edges) |
Translucent quest / vendor panels |
| Tables | .table |
Scoreboard-style tables |
| Dialogs | .dialog-backdrop, .dialog |
Centered confirmation prompts |
| Utilities | .text-*, .bg-* |
Rarity, damage type and state colors |
See the showcase (docs/index.html) for live examples of every component, each with a
"view code" toggle, plus composed examples (character screen, settings panel, post-game
scoreboard).
There are also full-page interactive demos
(docs/demos.html) with a switcher between four complete screens — a character
inventory with working equip/dismantle, a Xûr vendor screen with hold-to-purchase, a
settings screen, and an animated post-game scoreboard.
docs/llms.txt(served at eververse.trade/llms.txt) is a complete, self-contained usage reference written for LLMs: setup, the full class vocabulary, canonical markup for every component, theming tokens and composition patterns. Point any AI assistant at it to generate correct markup.CLAUDE.mdgives Claude Code the build commands and architecture rules for working on the framework itself..claude/skills/contains Claude Code skills for the common workflows:build-destiny-page(compose a UI with the framework),add-component(extend the framework correctly) andretheme(change colors the right way).
The framework is written in small SCSS modules under src/components/, pulled together
by src/main.scss. Comment out any import you don't need for a smaller build.
npm install
npm run build-css # builds docs/dist + dist (expanded and minified)
npm run watch-css # rebuilds docs/dist on changeMIT — see package.json.
destiny-ui-css is a fan-made project and is not affiliated with Bungie. Destiny and Destiny 2 are trademarks of Bungie, Inc.