# Digitaltableteur design system

> 196 React components with machine-readable contracts: typed props, variants, keyboard and ARIA requirements and usage rules an agent can validate against. Exported components ship in the `@digitaltableteur/react` npm package (restricted access).

## How to use this file

- Every component below has a reference page and a Markdown twin (the page URL plus .md, or the page URL with Accept: text/markdown): when to use it, look-alikes, every prop with type and default, allowed variant values, invalid combinations, keyboard behaviour key by key and MUST or SHOULD rules with how each is checked.
- The same data as JSON, one entry per component with props, variant values and links: https://www.digitaltableteur.com/design-system/components.json
- Design tokens in the DTCG 2025.10 format, each with its purpose: https://www.digitaltableteur.com/design-system/tokens.json. Web components: https://www.digitaltableteur.com/design-system/custom-elements.json (Custom Elements Manifest 2.x).
- Query the MCP endpoint at https://www.digitaltableteur.com/mcp (Streamable HTTP, no auth). `search` returns component briefs by name, keyword or UI intent; `get` returns full usage, props and example story source.
- Before proposing JSX, call `validate_component_usage` with the snippet. It checks prop relationships, forbidden prop combinations and deprecated props from the contracts and names the rule it applied.
- Prefer `stable` components. `beta` is usable with care; `alpha` is internal and not exported.
- Every contract is also published in the open Design System Contract 1.0 format at https://www.digitaltableteur.com/contracts/v1/<Name>.contract.json (index: https://www.digitaltableteur.com/contracts/v1/index.json), with accessibility claims labelled automated, manual or unverified and linked to evidence records. Check them with `npx @digitaltableteur/contract-spec`.
- There is no Roadmap component; see https://www.digitaltableteur.com/design-system/components/roadmap.
- Human docs: https://www.digitaltableteur.com/design-system and the agent benchmark at https://www.digitaltableteur.com/design-system/agent

## actions

- Button (stable): Action trigger; variant (weight) x tone (semantic) matrix, sm/md/lg, surface-aware, loading + async clickAction, polymorphic button/link. Import: `import { Button } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/button Markdown: https://www.digitaltableteur.com/design-system/components/button.md
- ButtonGroup (beta): Role=group row of Buttons/IconButtons; attached mode fuses seams (segmented look), attached=false spaces on the token gap. Import: `import { ButtonGroup } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/button-group Markdown: https://www.digitaltableteur.com/design-system/components/button-group.md
- CodeCopyButton (beta): 28px icon-only copy button; copy glyph to check on success; value string or getter; live-region announcement. Import: `import { CodeCopyButton } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/code-copy-button Markdown: https://www.digitaltableteur.com/design-system/components/code-copy-button.md
- IconButton (stable): Icon-only action button; wraps Button (rounded) so variant (weight) x tone x surface stay in lockstep, sm/md/lg, required accessible label, tooltip passthrough. Import: `import { IconButton } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/icon-button Markdown: https://www.digitaltableteur.com/design-system/components/icon-button.md
- MCPActionButton (beta): Button that invokes an MCP tool from chat/docs surfaces and reflects the invocation state. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/mcp-action-button Markdown: https://www.digitaltableteur.com/design-system/components/mcp-action-button.md
- SlideButton (stable): Focal pill CTA link; decorative icon disc slides across the pill and rolls on hover; iconSide left/right; motion gated by prefers-reduced-motion; renders a real <a href>. Import: `import { SlideButton } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/slide-button Markdown: https://www.digitaltableteur.com/design-system/components/slide-button.md
- SplitButton (beta): Primary action + menu toggle for related actions; Button-matched variant/size/surface, collision-aware menu, nested submenus, roving-tabindex keyboard model. Import: `import { SplitButton } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/split-button Markdown: https://www.digitaltableteur.com/design-system/components/split-button.md

## form

