Orange Tokens: Themes & Variables

About this plugin

🔶 Orange Tokens

Generate Figma Variables, Text Styles & System Docs for Color & Typography — Instantly

Orange Tokens turns your base colors and typography into a complete, scalable design system — directly inside Figma.

Generate smart color variables, structured typography tokens, synced text styles, and brand documentation in just one click.

No more guesswork, manual tweaking, or broken overrides. Whether you're building a new system or scaling across themes and brands, Orange Tokens helps you move fast — and stay consistent.

🚀 How It Works

1. Enter your base colors and name them.
2. Choose how many display/text styles you need.
3. Click “Generate Variables.”
4. Done — color variables, text styles, and a full Brandbook are created instantly.

✨ Core Features

1. One-click generation of design tokens from base colors
2. Smart tints & shades with accessible contrast built-in
3. Typography tokens + Figma Text Styles auto-generated
4. Brandbook: View and document your entire color + type system in one page
5. Auto-detects existing variables and updates them non-destructively
6. Clean token naming that’s system-ready
7. Works with Figma’s Variables API — perfect for theming, dark mode, and token-based workflows.

📘 What's New

1. Typography Docs Generation
2. Integrated Brandbook View to preview and document all variables
3. Editable Primitives: Auto-detect and modify existing Figma Variables
4. Improved Performance & Naming Structure
5. Optimized for design systems, enterprise teams, and multi-theme setups

💬 Feedback & Roadmap

This is just the start. Upcoming features: typography token customization, spacing tokens, light/dark mode toggles, and advanced export options.

Got an idea or request? Drop a comment on the plugin page or reach out at [email protected].