Why a Design System
Menoko runs five products. Without shared design language, each product looks like it was built by a different company. Dark Forge is our answer — a unified token system that gives each product its own personality while keeping them unmistakably Menoko.
The Token Architecture
Everything starts with CSS custom properties. We define a base palette in menoko-tokens.css: Void (#0c0c0c), Deep Space (#1a1a2e), Emerald (#00e5a0), Cyan (#00c4d4), Violet (#7c5cfc). Each product extends this with its own accent:
- SC TradeMasters: Amber (#ffc857) — warm, Star Citizen gold
- StackSight: Violet (#7c5cfc) — technical, precise
- SL OnStage: Lavender Dream (#C084FC) — creative, vibrant
- chrisipeters.com: Emerald (#00e5a0) — professional, growth
Dark Mode as Philosophy
Dark Forge isn't dark mode for aesthetics. It's dark mode because our users are developers, gamers, and creators who spend hours at screens. Light backgrounds cause eye strain. Dark backgrounds with careful contrast ratios respect their time and attention.
Square Edges, Whitespace as Structure
No rounded corners. Maximum 2px border radius. We use whitespace and subtle borders to create hierarchy, not shadows or gradients. The result feels premium and intentional — every pixel earns its place.
What's Next
Component library extraction. Right now each product duplicates shared components. We're building a Menoko.UI NuGet package with MudBlazor theme overrides and shared Razor components.