- Checkbox (stable): Native checkbox with label, sm/md/lg, indeterminate, own error + helperText; onCheckedChange(boolean); controlled or uncontrolled. Import: `import { Checkbox } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/checkbox Markdown: https://www.digitaltableteur.com/design-system/components/checkbox.md
- CheckboxGroup (stable): Checkbox set with fieldset legend and optional select-all master (indeterminate while mixed); onChange reports the selected value array. Import: `import { CheckboxGroup } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/checkbox-group Markdown: https://www.digitaltableteur.com/design-system/components/checkbox-group.md
- Combobox (stable): Controlled single-select combobox; button trigger + portaled listbox, full APG keyboard model, own label/error/helperText; options support per-option disabled; onValueChange(value). Import: `import { Combobox } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/combobox Markdown: https://www.digitaltableteur.com/design-system/components/combobox.md
- ContactForm (beta): Full contact form: validated fields, attachment upload, submission flow wired to the contact API. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/contact-form Markdown: https://www.digitaltableteur.com/design-system/components/contact-form.md
- ContactFormEditorial (stable): Editorial-styled contact form used on the live contact page (uppercase labels; name, email and message, then nested optional detail sections; toast on submit; ?package= and ?service= prefill). In-repo only. Page: https://www.digitaltableteur.com/design-system/components/contact-form-editorial Markdown: https://www.digitaltableteur.com/design-system/components/contact-form-editorial.md
- ContactInquiryPanel (stable): Contact inquiry tabs (message vs book-a-call) wrapping the editorial contact form; parent owns submit state via the messagePanel slot. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/contact-inquiry-panel Markdown: https://www.digitaltableteur.com/design-system/components/contact-inquiry-panel.md
- FieldShell (beta): The frame every text and choice field is built on: a label row with icon actions at its end, the control, then a status message and a helper line. Import: `import { FieldShell } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/field-shell Markdown: https://www.digitaltableteur.com/design-system/components/field-shell.md
- FileUpload (stable): Single-file picker: readonly summary + Browse/Clear over a hidden input; accept filter, maxSizeInBytes rejection (localized), default/editorial looks; onFileChange(File | null). Import: `import { FileUpload } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/file-upload Markdown: https://www.digitaltableteur.com/design-system/components/file-upload.md
- FilterChip (stable): Filter toggle chip (aria-pressed): pill/rectangle/underline/minimal, sm/md/lg, optional count. Import: `import { FilterChip } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/filter-chip Markdown: https://www.digitaltableteur.com/design-system/components/filter-chip.md
- FormField (stable): Fieldset/legend wrapper for a GROUP of controls with groupDescription + group-level error; single controls own their own label/error/helperText chrome. Import: `import { FormField } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/form-field Markdown: https://www.digitaltableteur.com/design-system/components/form-field.md
- FormFieldEditorial (stable): Field wrapper for editorial contact flows (text/email/tel/textarea on FieldShell; select renders Combobox); pairs with ContactFormEditorial. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/form-field-editorial Markdown: https://www.digitaltableteur.com/design-system/components/form-field-editorial.md
- GroupLabel (stable): Group heading: as=legend inside a fieldset names a group (FormField, RadioGroup, SelectableCard group); default as=label names one control via htmlFor; asterisk is aria-hidden. Import: `import { GroupLabel } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/group-label Markdown: https://www.digitaltableteur.com/design-system/components/group-label.md
- HelperText (stable): Semantic helper copy under a form control; neutral or error/warning/success/info with auto icon; error becomes role=alert, other states are visual only; id feeds aria-describedby. Import: `import { HelperText } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/helper-text Markdown: https://www.digitaltableteur.com/design-system/components/helper-text.md
- Label (stable): Native form label; htmlFor required, required marker (aria-hidden asterisk + SR-only text), disabled mute treatment, tooltipText via native title. Import: `import { Label } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/label Markdown: https://www.digitaltableteur.com/design-system/components/label.md
- MultiCombobox (stable): Controlled multi-select combobox; one-line removable Badge chips, overflow as +N Badge, type-to-filter input, portaled listbox, Backspace removes the last chip; onValueChange(string[]). Import: `import { MultiCombobox } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/multi-combobox Markdown: https://www.digitaltableteur.com/design-system/components/multi-combobox.md
- PhoneInput (stable): International phone field wrapping react-phone-number-input; country picker (Combobox list) + formatted input, own label/error/helperText, defaultCountry FI, emits E.164 via onChange(value). Import: `import { PhoneInput } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/phone-input Markdown: https://www.digitaltableteur.com/design-system/components/phone-input.md
- Radio (beta): Single native radio with label and sm/md/lg; controlled via checked + onCheckedChange; use RadioGroup for sets (legend, state, error). Import: `import { Radio } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/radio Markdown: https://www.digitaltableteur.com/design-system/components/radio.md
- RadioGroup (beta): Exclusive choice set: fieldset legend, vertical/horizontal, sm/md/lg, own error + helperText; controlled or uncontrolled via onValueChange(value). Import: `import { RadioGroup } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/radio-group Markdown: https://www.digitaltableteur.com/design-system/components/radio-group.md
- SegmentedControl (beta): Single-select segmented control (role=radiogroup): 2-5 short options, one visibly selected; sm/md/lg; controlled value + onValueChange; roving-tabindex arrow-key nav skipping disabled segments. Import: `import { SegmentedControl } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/segmented-control Markdown: https://www.digitaltableteur.com/design-system/components/segmented-control.md
- Select (stable): Single choice on the DS list (Combobox engine): label, options or option children ('' = placeholder), status, helperText, actions, sm/md/lg, name; onValueChange(value). Import: `import { Select } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/select Markdown: https://www.digitaltableteur.com/design-system/components/select.md
- SelectableCard (stable): Card as one selectable option; grouped via SelectableCardGroup into single (radio) or multiple (checkbox) sets; whole card is a label over a hidden native input; controlled or uncontrolled. Import: `import { SelectableCard } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/selectable-card Markdown: https://www.digitaltableteur.com/design-system/components/selectable-card.md
- SelectableCardGroup (beta): Fieldset owner for SelectableCard options; single or multiple selection; controlled with value/onValueChange or uncontrolled with defaultValue; owns legend, helper text and errors. Import: `import { SelectableCardGroup } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/selectable-card-group Markdown: https://www.digitaltableteur.com/design-system/components/selectable-card-group.md
- SelectOption (stable): Typed option child for Select; Select reads value, label, disabled and string children into its own listbox; a value="" option becomes the placeholder text. Import: `import { SelectOption } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/select-option Markdown: https://www.digitaltableteur.com/design-system/components/select-option.md
- Switch (stable): On/off toggle with immediate effect; label placement right/left/top, sm/md/lg, loading (aria-busy, aria-disabled), own helperText + error; onCheckedChange(boolean). Import: `import { Switch } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/switch Markdown: https://www.digitaltableteur.com/design-system/components/switch.md
- TextArea (stable): Labelled multi-line field with optional animated auto-grow (minRows/maxRows), own error + helperText; onChange(value). Import: `import { TextArea } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/text-area Markdown: https://www.digitaltableteur.com/design-system/components/text-area.md
- TextInput (stable): Labelled single-line field: text/number/email/tel/password/search, built-in email+phone validation, error/helperText, sm/md/lg; onValueChange(value); clearable ×-button (onClear); hideLabel. Import: `import { TextInput } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/text-input Markdown: https://www.digitaltableteur.com/design-system/components/text-input.md
- TransformingActionInput (beta): CTA input that transforms between surface modes (e.g. prompt bar to chat); marketing entry point for Donny. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/transforming-action-input Markdown: https://www.digitaltableteur.com/design-system/components/transforming-action-input.md

## navigation

