# Build with it
> Load the system in a page, pick a theme, and use the components. Everything here is also machine-readable.
## Load it in a page
The whole system is one stylesheet, React 19 and one script. `window.DigitalCrew` then holds every component.
```html
```
## Pick a theme
Set `data-theme` on ``: `crew-light` or `crew-dark` for Crew OS and the public site, `max-light` or `max-dark` for Max. Every token keeps its name in all four; only values change. Components that read next-themes (Globe, FeatureSection, WorldGlobe, Toaster) follow the page theme when wrapped in `PageThemeProvider`.
## Use the tokens with Tailwind CSS v4
```css
@import "tailwindcss";
@import "https://www.digitalcrew.tech/design/lib/tokens.css";
@import "https://www.digitalcrew.tech/design/tokens/tokens.tailwind.css";
```
Then write `bg-background text-foreground`, `bg-primary text-primary-foreground`, `border-border`, `rounded-lg`, `bg-dc-sophie`, `font-cabinet`.
## In the apps
Each component page names its source file and the import to use in its app. Max imports from `@/components/...` or `@/features/...`; Crew OS from `@/components/...` and `@digitalcrew/ui`. The previews on this site are plain `React.createElement` code you can read and adapt: open **Code** on any component page.
## Files
| File | What it is | Size |
|---|---|---|
| [`/design/lib/tokens.css`](/design/lib/tokens.css) | Every token as CSS custom properties, per theme, plus the Cabinet Grotesk faces | 12 KB |
| [`/design/tokens/tokens.tailwind.css`](/design/tokens/tokens.tailwind.css) | Tailwind CSS v4 @theme block mapping the tokens to utilities | 5 KB |
| [`/design/tokens/tokens.dtcg.json`](/design/tokens/tokens.dtcg.json) | W3C design tokens (DTCG) per theme, with type styles, for Figma Tokens Studio and Style Dictionary | 98 KB |
| [`/design/tokens.json`](/design/tokens.json) | The tokens: colour (four themes), type, spacing, radius, shadow, backdrop, with usage notes | 43 KB |
| [`/design/lib/bundle.css`](/design/lib/bundle.css) | Tailwind v4 output for every component and preview, plus module CSS | 327 KB |
| [`/design/lib/react.js`](/design/lib/react.js) | React 19.2.3 (classic script, global React) | 8 KB |
| [`/design/lib/react-dom.js`](/design/lib/react-dom.js) | ReactDOM 19.2.3 with createRoot (global ReactDOM) | 185 KB |
| [`/design/lib/bundle.js`](/design/lib/bundle.js) | window.DigitalCrew: every component, hook and helper | 3.3 MB |
| [`/design/lib/index.d.ts`](/design/lib/index.d.ts) | TypeScript declarations for window.DigitalCrew, per source module, plus the data types props use | 124 KB |