Add the compiled stylesheet to your page and put the destiny
class on a wrapping element (usually <body>). All framework
classes only apply inside that scope.
<link href="destiny2-full-framework.css" rel="stylesheet" />
<body class="destiny">
<button class="button">Launch</button>
</body>The framework uses Neue Haas Grotesk Display Pro when available and falls back to Helvetica. Every demo below has a view code toggle showing the exact markup used.
The palette is sampled from the game: item rarity tiers, damage types, and
interface states. Each color is available as a
.text-* and .bg-* utility class.
Every color in the framework 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;
}Try it live — these pickers set the variables on this page, and every component in the showcase follows:
The full token list is in src/_variables.scss — text, surfaces,
borders, five rarity tiers, six damage types, states and progress colors.
Header, HUD and body-copy styles matching the different text treatments used across the game's screens.
Keyboard and controller prompts for on-screen actions.
Inventory tiles with rarity-gradient backgrounds, hover/selected states,
masterwork frames, quantity and power overlays — plus engrams. Add a
background-image inline to use a real item icon.
The item inspection card: rarity-colored header, power and damage type, perk rows and flavor text.
XP bars, objective trackers and element-colored charge bars, with an optional label row above.
Weapon and armor stat readouts. A .stat-delta segment previews a
gain (green) or loss (red) against another item.
Translucent panels for quests, vendor categories and detail panes. Accent
classes add a colored edge; .selectable makes the whole card
respond to hover.
Scoreboard-style tables; .highlight marks your own row and
.num right-aligns numeric columns.
| Guardian | Class | Kills | Deaths | Efficiency | Score |
|---|---|---|---|---|---|
| Saint-14 | Titan | 21 | 3 | 7.00 | 2,450 |
| You | Hunter | 18 | 6 | 3.00 | 2,105 |
| Ikora Rey | Warlock | 16 | 5 | 3.20 | 1,980 |
| Shaxx (spectating) | — | 0 | 0 | — | 0 |
The centered confirmation prompt with rules above and below the message. Use
.dialog-backdrop as a fixed overlay — the demo uses the
.inline helper to render in the page flow.
Components composed into an inventory view: navigation tabs, an equipment grid, and an inspection tooltip with stat bars.
Setting rows composed with toggles, selects and sub-navigation.
A Crucible match summary composed from headers, tables and progress bars.
| Guardian | Kills | Assists | Deaths | Score |
|---|---|---|---|---|
| You | 24 | 9 | 11 | 3,320 |
| Lord Shaxx's Favorite | 19 | 12 | 10 | 2,940 |
| SweatyCrucibleMain | 17 | 7 | 14 | 2,410 |