# Antumo Design System

> CSS + JavaScript + Blazor design system for web apps: design tokens, ~39
> components, and framework integrations for Angular + PrimeNG, Blazor /
> Bootstrap 5, and vanilla HTML. Light and dark themes built in. Components use
> standard Bootstrap 5 class names styled the Antumo way.

Packages (private, Azure Artifacts — requires m2tcorp access):
- npm `@antumo/design` — CSS + JS for Angular / vanilla HTML
- NuGet `Antumo.Blazor` — one package: CSS, fonts, all Lucide icons, Razor components

Key rule: use Bootstrap 5 class names (`.btn`, `.table`, `.form-control`,
`.modal`). Components without a BS5 equivalent use the `.antumo-*` prefix. Never
hardcode colors/spacing/typography — always use `var(--antumo-*)` tokens.

## Docs

- [Overview](https://design-system.dev.antumo.com/index.md): What the DS is and a 30-second install.
- [Getting Started](https://design-system.dev.antumo.com/guide/getting-started.md): Registry access, install, the one rule (Bootstrap 5 classes).
- [CSS + JS (Angular / vanilla)](https://design-system.dev.antumo.com/guide/css-js.md): SCSS/CSS import, the JS API (Modal/Sidebar/Tooltip), data attributes, events, Angular + PrimeNG.
- [Blazor / .NET](https://design-system.dev.antumo.com/guide/blazor.md): NuGet install, AntumoIcon, Razor components (sidebar, page header, select), theme from C#.
- [Dark Mode](https://design-system.dev.antumo.com/guide/dark-mode.md): One attribute (data-theme=dark); how per-theme tokens work.
- [Design Tokens](https://design-system.dev.antumo.com/guide/tokens.md): The full --antumo-* CSS variable reference (colors, spacing, radius, typography, effects).
- [Figma ↔ CSS Map](https://design-system.dev.antumo.com/guide/figma-css-map.md): How component colors are verified Figma vs CSS (39 components, light + dark) and the open divergences.
- [Components (all 39)](https://design-system.dev.antumo.com/components/index.md): All 39 components: CSS class, Figma canvas, verification status, and copy-paste markup.

## Full text

- [Complete documentation](https://design-system.dev.antumo.com/llms-full.txt): every page above concatenated as one Markdown file.

## Live surfaces

- [Component catalog](https://design-system.dev.antumo.com/catalog/demo/index.html): every component/variant/state rendered.
- [Blazor example app](https://design-system-blazor.dev.antumo.com): full MDM dashboard using the DS.