Tokens

Exportações

Os tokens do sistema em três formatos. Copie e cole no seu projeto e o design system está pronto para usar.

Formatos disponíveis

:root {
  /* Brand, Carapeto Mint (#00E6AF) */
  --brand-500: #00E6AF;
  --brand-600: #00C398;

  /* Surfaces (escuro por padrão) */
  --background: oklch(0.07 0.008 200);
  --card:       oklch(0.145 0.01 200);
  --popover:    oklch(0.16 0.01 200);
  --sidebar:    oklch(0.055 0.008 200);

  /* Semantic */
  --primary:  #00E6AF;
  --success:  #00E6AF;
  --warning:  oklch(0.78 0.16  85);
  --danger:   oklch(0.62 0.22  25);
  --info:     oklch(0.70 0.17 240);

  /* Radius */
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  /* Elevation */
  --shadow-e2:   0 4px 12px -2px rgb(0 0 0 / 0.5);
  --shadow-e3:   0 12px 32px -8px rgb(0 0 0 / 0.6);
  --shadow-glow: 0 0 40px rgb(0 230 175 / 0.35);

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
}

Assets & recursos

Logos SVG

Mestre, sub-marcas, símbolo isolado.

Favicons

16, 32, 180 (Apple touch), 192, 512 (PWA).

Fontes

Anton + Antonio + Outfit (Google Fonts) e JetBrains Mono.

Ícones

Lucide Icons, mais de 1000 ícones outlined.

Como usar

1. Carregue as fontes com um <link> para o Google Fonts (Anton, Antonio, Outfit) e instale JetBrains Mono via @fontsource-variable/jetbrains-mono.

2. Cole o bloco de CSS Variables no seu globals.css.

3. Configure Tailwind v4 com @theme inline para mapear as variáveis a classes utilitárias.

4. Use bg-primary, text-foreground, shadow-glow. Nunca cores hardcoded.