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

:root e .dark do index.css

css

:root {
  --background: 260 30% 98%;
  --foreground: 240 10% 10%;
  --card: 0 0% 100%;
  --card-foreground: 240 10% 10%;
  --popover: 0 0% 100%;
  --popover-foreground: 240 10% 10%;
  --primary: 263 70% 58%;
  --primary-foreground: 0 0% 100%;
  --secondary: 260 30% 96%;
  --secondary-foreground: 240 10% 10%;
  --muted: 260 20% 95%;
  --muted-foreground: 240 5% 46%;
  --accent: 263 60% 94%;
  --accent-foreground: 263 70% 40%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;
  --border: 260 15% 90%;
  --input: 260 15% 90%;
  --ring: 263 70% 58%;
  --radius: 1rem;
  --status-ok: 160 84% 39%;
  --status-atencao: 38 92% 50%;
  --status-critico: 0 84% 60%;
  --status-destaque: 263 70% 58%;
  --chart-1: 263 70% 58%;
  --chart-2: 160 84% 39%;
  --chart-3: 38 92% 50%;
  --chart-4: 0 84% 60%;
  --chart-5: 210 60% 50%;
}

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

tailwind.config.ts

export default {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Plus Jakarta Sans', '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))',
        },
      },
      borderRadius: {
        lg: 'var(--radius)',
        md: 'calc(var(--radius) - 4px)',
        sm: 'calc(var(--radius) - 8px)',
      },
    },
  },
};

@fontsource imports

import '@fontsource/plus-jakarta-sans/400.css';
import '@fontsource/plus-jakarta-sans/500.css';
import '@fontsource/plus-jakarta-sans/600.css';
import '@fontsource/plus-jakarta-sans/700.css';

package.json deps mínimas

json

{
  "dependencies": {
    "@fontsource/plus-jakarta-sans": "^5.x",
    "@radix-ui/react-select": "latest",
    "@radix-ui/react-tabs": "latest",
    "@radix-ui/react-switch": "latest",
    "class-variance-authority": "latest",
    "lucide-react": "latest",
    "sonner": "latest"
  }
}

Checklist de implementação

Ordem sugerida para iniciar qualquer projeto usando o manual.

1. Importar Plus Jakarta Sans 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 o dark mode persistente antes de publicar.

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