The bridge between
design and development
An open source design system with the same names in Figma and in code. Design, copy and build with tokens for Tailwind and CSS, in light and dark mode.
- 100% free
- MIT open source
- 10k+ Figma downloads
- WCAG AA accessible
Start here
How do you want to use Space?
Pick your path. They all share the same tokens, so design and code never drift apart.
Figma: start designing in 3 steps
- 1 Open the libraryDuplicate Space DS from Figma into your drafts.
- 2 Use the componentsDrag them from the Assets panel. Variables and modes come included.
- 3 Switch light and darkChange the theme mode on any frame and everything adapts.
Components, variables, light and dark modes, all in one Figma library.
Open the libraryTailwind CSS: get set up in 3 steps
- 1 Download the themetheme.css from GitHub or the CDN link.
- 2 Import itRight after @import "tailwindcss" in your main CSS.
- 3 Use the classesNames match what you see in Figma.
@import "tailwindcss";
@import "./space-ds/theme.css";<button class="h-control-md px-4 rounded-control
bg-action-primary-default text-text-on-action">
Save
</button>Plain CSS: get set up in 3 steps
- 1 Add one lineLink the stylesheet in your <head>.
- 2 Use the variablesvar(--color-bg-surface), var(--space-4), var(--radius-card)…
- 3 Dark mode is automaticOr force it with data-theme="dark" on <html>.
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/josefloresdesign/space-ds/css/styles.min.css">.card {
background: var(--color-bg-surface);
border-radius: var(--radius-card);
padding: var(--space-4);
}Tokens JSON: get set up in 3 steps
- 1 Download tokens.jsonAll 361 tokens in the W3C design tokens (DTCG) format.
- 2 Plug it into your toolsStyle Dictionary, Tokens Studio or your own build.
- 3 Keep it in syncIt is generated from Figma, so it never drifts.
"bg": {
"surface": {
"$type": "color",
"$value": "{primitives.surface.50}"
}
}With AI: build with your AI in 3 steps
- 1 Share llms.txtIt tells the AI what Space DS is and where every doc lives.
- 2 Ask for UIThe AI uses your tokens and components instead of random colors.
- 3 Paste and shipThe output uses the same names as Figma.
Use Space DS (https://josefloresdesign.github.io/space-ds/llms.txt).
Build a settings page with tabs, switches
and a Save button. Use only Space tokens.Components
Ready to use, in light and dark
The same components in both modes. Switch the theme and everything adapts, no extra classes. Try the switches.
Account settings
Light modeAccount settings
Dark modeWhy Space
Design and code speak the same language
Same names everywhere
primary/500 in Figma is --color-primary-500 in CSS and bg-primary-500 in Tailwind.
Light and dark included
Semantic colors switch on their own. Your components need no dark: classes.
Accessible from the start
AA contrast, visible focus and touch-friendly sizes in every component.
100% customizable
Change your brand by editing tokens, not components. One color and everything updates.
Tailwind v4 and plain CSS
Pick your stack. Same result with or without a build step.
AI-ready
llms.txt and Markdown docs so Claude or ChatGPT can build UI with your DS.
10k+
downloads on Figma Community
361
tokens in Figma and code
13
documented components
$0
forever · MIT license
Pricing
Free. Forever.
No pro plan, no expiring trial, no credit card. Use it in personal and commercial projects.
- Includes
- Full Figma library with variables and modes
- 13 components with variants and sizes
- 361 tokens in CSS, Tailwind v4 and JSON
- Light and dark mode
- Markdown docs and llms.txt for AI
- Commercial use allowed
- Free updates
Frequently asked questions
Is it really free?
Yes. Space DS is open source under the MIT license. There is no paid plan and nothing is locked.
Can I use it for client or commercial work?
Yes, the MIT license allows it. Just keep the license notice in your code.
Do I need to know React?
No. Use it only in Figma, with plain CSS or with Tailwind. React support will come later.
How do I apply my brand colors?
Change the primitive tokens (for example primary) in Figma or in the CSS. Components update on their own.
How do I request a component or report a bug?
Open an issue on GitHub. Community requests decide what comes next.
Design today, build tomorrow with the same names
Choose how you want to start. It takes less than 5 minutes.