Build with it · Digital Crew Design System

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 data-theme="crew-light">
<head>
  <link rel="stylesheet" href="https://www.digitalcrew.tech/design/lib/tokens.css">
  <link rel="stylesheet" href="https://www.digitalcrew.tech/design/lib/bundle.css">
  <script src="https://www.digitalcrew.tech/design/lib/react.js"></script>
  <script src="https://www.digitalcrew.tech/design/lib/react-dom.js"></script>
  <script src="https://www.digitalcrew.tech/design/lib/bundle.js"></script>
</head>
<body>
  <div id="root"></div>
  <script>
    const h = React.createElement, { Button, TooltipProvider } = window.DigitalCrew;
    ReactDOM.createRoot(document.getElementById("root"))
      .render(h(TooltipProvider, null, h(Button, null, "Build my Digital Worker")));
  </script>
</body>
</html>

Pick a theme#

Set data-theme on <html>: 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#

@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`	Every token as CSS custom properties, per theme, plus the Cabinet Grotesk faces	12 KB
`/design/tokens/tokens.tailwind.css`	Tailwind CSS v4 @theme block mapping the tokens to utilities	5 KB
`/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`	The tokens: colour (four themes), type, spacing, radius, shadow, backdrop, with usage notes	43 KB
`/design/lib/bundle.css`	Tailwind v4 output for every component and preview, plus module CSS	327 KB
`/design/lib/react.js`	React 19.2.3 (classic script, global React)	8 KB
`/design/lib/react-dom.js`	ReactDOM 19.2.3 with createRoot (global ReactDOM)	185 KB
`/design/lib/bundle.js`	window.DigitalCrew: every component, hook and helper	3.3 MB
`/design/lib/index.d.ts`	TypeScript declarations for window.DigitalCrew, per source module, plus the data types props use	124 KB