FORGE generates a complete design system from one brand color. Not a color palette. A complete system: brand palette, tinted neutral grays, semantic tokens, type scale with real font pairings, spacing, shadows, radii, motion tokens, z-index, opacity, breakpoints, and live component previews. 200+ tokens. 30 seconds. Export as CSS, Tailwind, SCSS, or W3C JSON.
I built this because the existing tools either require you to already know what you want (Style Dictionary, Tokens Studio), or they generate incomplete systems that leave you filling in gaps for hours. FORGE makes every decision for you — and every decision is computed, not arbitrary. Pick a color. Pick a project type. Done.
Try it.
Brand Palette
Neutral Palette
Semantic Tokens
Type Scale
Spacing
Shadows
Border Radius
Motion
Z-Index · Opacity · Breakpoints
Component Preview
Export
200+ tokens from one hex value. Client-side only. Your color never leaves the browser. Every shade computed from perceptual HSL interpolation.
What it generates
Two palettes, not one
Every real design system needs two base palettes: the brand palette (11 shades of your color) and a neutral palette (11 shades of gray tinted with your brand hue). The tinted neutrals are what make a design feel cohesive — your grays aren't cold, they carry a whisper of your brand. FORGE generates both from one input.
Semantic tokens mapped by context
Raw hex values are useless in a codebase. FORGE maps palette shades to semantic roles: surface, text, border, accent, danger, success, warning, info. Each with a subtle background variant for callout boxes, alert banners, and status indicators. The mapping changes by project type — SaaS gets a light neutral surface, Portfolio gets a dark brand surface.
Type scale with real fonts
The ratio depends on your project type. SaaS gets Major Third (1.250) for clear hierarchy without drama. Portfolio gets Perfect Fourth (1.333). E-commerce gets Minor Third (1.200). Docs gets Major Second (1.125). Font pairings are contextual and none of them use Inter, Roboto, or any overused font. The landing page loads every font family and renders them live in the scale preview.
Motion tokens
Most design system generators skip motion entirely. FORGE generates a duration scale (50ms to 700ms) and five named easing curves (standard, decelerate, accelerate, spring, smooth). These aren't arbitrary — the durations follow a ratio scale and the curves are tuned for specific interaction types.
Z-index, opacity, breakpoints
Every token a frontend codebase needs: a z-index scale (base through modal to toast), an opacity scale (5% to 95%), and responsive breakpoints (sm through 2xl). These are the tokens every developer hardcodes ad-hoc. FORGE systematizes them.
Live component preview
The generator renders buttons, inputs, badges, and cards using your system's actual tokens. Toggle between light and dark mode right on the page. This is the screenshot people share — a complete component set generated from one color pick.
Getting started
First command after install:
/forge-init #e8590c saasThis creates .forge.json — the single source of truth. Every subsequent command references your system, not generic defaults.
43 commands
Foundation
/forge-initGenerate full system from color + type/forge-updateRegenerate from new brand color/forge-auditCheck code against your system/forge-score0-100 adherence score/forge-diffShow drift between code and system/forge-fixAuto-fix system violationsColor
/forge-paletteRegenerate brand + neutral palettes/forge-semanticRebuild semantic token mapping/forge-darkGenerate dark mode preserving contrast/forge-contrastWCAG contrast matrix/forge-harmonizeAdd complementary accent/forge-color-auditFind colors not in system/forge-color-fixReplace rogue colors with tokensTypography
/forge-typeRegenerate type scale/forge-pairFont pairing for project type/forge-type-auditFind off-scale font sizes/forge-type-fixSnap to scale/forge-measureLine length check (45-75 chars)/forge-rhythmVertical rhythm enforcementLayout
/forge-spacingRegenerate spacing scale/forge-gridSnap spacing to grid/forge-spacing-auditFind off-scale values/forge-spacing-fixAuto-fix spacing/forge-responsiveBreakpoint verification/forge-densityWhitespace balance auditSurfaces
/forge-shadowRegenerate brand-tinted shadows/forge-radiusRegenerate radius scale/forge-elevationElevation hierarchy audit/forge-surface-auditBackground token complianceExport
/forge-export-cssCSS custom properties/forge-export-twTailwind config/forge-export-scssSCSS variables + mixins/forge-export-jsonW3C Design Tokens JSON/forge-export-figmaFigma Tokens Studio formatAccessibility
/forge-a11yFull accessibility audit/forge-focusFocus ring system from accent/forge-touch44×44px touch target check/forge-motionReduced motion fallback checkPolish
/forge-polishFinal pass against system/forge-bolderAmplify within system range/forge-quieterSoften within system range/forge-normalizeForce all values to tokens/forge-hardenError states, i18n, edge casesJust a color
FORGE can generate 200+ tokens, preview components in light and dark mode, export in four formats, and enforce every token through 43 commands. But if you just need a design foundation before your AI starts writing CSS, /forge-init does that in one line.
Experimental — built out of curiosity, shared for educational purposes. Not professional design advice. Generated tokens are heuristic approximations. Not affiliated with any AI tool vendor. DYOR. Apache 2.0.
Built by dragoon0x · GitHub