forge

Full accessibility audit using your design system's color tokens. Checks contrast, focus styles, semantic HTML, touch targets, and motion safety.

Check the current codebase against your .forge.json design system. Finds raw hex values that should be tokens, spacing off your scale, fonts not in your system, and missing token references.

Amplify the design within your system's range. Use stronger palette shades, higher type scale steps, and more dramatic shadows.

Find every color in the codebase that isn't in your palette or token system. Lists orphan colors with suggested replacements.

Replace all orphan colors with the nearest token from your system. Converts raw hex values to var(--token) references.

Check WCAG contrast ratios across your entire token system. Tests every text token against every surface token.

Generate a dark mode variant of your design system. Creates dark-mode token overrides that preserve contrast ratios from the light theme.

Audit visual density and whitespace balance. Checks that spacing from your system creates appropriate rhythm between sections.

Design system generator and enforcer. Generates a complete, project-aware design foundation from a single brand color and project type. Produces color palettes, semantic tokens, mathematical type scales, spacing scales, shadow systems, and border radii. Every command operates on YOUR generated system, not generic rules. Use when building any frontend UI to ensure consistent, intentional design decisions from the first line of code.

Show the difference between your .forge.json design system and what's actually in the code. Lists every value that drifts from the system.

Audit elevation consistency. Checks that shadow usage follows a logical hierarchy — cards < dropdowns < modals.

Export your complete design system as CSS custom properties. Includes palette, tokens, type scale, spacing, shadows, and radii in a single :root block.

Export your design system in Figma Tokens format. Ready to import into Figma via the Tokens Studio plugin.

Export your design system as W3C Design Tokens JSON format. Compatible with Style Dictionary, Figma Tokens, and token management tools.

Export your design system as SCSS variables and mixins. Includes palette map, type scale mixin, spacing function, and breakpoint mixin.

Export your design system as a Tailwind CSS configuration. Generates theme.extend with colors, fonts, spacing, shadows, and radii.

Auto-fix design system violations. Replaces raw hex values with token references, snaps spacing to the scale, and normalizes font usage.

Generate a focus ring system using your system's accent color. Creates consistent :focus-visible styles for all interactive elements.

Snap all spacing values in the codebase to your system's grid. Replaces arbitrary padding, margin, and gap values.

Add error states, loading states, i18n safety, and edge case handling using your design system's tokens.

Add a complementary or analogous accent color to your system. Computes the harmonically ideal secondary color from your brand.

Generate a complete design system from a brand color and project type. Creates .forge.json with palette, tokens, type scale, spacing, shadows, and radii. This is the starting command — everything else references what it generates.

Check line lengths across the interface. Optimal: 45-75 characters per line. Flags containers that are too wide or too narrow for their font size.

Check that all animations have prefers-reduced-motion fallbacks. Adds them if missing.

Align every value in the codebase to the nearest system token. The nuclear option for system compliance.

Get contextual font pairing recommendations based on your project type. Never suggests banned fonts.

Regenerate the 50-950 shade palette from the current brand color in .forge.json. Updates the palette section without changing other parts of the system.

Final quality pass checking every value against your design system. The last command before shipping.

Tone down the design within your system's range. Use subtler shades, smaller type differences, and softer shadows.

Regenerate the border radius scale based on project type. SaaS gets moderate, portfolio gets soft, e-commerce gets tight.

Check responsive behavior using your system's spacing scale. Verifies that spacing reduces proportionally at smaller breakpoints.

Enforce vertical rhythm using your system's baseline grid. Ensures heading margins, paragraph spacing, and section padding are multiples of the baseline.

Score how well the codebase adheres to your design system. 0-100, where 100 means every value references a token and every pattern follows the system.

Rebuild the semantic token mapping from your palette. Maps surface, text, border, accent, and feedback tokens to specific palette shades based on project type.

Regenerate the shadow elevation system tinted with your brand hue. Produces 5 levels from sm to 2xl.

Find every spacing value in the codebase that doesn't match your scale. Lists violations by file and line.

Auto-fix all off-scale spacing values. Snaps to nearest system value and replaces with token reference.

Regenerate the spacing scale from your system's base unit. Outputs 13 steps from 4px to 128px.

Check background color hierarchy. Verifies that surfaces, cards, and modals use the correct token from your system.

Verify all interactive elements meet 44×44px minimum touch target size. Suggests padding increases using your spacing scale.