Interface Doctrine
Brass, soot-dark iron, aged parchment, smoked glass, and brown leather form the core palette. Nothing is flat white or default gray.
Elements rise in sequence, gears rotate continuously, and interactive pieces give a short mechanical lift on hover.
Large showcase blocks mirror in-game journals and inventory panes, while smaller modules behave like utility widgets and command trays.
Standard Bootstrap grid and components are reskinned rather than replaced, which keeps the toolkit practical for real product work.
Signature Palette
Preview Patterns
Forged Tabs
Tabs are treated as carved caps with burnished edges. The active state is brighter and reads like a selected game menu.
Status Rails
Quest Journal Panel
This parchment variant is meant for lore, recipe, or narrative-heavy content. It keeps the brass frame while shifting to an ink-on-paper reading surface.
Control Bay
Forms, selects, toggles, and primary actions are styled for admin dashboards, builders, or customization screens that still need the same worldbuilding.
Workshop Accordion
Behavior Note
The accordion uses Bootstrap collapse events and Anime.js timing, so the icon motion is tied to real interaction state rather than a generic hover effect.
Gear Toggle
Element Use
Use the gear toggle anywhere you need a binary control that matches the accordion’s brass hardware language instead of a standard switch.
Progress Glass Ball
This orb element reads like a mana or health glass sphere. The first orb is a JS demo looping from empty to full and back. Below full, the fill line keeps a slow slosh and shimmer so it feels like liquid inside a sealed vessel.
Usage Note
Set `data-value` from `0` to `100`, then choose a liquid color with `--orb-color` and `--orb-color-deep` to create blue mana, red health, poison, or steam-core variants.
Data Table
| Module | Discipline | Status | Output |
|---|---|---|---|
|
Aether Forge
Foundry wing / Mk-IV
|
Engineering | Stable | 92% |
|
Vault Relay
Archive conduit
|
Logistics | Queued | 67% |
|
Steam Lattice
North boiler trench
|
Maintenance | Alert | 41% |
Pagination
Use the table for inventories, quest logs, or admin registers, then pair it with the forged pagination to keep list-heavy screens in the same visual system.
Timeline
-
06:10 / Normal
Hull Integrity
The hull is intact and ready for deployment.
-
06:40 / bg-primary
Steam Core Primed
Pressure climbs through the lower vaults as the foundry wakes.
-
07:05 / bg-secondary
Machine Casing Sealed
Outer plates were riveted shut before the relay chamber was reopened.
-
07:45 / bg-success
Archive Link Stabilized
Signal passes the brass gate and reaches the second register chamber.
Timeline Use
Use this for quest chains, deployment logs, patch notes, mission history, or any sequence that benefits from a clear vertical path.
Move from showcase to implementation
The cookbook page contains every core component with demo markup and code snippets ready to lift into a Bootstrap project.
Open Cookbook