Design
llms.txt digitalcrew.tech

Build

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 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.

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 Example 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/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
/design/tokens.json The tokens: colour (four themes), type, spacing, radius, shadow, backdrop, with usage notes 43 KB

For LLMs and agents#

This site is written to be read by people and by models alike.

  • llms.txt lists every page with a one-line summary, in the llms.txt format.
  • Every page has a Markdown twin: add .md to its path (/design/components/button.md; the overview is /design/index.md). Each HTML page links its twin with <link rel="alternate" type="text/markdown">.
  • llms-full.txt is the whole site in one Markdown file.
  • manifest.json is the catalogue: pages, components (name, group, product, summary, source, import, preview and Markdown URLs), themes and files.
  • tokens.json and index.d.ts carry exact values and types.

A component page in Markdown always has the same parts: a one-line summary, Facts (group, product, source, import), Guidelines (when to use it, what you provide, anatomy with exact values, behaviour, don'ts), API (the TypeScript declarations) and Example (the preview's code). Read the story and the component's page before generating UI, and use token names, never raw values.