Set your colours
Add your brand colours, give each one a job, and check people can read them.
Better UI, less fixing
Palette Tools
Try it on your own tokens
Contrast checker
Icon Library
Block library
Component library
Handbook
Create an account and sign in
Find your way around the editor
Start a new design system
Use the Design Wizard
Start from a template
Manage your design systems
Plans explained
Import from a website
Import a tokens file
Send from Figma with the plugin
Get your design system into Figma
Review an import
Choose your fonts and text sizes
Set spacing, corners, shadows and layout
Set how things move
Style your buttons
Explore your components
Add a brand variant
Write your principles and tone of voice
Check your design system for problems
Set rules for your design system
Review components from AI tools
Share your design system
Set up a team
Manage your account and plan
Export your design system
Connect an AI tool
Sync with Git
Host your Storybook
Build pages from blocks
Storybook Live Sync & Hosting
Connect an MCP client
MCP setup guides
Connection diagnostics
Connect an AI assistant
From scattered styles to a component your team reuses
Simple, transparent pricing
Guides
What is a design system MCP server?
Figma's MCP server vs a design system MCP server
Frequently asked questions
Support
Privacy Policy
Terms and Conditions
End User Licence Agreement