Home / Get started
Get started with Space
Choose how you'll use it. Mix paths freely: design in Figma and build with Tailwind using the same names.
No code needed. Everything lives in the Figma library.
Turn on the components
Use them from the Assets panel. Variables, text styles and effects come included.
Pick light or dark
Change the "theme" variable mode on any frame. Every component follows.
You need Tailwind CSS v4. Don't have it yet? Follow the official install guide and come back.
Download the theme
Grab it from GitHub or link it from the CDN. It's 21 kB minified.
curl -O https://cdn.jsdelivr.net/gh/josefloresdesign/space-ds/tailwind/theme.cssImport it in your main CSS
It goes right after Tailwind, together with the IBM Plex Sans font.
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;600;700&display=swap");
@import "tailwindcss";
@import "./theme.css";Use the classes
Names match Figma. Semantic colors already switch in dark mode.
<button class="h-control-md px-4 rounded-control
bg-action-primary-default hover:bg-action-primary-hover
text-text-on-action text-body-md font-semibold">
Save changes
</button>Turn on dark mode (optional)
It follows the system setting on its own. To force it, set it on the html tag.
<html data-theme="dark">No build step. One stylesheet with every token as a CSS variable.
Link the stylesheet
Add one line inside <head>.
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/josefloresdesign/space-ds/css/styles.min.css">Use the variables
Every Figma variable is available with the same name.
.card {
background: var(--color-bg-surface);
color: var(--color-text-primary);
border-radius: var(--radius-card);
box-shadow: var(--shadow-elevation-raised);
padding: var(--space-4);
}Dark mode
Automatic with the system, or force it on <html>.
<html data-theme="dark">For React, Style Dictionary, Tokens Studio or your own tools.
Download tokens.json
All 361 tokens in the W3C design tokens (DTCG) format, with light and dark values.
Download tokens.jsonRead a token
Aliases point to primitives, so you keep the semantic layer.
"theme": {
"bg": {
"surface": {
"$type": "color",
"$value": "{primitives.surface.50}"
}
}
}Space DS has a guide written for AI assistants (Claude, ChatGPT, Cursor…), so they build with your real tokens instead of guessing.
Copy the llms.txt link
llms.txt is a short index: what Space DS is, its key rules, and a link to every doc. You don't need to open it; the AI reads it.
https://josefloresdesign.github.io/space-ds/llms.txtPaste it in your chat and ask for UI
The AI opens the link, follows it to the docs it needs, and uses the right token names.
Read https://josefloresdesign.github.io/space-ds/llms.txt and use Space DS.
Build a pricing card with a Get started button.
Use only Space tokens. No hex colors.Using Claude Code or Cursor?
Clone the repo instead. Its CLAUDE.md teaches the rules automatically, and every doc is a Markdown file in /docs.
git clone https://github.com/josefloresdesign/space-ds.git