Component Library

Phase 1 design system — all tokens from theme.css.

Buttons

Progress Bars

HP 72/100
72%
Mana 45/50
90%
EXP Lv.7
35%

Dialogue Box

Guard Captain

Halt! Before you enter the CSS Castle, prove you know your semantic tags. What element wraps the main content of a page?

Badges & Tooltips

Default Earned Quest Complete Lv. 12 Open Inventory (I)

Inventory Slots

—
—

Modal (SweetAlert2)

Panels

Standard Panel

Bordered window with pixel shadow.

Inset Panel

Used for nested content areas like code editors.