Design System

Hermetic Expedition Panel - Visual Styleguide

Back to Game

Typography System

Display Font: Sixtyfour (Titles, Headings, Brand)

Chomp Crawler

Level Complete

Game Over

Body Font: Montserrat (Data, Paragraphs, UI Text)

Score: 1,234,567 (SemiBold 600)

Navigate through procedurally generated mazes. Collect pac-dots and avoid ghosts. (Regular 400)

Color Palette - Chomp Core

Accent

#F59E0B

Amber - Primary

Main

#1E293B

Slate Navy Base

Main Light

#334155

Interactive

Main Dark

#0F172A

Deep Containers

Background

#020617

App Background

Text Main

#F1F5F9

Headings

Text Body

#94A3B8

Paragraphs

Success

#10B981

Emerald

Alert

#EF4444

Matte Red

GlassPanel Variants

Light

75% opacity, 4px blur

For subtle overlays, tooltips

Medium

82.5% opacity, 10px blur

For standard containers, cards

Heavy

90% opacity, 16px blur

For modals, critical overlays

Inset Shadows - Brutalist Depth

None

No shadow

SM

shadow-inset-sm

MD

shadow-inset-md

LG

shadow-inset-lg

Button Variants

Default States

Disabled State

Hover Instructions

Hover over buttons to see the "Magnetic Solidification" effect: increased opacity + amber border + subtle inset glow

Interactive Components

Progress Bar

65%

Checkbox

Key Display

W
A
S
D

Geometric Properties

Border Radius (Technical): 5px

Functional moderate rounding - balance between modern and severe

Transition (Organic): 250ms ease-out

Moderate organic timing - like filament warming up

Philosophy: Functional Brutalism

Solid blocks, minimal curves, magnetic anchoring, industrial weight

Landing Page Components

SectionTitle

Large Section Title

Medium Section Title

Small Section Title

TechPill

Next.js 16
React 19
TypeScript
Three.js

ImagePlaceholder

📷

Screenshot Placeholder

Game UI Components

HeartIcon

❤️❤️❤️

TileCell

0
1
2
3
4

Types: 0=Empty, 1=Wall, 2=Pellet, 3=Power, 4=Special

VersionInfo

Version 3.0.0

License CC-BY-SA-4.0

Debug Components

DebugInput

DebugDetails

Debug Information

This is debug content that can be expanded.

Used in debug panels and settings.