- BlogCategoryFilter (stable): Blog-specific category filter control: renders FilterChip toggles directly and shares useFilterDisclosure with CategoryFilter; it does not wrap CategoryFilter. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/blog-category-filter Markdown: https://www.digitaltableteur.com/design-system/components/blog-category-filter.md
- BlogNav (stable): Blog article sub-navigation: back-to-articles plus prev/next stepping for article pages. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/blog-nav Markdown: https://www.digitaltableteur.com/design-system/components/blog-nav.md
- Breadcrumb (stable): Location trail: nav[aria-label=Breadcrumb] > ol; items {label, href?} in root->current order; last (or href-less) item renders as plain current text, earlier ones as Link sm; '/' separators. Import: `import { Breadcrumb } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/breadcrumb Markdown: https://www.digitaltableteur.com/design-system/components/breadcrumb.md
- CategoryFilter (stable): Filter pill row for list pages (work index) with selected state, optional collapsible disclosure and multiple visual treatments. Import: `import { CategoryFilter } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/category-filter Markdown: https://www.digitaltableteur.com/design-system/components/category-filter.md
- CommandPalette (beta): Modal keyboard-driven command launcher: role=dialog with a combobox filtering a role=listbox on label+keywords; Arrow moves active option, Enter runs, Escape closes; focus trapped, scroll locked. Import: `import { CommandPalette } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/command-palette Markdown: https://www.digitaltableteur.com/design-system/components/command-palette.md
- Footer (beta): Legacy pattern-tier footer band with the ChatWidget slot; the production Next.js site chrome is SiteFooter. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/footer Markdown: https://www.digitaltableteur.com/design-system/components/footer.md
- LanguageSwitcher (stable): Locale toggle: current-language button fans out a tray of other locales (spring motion, reduced-motion fade; closed tray inert); Escape/outside click close; controlled currentLang + onLanguageChange. Import: `import { LanguageSwitcher } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/language-switcher Markdown: https://www.digitaltableteur.com/design-system/components/language-switcher.md
- Link (stable): Inline anchor; href sanitised (http/https/mailto/tel/relative only), external auto-detect with icon and rel handling, underline always/hover/none, sm/md/lg/inherit. Import: `import { Link } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/link Markdown: https://www.digitaltableteur.com/design-system/components/link.md
- NavLink (stable): Next.js nav link; active state from usePathname (prefix match, exact opt-in); aria-current page on the exact page, true on an ancestor; className/activeClassName/inactiveClassName styling. Import: `import { NavLink } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/nav-link Markdown: https://www.digitaltableteur.com/design-system/components/nav-link.md
- NavMenuList (beta): Reusable nav link list for mobile/drawer menus; derives active state from the current location. Import: `import { NavMenuList } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/nav-menu-list Markdown: https://www.digitaltableteur.com/design-system/components/nav-menu-list.md
- Pagination (stable): Numbered pager: prev/next chevrons + sibling window w/ ellipsis; controlled (1-indexed currentPage + onPageChange); aria-current=page on active; labels en/fi/sv; null when totalPages<=1. Import: `import { Pagination } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/pagination Markdown: https://www.digitaltableteur.com/design-system/components/pagination.md
- ProjectNav (stable): Prev/next case-study navigation with back-to-work action for work detail pages. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/project-nav Markdown: https://www.digitaltableteur.com/design-system/components/project-nav.md
- RelatedPosts (alpha): Related blog posts grid at article footer. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/related-posts Markdown: https://www.digitaltableteur.com/design-system/components/related-posts.md
- RelatedProjects (alpha): Related case studies grid at project footer. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/related-projects Markdown: https://www.digitaltableteur.com/design-system/components/related-projects.md
- SiteFooter (stable): Production site footer: address block with a mailto link, Explore and Legal link columns (Legal adds a Cookie preferences button when a CookieConsentProvider is present), social icons, a copyright line and the Reliable Partner badge. Below tablet only the Legal column of the three renders. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/site-footer Markdown: https://www.digitaltableteur.com/design-system/components/site-footer.md
- SiteHeader (stable): Production site header with logo, primary nav, language switcher, theme toggle, an optional account avatar menu, the mobile drawer and a phone-only subnav portal slot. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/site-header Markdown: https://www.digitaltableteur.com/design-system/components/site-header.md
- SiteTree (stable): Hierarchical sitemap tree with collapsible folder branches and page leaves; sitemap page organism. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/site-tree Markdown: https://www.digitaltableteur.com/design-system/components/site-tree.md
- SkipLink (stable): Visually hidden anchor that surfaces as a high-contrast pill on keyboard focus; jumps to #main-content (href overridable); belongs as the first focusable element of the page. Import: `import { SkipLink } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/skip-link Markdown: https://www.digitaltableteur.com/design-system/components/skip-link.md
- SocialIconLink (alpha): Icon-only anchor: required label, external-safe, token hover/focus, sm/md/lg hit targets. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/social-icon-link Markdown: https://www.digitaltableteur.com/design-system/components/social-icon-link.md
- TableOfContents (alpha): Article table of contents for h2/h3 headings; mobile disclosure; activeId marks aria-current=location; onItemClick or built-in smooth scroll. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/table-of-contents Markdown: https://www.digitaltableteur.com/design-system/components/table-of-contents.md
- Tabs (stable): Tablist-only tabs (panels via getTabPanelProps); variant default|pills|underline + sliding indicator; icon+count; size sm|md|lg; controlled/uncontrolled; arrows move focus, Enter/Space selects. Import: `import { Tabs } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/tabs Markdown: https://www.digitaltableteur.com/design-system/components/tabs.md
- TaskList (alpha): Navigation rail for a long form done in parts, in any order and over several sessions: each part with its status, the open part with its steps. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/task-list Markdown: https://www.digitaltableteur.com/design-system/components/task-list.md
- TreeView (beta): Application tree; controlled selection and expansion, roving focus, full arrow/Home/End/Enter/Space keyboard model. Import: `import { TreeView } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/tree-view Markdown: https://www.digitaltableteur.com/design-system/components/tree-view.md
- WorkNav (stable): Work-section sub-navigation: back-to-index plus prev/next stepping for portfolio case-study pages. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/work-nav Markdown: https://www.digitaltableteur.com/design-system/components/work-nav.md

## overlay

- ChatWidget (beta): Collapsible site assistant (Donny) chat widget: streaming replies, tool actions, i18n, mobile sheet behavior. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/chat-widget Markdown: https://www.digitaltableteur.com/design-system/components/chat-widget.md
- ConfirmPopover (alpha): Asks "are you sure?" next to the control that triggered it: a non-modal alertdialog anchored to the trigger with a question, an optional consequence and Cancel / confirm buttons. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/confirm-popover Markdown: https://www.digitaltableteur.com/design-system/components/confirm-popover.md
- CookieConsent (beta): GDPR consent banner + settings modal wired to site providers (analytics gating); persists choice. Import: `import { CookieConsent } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/cookie-consent Markdown: https://www.digitaltableteur.com/design-system/components/cookie-consent.md
- Menu (stable): Radix dropdown-menu set: Menu > MenuTrigger asChild > MenuContent with MenuItem (icon/meta/trailingIcon/selected/tone/disabled/onSelect/href), MenuSeparator, MenuSub; Radix owns focus and keys. Import: `import { Menu } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/menu Markdown: https://www.digitaltableteur.com/design-system/components/menu.md
- Modal (stable): Portal dialog w/ focus trap + inert bg; severity info|success|warning|error (error/warning => alertdialog); title/description ARIA-wired; menu/footer/icon slots; animation scale|slide|fade. Import: `import { Modal } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/modal Markdown: https://www.digitaltableteur.com/design-system/components/modal.md
- Tooltip (beta): Radix tooltip set: Provider (delayDuration) > Tooltip > Trigger asChild + Content (side top|right|bottom|left, shortcut keys as keycaps); opens on hover+focus, Escape dismisses, aria-describedby wired. Import: `import { Tooltip } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/tooltip Markdown: https://www.digitaltableteur.com/design-system/components/tooltip.md

