Using the kit

The kit is made to be pulled into other Space Works projects, so every surface draws from one source.

Pin a reviewed release

Release target: v2.1.1. Use the published release and versioned kit ZIP once this tag is published. A local build does not publish a tag. Until then, use your last published tag or an explicitly reviewed commit.

git submodule add https://github.com/SpaceWorks-Labs/SpaceWorks-Design-System.git design
git -C design fetch --tags
git -C design checkout v2.1.1
git add .gitmodules design
git commit -m "Pin design system v2.1.1"

Record the submodule commit in the consuming repository. For an upgrade, fetch tags, check out the reviewed release in design, then review its migration notes and commit the changed submodule SHA in an upgrade PR.

All exports and checksums · Choose a platform · Migration guide

Current rule (v2.1.0, 2026-11-13): Pin the fetched release tag or reviewed immutable commit and record the submodule SHA. The retained setup below requires the checkout shown above before importing tokens. (3-N02) See current release guidance.

Add it to a project

Add the repository as a submodule:

git submodule add https://github.com/SpaceWorks-Labs/SpaceWorks-Design-System.git design

Import the tokens. The font URLs in tokens.css are relative to the tokens/ folder, so the fonts load without extra setup:
```
@import "design/tokens/tokens.css";
```

Use the variables. Colours are space-separated sRGB triplets, so wrap them in rgb():

body {
  background: rgb(var(--color-bg));
  color: rgb(var(--color-ink));
  font-family: var(--font-sans);
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; }
.button-primary {
  background: rgb(var(--color-accent));
  color: rgb(var(--color-on-accent));
}

For dark mode, add the class dark to <html>. Light is the default.
To pick up kit updates later:
Terminal window
```
git submodule update --remote design
```
Current rule (v2.1.0, 2026-11-13): The command above tracks development. For production upgrades, fetch tags, check out the reviewed release in the submodule, read the migration notes and commit that SHA in an upgrade PR. (3-N03) See current release guidance.

Solid colours only

Every soft fill is stored as an opaque colour, so there is no bg-teal/20 and no translucent text. The triplet format still allows rgb(var(--color-accent) / 0.5) for decoration, but never for text, which must keep its tested contrast.

Use the JSON instead

tokens/tokens.json holds the same values as hex, grouped as brand (the seven colours), fonts, light and dark. Use it for native apps, Figma plugins or anything that can’t read CSS:

{
  "brand": { "maker-teal": "#006E63", "workshop-orange": "#FF7447" },
  "light": { "bg": "#FFF4E8", "accent": "#006E63", "on-accent": "#FFF4E8" },
  "dark": { "bg": "#000000", "accent": "#006E63", "on-accent": "#FFF4E8" }
}

What’s in the repository

Folder	What it holds
`brand/`	The brand guidelines PDF, all 17 pages as SVG and PNG, the logo sheet and the Figma style record
`logo/`	Ten vector masters with matching 4× PNGs
`mascot/`	Patch: vector SVGs and PNGs of the hero, the sneeze loop and the walk cycle and every frame, GIFs of the loops, the original pixels in `original/`, compressed copies in `compressed/`, every piece for dark surfaces in `dark/`, and the concept sheets
`icons/`	The favicon, PNG app icons (16, 32, 180, 192, 512) and the 1200 × 630 social card
`fonts/`	Gilroy (free Light and ExtraBold), Outfit and Unbounded web fonts, with licences
`tokens/`	`tokens.css` and `tokens.json`
`docs/`	The UI brand spec and the UX pattern specs
`site/`	This website

The full token list is in the token reference.

Portable and native exports

Download portable.css beside tokens.css, both DTCG modes, Tailwind preset, Android XML/Compose and Swift/asset catalogue. Legacy colours are RGB triplets; new portable colour variables are complete CSS colours. Architecture specifies px/dp/sp/pt, seconds, aliases and native host responsibilities. Choose a platform starter for a first screen.