Copy-paste pronto para novos projetos

Os blocos abaixo concentram o setup mínimo necessário para replicar o Design System uMode com fidelidade visual e sem reinterpretações.

copiar e usar

1. Importar Inter via @fontsource

import '@fontsource/inter/400.css';
import '@fontsource/inter/500.css';
import '@fontsource/inter/600.css';
import '@fontsource/inter/700.css';

2. Variáveis CSS (:root e .dark)

css

:root {
  --background: 0 0% 100%;
  --foreground: 240 10% 10%;
  --card: 0 0% 100%;
  --card-foreground: 240 10% 10%;
  --primary: 271 82% 58%;          /* #973BEB */
  --primary-foreground: 0 0% 100%;
  --secondary: 220 14% 96%;
  --muted: 220 14% 96%;
  --muted-foreground: 220 9% 46%;
  --accent: 257 87% 97%;
  --accent-foreground: 271 60% 40%;
  --destructive: 0 84% 60%;
  --border: 220 13% 91%;
  --input: 220 13% 91%;
  --ring: 271 82% 58%;
  --radius: 0.5rem;
  --status-ok: 160 84% 39%;
  --status-warning: 38 92% 50%;
  --status-critical: 0 84% 60%;
  --status-highlight: 271 82% 58%;
}

.dark {
  --background: 240 10% 6%;
  --foreground: 0 0% 95%;
  --card: 240 10% 9%;
  --primary: 271 82% 62%;
  --secondary: 240 10% 14%;
  --muted: 240 10% 14%;
  --accent: 271 40% 18%;
  --accent-foreground: 271 60% 80%;
  --border: 240 10% 17%;
  --ring: 271 82% 62%;
}

3. tailwind.config.ts (Tailwind v3)

// tailwind.config.ts (Tailwind v3)
export default {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
      colors: {
        border: 'hsl(var(--border))',
        input: 'hsl(var(--input))',
        ring: 'hsl(var(--ring))',
        background: 'hsl(var(--background))',
        foreground: 'hsl(var(--foreground))',
        primary: {
          DEFAULT: 'hsl(var(--primary))',
          foreground: 'hsl(var(--primary-foreground))',
        },
        secondary: {
          DEFAULT: 'hsl(var(--secondary))',
          foreground: 'hsl(var(--secondary-foreground))',
        },
        accent: {
          DEFAULT: 'hsl(var(--accent))',
          foreground: 'hsl(var(--accent-foreground))',
        },
        purple: {
          50: '#f4f0fe', 100: '#f5ebfd', 200: '#e6d0fa',
          300: '#d4aff7', 400: '#c38df3', 500: '#973BEB',
          600: '#a95cee', 700: '#6a29a5', 800: '#4f1e7b',
          900: '#5d28b7', 950: '#401d7c',
        },
      },
      fontSize: { xxs: '0.625rem' },
      borderRadius: {
        lg: 'calc(var(--radius) + 4px)',
        md: 'var(--radius)',
        sm: 'calc(var(--radius) - 4px)',
      },
    },
    screens: {
      tablet: '640px',
      laptop: '1024px',
      desktop: '1368px',
    },
  },
};

4. KpiCard pronto

tsx

<Card className="overflow-hidden border-border/70 bg-card/95">
  <CardContent className="p-6">
    <p className="text-sm text-muted-foreground">Receita processada</p>
    <div className="mt-3 flex items-end justify-between gap-4">
      <span className="text-4xl font-semibold">R$ 148k</span>
      <Badge variant="ok">+12.4%</Badge>
    </div>
  </CardContent>
</Card>

5. Grid responsivo (tablet/laptop/desktop)

tsx

<div className="grid gap-4
  grid-cols-1
  tablet:grid-cols-2
  laptop:grid-cols-3
  desktop:grid-cols-4"
>
  {items.map(item => <Card key={item.id} />)}
</div>

6. Status badges

tsx

<Badge variant="ok">Saudável</Badge>
<Badge variant="warning">Atenção</Badge>
<Badge variant="critical">Crítico</Badge>
<Badge variant="highlight">Destaque</Badge>

package.json deps mínimas

json

{
  "dependencies": {
    "@fontsource/inter": "^5.x",
    "class-variance-authority": "latest",
    "clsx": "latest",
    "lucide-react": "latest",
    "tailwind-merge": "latest",
    "tw-animate-css": "latest"
  }
}

Checklist de implementação

Ordem sugerida para iniciar qualquer projeto usando o manual.

1. Importar Inter em 400, 500, 600 e 700.

2. Colar o bloco CSS com variáveis HSL em :root e .dark.

3. Mapear tokens semânticos no Tailwind/configuração de tema.

4. Aplicar componentes somente com bg-primary, text-foreground etc.

5. Validar dark mode persistente antes de publicar.

6. Reaproveitar snippets de componentes e padrões desta documentação.