## feedback

- AlertBanner (stable): Persistent inline status banner; tone info|success|warning|error drives icon + live-region politeness; title/description/action slots; opt-in dismissible with localized control. Import: `import { AlertBanner } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/alert-banner Markdown: https://www.digitaltableteur.com/design-system/components/alert-banner.md
- Progress (stable): Linear progressbar; determinate value/max or indeterminate sweep; sm/md/lg track, semantic state fill; aria-valuenow dropped when indeterminate. Import: `import { Progress } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/progress Markdown: https://www.digitaltableteur.com/design-system/components/progress.md
- ReadingProgress (stable): Scroll-linked reading progress bar for long articles; decorative for AT (content position is conveyed by scroll). Import: `import { ReadingProgress } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/reading-progress Markdown: https://www.digitaltableteur.com/design-system/components/reading-progress.md
- Skeleton (stable): Layout-mirroring loading placeholder; variant text|circle|rect|avatar|card, text takes lines, free width/height; role=status, shimmer respects reduced motion. Import: `import { Skeleton } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/skeleton Markdown: https://www.digitaltableteur.com/design-system/components/skeleton.md
- Spinner (stable): Bare indeterminate ring (role=status, aria-label plus sr-only label text); sm/md/lg; for sub-second unknown waits; Progress for known/long work, Skeleton for layouts. Import: `import { Spinner } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/spinner Markdown: https://www.digitaltableteur.com/design-system/components/spinner.md
- StatusDot (stable): Colored semantic dot + label (visible children or sr-only label); tone x sm/md/lg, optional pulse for live states. Import: `import { StatusDot } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/status-dot Markdown: https://www.digitaltableteur.com/design-system/components/status-dot.md
- Toast (stable): Transient auto-dismiss status (3000ms default); tone neutral (default)|success|error|warning|info, 6 positions, sm/md/lg; fire via useToast().showToast(message, {tone, duration, position}). Import: `import { Toast } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/toast Markdown: https://www.digitaltableteur.com/design-system/components/toast.md
- ToastStack (stable): Docked Toast stack (inline); toasts {id,message,tone?,duration?,size?}[], 6 positions, max (5, oldest first), onDismiss(id), pauses on hover/focus, dismissible adds a dismiss button. Import: `import { ToastStack } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/toast-stack Markdown: https://www.digitaltableteur.com/design-system/components/toast-stack.md
- WipBadge (beta): Storybook-only maturity badge (alpha/beta) rendered on non-stable component stories; not product UI. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/wip-badge Markdown: https://www.digitaltableteur.com/design-system/components/wip-badge.md

## display

- Avatar (stable): Identity mark: image (srcSet/lazy) or initials from name; sm..xl sizes; optional link (clickable + destinationUrl) or dropdown menu (menuItems + menuLabel); variant forces image|initials. Import: `import { Avatar } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/avatar Markdown: https://www.digitaltableteur.com/design-system/components/avatar.md
- AvatarGroup (beta): Role=group overlapping Avatar stack; max collapses the rest into a +N bubble with sr-only 'N more'; sm/md/lg bubble sizes. Import: `import { AvatarGroup } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/avatar-group Markdown: https://www.digitaltableteur.com/design-system/components/avatar-group.md
- Badge (stable): Compact status pill; variant (filled/outlined) x tone matrix, sm/md/lg, auto status icon per tone, removable filter-chip mode, optional role=status live counter. Import: `import { Badge } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/badge Markdown: https://www.digitaltableteur.com/design-system/components/badge.md
- BrandLockup (alpha): The Digitaltableteur lockup: the mark in its brand disc beside the name in live Satoshi Bold, sized as one unit from the disc height so the parts never drift apart. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/brand-lockup Markdown: https://www.digitaltableteur.com/design-system/components/brand-lockup.md
- Code (beta): Inline <code> chip on the light surface; sm/md/lg match the surrounding text size. Import: `import { Code } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/code Markdown: https://www.digitaltableteur.com/design-system/components/code.md
- Display (beta): Hero-scale Satoshi display type: one size above the Title ladder for page heroes and taglines; polymorphic as h1|h2|p|span|div (h1 default); semantics chosen by placement, scale is fixed. Import: `import { Display } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/display Markdown: https://www.digitaltableteur.com/design-system/components/display.md
- DonnyAvatar (stable): Donny assistant avatar with mood/action states (distinct eye expressions) used by the chat widget. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/donny-avatar Markdown: https://www.digitaltableteur.com/design-system/components/donny-avatar.md
- EmptyState (stable): Centered icon + heading + description + action slot for empty lists/search/first-run; sm/md/lg step padding and type together. Import: `import { EmptyState } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/empty-state Markdown: https://www.digitaltableteur.com/design-system/components/empty-state.md
- Icon (stable): Phosphor icon wrapper; name by PascalCase or slug (FontAwesome aliases kept), 2xs-2xl size ladder, weight, rotate/flip/spin/pulse, decorative by default, ariaLabel switches to role=img. Import: `import { Icon } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/icon Markdown: https://www.digitaltableteur.com/design-system/components/icon.md
- IconSwap (alpha): Two glyphs in one cell that crossfade with scale and blur when a state flips, such as copy to check, play to pause or sun to moon. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/icon-swap Markdown: https://www.digitaltableteur.com/design-system/components/icon-swap.md
- Kbd (stable): Semantic <kbd> keycap; sm/md/lg mono sizes; compose combos as sibling Kbds with literal separators. Import: `import { Kbd } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/kbd Markdown: https://www.digitaltableteur.com/design-system/components/kbd.md
- ListItem (stable): Presentational span row: icon + truncating label + end-aligned meta (text/Badge/Kbd/StatusDot) + trailingIcon + selected check; tone neutral|destructive; the interactive wrapper owns role/focus/events. Import: `import { ListItem } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/list-item Markdown: https://www.digitaltableteur.com/design-system/components/list-item.md
- LocationCard (beta): Office/location card: address, hours (OpenHours), contact links; contact-page module. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/location-card Markdown: https://www.digitaltableteur.com/design-system/components/location-card.md
- Logo (stable): Logo atom: built-in DT mark (monochrome currentColor, square footprint) or custom image via src; non-interactive, so the consumer wraps it in a link for a home link. Import: `import { Logo } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/logo Markdown: https://www.digitaltableteur.com/design-system/components/logo.md
- PixelLoop (beta): Decorative constellation loop with rounded-dot and 45-degree vector-stroke variants; the glyph pool includes the studio D and T initials. Import: `import { PixelLoop } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/pixel-loop Markdown: https://www.digitaltableteur.com/design-system/components/pixel-loop.md
- StatList (beta): Key figures as a description list: each item pairs a figure with what it counts, an optional total and a short note. Import: `import { StatList } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/stat-list Markdown: https://www.digitaltableteur.com/design-system/components/stat-list.md
- SummaryList (alpha): Questions and their answers as a description list, one row per question with an optional action: for checking answers before submitting and for showing a submitted record. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/summary-list Markdown: https://www.digitaltableteur.com/design-system/components/summary-list.md
- Text (stable): Body/inline typography; p by default, polymorphic as (span/strong/em/cite/headings), size + lineHeight ladder shared with Title. Import: `import { Text } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/text Markdown: https://www.digitaltableteur.com/design-system/components/text.md
- Timestamp (stable): Semantic time value with locale-aware absolute, relative, and auto formats; preserves date-only values across runtime timezones (timeZone is ignored for them) and can update live. Import: `import { Timestamp } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/timestamp Markdown: https://www.digitaltableteur.com/design-system/components/timestamp.md
- Title (stable): Page/section headings; semantic level (h1-h6 via level/as) decoupled from visual size (xxs-xxl); lineHeight ladder shared with Text. Import: `import { Title } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/title Markdown: https://www.digitaltableteur.com/design-system/components/title.md
- ValueCard (stable): Values/principles card: icon + title + short description; grid unit for about/culture sections. Import: `import { ValueCard } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/value-card Markdown: https://www.digitaltableteur.com/design-system/components/value-card.md

