Components · Extended

HUD Elements

Health and progress bars, a score badge, and reward/damage feedback timing — for real-time, game-style overlays. Platform Guidance named these tokens as a recommendation; this page implements them for real, the same way CodeBlock's syntax highlighting moved from prose to working code.

Live

Take damage, gain XP — real timing, not a mockup

Damage feedback uses --feedback-duration-fast (80ms, linear) — fast enough to read as immediate impact. XP and reward feedback use --feedback-duration-reward (600ms, --ease-settle) — slower, with spring-like settle, matching the system's existing reward-moment easing.

Spec

Token reference

--hud-z-index

110 — above --layer-10 (100), the highest confirmed layer, so HUD always sits above modals/sheets

--hud-bg

rgba(--ig-always-black, 0.55) — semi-transparent regardless of theme, since HUDs float over game content, not page chrome

--hud-text

rgb(--ig-always-white) — pairs with the fixed dark hud-bg

--bar-height

10px — thin enough to stay peripheral, not competing with game content

--bar-bg

rgba(--ig-always-white, 0.18) — a faint track visible on any background

--bar-fill-health

linear-gradient(90deg, --ig-stop-rose, --ig-stop-purple) — reuses two confirmed brand gradient stops

--bar-fill-xp

--ig-gradient-hero — the full confirmed brand gradient, reused directly

--feedback-duration-fast

80ms, linear — damage/hit feedback, faster than --duration-micro (150ms)

--feedback-duration-reward

600ms, --ease-settle — XP gain, level-up, and score feedback

HUD bar — CSS

.hud-overlay {
  position: relative;
  z-index: var(--hud-z-index);
  background: var(--hud-bg);
  color: var(--hud-text);
}

.bar-track {
  height: var(--bar-height);
  border-radius: var(--radius-pill);
  background: var(--bar-bg);
  overflow: hidden;
}

.bar-fill--health {
  height: 100%;
  background: var(--bar-fill-health);
  transition: width var(--feedback-duration-fast) linear;
}

.bar-fill--xp {
  height: 100%;
  background: var(--bar-fill-xp);
  transition: width var(--feedback-duration-reward) var(--ease-settle);
}

Do

Use linear timing for damage/hit feedback — --feedback-duration-fast is linear, not eased — impact should read as instant, not soft.
Use --ease-settle for rewards and level-ups — The same spring-like settle curve used for Stories and reward moments elsewhere in this system — consistency across 'good news' moments.
Keep the HUD semi-transparent over content — --hud-bg is a fixed dark overlay regardless of theme — a HUD needs to stay legible over arbitrary game content, not adapt to light/dark mode.
Reuse the brand gradient for XP, not health — --ig-gradient-hero (the full 3-stop brand gradient) reads as 'progress/achievement' — health uses just two stops (rose→purple) to stay visually distinct from XP at a glance.

Don’t

Don't animate damage feedback with easing — An eased health-bar drain reads as soft/delayed — damage needs to feel immediate. Linear only.
Don't use --layer-10 or below for HUD elements — --hud-z-index (110) is deliberately above every other confirmed layer — a HUD that can be covered by a modal is a real usability bug in any real-time UI.
Don't theme the HUD by light/dark mode — --hud-bg and --hud-text are fixed, not theme-aware tokens — see Dark Mode for which tokens should and shouldn't adapt.