Realms

The KATFORGE ecosystem is a family of related realms: standalone sites and games that share a common visual grammar while keeping their own identity. This page defines each realm's visual identity.

Typographic logos

Every realm has a typographic lockup that works inline anywhere: sentences, headings, tables, tooltips. Use the :realm component to drop one in.

The :realm{name="spark"} package gives you flash messages out of the box.

That renders as: The @katforge/spark package gives you flash messages out of the box.

The component matches the surrounding font size and line height, so it looks at home in a paragraph, a list item, or an h3.

Parent

KATFORGE

Primary

#FF8C00

Primary

#E67E00

Hover

#FFA033

Light

#C95E1F

Logo

Secondary

#140C08

Surface

#1E1410

Raised

#C2410C

Button

The orange flare is the forge fire. Every other realm palette borrows from its warmth or plays against it.

Games

Stumper.gg carries a brainy violet with a blue .gg tail: trivia and competition.

Lextris is cool cyan, evoking letter blocks lighting up.

Gear Goblins is gold leaf on dark stone (treasure, loot, adventure), with carved-letter serifs that nod at the Hearthstone-inspired art direction.

External sites built on KATFORGE

External realms are standalone sites that use KATFORGE for authentication and API access. They share the parent's industrial typography so the family resemblance reads at a glance, but carry their own palette identity.

wc3stats

Primary

#9CA3AF

Steel

#6B7280

Slate

#D1D5DB

Silver

Secondary

#374151

Iron

#4B5563

Gunmetal

#E5E7EB

Mist

wc3stats is silvery grey, a companion to Warcraft-III-era ladder stats. Steel and slate anchor the brand, with iron and gunmetal surfaces and a misty silver highlight.

DarkerDB

Primary

#E60505

Blood

#000000

Black

#3B2A21

Oak dark

Secondary

#80D600

Uncommon

#FFCE79

Tan

#B18063

Oak

DarkerDB is blood-red, companion data for Dark and Darker's dungeon crawl. Palette pulled straight from the app's palette.js: blood red for critical status, black and oak dark for backgrounds, uncommon green and tan accents for rarity cues. See the DarkerDB realm page for the architecture and the API reference for endpoints.

Packages

Packages are npm modules, not full realms, so they only get typographic marks (no palette).

Packages all render in a monospace face to signal "code you install". Colors give each package a distinct flavor: @katforge/api is data-cyan, @katforge/spark is electric amber, @katforge/anvil is iron-cool slate, @katforge/forge is fire-red, @katforge/codex is indigo-book, @katforge/tactician is strategic violet, @katforge/katalyst is emerald-growth.

Usage in prose

Inline in a sentence

:realm{name="katforge"} ships :realm{name="sdk"}, :realm{name="spark"}, and a growing set of packages.

KATFORGE ships @katforge/api, @katforge/spark, and a growing set of packages.

In headings

## Using :realm{name="spark"} with :realm{name="stumper"}

Using @katforge/spark with Stumper.gg

Writing guidelines

• Use the lockup on first mention in a given page section. Subsequent mentions in the same section can drop the styling and just write the plain name (keeps prose less busy).
• Don't nest realm styling inside code blocks. Inside a fenced code block, plain text is correct: the code is about the literal characters.
• Packages always render with the @katforge/ scope. Don't strip it; it's part of the identity.

Where this lives

The realm registry and its typographic logos live in @katforge/spark, so every project in the KATFORGE ecosystem can render the same lockups and palettes without duplicating definitions. See @katforge/spark for the component API.

Adding a new realm

1. Pick a palette that doesn't collide with an existing realm: primary/hover/light plus a surface trio.
2. Add a key to the internal REALMS record in packages/spark/src/realms.ts with label, style, typography (font class, color, glow, and optional weight/tracking/transform), optional suffix, and optional palette.
3. If typography.fontClass references a font that isn't already loaded, add it to the @theme { --font-* } block in packages/spark/src/styles/katforge.css; @nuxt/fonts auto-discovers it and Tailwind generates the matching utility.
4. Reference the new realm on this page with ::realm-palette{name="..."} for the full card, or inline with :realm{name="..."}.
5. If the new realm is a package, leave palette: null and set typography.fontClass to font-jetbrains.