FORGE

Experimental · Built out of curiosity · Educational purposes · DYOR

Complete design system from one color. 30 seconds.

Enter a brand color and a project type. FORGE generates a full design foundation: 11-shade color palette, semantic tokens, mathematical type scale with font pairings, spacing scale, shadow system, border radii, and component defaults. Export as CSS variables, Tailwind config, SCSS, W3C design tokens, or Figma tokens.

Then install 43 commands that enforce your system in every AI coding tool.

Try the live generator →

---

How it works

/forge-init #e8590c saas

This creates .forge.json in your project root — the single source of truth. Every subsequent command references YOUR system, not generic rules.

What it generates	Details
Color palette	11 shades (50-950) from one hex via HSL interpolation
Semantic tokens	surface, text, border, accent, feedback mapped to palette
Type scale	Mathematical ratio (1.125-1.500) based on project type
Font pairing	Display + body + mono, contextual, no banned fonts
Spacing scale	4px base, 13 steps from 4 to 128
Shadow system	5 elevations tinted with brand hue
Border radii	6 steps scaled to project context

Install

# All tools (auto-detects your AI harness)
npx skills add dragoon0x/forge

# Claude Code plugin
/plugin marketplace add dragoon0x/forge

Works with Claude Code, Cursor, Gemini CLI, Codex CLI, Copilot, Kiro, OpenCode, and Antigravity.

Project types

Type	Ratio	Surface	Font style	Radius
SaaS	Major Third 1.250	Light, neutral	Geometric sans	8px
Portfolio	Perfect Fourth 1.333	Dark, dramatic	Serif + sans	12px
E-commerce	Minor Third 1.200	White, product-focused	Sturdy sans	6px
Docs	Major Second 1.125	White, max readability	Serif body	6px

43 commands

Foundation (6)

Command	What it does
/forge-init	Generate full design system from color + type
/forge-update	Regenerate from new brand color
/forge-audit	Check code against your system
/forge-score	0-100 adherence score
/forge-diff	Show drift between code and system
/forge-fix	Auto-fix system violations

Color (7)

Command	What it does
/forge-palette	Regenerate 50-950 shade palette
/forge-semantic	Rebuild semantic token mapping
/forge-dark	Generate dark mode from palette
/forge-contrast	WCAG contrast matrix
/forge-harmonize	Add complementary accent color
/forge-color-audit	Find colors not in system
/forge-color-fix	Replace rogue colors with tokens

Typography (6)

Command	What it does
/forge-type	Regenerate type scale
/forge-pair	Font pairing for project type
/forge-type-audit	Find off-scale font sizes
/forge-type-fix	Snap to scale
/forge-measure	Line length check (45-75 chars)
/forge-rhythm	Vertical rhythm enforcement

Layout (6)

Command	What it does
/forge-spacing	Regenerate spacing scale
/forge-grid	Snap spacing to grid
/forge-spacing-audit	Find off-scale spacing
/forge-spacing-fix	Auto-fix spacing
/forge-responsive	Breakpoint verification
/forge-density	Whitespace balance audit

Surfaces (4)

Command	What it does
/forge-shadow	Regenerate brand-tinted shadows
/forge-radius	Regenerate radius scale
/forge-elevation	Elevation hierarchy audit
/forge-surface-audit	Background token compliance

Export (5)

Command	What it does
/forge-export-css	CSS custom properties
/forge-export-tw	Tailwind config
/forge-export-scss	SCSS variables + mixins
/forge-export-json	W3C Design Tokens JSON
/forge-export-figma	Figma Tokens Studio format

Accessibility (4)

Command	What it does
/forge-a11y	Full accessibility audit
/forge-focus	Focus ring system from accent
/forge-touch	44×44px touch target check
/forge-motion	Reduced motion fallback check

Polish (5)

Command	What it does
/forge-polish	Final pass against system
/forge-bolder	Amplify within system range
/forge-quieter	Soften within system range
/forge-normalize	Force all values to tokens
/forge-harden	Error states, i18n, edge cases

Export formats

FORGE exports your system in five formats simultaneously:

• CSS Custom Properties — :root block with dark mode overrides
• Tailwind Config — theme.extend with colors, fonts, spacing, shadows, radii
• SCSS — Variables + mixins for type scale and elevation
• W3C Design Tokens JSON — Compatible with Style Dictionary
• Figma Tokens — Compatible with Tokens Studio plugin

Web generator

The FORGE landing page is a live design system generator. Pick a color, choose a project type, and the entire system generates on the page. Interactive, tweakable, exportable. Client-side only — your color never leaves the browser.

Development

git clone https://github.com/dragoon0x/forge.git
cd forge
node build.js          # Compile to all providers
node test/test.js      # Run test suite (401 checks)

License

Apache 2.0. See LICENSE.

---

Built by dragoon0x

---

Disclaimer

This project is experimental software, built out of curiosity and shared for educational purposes only.

This software is provided "AS IS" without warranty of any kind. The author makes no claims about the accuracy or reliability of design analysis, scoring, or recommendations. Design quality is subjective — scores are heuristic approximations, not definitive assessments. This is not a substitute for professional design review or accessibility auditing. Not affiliated with Anthropic, Cursor, Google, OpenAI, GitHub, Vercel, or any AI tool vendor.

DYOR — Do Your Own Research. See DISCLAIMER.md for full terms.