Design Token Theme Catalog
NON-NORMATIVE.
Package: @morphism-systems/design-tokens v0.1.0
Format: ESM-only, TypeScript-first, tree-shakeable
Color format: HSL "H S% L%" (shadcn/ui compatible)
10 canonical themes organized into Project Themes (extracted from live satellites) and Field Themes (canonical UI/UX design philosophies).
Quick Start
import { getTheme, getThemeCSS, getThemeTailwind } from "@morphism-systems/design-tokens";
// Get theme object
const theme = getTheme("brutalist");
// Generate CSS custom properties
const css = getThemeCSS("violet-theorem");
// → :root { --background: 265 60% 4%; ... }
// Generate Tailwind preset
const preset = getThemeTailwind("neo-glass");
// Use in tailwind.config.ts: presets: [preset]
Individual themes can be imported directly for tree-shaking:
import { brutalist } from "@morphism-systems/design-tokens/themes/brutalist";
Project Themes
1. Violet Theorem
| Property |
Value |
| ID |
violet-theorem |
| Mode |
Dark |
| Origin |
Morphism Systems canonical |
| Background |
Deep violet-black hsl(265 60% 4%) |
| Accent |
Bright violet hsl(269 100% 74%) |
| Display Font |
Inter (with optical sizing) |
| Mono Font |
IBM Plex Mono |
| Philosophy |
Mathematical precision meets glassmorphism. Purple-shifted dark theme with translucent surface layers and violet glow effects. The signature Morphism look. |
2. Neon Cyber
| Property |
Value |
| ID |
neon-cyber |
| Mode |
Dark |
| Origin |
meshal-web |
| Background |
Navy void hsl(225 30% 8%) |
| Accent |
Neon cyan hsl(185 100% 50%) |
| Display Font |
Orbitron |
| Mono Font |
Fira Code |
| Philosophy |
Full neon spectrum with glitch effects and scanline overlays. Cyberpunk interface aesthetic derived from the personal portfolio site. High-contrast neon on dark navy. |
3. Command Center
| Property |
Value |
| ID |
command-center |
| Mode |
Dark |
| Origin |
llmworks / attributa |
| Background |
Deep charcoal hsl(222 47% 11%) |
| Accent |
Tactical blue hsl(217 91% 60%) |
| Display Font |
Inter |
| Mono Font |
JetBrains Mono |
| Philosophy |
Intelligence dashboard aesthetic. Navy-charcoal base with tactical blue data visualization accents. Dense information layout, compact typography, military-grade precision. Shared DNA between llmworks and attributa. |
4. Cyberpunk Sport
| Property |
Value |
| ID |
cyberpunk-sport |
| Mode |
Dark |
| Origin |
repz |
| Background |
Blue-grey hsl(235 15% 6%) |
| Accent |
REPZ orange hsl(14 87% 54%) |
| Display Font |
Orbitron / Space Grotesk |
| Complement |
Cyan hsl(192 70% 48%) |
| Philosophy |
High-energy fitness gamification. Dark base with orange call-to-action energy. Features a tier-based color system (steel → magenta → violet → gold) for athlete progression. Cyan complement for data/stats. |
5. Retro Pixel
| Property |
Value |
| ID |
retro-pixel |
| Mode |
Dark |
| Origin |
gainboy |
| Background |
CRT grey-lavender hsl(260 6% 10%) |
| Accent |
Terminal green hsl(120 60% 50%) |
| Font |
IBM Plex Mono (everywhere) |
| Display Font |
Press Start 2P |
| Philosophy |
CRT-era pixel grid nostalgia. Zero border-radius, no blur, step-function transitions. Hard pixel shadows, phosphor green accent, amber complement. Typography is monospace-only — the pixel grid permits no curves. |
6. Desert Luxury
| Property |
Value |
| ID |
desert-luxury |
| Mode |
Light ☀️ |
| Origin |
rounaq-atelier |
| Background |
Cream parchment hsl(36 60% 96%) |
| Accent |
Gold hsl(38 38% 54%) |
| Display Font |
Cormorant Garamond |
| Sans Font |
Inter + Noto Naskh Arabic |
| Philosophy |
Warm minimalist editorial luxury. The only light-mode theme. Cream parchment base, gold accent, generous whitespace, tall line-height (1.75). RTL-friendly with Arabic font stacks. Organic warmth over digital precision. |
Field Themes
7. Brutalist
| Property |
Value |
| ID |
brutalist |
| Mode |
Light |
| Background |
Pure white hsl(0 0% 100%) |
| Accent |
Pure black hsl(0 0% 0%) |
| Font |
Courier New (everywhere) |
| Radii |
ALL zero |
| Transitions |
ALL zero |
| Philosophy |
The antithesis of polish. Raw exposed structure. Monospace typography only, system colors (black + white + pure-hue semantics), hard pixel shadows, zero blur, zero border-radius, zero transitions. Content is the interface. Inspired by brutalistwebsites.com. |
8. Swiss Minimal
| Property |
Value |
| ID |
swiss-minimal |
| Mode |
Light |
| Background |
White hsl(0 0% 100%) |
| Accent |
Swiss red hsl(0 85% 46%) |
| Font |
Helvetica / Arial |
| Line Height |
Golden ratio 1.618 |
| Philosophy |
International Typographic Style. Strict grid, mathematical spacing, Helvetica font stack, minimal red accent on white. Near-zero shadows, tiny border-radius. Weight scale starts light (300 normal). Inspired by Josef Müller-Brockmann and Max Bill. Precision as aesthetic. |
9. Neo Glass
| Property |
Value |
| ID |
neo-glass |
| Mode |
Dark |
| Background |
Cool dark blue hsl(230 25% 8%) |
| Accent |
Gradient purple hsl(250 80% 65%) |
| Font |
Inter / SF Pro Display |
| Max Blur |
40px |
| Philosophy |
Glassmorphism: frosted translucent layers over dark backgrounds. Heavy backdrop blur, gradient accents spanning blue → purple → pink, inset highlight borders for glass edge effect. Depth conveyed through opacity and blur intensity rather than shadow darkness. Apple Vision Pro era aesthetic. |
10. Midnight Editorial
| Property |
Value |
| ID |
midnight-editorial |
| Mode |
Dark |
| Background |
Near-black ink hsl(220 12% 6%) |
| Accent |
Warm amber hsl(35 70% 52%) |
| Display Font |
Playfair Display |
| Max Width |
680px (reading measure) |
| Philosophy |
Dark editorial print aesthetic. Large serif display headlines over warm off-white body text on ink-black. Narrow content measure (680px) optimized for long-form reading. Amber accent for links and highlights evokes candlelight on parchment. Inspired by premium magazine dark modes (NYT, Bloomberg, Economist). |
API Reference
getTheme(id: string): Theme
Returns the complete theme object by ID. Throws if not found.
getThemeNames(): string[]
Returns all 10 registered theme IDs.
getThemeCSS(theme: Theme | string, selector?: string): string
Generates a CSS custom properties block. Accepts a theme object or ID string.
:root {
--background: 265 60% 4%;
--surface: 265 30% 8%;
--accent: 269 100% 74%;
--font-sans: Inter, system-ui, sans-serif;
--radius-md: 0.75rem;
--shadow-md: ...;
/* ... all tokens */
}
Generates a Tailwind CSS preset object. Use in your tailwind.config.ts:
import { getThemeTailwind } from "@morphism-systems/design-tokens";
import type { Config } from "tailwindcss";
export default {
presets: [getThemeTailwind("violet-theorem")],
content: ["./src/**/*.tsx"],
} satisfies Config;
Theme Comparison Matrix
| Theme |
Mode |
Category |
Accent Hue |
Serif |
Blur |
Radius |
Origin |
| Violet Theorem |
Dark |
Project |
Violet 269° |
No |
Heavy |
Large |
Morphism |
| Neon Cyber |
Dark |
Project |
Cyan 185° |
No |
Medium |
Medium |
meshal-web |
| Command Center |
Dark |
Project |
Blue 217° |
No |
Light |
Tight |
llmworks |
| Cyberpunk Sport |
Dark |
Project |
Orange 14° |
No |
Medium |
Medium |
repz |
| Retro Pixel |
Dark |
Project |
Green 120° |
No |
None |
None |
gainboy |
| Desert Luxury |
Light |
Project |
Gold 38° |
Yes |
Light |
Soft |
rounaq-atelier |
| Brutalist |
Light |
Field |
Black 0° |
No |
None |
None |
— |
| Swiss Minimal |
Light |
Field |
Red 0° |
No |
None |
Minimal |
— |
| Neo Glass |
Dark |
Field |
Purple 250° |
No |
Heavy |
Large |
— |
| Midnight Editorial |
Dark |
Field |
Amber 35° |
Yes |
Light |
Minimal |
— |