# Design System T2: índice das seções

Fonte: Figma do Design System T2 (extraído em 2026-10-12, última edição do arquivo em 2026-10-09). Site: https://design.t2.com.br.

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).

Cada seção tem um arquivo Markdown próprio. Tudo em um só arquivo: https://design.t2.com.br/llms-full.txt.

- [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.