Components
196 components. Each page lists the props with type, default and description, the allowed variant values, invalid combinations, keyboard behaviour and rules, generated from the component’s contract. Add .md to any component URL for a Markdown version, or fetch /design-system/components.json for all of it as JSON.
actions
| Component | Status | Import | Summary |
|---|---|---|---|
| Button | stable | npm | Action trigger; variant (weight) x tone (semantic) matrix, sm/md/lg, surface-aware, loading + async clickAction, polymorphic button/link. |
| ButtonGroup | beta | npm | Role=group row of Buttons/IconButtons; attached mode fuses seams (segmented look), attached=false spaces on the token gap. |
| CodeCopyButton | beta | npm | 28px icon-only copy button; copy glyph to check on success; value string or getter; live-region announcement. |
| IconButton | stable | npm | 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. |
| MCPActionButton | beta | In-repo only | Button that invokes an MCP tool from chat/docs surfaces and reflects the invocation state. |
| SlideButton | stable | npm | 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>. |
| SplitButton | beta | npm | Primary action + menu toggle for related actions; Button-matched variant/size/surface, collision-aware menu, nested submenus, roving-tabindex keyboard model. |
form
| Component | Status | Import | Summary |
|---|---|---|---|
| Checkbox | stable | npm | Native checkbox with label, sm/md/lg, indeterminate, own error + helperText; onCheckedChange(boolean); controlled or uncontrolled. |
| CheckboxGroup | stable | npm | Checkbox set with fieldset legend and optional select-all master (indeterminate while mixed); onChange reports the selected value array. |
| Combobox | stable | npm | Controlled single-select combobox; button trigger + portaled listbox, full APG keyboard model, own label/error/helperText; options support per-option disabled; onValueChange(value) |
| ContactForm | beta | In-repo only | Full contact form: validated fields, attachment upload, submission flow wired to the contact API. |
| ContactFormEditorial | stable | In-repo only | 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) |
| ContactInquiryPanel | stable | In-repo only | Contact inquiry tabs (message vs book-a-call) wrapping the editorial contact form; parent owns submit state via the messagePanel slot. |
| FieldShell | beta | npm | 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. |
| FileUpload | stable | npm | Single-file picker: readonly summary + Browse/Clear over a hidden input; accept filter, maxSizeInBytes rejection (localized), default/editorial looks; onFileChange(File | null) |
| FilterChip | stable | npm | Filter toggle chip (aria-pressed): pill/rectangle/underline/minimal, sm/md/lg, optional count. |
| FormField | stable | npm | Fieldset/legend wrapper for a GROUP of controls with groupDescription + group-level error; single controls own their own label/error/helperText chrome. |
| FormFieldEditorial | stable | In-repo only | Field wrapper for editorial contact flows (text/email/tel/textarea on FieldShell; select renders Combobox); pairs with ContactFormEditorial. |
| GroupLabel | stable | npm | 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. |
| HelperText | stable | npm | 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. |
| Label | stable | npm | Native form label; htmlFor required, required marker (aria-hidden asterisk + SR-only text), disabled mute treatment, tooltipText via native title. |
| MultiCombobox | stable | npm | 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[]) |
| PhoneInput | stable | npm | 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) |
| Radio | beta | npm | Single native radio with label and sm/md/lg; controlled via checked + onCheckedChange; use RadioGroup for sets (legend, state, error) |
| RadioGroup | beta | npm | Exclusive choice set: fieldset legend, vertical/horizontal, sm/md/lg, own error + helperText; controlled or uncontrolled via onValueChange(value) |
| SegmentedControl | beta | npm | 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. |
| Select | stable | npm | Single choice on the DS list (Combobox engine): label, options or option children ('' = placeholder), status, helperText, actions, sm/md/lg, name; onValueChange(value) |
| SelectableCard | stable | npm | 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. |
| SelectableCardGroup | beta | npm | Fieldset owner for SelectableCard options; single or multiple selection; controlled with value/onValueChange or uncontrolled with defaultValue; owns legend, helper text and errors. |
| SelectOption | stable | npm | Typed option child for Select; Select reads value, label, disabled and string children into its own listbox; a value="" option becomes the placeholder text. |
| Switch | stable | npm | On/off toggle with immediate effect; label placement right/left/top, sm/md/lg, loading (aria-busy, aria-disabled), own helperText + error; onCheckedChange(boolean) |
| TextArea | stable | npm | Labelled multi-line field with optional animated auto-grow (minRows/maxRows), own error + helperText; onChange(value) |
| TextInput | stable | npm | 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. |
| TransformingActionInput | beta | In-repo only | CTA input that transforms between surface modes (e.g. prompt bar to chat); marketing entry point for Donny. |
navigation
| Component | Status | Import | Summary |
|---|---|---|---|
| BlogCategoryFilter | stable | In-repo only | Blog-specific category filter control: renders FilterChip toggles directly and shares useFilterDisclosure with CategoryFilter; it does not wrap CategoryFilter. |
| BlogNav | stable | In-repo only | Blog article sub-navigation: back-to-articles plus prev/next stepping for article pages. |
| Breadcrumb | stable | npm | 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. |
| CategoryFilter | stable | npm | Filter pill row for list pages (work index) with selected state, optional collapsible disclosure and multiple visual treatments. |
| CommandPalette | beta | npm | 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. |
| Footer | beta | In-repo only | Legacy pattern-tier footer band with the ChatWidget slot; the production Next.js site chrome is SiteFooter. |
| LanguageSwitcher | stable | npm | 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. |
| Link | stable | npm | 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. |
| NavLink | stable | npm | 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. |
| NavMenuList | beta | npm | Reusable nav link list for mobile/drawer menus; derives active state from the current location. |
| Pagination | stable | npm | 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. |
| ProjectNav | stable | In-repo only | Prev/next case-study navigation with back-to-work action for work detail pages. |
| RelatedPosts | alpha | In-repo only | Related blog posts grid at article footer. |
| RelatedProjects | alpha | In-repo only | Related case studies grid at project footer. |
| SiteFooter | stable | In-repo only | 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. |
| SiteHeader | stable | In-repo only | 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. |
| SiteTree | stable | In-repo only | Hierarchical sitemap tree with collapsible folder branches and page leaves; sitemap page organism. |
| SkipLink | stable | npm | 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. |
| SocialIconLink | alpha | In-repo only | Icon-only anchor: required label, external-safe, token hover/focus, sm/md/lg hit targets. |
| TableOfContents | alpha | In-repo only | Article table of contents for h2/h3 headings; mobile disclosure; activeId marks aria-current=location; onItemClick or built-in smooth scroll. |
| Tabs | stable | npm | 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. |
| TaskList | alpha | In-repo only | 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. |
| TreeView | beta | npm | Application tree; controlled selection and expansion, roving focus, full arrow/Home/End/Enter/Space keyboard model. |
| WorkNav | stable | In-repo only | Work-section sub-navigation: back-to-index plus prev/next stepping for portfolio case-study pages. |
overlay
| Component | Status | Import | Summary |
|---|---|---|---|
| ChatWidget | beta | In-repo only | Collapsible site assistant (Donny) chat widget: streaming replies, tool actions, i18n, mobile sheet behavior. |
| ConfirmPopover | alpha | In-repo only | 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. |
| CookieConsent | beta | npm | GDPR consent banner + settings modal wired to site providers (analytics gating); persists choice. |
| Menu | stable | npm | 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. |
| Modal | stable | npm | 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. |
| Tooltip | beta | npm | 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. |
feedback
| Component | Status | Import | Summary |
|---|---|---|---|
| AlertBanner | stable | npm | Persistent inline status banner; tone info|success|warning|error drives icon + live-region politeness; title/description/action slots; opt-in dismissible with localized control. |
| Progress | stable | npm | Linear progressbar; determinate value/max or indeterminate sweep; sm/md/lg track, semantic state fill; aria-valuenow dropped when indeterminate. |
| ReadingProgress | stable | npm | Scroll-linked reading progress bar for long articles; decorative for AT (content position is conveyed by scroll) |
| Skeleton | stable | npm | Layout-mirroring loading placeholder; variant text|circle|rect|avatar|card, text takes lines, free width/height; role=status, shimmer respects reduced motion. |
| Spinner | stable | npm | 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. |
| StatusDot | stable | npm | Colored semantic dot + label (visible children or sr-only label); tone x sm/md/lg, optional pulse for live states. |
| Toast | stable | npm | 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}) |
| ToastStack | stable | npm | 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. |
| WipBadge | beta | In-repo only | Storybook-only maturity badge (alpha/beta) rendered on non-stable component stories; not product UI. |
display
| Component | Status | Import | Summary |
|---|---|---|---|
| Avatar | stable | npm | 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. |
| AvatarGroup | beta | npm | Role=group overlapping Avatar stack; max collapses the rest into a +N bubble with sr-only 'N more'; sm/md/lg bubble sizes. |
| Badge | stable | npm | 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. |
| BrandLockup | alpha | In-repo only | 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. |
| Code | beta | npm | Inline <code> chip on the light surface; sm/md/lg match the surrounding text size. |
| Display | beta | npm | 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. |
| DonnyAvatar | stable | In-repo only | Donny assistant avatar with mood/action states (distinct eye expressions) used by the chat widget. |
| EmptyState | stable | npm | Centered icon + heading + description + action slot for empty lists/search/first-run; sm/md/lg step padding and type together. |
| Icon | stable | npm | 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. |
| IconSwap | alpha | In-repo only | 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. |
| Kbd | stable | npm | Semantic <kbd> keycap; sm/md/lg mono sizes; compose combos as sibling Kbds with literal separators. |
| ListItem | stable | npm | 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. |
| LocationCard | beta | In-repo only | Office/location card: address, hours (OpenHours), contact links; contact-page module. |
| Logo | stable | npm | 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. |
| PixelLoop | beta | npm | Decorative constellation loop with rounded-dot and 45-degree vector-stroke variants; the glyph pool includes the studio D and T initials. |
| StatList | beta | npm | Key figures as a description list: each item pairs a figure with what it counts, an optional total and a short note. |
| SummaryList | alpha | In-repo only | 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. |
| Text | stable | npm | Body/inline typography; p by default, polymorphic as (span/strong/em/cite/headings), size + lineHeight ladder shared with Title. |
| Timestamp | stable | npm | 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. |
| Title | stable | npm | Page/section headings; semantic level (h1-h6 via level/as) decoupled from visual size (xxs-xxl); lineHeight ladder shared with Text. |
| ValueCard | stable | npm | Values/principles card: icon + title + short description; grid unit for about/culture sections. |
data-display
| Component | Status | Import | Summary |
|---|---|---|---|
| DataTable | beta | npm | Typed native data table; sortable columns, optional row selection, accessible caption, empty state, sm/md/lg density. |
| Table | stable | npm | Composable native table primitives; density, striping, sticky header, three-state DS-Icon sort caret; pairs with useTable* hooks. |
| TableCell | stable | npm | Table td; align start/center/end, numeric = tabular figures right-aligned. |
| TableHeaderCell | stable | npm | Th with scope col/row; col carries the three-state sort caret + aria-sort, row names its data row. |
| TableRow | stable | npm | Table row; works in thead/tbody, selected surface, hover + zebra via the Table root. |
| VirtualList | beta | npm | Fixed-height windowed collection; overscan, stable keys, rendered-range callback, aria position and set-size metadata. |
| VirtualListItem | beta | npm | Windowed list row; role=listitem + aria-posinset/aria-setsize, composes ListItem chrome; positioning arrives from VirtualList via style. |
media
| Component | Status | Import | Summary |
|---|---|---|---|
| BlogMediaImage | stable | In-repo only | Blog-optimized responsive image; raster via next/image, SVG via plain img; fill mode with cover/contain fit; fluid full-bleed for raster only. |
| Gallery | stable | npm | Masonry image grid with hover and focus captions; items open nothing; used on work/case-study pages. |
| Lightbox | alpha | In-repo only | Modal image viewer with keyboard navigation across a gallery of images. |
| MediaPlayer | beta | npm | 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. |
| Mermaid | alpha | In-repo only | Renders a Mermaid diagram with a concise accessible name, prose summary, and visible structured text alternative. |
| ProjectGallery | stable | In-repo only | Case-study image gallery: labelled role=list grid of project shots with its own Lightbox integration (enableLightbox, on by default) |
content
| Component | Status | Import | Summary |
|---|---|---|---|
| ArticleCard | beta | In-repo only | Blog teaser card: title, lead, read time; links to the article; used on blog index and related-posts rails. |
| ArticleContent | stable | In-repo only | Article body reading column (Container measure sm/md/lg); wrap the MDX in ArticleProse for the prose styling. |
| ArticleHero | alpha | In-repo only | Blog article hero with title, meta, and cover. |
| ArticleShareSection | stable | In-repo only | End-of-article share section: X/LinkedIn/Facebook share links plus a copy-link button under an optional heading. |
| BlogIndexContent | alpha | In-repo only | Blog index main content assembly. |
| CaseStudySummary | alpha | In-repo only | Decision-first case study lead: outcome, role, constraints, ordered key decisions, evidence with source labels. |
| ContentSection | alpha | In-repo only | Generic content section wrapper for marketing pages. |
| ManifestoSection | alpha | In-repo only | Long-form manifesto prose section. |
| ProcurementFaq | beta | In-repo only | Visible procurement FAQ (9 locale items, Accordion divided); its English items feed the FAQPage data of the pages that render it. |
| ProjectCard | stable | In-repo only | Basic portfolio project card for the work grid (image, title, tags) |
| ProjectHero | alpha | In-repo only | Case study hero with project title and summary. |
| ProjectList | beta | npm | Compact project index: rows of thumbnail, title, client, discipline and period; whole row links to the case study; teasers muted without a link. |
| ProjectMetaSection | alpha | In-repo only | Case study metadata (client, role, year). |
| StageList | beta | npm | Entries placed by lifecycle stage (sheet, rail, index, checklist, cards); items name a lead answer, detail, stages and an optional tag. |
structure
| Component | Status | Import | Summary |
|---|---|---|---|
| Accordion | beta | npm | 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. |
| AspectRatio | beta | npm | 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. |
| Author | stable | npm | Article byline: author name/avatar attribution line for blog posts. |
| AuthorBio | stable | npm | About-the-author block: Avatar + name + biography paragraph; end-of-article slot. |
| Card | stable | npm | 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. |
| Center | beta | npm | Both-axis flex centering (items+justify center); needs a sized box (give height via className); polymorphic as. |
| CodeBlock | beta | npm | 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. |
| ComplianceCard | beta | In-repo only | Internal audit checklist card (rule rows w/ pass/fail status + last-reviewed date); Storybook/docs tooling, not product UI. |
| Divider | stable | npm | 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. |
| EmailSignatureGenerator | beta | In-repo only | Interactive email-signature generator: form inputs to a copyable table-based HTML signature. |
| ExpandableSection | stable | npm | Single disclosure: collapsedLabel/expandedLabel trigger, uncontrolled (defaultExpanded) or controlled (expanded + onExpandedChange); height/fade reveal. One section = this; exclusive group = Accordion. |
| ImagePlaceholder | beta | In-repo only | Fixed-dimension placeholder block for missing/mock imagery in layouts and demos. |
| LinkedInQuoteCard | beta | In-repo only | LinkedIn-post-styled quote card for embedding social posts as styled quotes in content. |
| List | stable | npm | 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. |
| MacWindowFrame | beta | npm | Decorative macOS window chrome for showcase content: i18n titleKey, optional action button (actionLabelKey + onAction), density comfortable|compact. Presentation only; not a real window/dialog. |
| MarkdownMessage | stable | In-repo only | 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. |
| OpenHours | beta | In-repo only | Opening-hours table with localized day/time rows; used on contact/location surfaces. |
| PersonCard | beta | In-repo only | Person/team profile card (avatar, name, role, links) with built-in skeleton loading state. |
| ProcessBlock | stable | npm | 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. |
| ProofBlock | stable | In-repo only | Metrics proof band: headline metrics with labels under a required title, optional subtitle and caption; tight spacing and dark metric cards. |
| SecureCVDownload | stable | In-repo only | Gated CV download: trigger button opens a verification modal before serving the file. |
| SentrySummaryCard | beta | In-repo only | Sentry issue-summary card (counts/trends) for internal status surfaces. |
| Snippet | beta | npm | Copyable shell command(s) with a $ prompt excluded from copy; default or inverted (dark) theme. |
| SocialShare | stable | In-repo only | Share-target row (ordered network list, defaults to the five share-intent channels; instagram profile link opt-in) with accessible labels. |
| Spacer | beta | npm | 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. |
| StoryBlock | stable | In-repo only | Case-study narrative section: subtitle/title, rich content, and images with selectable image layout. |
| TeamBlock | stable | In-repo only | Centred team grid: Avatar, name and role cards with avatar-size, column and spacing knobs. |
| TerminalCard | alpha | In-repo only | 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. |
| Testimonial | beta | In-repo only | Quote block with attribution (name, role, avatar) for social-proof sections. |
layout
| Component | Status | Import | Summary |
|---|---|---|---|
| ArticleLayout | alpha | In-repo only | Blog article page layout shell. |
| ArticlePageTemplate | alpha | In-repo only | Full blog article page template. |
| Container | stable | npm | 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) |
| FlexBox | beta | npm | Style-prop flexbox (css-less by design): direction/wrap/justify/align/alignContent + gap|rowGap|columnGap (number=px, string=token); passes through div attributes. |
| Grid | stable | npm | 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. |
| GridBlock | stable | In-repo only | Case-study grid of content cells: columns, gap, background and spacing knobs; used across Work project pages. |
| NextLayout | beta | In-repo only | Production app shell: SiteHeader, main landmark, footer, ChatWidget, CookieConsent, providers; one per app. |
| NextLayoutShell | beta | In-repo only | Production app chrome from NextLayout, wrapping page content with the header, main landmark, footer, and chat widget; mirrors app/layout.tsx. |
| PageLayout | stable | npm | Page-level layout wrapper: max-width, optional grid columns, spacing scale, and default page margins. |
| ProjectDetailLayout | alpha | In-repo only | Case study detail layout shell. |
| ResizablePanelGroup | beta | npm | Horizontal or vertical resizable panel layout; pointer drag, arrow/Home/End keyboard resize, separator value semantics. |
| Section | stable | npm | 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. |
| Stack | stable | npm | 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) |
marketing
| Component | Status | Import | Summary |
|---|---|---|---|
| AboutHero | alpha | In-repo only | About page hero with studio positioning. |
| AboutPageContent | stable | In-repo only | 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). |
| BlogHero | alpha | In-repo only | Hero section for the blog index with a title, subtitle, and optional scroll indicator in full or compact variants. |
| ClientLogoMarquee | stable | In-repo only | Animated client-logo marquee for the homepage with pause/resume controls and one semantic client list. |
| ContactHero | stable | In-repo only | Contact page hero: headline plus supporting copy, background and compact variants. |
| ContactPageContentEditorial | stable | In-repo only | 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. |
| CTASection | stable | In-repo only | Marketing call-to-action band: title, description, primary/secondary action slots; background and align variants. |
| Designerman | beta | In-repo only | Sprite-sheet mascot animation (Designerman); decorative site personality element. |
| DesignSprintsSection | stable | In-repo only | 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. |
| EngagementPageContent | beta | In-repo only | Engagement offer page from data/engagements and engagementPages locale copy: hero, fit, scope, steps, deliverables, price, proof, FAQs, booking. |
| EnhancedProjectCard | stable | In-repo only | 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. |
| HeroSection | stable | In-repo only | 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. |
| HighlightSection | stable | In-repo only | Highlight band: overline + title + description with CTA slot; visual variants and sizes for marketing emphasis. |
| HomeHero | stable | In-repo only | Bespoke homepage hero: kinetic per-visit headline, background treatment, primary CTAs to Contact and About. |
| NewsBulletin | stable | In-repo only | 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. |
| PricingCalculator | stable | In-repo only | 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. |
| PricingPageContent | stable | In-repo only | 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>. |
| ReliablePartnerBadge | alpha | In-repo only | Language-matched Vastuu Group trust mark (fi/sv/en) linking to that language's Reliable Partner report PDF; sm/md/lg heights. |
| SectionTitle | alpha | In-repo only | 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. |
| ServiceCard | stable | In-repo only | Service tile: icon, title, description, optional link; services-grid unit. |
| ServicesBlock | stable | In-repo only | Case-study services overview: services list, duration, and tools columns with overview copy and section titles. |
| ServicesGrid | beta | In-repo only | Responsive grid of ServiceCards for homepage/services sections. |
| ServicesLedger | beta | In-repo only | Homepage services ledger: ruled rows (index, title, description, capabilities) plus a Human / Machine text view. |
| ServicesSection | stable | In-repo only | Services grid (no production consumer since ServicesLedger replaced it on the homepage): icon + copy service cards, column count and card variant knobs. |
| StatsSection | alpha | In-repo only | Metrics/stats grid for case study or about pages. |
| ValuesSection | alpha | In-repo only | Studio values section for about page. |
| WorkCTA | alpha | In-repo only | Work page closing CTA band. |
| WorkHero | alpha | In-repo only | Work index hero with portfolio positioning copy. |
| WorkMagneticField | stable | In-repo only | Homepage work showcase: grid of the first three project cards with magnetic hover, view-all link on by default. |
| WorkPreviewSection | stable | In-repo only | Plain project-card preview grid with title, layout options, and optional view-all link. |
utility
| Component | Status | Import | Summary |
|---|---|---|---|
| FadeIn | beta | In-repo only | Scroll-triggered fade-in animation wrapper (GSAP). |
| ThemeProvider | beta | npm | Theme context provider for light/dark/high-contrast modes; syncs class + storage; one per app. |
| VisuallyHidden | stable | npm | 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. |
Not listed
- Deprecated, with contracts but no page: CodeBlockWindow, CodeSnippet, CVDownloadSection, Hero, ProjectDetailTemplate.
- Roadmap: There is no Roadmap component. No contract, export or variant exists under that name. Roadmap names the design system's planning document, which is not a UI component.