Fire & Heat

A volcanic forge aesthetic built from molten metal, glowing embers, and heat distortion. Dark obsidian grounds give way to colors that progress from deep crimson through orange to white-hot yellow.

01

Color Palette

The spectrum of fire, from the deep crimson of cooling embers to the searing white-hot center of a forge. Structural colors are drawn from charcoal, ash, and smoke.

Fire Colors

Ember
#FF4500
Primary accent, call-to-action
Ember Light
#FF6B3A
Hover states, highlights
Ember Dark
#CC3700
Active states, pressed
Molten
#FF8C00
Secondary accent, warmth
Molten Light
#FFA940
Gradients, glow accents
Molten Dark
#CC7000
Depth tones, gradients
White Hot
#FFD54F
Peak highlights, emphasis
White Hot Light
#FFE082
Bright highlights, sparks
Crimson Deep
#8B1A1A
Dying embers, deep glow
Crimson Light
#A52A2A
Warm underlighting

Structural Colors

Charcoal
#1A1210
Primary background
Charcoal Light
#241A16
Elevated backgrounds
Ash
#2D2520
Card backgrounds, panels
Ash Light
#3D332C
Hover surfaces, borders
Smoke
#C4A882
Primary body text
Smoke Light
#D4BFA0
Headings, emphasis text
Smoke Dark
#9E8A6E
Muted text, captions

Semantic Colors

Background
--bg
Page background
Background Alt
--bg-alt
Alternate sections
Accent
--accent
Primary interactive color
Accent Secondary
--accent-secondary
Warm secondary actions
Accent Highlight
--accent-highlight
Peak visual emphasis
02

Typography

Three typefaces forged to serve distinct roles: Cinzel commands attention in display contexts, Source Sans 3 carries the weight of body text, and JetBrains Mono marks the technical.

Display — Cinzel

Forged in Fire

Cinzel 900 / clamp(2.5rem, 5vw, 4rem) / letter-spacing: 0.03em
Body — Source Sans 3

The quick brown fox jumps over the lazy dog. Every letter is shaped by the heat of purpose, tempered by the discipline of legibility. In the forge of design, clarity is the sharpest blade.

Source Sans 3 400 / 1.15rem / line-height: 1.6
Monospace — JetBrains Mono

const forge = { temperature: 1538, unit: 'celsius' };

JetBrains Mono 400 / 0.95rem / Used in code, labels, metadata
H1

Volcanic Forge

H2

Volcanic Forge

H3

Volcanic Forge

H4

Volcanic Forge

H5
Volcanic Forge
H6
Volcanic Forge

The art of metalworking is as old as civilization itself. From the first copper tools hammered by Neolithic craftsmen to the towering steel frameworks of modern cities, humanity has shaped its world through fire and force.

Italic text whispers like rising heat, carrying secondary information without demanding full attention.

Bold text strikes like a hammer on the anvil -- drawing the eye with certainty and weight.

Inline code elements mark the technical vocabulary of our craft, standing apart from the surrounding prose.

The smith who tempers iron with patience will outlast the one who relies on force alone. Every great design system is forged through iteration, each pass through the fire refining what came before. The Forge Master's Codex
03

Spacing

A consistent spatial rhythm built on a 4px base unit. Each step doubles in heat, from the tight ember of xs to the expansive glow of 2xl.

xs (4px)
4px
sm (8px)
8px
md (16px)
16px
lg (32px)
32px
xl (64px)
64px
2xl (96px)
96px
04

Buttons

Three tiers of button intensity -- primary commands burn brightest, secondary outlines simmer at the edge, and ghost buttons glow only when touched.

Primary
Secondary
Ghost
05

Forms

Input fields forged from dark ash, framed in ember borders that flare on focus. Every interaction leaves a heat signature.

Specializations
Heat Preference
06

Cards & Panels

Containers shaped from the dark matter of the forge. Each card rests on a bed of cooling embers, glowing brighter when attention draws near.

The Anvil

The foundation of every forge. A basic card holds content with quiet authority, asking nothing more than to be read and understood.

Learn more →
Featured

Damascus Steel

Layers of metal folded and welded under extreme heat, creating patterns as unique as fingerprints. Featured cards carry the full spectrum of forge light.

Explore the process →
1538
Degrees Celsius

Melting point of iron -- the threshold where solid becomes liquid and possibility is born.

Into the Crucible

A gradient header simulates the view through a forge window -- crimson depths giving way to molten orange at the core.

07

Alerts & Notifications

Severity mapped to the heat spectrum. Cool smoke carries routine information, while white-hot intensity signals critical urgency.

ℹ
System Maintenance Scheduled

The forge cooling system will undergo routine maintenance on Saturday at 02:00. Expect brief downtime for temperature recalibration.

⚠
Temperature Approaching Threshold

Core temperature has reached 1,200 C and is climbing. Ventilation systems operating at 85% capacity. Monitor output closely.

◆
Critical System Failure Detected

Primary containment breach in Sector 7. Automated shutoff protocols have been triggered. Evacuate non-essential personnel immediately.

⚡
Meltdown Imminent

Core integrity below 15%. All containment barriers have failed. Immediate action required -- initiate emergency quench protocol.