A nocturnal, high-density console for tabletop RPG — pink-neon command energy over deep ink, built to feel native, not webby.
Mini Kraken is a tool people live inside during a session. The identity treats every screen like a piece of native, nocturnal software — dense, fast, and unmistakably ours the moment the logo is cropped out.
The pink command glow
Nocturnal · arcane · precise
src/styles/theme.ts
Deep ink for structure, a single hot pink for command. The arcane violet appears only inside glows and gradient meshes — never as a fill.
The ink ramp every layer is built on
surface-0App background, the deepest layer
surface-1Sidebars, top bars, sunken regions
surface-2Default card / panel surface
surface-3Nested panels, popovers, menus
surface-4Inputs, the highest interactive layer
surface-hoverHover/focus state for elevated controls
Brand pink — used with intent, never as wallpaper
accentPrimary actions, active state, focus
accent-hoverHover on primary surfaces
accent-strongPressed state, dense fills
arcaneSecondary glow — gradients & auras only
Reserved meanings — don't repurpose
successConfirmations, positive deltas
warningCautions, pending states
dangerDestructive actions, errors
infoNeutral highlights, hints
Edges and dividers
line-subtleLow-contrast separators on dark fills
lineStandard panel and control borders
line-strongEmphasised edges, focused fields
Foreground hierarchy
inkPrimary text and headings
ink-mutedSecondary text, descriptions
ink-subtleCaptions, placeholders, labels
Space Grotesk gives titles a technical, slightly arcane voice. Hanken Grotesk keeps dense UI legible. Space Mono carries every number — dice, codes, counters.
Ag
Space Grotesk
Ag
Hanken Grotesk
Ag
Space Mono
Roll for initiative
Space Grotesk · hero headlines & brand voiceThe Arcane Console
Space Grotesk · page & section titlesEncounter overview
Hanken Grotesk · card and block headingsA complete platform for game masters and players.
Hanken Grotesk · paragraphs and UI copyCharacter sheet
Hanken Grotesk · labels & eyebrows2d20 + 17
Space Mono · dice, codes & live numbersShared primitives that consume the tokens directly — so the system stays consistent by construction, not by discipline alone.
Lifts toward the accent on hover. Use for anything clickable.
The default resting surface for content blocks.
A quieter panel for secondary content.
A small, fixed set of corner radii and narrative shadows. The accent glow is reserved for focus and primary intent.
rounded-sm10pxrounded-md14pxrounded-lg18pxrounded-xl24pxrounded-2xl30pxrounded-full999pxshadow-panelResting panels and cards
shadow-raisedHovered / lifted surfaces
shadow-popoverMenus, popovers, modals
shadow-glowThe signature accent glow — focus & primary
Four rules that keep the system from drifting back into 200 one-off hexes.
The accent marks the single most important action or live state on a screen — focus, primary, active. If everything glows, nothing does.
Depth comes from the five ordered surfaces, not from inventing #0b0f1d next to #101225. Stack surface-1 → surface-4 to build elevation.
Every color, radius and shadow has a name. Reach for the token utility or import from theme.ts — raw values are how palettes drift.
This is a tool people work in for hours. Favour compact, scannable layouts with deliberate rhythm over marketing-site emptiness.