# @amezquita/design-system
> Token-first, multi-brand design system — DTCG tokens, Style Dictionary, CI-enforced linting/contrast/accessibility, Figma sync, and agent-safe governance.
Extracted from and still powering [amezquita.dk](https://amezquita.dk). 35 components across primitives, composition, and pattern tiers.
## Install
```bash
npm install @amezquita/design-system
```
## Fonts
The package ships no font files. Load the fonts a brand names from Google Fonts; `tokens/fonts.json` has the same links, machine-readable.
- base: JetBrains Mono. `` or `` depending on context
- [Checkbox](https://design.amezquita.dk/components/checkbox.md): Single boolean selection with an associated label; supports indeterminate state
- [Heading](https://design.amezquita.dk/components/heading.md): Semantic heading element (H1–H5 visual sizes, any ``–`` tag) with a visual size decoupled from its document-outline level
- [Input](https://design.amezquita.dk/components/input.md): Labelled single-line text entry with hint and error states
- [Label](https://design.amezquita.dk/components/label.md): Standalone form label element — used when a label must be decoupled from its input
- [Link](https://design.amezquita.dk/components/link.md): Navigation to another page or resource; use Link for navigation and Button for actions
- [Radio](https://design.amezquita.dk/components/radio.md): Single-selection control within a mutually exclusive group
- [Select](https://design.amezquita.dk/components/select.md): Dropdown for choosing a single value from a list; supports grouped options
- [Skeleton](https://design.amezquita.dk/components/skeleton.md): Placeholder loading state that mirrors the geometry of the content it replaces
- [SkipLink](https://design.amezquita.dk/components/skip-link.md): First Tab stop on the page that lets keyboard users jump past the header to the main content
- [Spinner](https://design.amezquita.dk/components/spinner.md): Indeterminate loading indicator for in-progress operations
- [Switch](https://design.amezquita.dk/components/switch.md): Binary toggle for on/off settings; renders as a styled checkbox under the hood
- [Tag](https://design.amezquita.dk/components/tag.md): Inline label for categorising or annotating content — non-interactive
- [Textarea](https://design.amezquita.dk/components/textarea.md): Multi-line text entry with label, hint, and error states — mirrors Input API
## Composition
- [Alert](https://design.amezquita.dk/components/alert.md): Contextual inline feedback message with semantic severity levels (info, success, warning, error)
- [AlertDialog](https://design.amezquita.dk/components/alert-dialog.md): Confirmation gate for an action the user must explicitly accept or decline — real `alertdialog` role, no outside-click/close-button dismiss, unlike Dialog
- [Card](https://design.amezquita.dk/components/card.md): Compound container for grouped content — composed from named sub-components
- [Dialog](https://design.amezquita.dk/components/dialog.md): Overlay for tasks or information requiring focused attention
- [Drawer](https://design.amezquita.dk/components/drawer.md): Side-anchored slide-in panel for supplemental content or secondary navigation
- [Menu](https://design.amezquita.dk/components/menu.md): Dropdown list of actions opened from a trigger: account menus, overflow ("more") menus, row actions
- [NavigationMenu](https://design.amezquita.dk/components/navigation-menu.md): The site's header navigation: top-level links, plus groups that open a dropdown of links. Hidden below 1024px, where SideNav's drawer carries the same links (its `headerItems`)
- [ThemeScope](https://design.amezquita.dk/components/theme-scope.md): Gives one part of a page its own brand, mode, or both; overlays opened inside it (Dialog, Drawer, AlertDialog, Menu, Select, Tooltip) take the same, although they render at the end of the page
- [Toast](https://design.amezquita.dk/components/toast.md): Ephemeral notification pushed to a corner of the viewport; auto-dismisses after a timeout
- [Tooltip](https://design.amezquita.dk/components/tooltip.md): Contextual label revealed on hover or focus — supplements an icon or truncated text
## Patterns
- [Accordion](https://design.amezquita.dk/components/accordion.md): Collapsible content sections with animated expand/collapse; supports single or multi-open modes
- [Breadcrumb](https://design.amezquita.dk/components/breadcrumb.md): Hierarchical page location trail; the last item is the current page (non-linked)
- [DataTable](https://design.amezquita.dk/components/data-table.md): Sortable, filterable, paginated table for structured datasets
- [EmptyState](https://design.amezquita.dk/components/empty-state.md): Placeholder for zero-content states — icon, heading, supporting text, and an optional action
- [Hero](https://design.amezquita.dk/components/hero.md): Page-level section header with eyebrow, title, lead text, and an action slot
- [Pagination](https://design.amezquita.dk/components/pagination.md): Page navigation controls for multi-page data sets; exposes current page and total page count
- [SideNav](https://design.amezquita.dk/components/side-nav.md): Section navigation: inline beside the content (240px wide) from 1024px up; below that, in a left Drawer opened by `SideNavTrigger`, which hides itself from 1024px up. Wrap both in `SideNavProvider`
- [Table](https://design.amezquita.dk/components/table.md): Static data table with semantic header, body, and row structure
- [Tabs](https://design.amezquita.dk/components/tabs.md): Segmented view switcher with full keyboard navigation; built on Radix Tabs
## MCP server
Read-only tools over the same files this package ships, read live instead of from a snapshot. The server isn't in the npm package: clone [the repo](https://github.com/anto-amezquita/design-system) and run `node scripts/mcp-server.mjs` (stdio).
- `list_components`: List every public component in the design system, optionally filtered by tier (primitives, composition, patterns).
- `get_component`: Get the compiled documentation for one public component — full prop table with literal unions expanded, its token list, and a usage example.
- `search_tokens`: Search all design tokens (primitive, semantic, and component-scoped) by a substring match on name or CSS variable, optionally narrowed to one category.
- `get_token`: Get the full entry for one exact token — raw value, resolved value on each theme axis, and which components use it.
- `validate_token`: Check whether a var(--x) reference or bare token name is real, before using it in CSS.
- `get_registry_item`: Get the shadcn-spec registry-item.json for one public component — its npm dependency, cross-component registryDependencies, and the CSS custom properties it needs.
- `get_skill`: Get the current agent skill content (SKILL.md) — the same file served from /.well-known/skills/ for agents that read the skill format instead of calling MCP tools directly.