Design System TIS v1.0.0
Um design system CSS white-label com tokens DTCG, componentes documentados, suporte multi-tema e acessibilidade WCAG 2.2. A white-label CSS design system with DTCG tokens, documented components, multi-theme support, and WCAG 2.2 accessibility.
Início Rápido Quick Start
Inclua a stylesheet no seu HTML para obter todos os componentes, tokens e temas: Include the stylesheet in your HTML to get every component, token, and theme:
<link rel="stylesheet" href="css/design-system.css">Modo Escuro Dark Mode
Ative o modo escuro definindo o atributo data-mode no elemento raiz:
Enable dark mode by setting the data-mode attribute on the root element:
<html data-mode="dark">O modo claro é o padrão. Todos os tokens semânticos são remapeados automaticamente quando o modo muda. Light mode is the default. All semantic tokens automatically remap when the mode changes.
Catálogo interativo Interactive catalog
Explore propriedades, variantes, tamanhos, estados e comportamento real dos 23 componentes no Storybook. Cada story aponta de volta para sua documentação completa. Explore properties, variants, sizes, states and the real behavior of all 23 components in Storybook. Every story links back to its complete documentation.
Componentes Components
Componentes prontos para produção. Clique em qualquer card para ver a documentação. Production-ready components. Click any card to view its documentation.