Built from the box.

Current release target: v2.1

What’s new in v2.1 · Current rules · Named components · Choose a platform · Downloads

Current release (note added 13 November 2026, v2.1.1): the release in use now is v2.1.1, read from VERSION on every build. The “Design System v2.0” badge and “What’s new in v2.0” above and below name the v2 generation and its first release; what changed since is in What’s new in v2.1 and Releases.

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

An open invitation

A familiar box, built for a space full of possibilities. Four flaps invite the next project, a clear structure gives every part a place, and the colours do the rest: teal grounds it, orange gets it moving.

What’s new in v2.0

Version 2.0 of the design system ships alongside SpaceWorks 0.12.0. The headline changes:

• A solid-black dark mode. One neutral black family, with the brand brights unchanged in both themes.
• The logo moves. The box opens on hover and focus, and the same box is the loader everywhere.
• A motion kit. Every animation in the product as a reusable template: CSS, React copies, a live demo and a README.
• Brand guidelines v2. A 50-page book covering light and dark, motion and the product.
• Product rules. The rules every Space Works product follows, and where each product stands.

What's new in v2.0The solid-black dark mode, the box-opening logo, every animation and the UX changes.

Design decisionsEvery decision behind v2.0, with the reason for each.

Explore the system

BrandLogo, colour, type, graphics, Patch the mascot and the brand guidelines.

FoundationsDesign tokens, theming, contrast, type scale, shape, spacing and icons.

MotionThe animation catalogue, the box-open loader and the motion tokens, live.

Components and patternsSpace Works UX: patterns, layouts, states, status pills and every screen.

ContentVoice, tone and microcopy.

RulesThe product and engineering rules every Space Works product follows.

Jump straight to

LogoTen masters, clear space, minimum sizes and the six things never to do.

ColourSeven colours, one clear system, and the text pairs that pass contrast.

TypographyGilroy ExtraBold leads, Outfit does the everyday work, Unbounded brings one bold moment.

VoiceSound like a helpful maker: clear, warm and specific.

Design tokensEvery light and dark colour token, ready to import as CSS or JSON.

UI specsHow the brand becomes the app: states, pills, type scale and screen patterns.

Space Works UXOur interaction system: 30 patterns, 10 layouts and the quality bar every screen meets.

Pipelines and releasesHow every repository checks, versions and ships its work.

Downloads and live demos

Brand guidelines

Version 2 is current; where the two books differ, v2 wins. Version 1 stays for reference, and every page of both books is on Brand guidelines.

Brand guidelines v2 (PDF)v1 (PDF)

Hosted demos

Every animation runs on its own page, in light and dark: box-open loader, theme switch, search field, route transition, overlays, toast, feedback and delight. The full list, with where each one is used, is Every animation.

One source of truth

Everything on this site is published straight from the SpaceWorks-Design-System repository. Add it to any Space Works project as a git submodule and every surface draws from the same kit:

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