Maggium — Exportar Tokens

Escolha um Tema — Cobre ou Bege

1.Escolha um tema abaixo — Cobre ou Bege.

2.Clique em Copiar CSS para copiar o bloco completo de variáveis.

3.Cole no arquivo index.css (ou globals.css) do seu projeto.

4.Todos os componentes shadcn/ui adotarão automaticamente o visual Maggium.

Compatível com Tailwind CSS v3 + v4, shadcn/ui e Lovable. Valores em hex/rgba puros — sem dependência de oklch.

Tema CobreDark Cockpit Edition

Acento

#D4651D

Superfície

#0A0514

Texto

#F2F2F2

Borda

#F2F2F214

Cobre — Variáveis CSS

/* Maggium Design System — Cobre (Dark Cockpit) */
/* Cole no index.css do seu projeto Tailwind + shadcn/ui */

@layer base {
  :root {
    /* Paleta */
    --background: #050208;
    --foreground: #F2F2F2;
    --primary: #D4651D;
    --primary-foreground: #050208;
    --card: #0A0514;
    --card-foreground: #F2F2F2;
    --popover: #0A0514;
    --popover-foreground: #F2F2F2;
    --secondary: #120820;
    --secondary-foreground: #F2F2F2;
    --muted: #0D0812;
    --muted-foreground: rgba(184, 168, 200, 0.4);
    --accent: rgba(212, 101, 29, 0.1);
    --accent-foreground: #D4651D;
    --destructive: #EF4444;
    --destructive-foreground: #FFFFFF;
    --border: rgba(242, 242, 242, 0.08);
    --input: rgba(184, 168, 200, 0.15);
    --ring: rgba(212, 101, 29, 0.4);
    --radius: 0.5rem;

    /* Paleta Extendida */
    --surface: #0A0514;
    --surface-alt: #120820;
    --dim: rgba(184, 168, 200, 0.4);
    --copper: #D4651D;
    --beige: #DBBFA9;
    --error: #EF4444;
    --warning: #F59E0B;

    /* Pilha Tipográfica */
    --font-sans: "Urbanist", "Inter", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", "Space Mono", monospace;

    /* Motion */
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
    --ease-decel: cubic-bezier(0, 0, 0.2, 1);
  }
}

Tema BegeWarm Elegance Edition

Acento

#DBBFA9

Superfície

#121015

Texto

#F4F4F4

Borda

#FFFFFF17

Bege — Variáveis CSS

/* Maggium Design System — Bege (Warm Elegance) */
/* Cole no index.css do seu projeto Tailwind + shadcn/ui */

@layer base {
  :root {
    /* Paleta */
    --background: #09090C;
    --foreground: #F4F4F4;
    --primary: #DBBFA9;
    --primary-foreground: #121015;
    --card: #121015;
    --card-foreground: #F4F4F4;
    --popover: #121015;
    --popover-foreground: #F4F4F4;
    --secondary: #1A161E;
    --secondary-foreground: #F4F4F4;
    --muted: #16131A;
    --muted-foreground: rgba(244, 244, 244, 0.52);
    --accent: rgba(219, 191, 169, 0.1);
    --accent-foreground: #DBBFA9;
    --destructive: #EF4444;
    --destructive-foreground: #FFFFFF;
    --border: rgba(255, 255, 255, 0.09);
    --input: rgba(255, 255, 255, 0.12);
    --ring: rgba(219, 191, 169, 0.4);
    --radius: 0.5rem;

    /* Paleta Extendida */
    --surface: #121015;
    --surface-alt: #1A161E;
    --dim: rgba(244, 244, 244, 0.52);
    --copper: #B36F3E;
    --beige: #DBBFA9;
    --error: #EF4444;
    --warning: #F59E0B;

    /* Pilha Tipográfica */
    --font-sans: "Urbanist", "Inter", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", "Space Mono", monospace;

    /* Motion */
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
    --ease-decel: cubic-bezier(0, 0, 0.2, 1);
  }
}