Foundation Studio | Design System Generator

Foundation Studio is a Figma plugin that creates a complete base style system for your project in seconds. It removes manual setup and lets you start designing with a clean, consistent foundation from day one.

Color SystemGenerate a fully harmonized palette from a single primary color.

Semantic, text, and supportive colors are created automatically.

Supports primary, secondary, and tertiary colors.

TypographyChoose any font and instantly generate a complete type systemwith balanced sizes, ratios, and line heights.

Customize the scale and define font pairing.

Spacing, Shadows & RadiusBuild consistent spacing, shadow, and radius systems for your UI.

Export for DevelopersExport tokens to CSS, SCSS, or JSON.

DocumentationAutomatically generate a clear documentation page with all design tokens in one place.

Light & Dark ModeLight and dark themes are generated from the same tokens,ensuring readability and contrast across both modes.⸻🚧 BetaFoundation Studio is currently in beta and actively evolving.

Feedback and ideas are always welcome.