# Como consumir

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.

O sistema chega aos projetos por tokens: o arquivo tokens.css (variáveis CSS dos três temas), o tokens.json (W3C DTCG) e a documentação em Markdown para agentes de IA. Tailwind v4 e v3 consomem as mesmas variáveis. Ninguém define cor, fonte ou espaçamento no olho: tudo vem dos tokens.

## Tailwind v4

Projetos com Tailwind v4. Copie o tokens.css para o projeto e exponha as variáveis ao Tailwind com @theme inline; as classes passam a seguir o tema ativo.

**Baixar o tokens.css**

```bash
curl -o src/tokens.css https://design.t2.com.br/tokens.css
```

**app/globals.css**

```css
@import "tailwindcss";
@import "./tokens.css";

@theme inline {
  --font-sans: var(--midas-font-sans);
  --font-mono: var(--midas-font-mono);
  --color-canvas: var(--midas-surface-canvas);
  --color-surface: var(--midas-surface-default);
  --color-muted: var(--midas-surface-muted);
  --color-foreground: var(--midas-content-primary);
  --color-foreground-muted: var(--midas-content-secondary);
  --color-border-subtle: var(--midas-border-subtle);
  --color-accent: var(--midas-action-accent-bg);
  --color-on-accent: var(--midas-action-accent-content);
  --radius-control: var(--midas-radius-role-control);
  --radius-container: var(--midas-radius-role-container);
  --shadow-card: var(--midas-elevation-card);
}
```

**Usar e trocar de tema**

```html
<html lang="pt-BR" data-theme="dark-blue">
<body class="bg-canvas text-foreground font-sans">
  <button class="bg-accent text-on-accent rounded-control h-(--midas-size-control-lg) px-4">
    Continuar
  </button>
</body>
```

## Tailwind v3

Projetos com Tailwind v3 (hub). Importe o tokens.css no CSS global e aponte o theme.extend para as variáveis --midas-*.

**styles/globals.css (antes das diretivas @tailwind)**

```css
@import "./tokens.css";

@tailwind base;
@tailwind components;
@tailwind utilities;
```

**tailwind.config.js**

```js
module.exports = {
  content: ["./app/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}"],
  theme: {
    extend: {
      fontFamily: {
        sans: ["var(--midas-font-sans)"],
        mono: ["var(--midas-font-mono)"],
      },
      colors: {
        canvas: "var(--midas-surface-canvas)",
        surface: "var(--midas-surface-default)",
        muted: "var(--midas-surface-muted)",
        foreground: "var(--midas-content-primary)",
        "foreground-muted": "var(--midas-content-secondary)",
        "border-subtle": "var(--midas-border-subtle)",
        accent: "var(--midas-action-accent-bg)",
        "on-accent": "var(--midas-action-accent-content)",
      },
      borderRadius: {
        control: "var(--midas-radius-role-control)",
        container: "var(--midas-radius-role-container)",
      },
      boxShadow: {
        card: "var(--midas-elevation-card)",
      },
    },
  },
};
```

## CSS puro

Para HTML estático, mocks e materiais. O arquivo tokens.css traz os três temas; o tema é escolhido por data-theme em qualquer elemento.

**Importar**

```html
<link rel="stylesheet" href="https://design.t2.com.br/tokens.css">
<html lang="pt-BR" data-theme="dark-blue">
```

**Usar as variáveis**

```css
.card {
  background: var(--midas-surface-default);
  color: var(--midas-content-primary);
  border: 1px solid var(--midas-border-subtle);
  border-radius: var(--midas-radius-role-container);
  box-shadow: var(--midas-elevation-card);
  padding: var(--midas-space-24);
}

.card h2 {
  font: var(--midas-text-heading-md);
}

.cta {
  background: var(--midas-action-accent-bg);
  color: var(--midas-action-accent-content);
  height: var(--midas-size-control-lg);
  border-radius: var(--midas-radius-role-control);
  font: var(--midas-text-label-md);
}

.cta:focus-visible {
  border-color: var(--midas-selection-border);
  box-shadow: var(--midas-effect-focus-ring);
  outline: none;
}
```

**Tailwind v4 com tokens avulsos**

```css
<div class="bg-(--midas-surface-default) text-(--midas-content-primary) rounded-(--midas-radius-role-container)">...</div>
```

## Fontes

Geist (principal) e JetBrains Mono (técnica). Carregue as duas; a mono só para código, IDs, valores e overlines.

**Google Fonts**

```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
```

**Variáveis**

```css
:root {
  --midas-font-sans: "Geist", Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --midas-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
```

## JSON (DTCG) e Python

tokens.json segue o formato W3C Design Tokens ($type e $value), com os três temas em $extensions.mode. Serve para Style Dictionary, geradores de PDF e qualquer script.

**Trecho de tokens.json**

```json
{
  "color": {
    "surface": {
      "canvas": {
        "$type": "color",
        "$value": "{primitive.color.slate.50}",
        "$description": "Fundo da página/aplicação. Camada mais baixa.",
        "$extensions": {
          "mode": {
            "Light": "{primitive.color.slate.50}",
            "Dark": "{primitive.color.neutral.950}",
            "Dark Blue": "{primitive.color.slate.950}"
          }
        }
      }
    }
  }
}
```

**Python (gerador de PDF, scripts)**

```python
import json
from urllib.request import urlopen

tokens = json.load(urlopen("https://design.t2.com.br/tokens.json"))

canvas = tokens["color"]["surface"]["canvas"]["$extensions"]["com.t2.midas"]["resolved"]
dark_blue = canvas["Dark Blue"]
brand = tokens["color"]["brand"]["primary"]["$extensions"]["com.t2.midas"]["resolved"]["Light"]
```

## Para IA

Arquivos pensados para agentes de IA. Leia nesta ordem e prefira os tokens semânticos a qualquer cor ou medida solta.

**Onde ler**

```text
https://design.t2.com.br/llms.txt          índice curto, com links
https://design.t2.com.br/llms-full.txt     tudo em um arquivo Markdown
https://design.t2.com.br/docs/<secao>.md   uma página por seção (cores, tipografia, grid...)
https://design.t2.com.br/tokens.json       tokens em DTCG, com os 3 temas
https://design.t2.com.br/tokens.css        variáveis CSS --midas-* dos 3 temas
```

**Regras para o agente**

```text
1. Cores: só tokens semânticos (surface/*, content/*, action/*...). Nunca hex solto nem paleta primitiva em componente.
2. Tema é contexto: troque data-theme (light, dark, dark-blue); não crie variantes /dark.
3. Tamanhos: espaçamento só com space/*; altura de controle só com size/control/*.
4. Texto precisa de contraste >= 4,5:1; bordas de controle e foco >= 3:1.
5. Raio por função: control, container, overlay, pill. Elevação por nível: control, card, raised, overlay, modal.
6. Geist para a interface; JetBrains Mono só para código, IDs, valores e overlines.
```