## data-display

- DataTable (beta): Typed native data table; sortable columns, optional row selection, accessible caption, empty state, sm/md/lg density. Import: `import { DataTable } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/data-table Markdown: https://www.digitaltableteur.com/design-system/components/data-table.md
- Table (stable): Composable native table primitives; density, striping, sticky header, three-state DS-Icon sort caret; pairs with useTable* hooks. Import: `import { Table } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/table Markdown: https://www.digitaltableteur.com/design-system/components/table.md
- TableCell (stable): Table td; align start/center/end, numeric = tabular figures right-aligned. Import: `import { TableCell } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/table-cell Markdown: https://www.digitaltableteur.com/design-system/components/table-cell.md
- TableHeaderCell (stable): Th with scope col/row; col carries the three-state sort caret + aria-sort, row names its data row. Import: `import { TableHeaderCell } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/table-header-cell Markdown: https://www.digitaltableteur.com/design-system/components/table-header-cell.md
- TableRow (stable): Table row; works in thead/tbody, selected surface, hover + zebra via the Table root. Import: `import { TableRow } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/table-row Markdown: https://www.digitaltableteur.com/design-system/components/table-row.md
- VirtualList (beta): Fixed-height windowed collection; overscan, stable keys, rendered-range callback, aria position and set-size metadata. Import: `import { VirtualList } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/virtual-list Markdown: https://www.digitaltableteur.com/design-system/components/virtual-list.md
- VirtualListItem (beta): Windowed list row; role=listitem + aria-posinset/aria-setsize, composes ListItem chrome; positioning arrives from VirtualList via style. Import: `import { VirtualListItem } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/virtual-list-item Markdown: https://www.digitaltableteur.com/design-system/components/virtual-list-item.md

## media

- BlogMediaImage (stable): Blog-optimized responsive image; raster via next/image, SVG via plain img; fill mode with cover/contain fit; fluid full-bleed for raster only. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/blog-media-image Markdown: https://www.digitaltableteur.com/design-system/components/blog-media-image.md
- Gallery (stable): Masonry image grid with hover and focus captions; items open nothing; used on work/case-study pages. Import: `import { Gallery } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/gallery Markdown: https://www.digitaltableteur.com/design-system/components/gallery.md
- Lightbox (alpha): Modal image viewer with keyboard navigation across a gallery of images. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/lightbox Markdown: https://www.digitaltableteur.com/design-system/components/lightbox.md
- MediaPlayer (beta): Video with overlay or below controls: top-left title, time remaining over a hairline seek line with hover frame preview, volume, back/play/forward 10 s, captions, full screen; --media-player-* hooks. Import: `import { MediaPlayer } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/media-player Markdown: https://www.digitaltableteur.com/design-system/components/media-player.md
- Mermaid (alpha): Renders a Mermaid diagram with a concise accessible name, prose summary, and visible structured text alternative. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/mermaid Markdown: https://www.digitaltableteur.com/design-system/components/mermaid.md
- ProjectGallery (stable): Case-study image gallery: labelled role=list grid of project shots with its own Lightbox integration (enableLightbox, on by default). In-repo only. Page: https://www.digitaltableteur.com/design-system/components/project-gallery Markdown: https://www.digitaltableteur.com/design-system/components/project-gallery.md

## content

- ArticleCard (beta): Blog teaser card: title, lead, read time; links to the article; used on blog index and related-posts rails. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/article-card Markdown: https://www.digitaltableteur.com/design-system/components/article-card.md
- ArticleContent (stable): Article body reading column (Container measure sm/md/lg); wrap the MDX in ArticleProse for the prose styling. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/article-content Markdown: https://www.digitaltableteur.com/design-system/components/article-content.md
- ArticleHero (alpha): Blog article hero with title, meta, and cover. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/article-hero Markdown: https://www.digitaltableteur.com/design-system/components/article-hero.md
- ArticleShareSection (stable): End-of-article share section: X/LinkedIn/Facebook share links plus a copy-link button under an optional heading. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/article-share-section Markdown: https://www.digitaltableteur.com/design-system/components/article-share-section.md
- BlogIndexContent (alpha): Blog index main content assembly. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/blog-index-content Markdown: https://www.digitaltableteur.com/design-system/components/blog-index-content.md
- CaseStudySummary (alpha): Decision-first case study lead: outcome, role, constraints, ordered key decisions, evidence with source labels. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/case-study-summary Markdown: https://www.digitaltableteur.com/design-system/components/case-study-summary.md
- ContentSection (alpha): Generic content section wrapper for marketing pages. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/content-section Markdown: https://www.digitaltableteur.com/design-system/components/content-section.md
- ManifestoSection (alpha): Long-form manifesto prose section. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/manifesto-section Markdown: https://www.digitaltableteur.com/design-system/components/manifesto-section.md
- ProcurementFaq (beta): Visible procurement FAQ (9 locale items, Accordion divided); its English items feed the FAQPage data of the pages that render it. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/procurement-faq Markdown: https://www.digitaltableteur.com/design-system/components/procurement-faq.md
- ProjectCard (stable): Basic portfolio project card for the work grid (image, title, tags). In-repo only. Page: https://www.digitaltableteur.com/design-system/components/project-card Markdown: https://www.digitaltableteur.com/design-system/components/project-card.md
- ProjectHero (alpha): Case study hero with project title and summary. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/project-hero Markdown: https://www.digitaltableteur.com/design-system/components/project-hero.md
- ProjectList (beta): Compact project index: rows of thumbnail, title, client, discipline and period; whole row links to the case study; teasers muted without a link. Import: `import { ProjectList } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/project-list Markdown: https://www.digitaltableteur.com/design-system/components/project-list.md
- ProjectMetaSection (alpha): Case study metadata (client, role, year). In-repo only. Page: https://www.digitaltableteur.com/design-system/components/project-meta-section Markdown: https://www.digitaltableteur.com/design-system/components/project-meta-section.md
- StageList (beta): Entries placed by lifecycle stage (sheet, rail, index, checklist, cards); items name a lead answer, detail, stages and an optional tag. Import: `import { StageList } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/stage-list Markdown: https://www.digitaltableteur.com/design-system/components/stage-list.md

## structure

- Accordion (beta): Disclosure group: items {id,title,content}; type single|multiple; variant contained|enclosed|divided; controlled openIds or defaultOpenId(s); animated grid-rows reveal; aria per region. Import: `import { Accordion } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/accordion Markdown: https://www.digitaltableteur.com/design-system/components/accordion.md
- AspectRatio (beta): Ratio box (1:1|4:3|16:9 default|21:9|3:2|2:3) with absolutely-filled child and overflow hidden; media inside should fill (object-cover); reserves space, prevents CLS. Import: `import { AspectRatio } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/aspect-ratio Markdown: https://www.digitaltableteur.com/design-system/components/aspect-ratio.md
- Author (stable): Article byline: author name/avatar attribution line for blog posts. Import: `import { Author } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/author Markdown: https://www.digitaltableteur.com/design-system/components/author.md
- AuthorBio (stable): About-the-author block: Avatar + name + biography paragraph; end-of-article slot. Import: `import { AuthorBio } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/author-bio Markdown: https://www.digitaltableteur.com/design-system/components/author-bio.md
- Card (stable): Bordered surface: variant default|muted|transparent, padding none|sm|md|lg; title, description, header and footer slots; link = ONE stretched anchor; loading = skeleton; compose the rest. Import: `import { Card } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/card Markdown: https://www.digitaltableteur.com/design-system/components/card.md
- Center (beta): Both-axis flex centering (items+justify center); needs a sized box (give height via className); polymorphic as. Import: `import { Center } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/center Markdown: https://www.digitaltableteur.com/design-system/components/center.md
- CodeBlock (beta): Flat code card: optional header (file icon, filename, language, copy) or floating copy; line numbers; highlighted/added/removed rows; caption; light or terminal theme; code string or Shiki tree. Import: `import { CodeBlock } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/code-block Markdown: https://www.digitaltableteur.com/design-system/components/code-block.md
- ComplianceCard (beta): Internal audit checklist card (rule rows w/ pass/fail status + last-reviewed date); Storybook/docs tooling, not product UI. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/compliance-card Markdown: https://www.digitaltableteur.com/design-system/components/compliance-card.md
- Divider (stable): Hr separator on border tokens: orientation horizontal|vertical; decorative=true (default) removes it from the AT tree (role=none), decorative=false announces role=separator + aria-orientation. Import: `import { Divider } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/divider Markdown: https://www.digitaltableteur.com/design-system/components/divider.md
- EmailSignatureGenerator (beta): Interactive email-signature generator: form inputs to a copyable table-based HTML signature. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/email-signature-generator Markdown: https://www.digitaltableteur.com/design-system/components/email-signature-generator.md
- ExpandableSection (stable): Single disclosure: collapsedLabel/expandedLabel trigger, uncontrolled (defaultExpanded) or controlled (expanded + onExpandedChange); height/fade reveal. One section = this; exclusive group = Accordion. Import: `import { ExpandableSection } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/expandable-section Markdown: https://www.digitaltableteur.com/design-system/components/expandable-section.md
- ImagePlaceholder (beta): Fixed-dimension placeholder block for missing/mock imagery in layouts and demos. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/image-placeholder Markdown: https://www.digitaltableteur.com/design-system/components/image-placeholder.md
- LinkedInQuoteCard (beta): LinkedIn-post-styled quote card for embedding social posts as styled quotes in content. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/linked-in-quote-card Markdown: https://www.digitaltableteur.com/design-system/components/linked-in-quote-card.md
- List (stable): Typographic list: as ul|ol, items ReactNode[], size on the text ladder, listStyleType incl. none, spacing compact|normal|relaxed; component owns rhythm; no per-item margins. Import: `import { List } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/list Markdown: https://www.digitaltableteur.com/design-system/components/list.md
- MacWindowFrame (beta): Decorative macOS window chrome for showcase content: i18n titleKey, optional action button (actionLabelKey + onAction), density comfortable|compact. Presentation only; not a real window/dialog. Import: `import { MacWindowFrame } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/mac-window-frame Markdown: https://www.digitaltableteur.com/design-system/components/mac-window-frame.md
- MarkdownMessage (stable): Renders markdown (GFM, no raw HTML); opt-in renderWithDesignSystem maps p, h1-h3, a, strong and em onto Title/Text/Link; code stays plain; chat density drops images. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/markdown-message Markdown: https://www.digitaltableteur.com/design-system/components/markdown-message.md
- OpenHours (beta): Opening-hours table with localized day/time rows; used on contact/location surfaces. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/open-hours Markdown: https://www.digitaltableteur.com/design-system/components/open-hours.md
- PersonCard (beta): Person/team profile card (avatar, name, role, links) with built-in skeleton loading state. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/person-card Markdown: https://www.digitaltableteur.com/design-system/components/person-card.md
- ProcessBlock (stable): Case-study process section: titled phase columns (heading + List) in a 2/3/4-column grid under a translated section title (h2 by default), description, and spacing/background knobs. Import: `import { ProcessBlock } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/process-block Markdown: https://www.digitaltableteur.com/design-system/components/process-block.md
- ProofBlock (stable): Metrics proof band: headline metrics with labels under a required title, optional subtitle and caption; tight spacing and dark metric cards. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/proof-block Markdown: https://www.digitaltableteur.com/design-system/components/proof-block.md
- SecureCVDownload (stable): Gated CV download: trigger button opens a verification modal before serving the file. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/secure-cv-download Markdown: https://www.digitaltableteur.com/design-system/components/secure-cv-download.md
- SentrySummaryCard (beta): Sentry issue-summary card (counts/trends) for internal status surfaces. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/sentry-summary-card Markdown: https://www.digitaltableteur.com/design-system/components/sentry-summary-card.md
- Snippet (beta): Copyable shell command(s) with a $ prompt excluded from copy; default or inverted (dark) theme. Import: `import { Snippet } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/snippet Markdown: https://www.digitaltableteur.com/design-system/components/snippet.md
- SocialShare (stable): Share-target row (ordered network list, defaults to the five share-intent channels; instagram profile link opt-in) with accessible labels. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/social-share Markdown: https://www.digitaltableteur.com/design-system/components/social-share.md
- Spacer (beta): Fixed aria-hidden gap block: size xs 8|sm 16|md 24 (default)|lg 32|xl 48|2xl 64px, axis vertical|horizontal; escape hatch when the parent's gap can't be changed. Import: `import { Spacer } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/spacer Markdown: https://www.digitaltableteur.com/design-system/components/spacer.md
- StoryBlock (stable): Case-study narrative section: subtitle/title, rich content, and images with selectable image layout. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/story-block Markdown: https://www.digitaltableteur.com/design-system/components/story-block.md
- TeamBlock (stable): Centred team grid: Avatar, name and role cards with avatar-size, column and spacing knobs. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/team-block Markdown: https://www.digitaltableteur.com/design-system/components/team-block.md
- TerminalCard (alpha): Card with a primary header band: title and optional meta in the terminal text style (LisaTerminal Paper), body below in a framed light-gray panel. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/terminal-card Markdown: https://www.digitaltableteur.com/design-system/components/terminal-card.md
- Testimonial (beta): Quote block with attribution (name, role, avatar) for social-proof sections. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/testimonial Markdown: https://www.digitaltableteur.com/design-system/components/testimonial.md

## layout

- ArticleLayout (alpha): Blog article page layout shell. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/article-layout Markdown: https://www.digitaltableteur.com/design-system/components/article-layout.md
- ArticlePageTemplate (alpha): Full blog article page template. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/article-page-template Markdown: https://www.digitaltableteur.com/design-system/components/article-page-template.md
- Container (stable): Width clamp: size sm 640|md 960|lg 1200 (default)|xl 1440|full; center=true adds auto inline margins; polymorphic as for landmarks (main, section). Import: `import { Container } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/container Markdown: https://www.digitaltableteur.com/design-system/components/container.md
- FlexBox (beta): Style-prop flexbox (css-less by design): direction/wrap/justify/align/alignContent + gap|rowGap|columnGap (number=px, string=token); passes through div attributes. Import: `import { FlexBox } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/flex-box Markdown: https://www.digitaltableteur.com/design-system/components/flex-box.md
- Grid (stable): CSS-grid wrapper with scalar or 768/1024/1440/1920 responsive columns and gaps; numeric responsive tracks use minmax(0, 1fr); Grid.Item adds spans. Import: `import { Grid } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/grid Markdown: https://www.digitaltableteur.com/design-system/components/grid.md
- GridBlock (stable): Case-study grid of content cells: columns, gap, background and spacing knobs; used across Work project pages. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/grid-block Markdown: https://www.digitaltableteur.com/design-system/components/grid-block.md
- NextLayout (beta): Production app shell: SiteHeader, main landmark, footer, ChatWidget, CookieConsent, providers; one per app. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/next-layout Markdown: https://www.digitaltableteur.com/design-system/components/next-layout.md
- NextLayoutShell (beta): Production app chrome from NextLayout, wrapping page content with the header, main landmark, footer, and chat widget; mirrors app/layout.tsx. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/next-layout-shell Markdown: https://www.digitaltableteur.com/design-system/components/next-layout-shell.md
- PageLayout (stable): Page-level layout wrapper: max-width, optional grid columns, spacing scale, and default page margins. Import: `import { PageLayout } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/page-layout Markdown: https://www.digitaltableteur.com/design-system/components/page-layout.md
- ProjectDetailLayout (alpha): Case study detail layout shell. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/project-detail-layout Markdown: https://www.digitaltableteur.com/design-system/components/project-detail-layout.md
- ResizablePanelGroup (beta): Horizontal or vertical resizable panel layout; pointer drag, arrow/Home/End keyboard resize, separator value semantics. Import: `import { ResizablePanelGroup } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/resizable-panel-group Markdown: https://www.digitaltableteur.com/design-system/components/resizable-panel-group.md
- Section (stable): Page band: spacing none|sm|md (default)|lg|xl + hero/follow pair (hero = roomy top tight bottom, follow = no top), background default|muted|accent|inverse; id/spotlightTarget anchors. Import: `import { Section } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/section Markdown: https://www.digitaltableteur.com/design-system/components/section.md
- Stack (stable): Token-gapped flex: direction vertical|horizontal, gap none|xs 4|sm 8|md 16 (default)|lg 24|xl 32px, align/justify shorthands, wrap; polymorphic as (ul/ol for semantic lists). Import: `import { Stack } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/stack Markdown: https://www.digitaltableteur.com/design-system/components/stack.md

