# Design System T2

> Design System T2 é o design system da T2 Educação. 97 tokens semânticos em 3 temas (Light, Dark, Dark Blue), 26 paletas primitivas, 16 text styles (Geist e JetBrains Mono), escala de espaço de 4px, raios, 5 níveis de elevação, grid de 4/8/12 colunas, ícones Tabler e a marca T2 (cor de marca: Cyan).

Este é o índice para IAs e agentes de https://design.t2.com.br. O site é uma página interativa (SPA): quem recebe só o link da página não vê o conteúdo sem executar JavaScript. Todo o conteúdo está disponível em texto simples nos arquivos abaixo.

## Se você é uma IA que recebeu o link desta página

1. Não tente ler a página interativa. Leia https://design.t2.com.br/llms-full.txt (tudo em um único Markdown) ou, para economizar contexto, as seções em https://design.t2.com.br/docs/<seção>.md (índice em https://design.t2.com.br/docs/index.md).
2. Para valores exatos de cor, espaço, raio, sombra ou tipografia, use https://design.t2.com.br/tokens.json (W3C DTCG) ou https://design.t2.com.br/tokens.css (variáveis --midas-*).
3. Guia legível para pessoas e agentes: https://design.t2.com.br/ai/.

## Regras de ouro

- Use só tokens semânticos (nunca hex solto nem paleta primitiva em componente).
- O tema é contexto (data-theme="light|dark|dark-blue"), não variante.
- Texto >= 4,5:1 e bordas de controle/foco >= 3:1 em todos os temas.
- Espaçamento só com a escala space/* (base 4px).
- Cyan é a cor da marca; nenhuma cor nova fora das paletas.

## Comece por aqui

- [Documentação completa](https://design.t2.com.br/llms-full.txt): tudo em um único arquivo Markdown (marca, tokens por tema, tipografia, escalas, grid, ícones, regras, exportação, como consumir).
- [Tokens em JSON (W3C DTCG)](https://design.t2.com.br/tokens.json): primitivos, semânticos com os 3 temas, tipografia, escalas, elevação, gradientes e grid.
- [Variáveis CSS](https://design.t2.com.br/tokens.css): --midas-* dos 3 temas (o prefixo é só técnico).
- [Para IAs e agentes](https://design.t2.com.br/ai/): página legível com o passo a passo.

## Documentação por seção

- [Sobre a T2](https://design.t2.com.br/docs/sobre.md): Quem somos, visão, propósito, manifesto, valores e tom de voz da T2 Educação. Para tom de voz, textos institucionais, visão, propósito e valores da T2.
- [Princípios](https://design.t2.com.br/docs/principios.md): As quatro decisões editoriais que orientam toda escolha visual. Para decidir entre dois caminhos visuais; vale antes de qualquer outra seção.
- [Marca](https://design.t2.com.br/docs/marca.md): Logos oficiais, lockups, variações de cor, área de respiro, tamanho mínimo, usos incorretos e co-branding. Para usar o logo: lockups, cores, área de respiro, tamanho mínimo, usos incorretos e co-branding.
- [Tokens](https://design.t2.com.br/docs/tokens.md): Como os tokens são organizados, nomeados e distribuídos (JSON DTCG, CSS, Markdown). Para entender como os tokens são nomeados, organizados e gerados.
- [Cores](https://design.t2.com.br/docs/cores.md): Primitivos (26 paletas), tokens semânticos em 3 temas, gradientes, contraste e regras de uso. Para qualquer cor: tokens semânticos por tema, contraste, gradientes e regras de uso.
- [Tipografia](https://design.t2.com.br/docs/tipografia.md): Geist e JetBrains Mono, tokens de tamanho, altura de linha, peso e tracking, e os 16 text styles. Para fontes, tamanhos, pesos e os text styles.
- [Espaçamento e tamanhos](https://design.t2.com.br/docs/espacamento.md): Escala de espaço (base 4px), alturas de controle e tamanhos de ícone. Para margens, paddings, gaps e altura de controles e ícones.
- [Raios, bordas e opacidade](https://design.t2.com.br/docs/raios.md): Escala de raio, raios por função, largura de borda e opacidade de desabilitado. Para arredondamento de cantos e espessura de bordas.
- [Elevação e efeitos](https://design.t2.com.br/docs/sombras.md): Elevação (5 níveis), foco, materiais (glass, frosted, sheen) e blur. Para elevação, foco, vidro/frosted e blur.
- [Grid e layout](https://design.t2.com.br/docs/grid.md): Breakpoints, colunas, gutters, margens, telas de referência, contêineres e modelos de página. Para layout responsivo: breakpoints, colunas, gutters e contêineres.
- [Ícones](https://design.t2.com.br/docs/icones.md): Só Tabler Icons: regra de uso, tamanhos, cor, import no React, URLs estáticas dos SVGs, índice JSON e zip para download. Para escolher e usar ícones (Tabler), tamanho, traço, cor e RTL.
- [Como consumir](https://design.t2.com.br/docs/consumir.md): Tokens em CSS e JSON (DTCG), Tailwind v4 e v3 sobre as variáveis, fontes e leitura por agentes de IA. Para ligar o sistema a um projeto: CSS, JSON, Tailwind v3/v4, fontes.
- [Índice das seções](https://design.t2.com.br/docs/index.md): lista de todas as seções em Markdown.

## Opcional

- [Site](https://design.t2.com.br/): versão visual para pessoas.
- [Figma do Design System T2](https://www.figma.com/design/MciqXNmJpU13Zl9MyhUwK9/Midas-Design-System): fonte da verdade de componentes, ícones, tipografia, espaçamento e raios.