Plateforme d’interface entreprise

Système de design TCM

Un système de design complet, accessible et piloté par des jetons pour les produits d’entreprise, les formulaires complexes, les flux de travail de médias riches et les applications à forte intensité de données.

Explorer les jetons Ouvrir l’aire de jeu

15domaines de spécification

120+composants et modèles

AAcible WCAG

Accessible par défaut

Commandes axées sur le clavier, focus visible, états ARIA, régions dynamiques, prise en charge de la réduction des animations et modes à contraste élevé.

Architecture composable

Les jetons, composants, états de formulaire et comportements sont séparés afin que les équipes puissent intégrer React, Vue, Angular ou des composants Web.

Échelle entreprise

Les modèles couvrent des grilles de données denses, des formulaires adaptatifs, des gestionnaires de fichiers, des aperçus de médias et des outils pour développeurs.

Carte de couverture

Matrice de mise en œuvre des spécifications

Fondation

Design Tokens & Thématisation

Toutes les décisions visuelles sont pilotées par des variables CSS qui peuvent être modifiées à l’exécution sans recharger la page.

Commutateur de thème à l’exécution

Choisissez système, clair, sombre, marque personnalisée ou contraste élevé. Les préférences sont conservées avec l’API de stockage Miniapps lorsque celle-ci est disponible.

Couleur principale Échelle de rayon Densité

Aperçu en direct des jetons

Primary Secondary Healthy Warning

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

Catégories de jetons

Couleurs, typographie, espacement, élévation, opacité, dégradés, z-index, mouvement et points de rupture.

Contrôles

Contrôles de saisie principaux

Champs validés, masqués, compatibles avec les médias et de type éditeur pour les générateurs de formulaires d’entreprise.

Champs standards, numériques et masqués

Champ de texte Email Mot de passe Numéro de téléphone Devise Pourcentage Zone de texte

Éditeur de texte riche, markdown et code

Bold List Code

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

Téléversement de fichiers et d’images

Déposez les fichiers iciImages, PDF, audio, vidéo jusqu’à 50 Mo

Sélecteur de couleur

Utiliser la pipette

Pavé de signature

EffacerEnregistrer la signature

Date, heure et localisation

DateTimeDateTime

Plages, opacité et curseurs

Size Opacity

Preview

Étiquettes, puces et sélection multiple

Modèles de choix

Contrôles de sélection

Contrôles de sélection uniques, multiples, hiérarchiques, géographiques, visuels et par assistant.

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 et structure

Barre latérale réactive, barre supérieure, tiroir, menus, fils d’Ariane, pagination, feuilles inférieures et zones fixes.

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

Architecture des formulaires

Formulaires réactifs et dynamiques avec groupes, tableaux, contrôles imbriqués, dépendances, validation asynchrone et mises en page adaptatives.

Dynamic form builder

Add fieldValidate

Smart wizard

Profile
Rules
Review

BackNext

Validation and state model

Interaction

Boutons & actions

Actions standard, envoi/réinitialisation, boutons d’icône, hyperliens, chargement, désactivé, enfoncé, groupes d’actions et menu d’action flottant (FAB).

Save changesCancelRead docsDeleteProcessingDisabledDeveloper API

ResetPreviewPublish

New docUploadGenerate

Statut

Retours & indicateurs

Progression, indicateurs de chargement, squelettes, toasts, snackbars, alertes, notifications, badges, fenêtres modales, popovers et info‑bulles.

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

Données d’entreprise

Affichage & contrôles de données

Tableaux, grilles, édition en ligne, tri, filtrage, chargement différé, cartes, listes, pagination, carrousel, galerie et lecteurs multimédias.

Export CSV

	Service	Status	Region	Latency	Actions

Previous12Next

Cards and lists

BillingUpdated 2m ago
IdentityHealthy
SearchIndexing

Carousel

‹

Analytics dashboard

›

Media player

Ressources

Fonctionnalités avancées pour les fichiers et les médias

Gestionnaire de fichiers, navigation dans les dossiers, classement par glisser-déposer, aperçus image/audio/vidéo/PDF, compression et flux de conversion.

File manager tree

Media previewer

Select an asset

Conversion pipeline

Validate
Compress
Convert
Publish

Composition

Disposition et conteneurs

Flex, grille, panneaux repliables, carrousels, colonnes responsives, dispositions automatiques, éléments fixes et contrôles de débordement.

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.

Paramètres

Utilitaires & Paramètres

Géolocalisation, cartes, scanners QR/code-barres, widgets météo, changeurs de thème, contrôles de police/arrière-plan/bordure/ombre et modes de couleur adaptatifs.

Geolocation and weather

Get location

Location output appears here.

QR and barcode

Scanner-ready surface for camera integrations.

Visual settings

FontShadow

Modèle d’exécution

Formulaires — gestion des événements et de l’état

Hooks de cycle de vie, événements de validation, dépendances, liaison de données asynchrone, annuler/rétablir, enregistrement automatique, récupération, suivi d’état et animations.

Event timeline

Simulate lifecycle

Undo, redo, auto-save

UndoRedoIdle

A11Y

Accessibilité & ergonomie

Pratiques WCAG 2.1 AA pour le clavier, les lecteurs d’écran, le contraste, les indicateurs de focus, la réduction des animations et l’ergonomie multi‑appareils.

Checklist

Live region

Announce status

Contrast AA7.8:1

Adaptatif

Design réactif et adaptatif

Mises en page mobile-first, points de rupture adaptatifs, cibles tactiles, onglets balayables, superpositions adaptées au clavier et densité réactive.

Breakpoint tokens

Touch-friendly components

44px targetSwipe tabBottom sheet

Expérience développeur

Prise en charge TypeScript, intégrations de frameworks, bacs à sable Storybook, export des jetons, API de thématisation, imports modulaires, génération par CLI et conventions de nommage.

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