Plataforma de UI corporativa

TCM Design System

Um sistema de design abrangente, acessível e orientado por tokens para produtos corporativos, formulários complexos, fluxos de trabalho de mídia avançados e aplicações orientadas a dados.

Explorar tokens Abrir playground

15áreas da especificação

120+componentes e padrões

AAMeta WCAG

Acessível por padrão

Controles focados em teclado, foco visível, estados ARIA, regiões dinâmicas, suporte a movimento reduzido e modos de alto contraste.

Arquitetura componível

Tokens, componentes, estado de formulários e comportamentos são separados para que as equipes possam integrar React, Vue, Angular ou Web Components.

Escala corporativa

Padrões cobrem grades de dados densas, formulários adaptativos, gerenciadores de arquivos, pré-visualização de mídia e ferramentas para desenvolvedores.

Mapa de cobertura

Matriz de implementação da especificação

Fundação

Design Tokens e Temas

Todas as decisões visuais são orientadas por variáveis CSS que podem ser alteradas em tempo de execução sem recarregar a página.

Trocador de tema em tempo de execução

Escolha entre sistema, claro, escuro, marca personalizada ou alto contraste. As preferências são mantidas com a API de armazenamento do Miniapps quando disponível.

Cor primária Escala de raio Densidade

Pré-visualização ao vivo dos tokens

Primary Secondary Healthy Warning

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

Categorias de tokens

Cores, tipografia, espaçamento, elevação, opacidade, gradientes, z-index, movimento e breakpoints.

Controles

Controles de entrada principais

Entradas validadas, mascaradas, com suporte a mídia e no estilo editor para construtores de formulários corporativos.

Campos padrão, numéricos e mascarados

Caixa de texto Email Senha Número de telefone Moeda Porcentagem Área de texto

Editor de texto rico, markdown e código

Bold List Code

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

Upload de arquivos e imagens

Solte os arquivos aquiImagens, PDF, áudio, vídeo de até 50 MB

Seletor de cores

Usar conta-gotas

Área de assinatura

LimparSalvar assinatura

Data, hora e localização

DateTimeDateTime

Intervalo, opacidade e controles deslizantes

Size Opacity

Preview

Tags, chips e seleção múltipla

Padrões de escolha

Controles de seleção

Controles de seleção simples, múltipla, hierárquica, geográfica, visual e em estilo assistente.

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.

Estrutura

Navegação e estrutura

Barra lateral responsiva, barra superior, gaveta, menus, trilhas de navegação, paginação, bottom sheets e regiões fixas.

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

Arquitetura

Arquitetura de Formulários

Formulários reativos e dinâmicos com grupos, arrays, controles aninhados, dependências, validação assíncrona e layouts adaptáveis.

Dynamic form builder

Add fieldValidate

Smart wizard

Profile
Rules
Review

BackNext

Validation and state model

Interação

Botões e Ações

Ações padrão, enviar/redefinir, botões de ícone, hyperlinks, carregando, desativado, pressionado, grupos de ações e discador rápido FAB.

Save changesCancelRead docsDeleteProcessingDisabledDeveloper API

ResetPreviewPublish

New docUploadGenerate

Status

Feedback e Indicadores

Progresso, spinners, skeletons, toast, snackbar, alertas, notificações, badges, modais, popovers e 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

Dados corporativos

Exibição e Controles de Dados

Tabelas, grades, edição inline, ordenação, filtragem, carregamento sob demanda, cards, listas, paginação, carrossel, galeria e reprodutores de mídia.

Export CSV

	Service	Status	Region	Latency	Actions

Previous12Next

Cards and lists

BillingUpdated 2m ago
IdentityHealthy
SearchIndexing

Carousel

‹

Analytics dashboard

›

Media player

Assets

Recursos avançados de mídia e arquivos

Gerenciador de arquivos, navegação por pastas, ordenação por arrastar e soltar, visualizadores de imagem/áudio/vídeo/PDF, compressão e fluxos de trabalho de conversão.

File manager tree

Media previewer

Select an asset

Conversion pipeline

Validate
Compress
Convert
Publish

Composição

Layout e Contêineres

Flex, grid, painéis recolhíveis, carrosséis, colunas responsivas, auto-layouts, elementos fixos e controles de 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.

Configurações

Utilitários e Configurações

Geolocalização, mapas, leitores de QR/código de barras, widgets de clima, trocadores de tema, controles de fonte/fundo/borda/sombra e modos de cor adaptativos.

Geolocation and weather

Get location

Location output appears here.

QR and barcode

Scanner-ready surface for camera integrations.

Visual settings

FontShadow

Modelo de runtime

Formulários — eventos e gerenciamento de estado

Ganchos de ciclo de vida, eventos de validação, dependências, vinculação assíncrona de dados, desfazer/refazer, salvamento automático, recuperação, rastreamento de estado e animações.

Event timeline

Simulate lifecycle

Undo, redo, auto-save

UndoRedoIdle

A11Y

Acessibilidade e Usabilidade

Práticas WCAG 2.1 AA para teclado, leitores de tela, contraste, indicadores de foco, movimento reduzido e usabilidade entre dispositivos.

Checklist

Live region

Announce status

Contrast AA7.8:1

Adaptativo

Design responsivo e adaptativo

Layouts mobile-first, pontos de interrupção adaptativos, alvos de toque, abas deslizáveis, sobreposições compatíveis com teclado e densidade responsiva.

Breakpoint tokens

Touch-friendly components

44px targetSwipe tabBottom sheet

Experiência do Desenvolvedor

Suporte a TypeScript, integrações com frameworks, playgrounds no Storybook, exportação de tokens, APIs de temas, imports modulares, scaffolding via CLI e convenções de nomenclatura.

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