Para IAs e agentes
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).
O site design.t2.com.br é uma página interativa, e quem lê só o HTML não vê as seções. Tudo o que o site mostra está em texto simples nos arquivos abaixo.
Resumo ultra curto
- Marca: Cyan é a cor da marca; Sky é apoio em gráficos.
- Temas: Light, Dark e Dark Blue, aplicados por
data-theme="light|dark|dark-blue". - Fontes: Geist (texto e títulos) e JetBrains Mono (código e rótulos).
- Escalas: espaço de 4px, raios, 5 níveis de elevação, grid de 4/8/12 colunas.
- Ícones: Tabler Icons, grade de 24px, traço de 2px.
Passo a passo
- Leia /llms.txt. É o índice com resumo e regras de ouro.
- Precisa de tudo? Leia /llms-full.txt: um arquivo, sem JavaScript.
- Precisa de um tema específico? Cores: /docs/cores.md. Tipografia: /docs/tipografia.md. Espaço: /docs/espacamento.md. Raios: /docs/raios.md. Elevação: /docs/sombras.md. Grid: /docs/grid.md. Ícones: /docs/icones.md. Marca: /docs/marca.md.
- Precisa de valores exatos? Use /tokens.json (DTCG) ou /tokens.css.
- Vai escrever código? Leia /docs/consumir.md e use só variáveis dos tokens semânticos.
Arquivos
| Arquivo | O que é | Quando ler |
|---|---|---|
/llms.txt | Índice curto para IAs, com resumo, regras de ouro e links. | Primeiro arquivo a ler quando você só recebeu o link do site. |
/llms-full.txt | Toda a documentação em um único Markdown. | Quando você precisa do contexto completo de uma vez. |
/docs/index.md | Índice das seções em Markdown. | Para escolher quais seções ler. |
/tokens.json | Tokens no formato W3C Design Tokens (DTCG), com os 3 temas. | Para valores exatos e leitura programática. |
/tokens.css | Variáveis CSS --midas-* dos 3 temas. | Para copiar para o projeto e usar com var(--midas-...). |
/ai.txt | Cópia do llms.txt em outro caminho convencional. | Se /llms.txt não estiver acessível. |
/.well-known/llms.txt | Cópia do llms.txt no caminho .well-known. | Descoberta automática por ferramentas. |
/sitemap.xml | Mapa do site, incluindo os arquivos para IA. | Para rastreadores. |
Uma doc por seção
| Seção | O que tem | Quando ler |
|---|---|---|
/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. |
/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. |
/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. |
/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. |
/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. |
/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. |
/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. |
/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. |
/docs/sombras.md | Elevação (5 níveis), foco, materiais (glass, frosted, sheen) e blur. | Para elevação, foco, vidro/frosted e blur. |
/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. |
/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. |
/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. |
Regras dos tokens
- Primitive → Theme → Componente. Componentes só consomem tokens do Theme. Primitivos ficam ocultos e não são usados em componentes.
- Nenhuma cor nova. Para resolver contraste, troque o passo da paleta existente no token semântico; nunca crie hex novo nem aplique cor solta no componente.
- Tema é contexto, não variante. Light, Dark e Dark Blue são modes da collection Theme, aplicados no frame. Não existem componentes /Dark.
- Texto ≥ 4,5:1 e limites de controle/foco ≥ 3:1 em todos os temas. content/disabled é isento, mas disabled nunca é o único sinal.
- Status têm pares completos: subtle (fundo), border, content (texto), fill (sólido) e on-fill (texto sobre o sólido). Fill não é cor de texto.
- Seleção usa a família Cyan (selection/*). Foco usa o halo focus/halo (Cyan translúcido) e, em campos, a borda focus/ring (≥ 3:1). Foco tem prioridade sobre hover. Disabled não tem hover.
- Overlays (dropdown, popover, combobox, date picker, tooltip, menus) usam overlay/surface + overlay/border + elevation/overlay e sempre aparecem um nível acima da superfície em que abriram.
- Cyan é a cor da marca: brand/* (destaques, ilustrações) e action/accent/* (ações de destaque). Sky é apoio (gráficos). Informação usa status/info (Blue), separado da marca.
Regras da marca
- Use o logo oficial em
/brand/; escolha a variação pelo fundo (padrão e P&B em fundo claro, negativa e stamp em fundo escuro). - Área de respiro mínima de 1X (X é a altura do símbolo) e tamanho mínimo de 32 px (horizontal) ou 24 px (compacto) no digital.
- Não estique, não gire, não recolora, não aplique sombra, glow ou gradiente, e não troque o tom do acento ciano.
- Detalhes:
/docs/marca.md.
Como consumir
Copie /tokens.css para o projeto e use var(--midas-...) (o prefixo é só técnico). Para ferramentas, use /tokens.json. Exemplos de Tailwind v3/v4 em /docs/consumir.md.