Enterprise UI platform

TCM Design System

A comprehensive, accessible, token-driven design system for enterprise products, complex forms, rich media workflows, and data-heavy applications.

Explore tokens Open playground

15spec areas

120+components & patterns

AAWCAG target

Accessible by default

Keyboard-first controls, visible focus, ARIA states, live regions, reduced-motion support, and high-contrast modes.

Composable architecture

Tokens, components, form state, and behaviors are separated so teams can integrate React, Vue, Angular, or Web Components.

Enterprise scale

Patterns cover dense data grids, adaptive forms, file managers, media previews, and developer tooling.

Coverage map

Specification implementation matrix

Foundation

Design Tokens & Theming

All visual decisions are driven by CSS variables that can be switched at runtime without a page reload.

Runtime theme switcher

Choose system, light, dark, custom brand, or high contrast. Preferences are persisted with the Miniapps storage API when available.

Primary color Radius scale Density

Live token preview

Primary Secondary Healthy Warning

:root {
  --tcm-color-primary: ...;
  --tcm-radius-md: ...;
}

Token categories

Colors, type, spacing, elevation, opacity, gradients, z-index, motion, and breakpoints.

Controls

Core Input Controls

Validated, masked, media-capable, and editor-style inputs for enterprise form builders.

Standard, numeric, and masked fields

Textbox Email Password Phone number Currency Percentage Text area

Rich text, markdown, and code editor

Bold List Code

<tcm-input required validation="email" />

File and image upload

Drop files hereImages, PDF, audio, video up to 50MB

Color picker

Use eyedropper

Signature pad

ClearSave signature

Date, time, and localization

DateTimeDateTime

Range, opacity, and sliders

Size Opacity

Preview

Tags, chips, and multi-select

Choice patterns

Selection Controls

Single, multiple, hierarchical, geographic, visual, and wizard-style selection controls.

Checkbox, radio, toggles

Include audit logs Require approval Enterprise BusinessFeature flag

Selectors

CountryLanguageTime zone

Icon, font, shape, pattern

InterSerifMono

Tree view

▾ Design Tokens
- Colors
- Typography
- Motion
▾ Components
- Inputs
- Data Grid
- Overlays

Stepper

Account
Permissions
Review

Tabs and accordion

UsageAPIA11Y

Advanced options

Expandable panels support keyboard access and nested content.

Structure

Navigation & Structure

Responsive sidebar, topbar, drawer, menus, breadcrumbs, pagination, bottom sheets, and sticky regions.

Breadcrumbs and pagination

Previous123Next

Menus and context actions

Open context menu

RenameDuplicateDelete

Sticky header/footer and bottom sheet

Sticky product header

Scrollable container content with persistent actions.

Panels and drawers adapt to viewport size.

Open bottom sheet

Architecture

Form Architecture

Reactive and dynamic forms with groups, arrays, nested controls, dependencies, async validation, and adaptive layouts.

Dynamic form builder

Add fieldValidate

Smart wizard

Profile
Rules
Review

BackNext

Validation and state model

Interaction

Buttons & Actions

Standard actions, submit/reset, icon buttons, hyperlinks, loading, disabled, pressed, action groups, and FAB speed dial.

Save changesCancelRead docsDeleteProcessingDisabledDeveloper API

ResetPreviewPublish

New docUploadGenerate

Status

Feedback & Indicators

Progress, spinners, skeletons, toast, snackbar, alerts, notifications, badges, modals, popovers, and tooltips.

Alerts and notifications

Scheduled maintenance Sunday 02:00 UTC.

Storage quota is above 95%.

Database connection failed. Retrying.

Trigger toast

Progress and loading

Open accessible modal

Enterprise data

Display & Data Controls

Tables, grids, inline editing, sorting, filtering, lazy loading, cards, lists, pagination, carousel, gallery, and media players.

Export CSV

	Service	Status	Region	Latency	Actions

Previous12Next

Cards and lists

BillingUpdated 2m ago
IdentityHealthy
SearchIndexing

Carousel

‹

Analytics dashboard

›

Media player

Assets

Advanced Media & File Features

File manager, folder navigation, drag-and-drop ordering, image/audio/video/PDF previewers, compression, and conversion workflows.

File manager tree

Media previewer

Select an asset

Conversion pipeline

Validate
Compress
Convert
Publish

Composition

Layout & Containers

Flex, grid, collapsible panels, carousels, responsive columns, auto-layouts, sticky elements, and overflow controls.

Responsive auto-layout playground

Flex area

Grid area

Sticky area

Overflow area

Collapsible panel

Panels use semantic disclosure patterns and retain keyboard accessibility.

Overflow controls

Wide content inside a contained scroll region with clear affordances.

Settings

Utilities & Settings

Geolocation, maps, QR/barcode scanners, weather widgets, theme switchers, font/background/border/shadow controls, and adaptive color modes.

Geolocation and weather

Get location

Location output appears here.

QR and barcode

Scanner-ready surface for camera integrations.

Visual settings

FontShadow

Runtime model

Forms — Events & State Management

Lifecycle hooks, validation events, dependencies, async data binding, undo/redo, auto-save, recovery, state tracking, and animations.

Event timeline

Simulate lifecycle

Undo, redo, auto-save

UndoRedoIdle

A11Y

Accessibility & Usability

WCAG 2.1 AA practices for keyboard, screen readers, contrast, focus indicators, reduced motion, and cross-device usability.

Checklist

Live region

Announce status

Contrast AA7.8:1

Adaptive

Responsive & Adaptive Design

Mobile-first layouts, adaptive breakpoints, touch targets, swipeable tabs, keyboard-friendly overlays, and responsive density.

Breakpoint tokens

Touch-friendly components

44px targetSwipe tabBottom sheet

Developer Experience

TypeScript support, framework integrations, Storybook playgrounds, token export, theming APIs, modular imports, CLI scaffolding, and naming conventions.

TypeScript component API

import { Button, ThemeProvider } from '@tcm/design-system';

<ThemeProvider mode="system" tokens={customTokens}>
  <Button variant="primary" loading={saving}>Save</Button>
</ThemeProvider>

CLI and token export

npx tcm-ui generate component data-grid
npx tcm-ui tokens export --format figma
npx tcm-ui storybook start