TCM-Designsystem

TCM-Designsystem

v1
by
V
Vijayraghavan
TCM-Designsystem
Loading...
TCM Design System
AD
Enterprise-UI-Plattform

TCM Design System

Ein umfassendes, barrierefreies, tokenbasiertes Designsystem für Enterprise-Produkte, komplexe Formulare, Workflows für Rich Media und datenintensive Anwendungen.

15Spezifikationsbereiche
120+Komponenten & Muster
AAWCAG-Ziel

Standardmäßig barrierefrei

Tastaturorientierte Steuerung, sichtbarer Fokus, ARIA-Zustände, Live-Regionen, Unterstützung für reduzierte Bewegung und Hochkontrastmodi.

Komponierbare Architektur

Tokens, Komponenten, Formularzustand und Verhaltenslogik sind getrennt, sodass Teams React, Vue, Angular oder Web Components integrieren können.

Enterprise-Umfang

Muster decken dichte Datenraster, adaptive Formulare, Dateimanager, Medienvorschauen und Entwickler-Tools ab.

Abdeckungsübersicht

Matrix der Spezifikationsimplementierung

Grundlage

Design-Tokens & Theming

Alle visuellen Entscheidungen werden von CSS-Variablen gesteuert, die zur Laufzeit ohne Neuladen der Seite umgeschaltet werden können.

Designmodus-Umschalter zur Laufzeit

Wählen Sie System, Hell, Dunkel, benutzerdefinierte Marke oder hohen Kontrast. Einstellungen werden, sofern verfügbar, mit der Miniapps Storage-API gespeichert.

Live-Token-Vorschau

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

Token-Kategorien

Farben, Typografie, Abstände, Ebenen, Deckkraft, Verläufe, Z-Index, Bewegung und Breakpoints.

Steuerelemente

Zentrale Eingabesteuerelemente

Validierte, maskierte, medientaugliche und editorartige Eingabefelder für Enterprise-Formular-Builder.

Standard-, numerische und maskierte Felder

Rich-Text-, Markdown- und Code-Editor

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

Datei- und Bild-Upload

Dateien hier ablegenBilder, PDF, Audio, Video bis zu 50 MB

Farbauswahl

Unterschriftenfeld

Datum, Uhrzeit und Lokalisierung

Bereich, Deckkraft und Schieberegler

Preview

Tags, Chips und Mehrfachauswahl

Auswahlmuster

Auswahlelemente

Einfache, mehrfache, hierarchische, geografische, visuelle und Assistenten-ähnliche Auswahlsteuerelemente.

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.

Architektur

Formulararchitektur

Reaktive und dynamische Formulare mit Gruppen, Arrays, verschachtelten Steuerelementen, Abhängigkeiten, asynchroner Validierung und adaptiven Layouts.

Dynamic form builder

Smart wizard

  1. Profile
  2. Rules
  3. Review

Validation and state model

Interaktion

Schaltflächen & Aktionen

Standardaktionen, Senden/ZURÜCKSETZEN, Symbolschaltflächen, Hyperlinks, Laden, deaktiviert, gedrückt, Aktionsgruppen und FAB-Speed-Dial.

Developer API
Status

Feedback & Indikatoren

Fortschritt, Spinner, Skeletons, Toast, Snackbar, Warnmeldungen, Benachrichtigungen, Badges, Modale, Popover und Tooltips.

Alerts and notifications

Scheduled maintenance Sunday 02:00 UTC.
Storage quota is above 95%.
Database connection failed. Retrying.

Progress and loading

Unternehmensdaten

Anzeige- & Datensteuerungen

Tabellen, Raster, Inline-Bearbeitung, Sortierung, Filterung, Lazy Loading, Karten, Listen, Seitennummerierung, Karussell, Galerie und Medienplayer.

ServiceStatusRegionLatencyActions

Cards and lists

  • BillingUpdated 2m ago
  • IdentityHealthy
  • SearchIndexing

Carousel

Media player

Assets

Erweiterte Medien- & Dateifunktionen

Dateimanager, Ordnernavigation, Drag-and-Drop-Sortierung, Bild-/Audio-/Video-/PDF-Vorschau, Komprimierung und Konvertierungs-Workflows.

File manager tree

    Media previewer

    Select an asset

    Conversion pipeline

    1. Validate
    2. Compress
    3. Convert
    4. Publish
    Komposition

    Layout & Container

    Flex, Grid, einklappbare Panels, Karussells, responsive Spalten, Auto-Layouts, haftende Elemente und Überlauf-Steuerelemente.

    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.
    Einstellungen

    Hilfsprogramme & Einstellungen

    Geolokalisierung, Karten, QR-/Barcode-Scanner, Wetter-Widgets, Designmodus-Umschalter, Steuerungen für Schriftart/Hintergrund/Rand/Schatten und adaptive Farbmodi.

    Geolocation and weather

    Location output appears here.

    QR and barcode

    Scanner-ready surface for camera integrations.

    Visual settings

    Laufzeitmodell

    Formulare — Ereignis- & Zustandsverwaltung

    Lebenszyklus-Hooks, Validierungsereignisse, Abhängigkeiten, asynchrone Datenbindung, Rückgängig/Wiederherstellen, automatisches Speichern, Wiederherstellung, Zustandsverfolgung und Animationen.

    Event timeline

    Undo, redo, auto-save

    Idle
    A11Y

    Barrierefreiheit & Nutzbarkeit

    WCAG-2.1-AA-Praktiken für Tastatur, Screenreader, Kontrast, Fokusindikatoren, reduzierte Bewegung und geräteübergreifende Nutzbarkeit.

    Checklist

    Live region

    Contrast AA7.8:1
    Adaptiv

    Responsives & adaptives Design

    Mobile-first-Layouts, adaptive Breakpoints, Touch-Ziele, wischbare Tabs, tastaturfreundliche Overlays und responsive Dichte.

    Breakpoint tokens

    Touch-friendly components

    DX

    Developer Experience

    TypeScript-Unterstützung, Framework-Integrationen, Storybook-Spielwiesen, Token-Export, Theming-APIs, modulare Importe, CLI-Gerüste und Benennungskonventionen.

    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