Using the kit

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

Add it to a project

Add the repository as a submodule:

git submodule add https://github.com/Nobody-Builds/Nobody-Builds-Design.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
```

Solid colours only

Every soft fill is stored as an opaque colour, so there is no bg-blueprint/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": { "blueprint": "#2457A6", "hard-hat": "#FDC521" },
  "light": { "bg": "#F5F7FB", "accent": "#2457A6", "on-accent": "#F5F7FB" },
  "dark": { "bg": "#172033", "accent": "#7FA8E8", "on-accent": "#172033" }
}

Change a value

Edit the values in scripts/build-tokens.py and run it from the repository root. It checks every text pair against WCAG 2.2 and only writes tokens.css and tokens.json if they all pass:

python scripts/build-tokens.py

What’s in the repository

Folder	What it holds
`brand/`	The brand guidelines PDF and all 17 pages as PNG, the logo masters sheet and the builder’s source files (`source/`)
`logo/`	Seven masters as PNG, each with an SVG that wraps it
`mascot/`	The builder: the cut-out PNG, the dark-surface version in `dark/` and the untouched avatar in `original/`
`icons/`	The favicon, PNG app icons (16, 32, 180, 192, 512) and the 1200 × 630 social card
`fonts/`	Gilroy and Unbounded web fonts, with licences
`tokens/`	`tokens.css` and `tokens.json`
`docs/`	The UI brand spec and the UX pattern specs
`scripts/`	`build-assets.py` (logo, icons, mascot), `build-guidelines.py` (guidelines pages and PDF) and `build-tokens.py` (tokens and contrast checks)
`site/`	This website

The full token list is in the token reference.