Back to Plugins
Design System Builder

Design System Builder

Build a complete design system in one click.

Plugin Preview

Design System Builder preview

About this plugin

Design System Builder generates a full design system from just a brand name and color. It creates color swatches with semantic palettes (secondary, tertiary, neutral, error, success, warning, info), a modular type scale, spacing guides, shadow styles, and UI components. Every color pair is tested for WCAG contrast compliance with AA/AAA ratings, and a full contrast grid shows all combinations at a glance. Adjust the Personality slider to shift between expressive (playful, rounded) and corporate (sharp, structured) styles. Audit existing pages, export your system as JSON, or import one to get started instantly.

Plugin Details

Version1
CreatedMarch 1, 2026
Last UpdatedMarch 1, 2026
Categoryediting & effects plugins
CreatorSso
Stats3 installs, 0 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:ui.html
  • main:code.js
  • Document Access:dynamic-page
  • Editor Types:
    figma
  • Allowed Domains:
    • none