Foundation

About this plugin

Foundation

Never start a design system from scratch again. Foundation instantly generates Figma variables that perfectly match Tailwind CSS, turning hours of setup into seconds.

📹 Getting started

https://youtu.be/mXGzHx-o9Hg?si=PKeVHjxs4FKw7eTh

🎯 What it does

Foundation is your design system accelerator. It automatically creates a complete set of Figma variables based on Tailwind CSS, giving you a production-ready foundation in seconds. Perfect for new projects, MVPs, or standardizing existing design systems.

Core Features

🎨 Colors that scale

- Start with brand colors, get a complete system

- Dark mode ready

- Interactive states included

- Semantic color system with:

• Surface colors

• Content colors

• Border colors

• Status colors

• All with dark mode variants

📐 Smart spacing

- Based on your root font size

- Matches Tailwind's spacing scale

- Complete system for:

• Layout spacing

• Component spacing

• Typography spacing

• All mathematically connected

✍️ Typography system

- Production-ready type scale

- Weights from light to bold

- Letter spacing variations

- Line heights that work

- Ready-to-use text styles

🔲 Border system

- Radius scale from none to full

- Border widths that make sense

- Works with your spacing

🚀 Quick Start

1. Install Foundation

2. Set your brand colors

3. Set your root font size

4. Generate your system

5. Start designing

💎 What You Get

A complete design system foundation:

- 🎨 Color system with dark mode

- 📏 Production-ready spacing

- 📝 Complete typography

- 🔲 Border system

Perfect For:

- 🆕 Starting new design systems

- 🏃‍♂️ Rapid prototyping & MVPs

- 🔄 Design system migrations

- 🤝 Figma + Tailwind teams

- ⚡️ Fast-paced projects

Why Foundation?

- 🚀 Complete system in seconds

- ⏱ Skip weeks of setup

- ✅ Proven design patterns

- 🔄 Perfect code sync

- 📈 Built to scale

Don't waste time building design systems from scratch. Get a production-ready foundation in seconds.