Warm Fusion Design System
Design Maven's design system that tones down the harshness of neo-brutalism with warm colors, mild corner radii (against brutalist sharp edges), controllable tactile physics, parameterized entirely by 12-step Radix semantic tokens for expressive, multi-faceted brand identities.
npm install @designmaven/design-system @phosphor-icons/react
The Genesis of Warm Fusion
"I was working on a multicolor brand personal project and needed a design system that delivers real tactile physics on buttons. I researched across design movements and observed that only Neo-Brutalism offers that punchy physical click feeling on buttons. However, standard Neo-Brutalism feels punishingly harsh, aggressive, and fatiguing to the eyes over prolonged sessions. Digital products are meant for long, productive sessions.
Working closely with Claude AI, I crafted my feeling of warmth, organic cream backgrounds, mild corner radii to kill the brutalist sharp edges, and controllable tactile physics on buttons — and boom, it birthed Warm Fusion.
I also observed that hardcoded color schemes are brittle and difficult to maintain in production environments. So I parameterized the entire color engine with the Radix UI 12-step color library, which handles semantic tokens and superb alpha variations brilliantly.
I decided to open-source it as my contribution to the design and developer community. One of its greatest superpowers is the dynamic SKILL.md exporter: curate your parameters here, paste it into any agentic coding environment (Google Antigravity, Claude, Cursor, Gemini), and it generates an impeccably consistent product throughout your entire codebase."
The Chemistry of Warm Fusion
Warm Fusion is a deliberate equilibrium between physical mechanical feedback and human typographic warmth:
Tactile Brutalist Physics
Crisp 2.5px borders, hard drop shadows with zero blur, and physical press animations (translate(2px, 2px)) that give clicks real mechanical punch.
Swiss Typographic Warmth
Warm organic cream grounds (#F9F6F0), generous whitespace rhythm, human-centered typography (Bricolage Grotesque & Instrument Sans), and rounded 16px corners.
Multi-Color Brand Balance
Engineered specifically for expressive, multi-color brands. Plug in diverse palette colors and the Radix 12-step parameter engine blends them into balanced harmony.
The Design System Caveat & Guardrails
"A design system provides the structural grammar, but you must write the UX literature. If you lack solid information architecture, clear visual hierarchy, intentional content design, and thoughtful user flows, you can still build poor experiences with great tokens. Treat Warm Fusion as your precision toolkit, not a shortcut around product thinking."
To maintain product composure and avoid visual fragmentation, adhere strictly to our core guardrails:
- 1. Zero Text Wrapping on Action Labels & Badges: Buttons, badges, and menu tags must never break onto multiple lines (
white-space: nowrap !important;). If container constraints cause overflow, truncate with single-line ellipsis (text-overflow: ellipsis; overflow: hidden;) and reveal full context on hover via tooltips. - 2. Single Primary CTA Per View: Every screen must have exactly ONE high-energy Primary CTA button (using the configured primary brand token
var(--wf-terra)). Never compete with multiple high-contrast actions on the same view. Pair secondary actions with surface, neutral, or ghost styling. - 3. Generous Breathing Room: Never crowd cards or containers without minimum 20px padding and structured visual hierarchy.
- 4. Conversational Monospace Feedback: Always pair state changes with semantic Toast notifications featuring uppercase monospace metadata and clear conversational copy.
- 5. Calibrated Dark Mode Ambiance: In dark mode, replace stark white borders with soft luminous Radix alpha borders (
rgba(255, 255, 255, 0.16)) and warm cream text to preserve prolonged visual comfort.
12-Step Radix Semantic Color Engine
Zero hardcoded visual leaks. Warm Fusion is parameterized using Radix UI 12-Step Color Scales (@radix-ui/colors) + dynamic Alpha computation. When you adjust a token in the Theme Studio, the engine derives background washes, interactive hover/active states, and transparent focus halos.
var(--sand-2) · #F9F6F0
var(--sand-3) · Alpha 85%
var(--slate-12) · #001F51
var(--orange-9) · #FB5707
var(--grass-9) · #1BC67F
var(--amber-9) · #FFCB66
Curated Typography Pairings
Select from 4 expertly curated font stacks. Switching a pairing immediately updates the entire documentation DOM and injects the corresponding font imports and Tailwind configs into your exported AI agent skills.
The Humanist Grotesque
Bricolage Grotesque (Display) + Instrument Sans (Body) + Space Mono (Code).
The Modern Digital (Geist Stack)
Inter / Geist (Display & Body) + Space Mono (Code). Ultra-clean precision.
The Swiss Editorial
Plus Jakarta Sans (Display) + DM Sans (Body) + JetBrains Mono (Code).
The Classical Heritage
Amiri / Cinzel (Display) + Instrument Sans (Body) + Space Mono (Code).
Live Theme Studio & Parameter Engine
Calibrate your colors, typography, borders, drop shadows, and corner radii. All changes cascade immediately across every component on the page and synchronize live with your generated AI skills, Tailwind configs, and CSS tokens.
Tactile Buttons (Zero Text Wrapping)
Engineered with strict click offset physics (translate(2px, 2px)) and guaranteed single-line integrity (white-space: nowrap !important;).
import { Button } from "@designmaven/design-system";
import { Lightning } from "@phosphor-icons/react";
<Button variant="primary" size="md">
<Lightning weight="bold" /> Primary Action
</Button>
Monospace Badges & Status Tags
High-contrast metadata tags formatted in uppercase monospace typography with zero text wrapping.
Tags automatically compute dynamic alpha backgrounds (--wf-terra-tint, --wf-green-tint, etc.) matching the current Theme Studio values.
Tactile Cards & Elevation
Structured cards featuring hard drop shadows (var(--wf-shadow)) with zero blur and soft luminous borders in dark mode.
Standard Tactile Card
Structured boundaries, generous 24px padding, and mechanical drop shadows that anchor information with confidence.
Subtle Section Wash
Raised canvas wash (var(--wf-ground-2)) designed for sidebars, callout panels, and nested metadata groupings.
Adaptive Dialog & Mobile Bottom-Sheet
Automatically adapts between a centered floating dialog with 8px hard drop shadow on desktop, and a tactile bottom-sheet drawer with a drag handle on mobile screens (≤680px).
Test on desktop to see the centered tactile frame with backdrop blur, or resize to mobile to test smooth bottom-sheet docking.
Monospace Feedback Toasts
Warm Fusion feedback toasts feature a crisp monospace status header (icon + variant name + active hex code) paired with clear, human conversational guidance.
All recipe tokens compiled cleanly. Ready for production deployment.
Heads up: this recipe requires your API credentials added first.
The build didn't run. Errors are conversations — here's the fix.
New tool version released. Your recipes still work seamlessly.
Tactile Form Controls & High-Contrast States
Input fields with 2.5px borders, subtle focus halo glows, and semantic validation states.
Radix Primitives & Interactive Controls
Accessible Radix UI primitives wrapped in tactile borders and high-contrast active states.
Dynamic AI Agent Skill Generator
Test and calibrate your colors, typography, and tactile physics in the Theme Studio, then export a tailored SKILL.md or design.md file loaded with all live Radix token variables, active theme mode, component recipes, and strict system guardrails for Google Antigravity, Claude, Cursor, and Gemini.
Tailwind CSS & CSS Tokens Integration
Drop Warm Fusion tokens into your existing web stack. Full support for Tailwind v3/v4, Next.js, Vite, and vanilla CSS architectures.
1. Import Tokens
import "@designmaven/design-system/tokens.css";
2. Use Tailwind Utilities
<button className="bg-terra text-white font-display font-bold border-2.5 border-forest shadow-wf rounded-full px-5 py-2.5 whitespace-nowrap active:translate-x-0.5 active:translate-y-0.5"> Action </button>
How to Contribute to Warm Fusion
Warm Fusion is an open-source design system built for the community. We welcome developers and designers to submit new components, curated color presets, and AI agent prompts!
Create Your Feature Branch
Fork Aleemcode/warm-fusion on GitHub and create a clean branch: git checkout -b feat/my-new-component.
Wrap in Warm Fusion Tokens
Use 2.5px solid ink borders, hard 5px drop shadows, Radix color semantics, and Phosphor Icons (ph-bold).