Nexo UIDesign System
OP7Nexo Design System v1.0

Nexo UI

Design system flat shadcn/ui com a identidade OP7 — #006EFF como ação, navy como estrutura.

🎨 Paleta de Cores

Cores oficiais do gradiente primário (#006EFF → #000533) e secundário (#c80010 → #ff6332)

Primárias

Primary#006EFF
Navy#00214d
Navy Escuro#000533
Destructive#c80010

Neutros (Light)

Background#f4f4f5
Surface#ffffff
Text#37352f
Text Secondary#9b9a97
Border#e9e9e7

Gradientes

Gradiente Primário #006EFF → #000533
Gradiente Urgência #c80010 → #ff6332

🔤 Tipografia

Inter — a fonte principal do sistema

Micro 11px — timestamps

Label 12px — help text

Body 14px — padrão do sistema

Base 16px — parágrafos

Subtitle 18px — subtítulo

KPI 20px — valores

Page Title 24px

Section Title 30px

Pesos:

400 — Corpo, conteúdo de tabela

500 — Labels, botões, cabeçalho

600 — Títulos de seção

// Inter via next/font/google
const inter = Inter({
  subsets: ['latin'],
  variable: '--font-sans',
})

🔘 Botões

5 variantes × 4 tamanhos × estados

Variantes

Tamanhos

Estados

<Button variant="default" size="default">Primary</Button>
<Button variant="outline">Outline</Button>
<Button variant="destructive">Excluir</Button>
<Button variant="ghost" size="icon-sm"><X /></Button>

🏷️ Badges

Variantes de badge

DefaultSecondaryDestructiveOutlineUrgente
<Badge>Default</Badge>
<Badge variant="destructive">Erro</Badge>
<Badge className="bg-gradient-urgent text-white">Urgente</Badge>

🗂️ Cards

Superfícies flat — bg-card + shadow-sm + 1px border

Card Padrão
Com header, body e footer

Conteúdo do card. Espaçamento segue o padding md (16px).

Receita

R$ 45.200

+12% vs mês anterior

Usuários Ativos

12.450

+8% vs mês anterior

<Card>
  <CardHeader><CardTitle>Título</CardTitle></CardHeader>
  <CardContent>Conteúdo</CardContent>
  <CardFooter>Ações</CardFooter>
</Card>

📋 Modais

Dialog shadcn com tamanhos predefinidos

<Dialog>
  <DialogContent className="sm:max-w-[500px]">
    <DialogHeader>...</DialogHeader>
    <div>form</div>
    <DialogFooter>Ações</DialogFooter>
  </DialogContent>
</Dialog>

/* Tamanhos: sm:400 | default:500 | lg:700 | xl:900 */

📝 Formulários

Input, Textarea, Select, Switch

Formulário de Exemplo

Apenas Input

📑 Tabs

Navegação entre seções

Conteúdo da aba Geral

👤 Avatar

Fotos e iniciais

RCRMOP

📌 Select

Dropdown de seleção

🔀 Switch

Toggle liga/desliga

📊 Progresso

Barra de progresso

x

💡 Tooltip

Dica ao passar o mouse

🦴 Skeleton

Loading state