Aa - Style Generator (Beta)

Design System Styles & Variables GeneratorGenerate production-ready typography styles, color palettes, spacing, and radius variables, all in one plugin. Stop creating them manually.

Typography - Choose your font family, weight, and scale (Default, Minor Third, Golden Ratio, and more). Fine-tune Display, Paragraph, and Eyebrow categories independently — select multiple weights, toggle sizes (XXL to XS), and customize font sizes per step. Includes line height, letter spacing, and paragraph spacing controls with pixel or percent units. Optional AI-powered generation with OpenAI.

Color Palettes - Pick from 10 popular palette systems — Tailwind, Untitled UI, Material, Radix, Stripe, and more. Select families and shades, then generate color styles instantly.

Custom Colors - Build your own color families from scratch. Adjust hue, saturation, lightness, hue shift, and saturation boost with precision sliders. Add multiple families and preview all 12 shades in real time.

Spacing Variables - Generate a Base-4 spacing scale as Figma variables (0, 1, 2, 4, 8, 12, 16, 24, 32, 48, 64, 128). Toggle individual steps on/off and customize values. Creates a ready-to-use variable collection.

Radius Variables - Generate border radius variables (0, 2, 4, 6, 8, 12, 16, 24, 32, Full). Preview each radius visually, adjust values, and create a variable collection in one click.

Follow me on more:https://x.com/Irakkklhttps://dribbble.com/IrakliLolashvili