TCM Design System

TCM Design System

v1
by
V
Vijayraghavan
TCM Design System
Loading...
TCM Design System
AD
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.

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.

Live token preview

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

Rich text, markdown, and code editor

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

File and image upload

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

Color picker

Signature pad

Date, time, and localization

Range, opacity, and sliders

Preview

Tags, chips, and multi-select

Choice patterns

Selection Controls

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

Checkbox, radio, toggles

Selectors

Icon, font, shape, pattern

Tree view

    • Colors
    • Typography
    • Motion
    • Inputs
    • Data Grid
    • Overlays

Stepper

  1. Account
  2. Permissions
  3. Review

Tabs and accordion

Advanced options

Expandable panels support keyboard access and nested content.

Architecture

Form Architecture

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

Dynamic form builder

Smart wizard

  1. Profile
  2. Rules
  3. Review

Validation and state model

Interaction

Buttons & Actions

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

Developer API
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.

Progress and loading

Enterprise data

Display & Data Controls

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

ServiceStatusRegionLatencyActions

Cards and lists

  • BillingUpdated 2m ago
  • IdentityHealthy
  • SearchIndexing

Carousel

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

    1. Validate
    2. Compress
    3. Convert
    4. 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

    Location output appears here.

    QR and barcode

    Scanner-ready surface for camera integrations.

    Visual settings

    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

    Undo, redo, auto-save

    Idle
    A11Y

    Accessibility & Usability

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

    Checklist

    Live region

    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

    DX

    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