Piattaforma UI enterprise

TCM Design System

Un sistema di design completo, accessibile e basato su token per prodotti enterprise, moduli complessi, flussi di lavoro multimediali avanzati e applicazioni ad alta densità di dati.

Esplora i token Apri il playground

15aree della specifica

120+componenti e pattern

AAObiettivo WCAG

Accessibile per impostazione predefinita

Controlli ottimizzati per la tastiera, focus visibile, stati ARIA, regioni live, supporto per riduzione dei movimenti e modalità ad alto contrasto.

Architettura componibile

Token, componenti, stato dei moduli e comportamenti sono separati così che i team possano integrare React, Vue, Angular o Web Components.

Scalabilità enterprise

I pattern coprono data grid densi, moduli adattivi, file manager, anteprime multimediali e strumenti per sviluppatori.

Mappa di copertura

Matrice di implementazione delle specifiche

Fondazione

Design Token e Tematizzazione

Tutte le decisioni visive sono guidate da variabili CSS che possono essere cambiate a runtime senza ricaricare la pagina.

Selettore tema a runtime

Scegli sistema, chiaro, scuro, brand personalizzato o alto contrasto. Le preferenze vengono salvate con le API di archiviazione Miniapps quando disponibili.

Colore primario Scala dei raggi Densità

Anteprima token in tempo reale

Primary Secondary Healthy Warning

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

Categorie di token

Colori, tipografia, spaziatura, elevazione, opacità, sfumature, z-index, movimento e breakpoint.

Controlli

Controlli di input principali

Input convalidati, mascherati, compatibili con i media e in stile editor per builder di form aziendali.

Campi standard, numerici e mascherati

Casella di testo Email Password Numero di telefono Valuta Percentuale Area di testo

Editor di testo formattato, markdown e codice

Bold List Code

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

Caricamento di file e immagini

Rilascia i file quiImmagini, PDF, audio, video fino a 50 MB

Selettore colore

Usa contagocce

Tavoletta per firme

PulisciSalva firma

Data, ora e localizzazione

DateTimeDateTime

Intervallo, opacità e cursori

Size Opacity

Preview

Tag, chip e selezione multipla

Pattern di scelta

Controlli di selezione

Controlli di selezione singola, multipla, gerarchica, geografica, visiva e in stile procedura guidata.

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.

Struttura

Navigazione e struttura

Barra laterale reattiva, barra superiore, cassetto, menu, breadcrumb, impaginazione, bottom sheet e aree fisse.

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

Architettura

Architettura dei form

Form reattivi e dinamici con gruppi, array, controlli annidati, dipendenze, validazione asincrona e layout adattivi.

Dynamic form builder

Add fieldValidate

Smart wizard

Profile
Rules
Review

BackNext

Validation and state model

Interazione

Pulsanti e azioni

Azioni standard, invio/reset, pulsanti icona, collegamenti ipertestuali, caricamento, disabilitato, premuto, gruppi di azioni e FAB speed dial.

Save changesCancelRead docsDeleteProcessingDisabledDeveloper API

ResetPreviewPublish

New docUploadGenerate

Stato

Feedback e indicatori

Avanzamento, spinner, scheletri, toast, snackbar, avvisi, notifiche, badge, modali, popover e tooltip.

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

Dati aziendali

Controlli di visualizzazione e dati

Tabelle, griglie, modifica in linea, ordinamento, filtro, lazy loading, schede, elenchi, paginazione, carosello, galleria e lettori multimediali.

Export CSV

	Service	Status	Region	Latency	Actions

Previous12Next

Cards and lists

BillingUpdated 2m ago
IdentityHealthy
SearchIndexing

Carousel

‹

Analytics dashboard

›

Media player

Risorse

Funzionalità avanzate per media e file

Gestione file, navigazione tra cartelle, ordinamento tramite trascinamento, anteprime di immagini/audio/video/PDF, compressione e flussi di lavoro di conversione.

File manager tree

Media previewer

Select an asset

Conversion pipeline

Validate
Compress
Convert
Publish

Composizione

Layout e contenitori

Flex, griglia, pannelli comprimibili, caroselli, colonne responsive, layout automatici, elementi fissi e controlli di overflow.

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.

Impostazioni

Utility e Impostazioni

Geolocalizzazione, mappe, lettori QR/barcode, widget meteo, selettori di tema, controlli di font/sfondo/bordo/ombra e modalità colore adattive.

Geolocation and weather

Get location

Location output appears here.

QR and barcode

Scanner-ready surface for camera integrations.

Visual settings

FontShadow

Modello di runtime

Moduli — Gestione di eventi e stato

Hook di ciclo di vita, eventi di convalida, dipendenze, binding di dati asincroni, annulla/ripristina, salvataggio automatico, ripristino, tracciamento dello stato e animazioni.

Event timeline

Simulate lifecycle

Undo, redo, auto-save

UndoRedoIdle

A11Y

Accessibilità e usabilità

Pratiche WCAG 2.1 AA per tastiera, screen reader, contrasto, indicatori di focus, riduzione del movimento e usabilità multi-dispositivo.

Checklist

Live region

Announce status

Contrast AA7.8:1

Adattivo

Design responsive e adattivo

Layout mobile-first, breakpoint adattivi, target touch, schede scorrevoli, overlay compatibili con la tastiera e densità reattiva.

Breakpoint tokens

Touch-friendly components

44px targetSwipe tabBottom sheet

Esperienza sviluppatore

Supporto TypeScript, integrazioni con framework, playground Storybook, esportazione di token, API di theming, import modulari, CLI scaffolding e convenzioni di naming.

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