Midas

O Midas é o design system da T2 Educação em forma de biblioteca React. Um único pacote traz:

• Componentes React acessíveis (baseados em Radix UI), prontos para Next.js.
• Tokens de design (cores, fontes, raios, motion) como variáveis CSS, com tema claro e escuro.
• Ícones Phosphor, a biblioteca de ícones oficial do Midas.

npm install @t2-educacao/midas

import { Button } from "@t2-educacao/midas";
import { ArrowRight } from "@t2-educacao/midas/icons";

export function Cta() {
  return (
    <Button size="lg">
      Começar agora <ArrowRight />
    </Button>
  );
}

PrincípiosCopy Anchor Link

1. Instala uma vez, tem tudo. Um pacote, uma versão, um changelog.
2. Só paga pelo que usa. Cada componente é um arquivo separado no build (tree-shaking). Importar Button não traz o resto.
3. Padronizado, mas ajustável. Todo componente aceita className (mesclado sem conflito), variantes (variant, size) e asChild.
4. Tokens, nunca valores soltos. Use bg-primary, text-muted-foreground, rounded-md. Nunca #0097D9 ou bg-[#...].
5. Documentado para humanos e IA. Cada componente tem um .md dentro do pacote (node_modules/@t2-educacao/midas/docs).

Próximos passosCopy Anchor Link

• Instalação: configurar em Next 16 (Tailwind v4) ou Next 14 (Tailwind v3).
• Tema e tokens: claro/escuro e a lista de tokens.
• Customização: className, variantes e asChild.
• Ícones: Phosphor pelo Midas.
• Guia para agentes de IA: regras para Claude/Cursor/Copilot gerarem UI com o Midas.

CompatibilidadeCopy Anchor Link

Status: 0.x, publicado no npm como @t2-educacao/midas. Enquanto estiver em 0.x, uma versão minor pode trazer mudança de API: leia o CHANGELOG antes de atualizar. Site com exemplos ao vivo: https://midas.t2.com.br