# Wandelbots Nova Design System

> The Wandelbots Nova design system: design tokens generated from Figma, plus the font, icon and component packages built on top of them.

Docs: https://wandelbotsgmbh.github.io/nova-design-system/
Full reference: ./llms-full.txt

## Packages

- **@wandelbots/design-tokens** — Wandelbots Nova design tokens (DTCG sources + generated CSS / JS outputs).
- **@wandelbots/fonts** — Wandelbots Nova web fonts (Inter) as self-hosted WOFF2 with ready-to-import @font-face CSS.
- **@wandelbots/icons** — Wandelbots Nova icon set — tree-shakeable React SVG components.
- **@wandelbots/hui** — Wandelbots Nova UI: shadcn-owned React components on Base UI primitives, themed via @wandelbots/design-tokens.
- **@wandelbots/mui** — Wandelbots Nova MUI layer: dark-mode MUI-7 theme (createNovaMuiTheme) + presentational React components and input validators.
- **@wandelbots/video-player** — Wandelbots Nova video player: framework-agnostic HTML5 video component with custom chrome, themed via @wandelbots/design-tokens.
- **wandelbots-design-tokens** (PyPI) — the same token values as a dependency-free Python package, released in lockstep with the npm one.

## Conventions

- Pick **either** `@wandelbots/hui` **or** `@wandelbots/mui` — they are alternative styling layers over the same tokens, never used together.
- Prefer semantic **Zero Gravity** tokens (`--wb-zero-gravity-*`) over raw palette **Colors** tokens (`--wb-colors-*`). Reach for a Colors token only when no Zero Gravity token fits.
- Never hardcode a color, spacing, radius or font value — reference the CSS variable or the JS export.
- Never name a font family literally; use `--wb-font-family-body` / `--wb-font-family-mono`.
- Tokens and icons come from Figma. If one is missing, request it from the design department rather than inventing a value or drawing an SVG.

## Tokens

- breakpoints: 5 tokens
- colors: 252 tokens
- font: 3 tokens
- radius: 6 tokens
- spacing: 14 tokens
- zero-gravity: 144 tokens

Themes: dark (base export), simulation

## Icons

232 React components, one entry point each: `import { HomeFilled } from "@wandelbots/icons/HomeFilled"`

## Components

- @wandelbots/hui: Button, Checkbox, Chip, Combobox, DropdownMenu, Select, Slider, Switch
- @wandelbots/mui: AdornedAutocomplete, AdornedSelect, AdornedTextField, DropdownChip, ElevationCard, FilterChip, FloatTextField, IntegerTextField, IpAddressTextField, ParsingTextField, PortTextField, PrimaryButton, RoundedIconButton, SecondaryButton, StatusChip, StringValidationTextField
- @wandelbots/video-player: DEFAULT_LABELS, LOCALES, VideoPlayer, formatTime, pickSourceForViewport, useViewportSource