Baseline

About this plugin

Baseline is a design system token generator built for designers who want clarity, consistency, and control at the foundation level of their products.

Instead of locking you into predefined scales or rigid frameworks, Baseline lets you define your own system and converts it into structured Figma Variables you can actually maintain over time.

🧱 What Baseline Helps You Do

🎨 Build a Flexible Color System

1. Create semantic color tokens such as brand, feedback, and functional colors with full control over naming and scale structure.
2. Rename color groups and shade labels to match your system
3. Generate consistent light and dark mode color scales
4. Preview tokens before generating variables
5. Avoid hard-coded or inconsistent color usage

🔤 Create a Clear Typography System

1. Define typography using meaningful roles, not arbitrary labels.
2. Create roles like Body, Caption, Heading, and Display
3. Control font family, weight, size, and line height
4. Set responsive sizes for desktop, tablet, and mobile
5. Generate clean typography tokens that map directly to Figma Variables

📐 Define Spacing with Intent

1. Build spacing tokens using a consistent grid that scales across layouts.
2. Choose between common grid systems (4px / 8px)
3. Create semantic spacing tokens instead of random values
4. Keep spacing consistent across components and layouts

♿ Accessibility Built Into the Workflow

1. Baseline includes real-time WCAG contrast validation so accessibility is handled while defining tokens, not after designs are complete.
2. Check contrast between text and background tokens
3. Validate WCAG AA and AAA compliance
4. Make accessibility decisions early, where they belong

⚙️ Generate Figma Variables Safely

1. Baseline is designed for iteration, not one-time setup.
2. Preview what will be generated before creating variables
3. Create clean variable collections with predictable naming
4. Build systems that can evolve as products grow

🔍 What Makes Baseline Different

1. Fully customizable naming no forced conventions
2. Focused only on tokens (colors, typography, spacing)
3. Built for real product workflows, not demos
4. Accessibility treated as a core requirement, not a feature
5. Designed to scale beyond a single file or project

👥 Who Baseline Is For

1. Product designers working on real applications
2. Teams adopting Figma Variables seriously
3. Designers building scalable systems across multiple screens
4. Anyone tired of rebuilding design systems from scratch

If you’re looking for instant UI kits or auto-generated layouts, Baseline may not be the right tool.