Plataforma de interfaz empresarial

Sistema de diseño TCM

Un sistema de diseño integral, accesible y basado en tokens para productos empresariales, formularios complejos, flujos de trabajo de medios enriquecidos y aplicaciones con gran volumen de datos.

Explorar tokens Abrir entorno de pruebas

15áreas de la especificación

120+componentes y patrones

AAobjetivo WCAG

Accesible por defecto

Controles optimizados para teclado, enfoque visible, estados ARIA, regiones en vivo, compatibilidad con movimiento reducido y modos de alto contraste.

Arquitectura componible

Tokens, componentes, estado de formularios y comportamientos están separados para que los equipos puedan integrar React, Vue, Angular o Web Components.

Escala empresarial

Los patrones cubren cuadrículas de datos densas, formularios adaptativos, administradores de archivos, vistas previas de medios y herramientas para desarrolladores.

Mapa de cobertura

Matriz de implementación de la especificación

Fundamentos

Design Tokens y Temas

Todas las decisiones visuales están impulsadas por variables CSS que se pueden cambiar en tiempo de ejecución sin recargar la página.

Selector de tema en tiempo de ejecución

Elige sistema, claro, oscuro, marca personalizada o alto contraste. Las preferencias se guardan con la API de almacenamiento de Miniapps cuando está disponible.

Color principal Escala de radios Densidad

Vista previa en vivo de tokens

Primary Secondary Healthy Warning

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

Categorías de tokens

Colores, tipografía, espaciado, elevación, opacidad, degradados, z-index, movimiento y puntos de quiebre.

Controles

Controles de entrada principales

Entradas validadas, enmascaradas, con soporte para medios y estilo editor para creadores de formularios empresariales.

Campos estándar, numéricos y enmascarados

Cuadro de texto Email Contraseña Número de teléfono Moneda Porcentaje Área de texto

Editor de texto enriquecido, markdown y código

Bold List Code

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

Carga de archivos e imágenes

Suelta los archivos aquíImágenes, PDF, audio, video de hasta 50 MB

Selector de color

Usar cuentagotas

Panel de firma

BorrarGuardar firma

Fecha, hora y localización

DateTimeDateTime

Rango, opacidad y controles deslizantes

Size Opacity

Preview

Etiquetas, chips y selección múltiple

Patrones de elección

Controles de selección

Controles de selección simples, múltiples, jerárquicos, geográficos, visuales y tipo asistente.

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.

Estructura

Navegación y estructura

Barra lateral, barra superior, cajón, menús, migas de pan, paginación, hojas inferiores y regiones fijas con diseño adaptable.

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

Arquitectura

Arquitectura de formularios

Formularios reactivos y dinámicos con grupos, arreglos, controles anidados, dependencias, validación asíncrona y diseños adaptativos.

Dynamic form builder

Add fieldValidate

Smart wizard

Profile
Rules
Review

BackNext

Validation and state model

Interacción

Botones y acciones

Acciones estándar, enviar/restablecer, botones de ícono, hipervínculos, carga, deshabilitado, presionado, grupos de acciones y marcador de posición de FAB.

Save changesCancelRead docsDeleteProcessingDisabledDeveloper API

ResetPreviewPublish

New docUploadGenerate

Estado

Comentarios e indicadores

Progreso, indicadores de carga, esqueletos, toast, snackbar, alertas, notificaciones, insignias, modales, popovers y 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

Datos empresariales

Controles de visualización y datos

Tablas, cuadrículas, edición en línea, ordenamiento, filtrado, carga diferida, tarjetas, listas, paginación, carrusel, galería y reproductores de medios.

Export CSV

	Service	Status	Region	Latency	Actions

Previous12Next

Cards and lists

BillingUpdated 2m ago
IdentityHealthy
SearchIndexing

Carousel

‹

Analytics dashboard

›

Media player

Recursos

Funciones avanzadas de medios y archivos

Administrador de archivos, navegación por carpetas, orden mediante arrastrar y soltar, previsualizadores de imagen/audio/video/PDF, compresión y flujos de trabajo de conversión.

File manager tree

Media previewer

Select an asset

Conversion pipeline

Validate
Compress
Convert
Publish

Composición

Diseño y contenedores

Flex, grid, paneles plegables, carruseles, columnas responsivas, diseños automáticos, elementos fijos y controles de desbordamiento.

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.

Configuración

Utilidades y configuración

Geolocalización, mapas, escáneres de QR/códigos de barras, widgets del clima, selectores de tema, controles de fuente/fondo/borde/sombra y modos de color adaptativos.

Geolocation and weather

Get location

Location output appears here.

QR and barcode

Scanner-ready surface for camera integrations.

Visual settings

FontShadow

Modelo de ejecución

Formularios — eventos y gestión de estado

Ganchos de ciclo de vida, eventos de validación, dependencias, enlace de datos asíncrono, deshacer/rehacer, guardado automático, recuperación, seguimiento de estado y animaciones.

Event timeline

Simulate lifecycle

Undo, redo, auto-save

UndoRedoIdle

Accesibilidad

Accesibilidad y usabilidad

Prácticas WCAG 2.1 AA para teclado, lectores de pantalla, contraste, indicadores de foco, movimiento reducido y usabilidad entre dispositivos.

Checklist

Live region

Announce status

Contrast AA7.8:1

Adaptativo

Diseño responsivo y adaptativo

Diseños mobile-first, puntos de quiebre adaptativos, objetivos táctiles, pestañas deslizables, superposiciones compatibles con teclado y densidad adaptable.

Breakpoint tokens

Touch-friendly components

44px targetSwipe tabBottom sheet

Experiencia de desarrollo

Experiencia del desarrollador

Compatibilidad con TypeScript, integraciones con frameworks, entornos de prueba en Storybook, exportación de tokens, APIs de tematización, importaciones modulares, generación con CLI y convenciones de nombres.

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