## marketing

- AboutHero (alpha): About page hero with studio positioning. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/about-hero Markdown: https://www.digitaltableteur.com/design-system/components/about-hero.md
- AboutPageContent (stable): Full /about route body: hero, values sections, stats, trust band, manifesto, link to /work, tech-stack and package-versions strip; closing CTA on by default (showCTA=false hides it). In-repo only. Page: https://www.digitaltableteur.com/design-system/components/about-page-content Markdown: https://www.digitaltableteur.com/design-system/components/about-page-content.md
- BlogHero (alpha): Hero section for the blog index with a title, subtitle, and optional scroll indicator in full or compact variants. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/blog-hero Markdown: https://www.digitaltableteur.com/design-system/components/blog-hero.md
- ClientLogoMarquee (stable): Animated client-logo marquee for the homepage with pause/resume controls and one semantic client list. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/client-logo-marquee Markdown: https://www.digitaltableteur.com/design-system/components/client-logo-marquee.md
- ContactHero (stable): Contact page hero: headline plus supporting copy, background and compact variants. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/contact-hero Markdown: https://www.digitaltableteur.com/design-system/components/contact-hero.md
- ContactPageContentEditorial (stable): Editorial /contact route body: intro copy, address, Email/Call/Chat direct lines with copy buttons, inquiry panel with form and success state, New Business CTA, pull quote. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/contact-page-content-editorial Markdown: https://www.digitaltableteur.com/design-system/components/contact-page-content-editorial.md
- CTASection (stable): Marketing call-to-action band: title, description, primary/secondary action slots; background and align variants. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/cta-section Markdown: https://www.digitaltableteur.com/design-system/components/cta-section.md
- Designerman (beta): Sprite-sheet mascot animation (Designerman); decorative site personality element. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/designerman Markdown: https://www.digitaltableteur.com/design-system/components/designerman.md
- DesignSprintsSection (stable): Homepage engagements band: engagement-model cards that link to their /pricing packages plus a SlideButton to /pricing; keeps the #design-sprints anchor and Donny target by default. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/design-sprints-section Markdown: https://www.digitaltableteur.com/design-system/components/design-sprints-section.md
- EngagementPageContent (beta): Engagement offer page from data/engagements and engagementPages locale copy: hero, fit, scope, steps, deliverables, price, proof, FAQs, booking. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/engagement-page-content Markdown: https://www.digitaltableteur.com/design-system/components/engagement-page-content.md
- EnhancedProjectCard (stable): Portfolio project card with image or video preview (paused, or looping while on screen with opt-in autoPlayVideo) and metadata; the work-index upgrade of ProjectCard. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/enhanced-project-card Markdown: https://www.digitaltableteur.com/design-system/components/enhanced-project-card.md
- HeroSection (stable): Full-bleed hero shell: min-height, align/justify, background or backgroundImage; renders children in a section, which is a region landmark only when ariaLabel is set. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/hero-section Markdown: https://www.digitaltableteur.com/design-system/components/hero-section.md
- HighlightSection (stable): Highlight band: overline + title + description with CTA slot; visual variants and sizes for marketing emphasis. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/highlight-section Markdown: https://www.digitaltableteur.com/design-system/components/highlight-section.md
- HomeHero (stable): Bespoke homepage hero: kinetic per-visit headline, background treatment, primary CTAs to Contact and About. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/home-hero Markdown: https://www.digitaltableteur.com/design-system/components/home-hero.md
- NewsBulletin (stable): Homepage news strip: one topical card per item (no cap) above the footer, driven by a typed items list; prev/next scroll buttons when the cards overflow. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/news-bulletin Markdown: https://www.digitaltableteur.com/design-system/components/news-bulletin.md
- PricingCalculator (stable): Pricing calculator: duration and workload card groups, or a custom term with an optional budget, drive a live summary (allocation, hours, person-days, rate, total) and a booking CTA. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/pricing-calculator Markdown: https://www.digitaltableteur.com/design-system/components/pricing-calculator.md
- PricingPageContent (stable): Full /pricing body: hero, two-list agency comparison, testimonial, PricingCalculator, deliverables, packages, AaaS, billing, trust row, FAQ; CTAs link to /contact?mode=book&package=<id>. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/pricing-page-content Markdown: https://www.digitaltableteur.com/design-system/components/pricing-page-content.md
- ReliablePartnerBadge (alpha): Language-matched Vastuu Group trust mark (fi/sv/en) linking to that language's Reliable Partner report PDF; sm/md/lg heights. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/reliable-partner-badge Markdown: https://www.digitaltableteur.com/design-system/components/reliable-partner-badge.md
- SectionTitle (alpha): The shared section title: a pixel mark that opens at the middle of the viewport, then the heading, left-aligned at one type size per breakpoint. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/section-title Markdown: https://www.digitaltableteur.com/design-system/components/section-title.md
- ServiceCard (stable): Service tile: icon, title, description, optional link; services-grid unit. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/service-card Markdown: https://www.digitaltableteur.com/design-system/components/service-card.md
- ServicesBlock (stable): Case-study services overview: services list, duration, and tools columns with overview copy and section titles. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/services-block Markdown: https://www.digitaltableteur.com/design-system/components/services-block.md
- ServicesGrid (beta): Responsive grid of ServiceCards for homepage/services sections. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/services-grid Markdown: https://www.digitaltableteur.com/design-system/components/services-grid.md
- ServicesLedger (beta): Homepage services ledger: ruled rows (index, title, description, capabilities) plus a Human / Machine text view. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/services-ledger Markdown: https://www.digitaltableteur.com/design-system/components/services-ledger.md
- ServicesSection (stable): Services grid (no production consumer since ServicesLedger replaced it on the homepage): icon + copy service cards, column count and card variant knobs. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/services-section Markdown: https://www.digitaltableteur.com/design-system/components/services-section.md
- StatsSection (alpha): Metrics/stats grid for case study or about pages. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/stats-section Markdown: https://www.digitaltableteur.com/design-system/components/stats-section.md
- ValuesSection (alpha): Studio values section for about page. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/values-section Markdown: https://www.digitaltableteur.com/design-system/components/values-section.md
- WorkCTA (alpha): Work page closing CTA band. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/work-cta Markdown: https://www.digitaltableteur.com/design-system/components/work-cta.md
- WorkHero (alpha): Work index hero with portfolio positioning copy. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/work-hero Markdown: https://www.digitaltableteur.com/design-system/components/work-hero.md
- WorkMagneticField (stable): Homepage work showcase: grid of the first three project cards with magnetic hover, view-all link on by default. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/work-magnetic-field Markdown: https://www.digitaltableteur.com/design-system/components/work-magnetic-field.md
- WorkPreviewSection (stable): Plain project-card preview grid with title, layout options, and optional view-all link. In-repo only. Page: https://www.digitaltableteur.com/design-system/components/work-preview-section Markdown: https://www.digitaltableteur.com/design-system/components/work-preview-section.md

## utility

- FadeIn (beta): Scroll-triggered fade-in animation wrapper (GSAP). In-repo only. Page: https://www.digitaltableteur.com/design-system/components/fade-in Markdown: https://www.digitaltableteur.com/design-system/components/fade-in.md
- ThemeProvider (beta): Theme context provider for light/dark/high-contrast modes; syncs class + storage; one per app. Import: `import { ThemeProvider } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/theme-provider Markdown: https://www.digitaltableteur.com/design-system/components/theme-provider.md
- VisuallyHidden (stable): Screen-reader-only content wrapper (span by default, or div/p/h2); always hidden, never revealed on focus; the sr-only utility as a component. Import: `import { VisuallyHidden } from "@digitaltableteur/react"` Page: https://www.digitaltableteur.com/design-system/components/visually-hidden Markdown: https://www.digitaltableteur.com/design-system/components/visually-hidden.md