Super Super Design System Pro

About this plugin

Super Design System helps you go from one seed color and a base type size to a fully structured token system—variables and styles—in minutes.

What it does

Colors

1. Generate accessible 25 → 900 color scales from one base color (cap 15 steps).
2. Create Variables and/or Paint Styles with Light/Dark + extra custom modes.
3. Build Semantic aliases (success/info/warning/error, etc.) from primary families.
4. Map Properties (e.g., prop/surface/success/bg) from primary or semantic tokens.
5. Export/Import your palette config for reuse.

Typography

1. Define a Group (e.g., “English”, “Arabic”) and choose Font Family.
2. Select Base Size + Scale ratio (Major 3rd, Golden Ratio, etc.).
3. Add “steps” above (bigger) or below (smaller) the base; rename (e.g., H1…H6, Body, Caption).
4. Edit per-step Line Height, Letter Spacing, Paragraph Spacing.
5. Pick font weights available for the chosen family (checkbox list).
6. Generate Variables (grouped as typography/<Group>/...) and Text Styles (Group / Step / Weight).
7. Add extra Modes to the typography variable collection (e.g., “Brand B”, “Arabic”).

Import/Export

1. Export just Variables, just Styles, or Both.
2. Re-import JSON to instantly repopulate the UI and regenerate.

How teams use it (examples)

1. Brand palette → product UI: Start with #22D3C5 → generate 25, 50, 100…900, set green/500 as semantic/success/bg, map to prop/surface/success/bg, then export tokens for Dev.
2. Multi-language typography: Group “English” (Inter 16 @ 1.25 scale, steps H1–H6, Body1–Body4) and a second mode “Arabic” for a regional brand variant—same steps, different metrics.
3. Design system adoption: Publish a library with variables + styles. Designers apply styles quickly; developers consume variables via the JSON export.