Palette Designer
Type a hex and get an 11-stop scale from 50 to 950, every stop scored for AA and AAA contrast. Add as many palettes as you need, or start from the Tailwind ones.
← BACK TO HOME
PRODUCT // FIGMA PLUGIN
FigGenie
A design system generator that runs in your browser. Pick an industry, get palettes with contrast already checked, and export CSS, Tailwind or Figma tokens. The plugin then builds 20 components.
LIVE DEMO
Use the real app
This is the real FigGenie, running right here. No sign-in needed. Change a colour, switch industries and export real CSS, Tailwind or design tokens.
HOW IT WORKS
Three steps to a system
Tell it your industry
Name the project and pick one of nine domains. FigGenie suggests a starting brand colour that suits the sector. Don't like it? Change it any time.
Shape the foundations
Palettes with contrast scores, Light and Dark semantic tokens, type, spacing, radius, effects, grids and icons, all in one panel.
Export it anywhere
One click exports CSS variables, Tailwind, W3C design tokens or a Tokens Studio file for Figma. The Figma plugin writes Variables and components straight into your file.
WHAT'S INSIDE
Foundations, components, domains
All the stuff a product needs before you design the first screen. Click any card to jump to that page in the app below.
Semantic tokens
Map roles (background, surface, text, border, brand, status) to palette stops for Light and Dark, then push them as aliased variables.
Typography
Generate a type scale, pick a font and push it as variables, or drop a documented specimen frame onto the canvas.
Spacing, radius & effects
Scales for space and corner radius, plus shadow and focus-ring styles, each with its own documentation frame.
Grids
Device frames and container grids as layout guides, ready to drop into your file.
Icons
Browse the Solar icon set, insert one into Figma, or build the whole set as variant components.
Component library
Button, Badge, Input, Card, Alert, Checkbox, Toggle, Tabs, Modal, Toast and ten more, built as Figma components from your palette.
Enterprise components
Domain-aware components with a playground, so you can switch sections on and off before anything is built.
Nine industries
Finance, EdTech, Healthcare, Ecommerce, HRMS, Travel, Insurance, Logistics and SaaS, each with its own brand, signal and chart colours.
CASE FILE
Why I built it
THE PROBLEM
Every new product starts the same way: rebuild the colour scales, decide which stop is the border and which is the text, set up Light and Dark, hand-make a Button with every state, then do it all again for the next client, in a different industry with different expectations.
It's slow, it's repetitive and it's easy to get slightly wrong. And the accessibility check usually happens at the very end, when changing a colour hurts.
THE APPROACH
One panel, inside Figma, that goes from industry to foundations to components, and keeps everything connected through variables.
01PrimitivesRaw colour stops, 50 to 950, plus white and black.
02SemanticRoles like surface, text and border. Light and Dark alias into primitives.
03DomainBrand, signal and chart colours for one of nine industries.
04ComponentsTwenty components built from the palette you generated.
DECISIONS
- Aliases, not copies. Semantic tokens point at primitives, so editing one stop updates Light and Dark everywhere it is used.
- Contrast where you choose. Every stop shows its AA or AAA score as you pick it, not in an audit later.
- Start from the industry. One onboarding question sets a sensible brand colour for the sector, so the first screen is never a blank canvas.
- Safe to re-run. Pushing again updates existing variables rather than creating a second set.
- No build step. The panel is plain HTML and JavaScript talking to the Figma plugin API, so it's quick to load and easy to change.
WHERE IT IS NOW
Web app live, plugin in pre-release. The web app generates palettes, semantic tokens, type, spacing, radius, effects and grids for nine industries, and exports them as CSS, Tailwind, design tokens JSON or Tokens Studio for Figma. In Figma, the plugin also builds a 20-component library and enterprise components, and Design → Code (beta) turns a Figma link into React, HTML or CSS.
NEXT
Getting the plugin onto the Figma Community. Want to try it before then? Just ask below.
FAQ
Good questions
Can I use FigGenie now?
Yes! The web app is live and needs no account. The Figma plugin is pre-release and not on the Figma Community yet; email hey@bruxstudio.com to ask for access.
Where does my data go?
Almost nowhere. Palettes and tokens are generated in your browser, and the app only remembers your project name and industry on your device. Brand files you add are read in your browser and never uploaded. If you enter a website, this site's server reads that public page to find its colours and fonts, and keeps nothing about you. The app loads fonts from Google Fonts and, on the Icons page, icons from Iconify.
What can I export, and how does it get into Figma?
CSS variables, a Tailwind config, W3C design tokens JSON and a Tokens Studio file, plus an HTML spec sheet and an icon sprite. Import the Tokens Studio file with the Tokens Studio plugin to create Figma variables. The FigGenie Figma plugin writes Variables, documentation frames and components directly.
Which industries does it cover?
Finance, EdTech, Healthcare, Ecommerce, HRMS, Travel, Insurance, Logistics and SaaS. Each has its own brand, signal and chart colours.
Does it support dark mode?
Yes. Semantic tokens are written for Light and Dark modes, so a single variable collection drives both themes.
Can it turn a design into code?
Design → Code is in beta in the Figma plugin. Paste a Figma link and get React JSX, HTML or CSS back. It needs your own Figma personal access token, so it is not part of the web app.
PLUGIN EARLY ACCESS
Want the plugin first?
The web app is open to everyone. The Figma plugin isn't public yet. Tell me what you'd use it for and I'll send you an invite.