Design System Preview

Biblioteca de tokens, temas e componentes do ecossistema Neurobox. Selecione um tema acima para visualizar a identidade de cada projeto.

🎯 Catálogo de Logos

Catálogo interativo com todos os logos TSX reais, controle de tamanho,
tema claro/escuro e inspetor de código.

🌐 Abrir Online


              npx serve design-system

⚠️ O catálogo de logos requer servidor HTTP (fetch de .tsx é bloqueado em file://).
• Local: npx --yes serve design-system → http://localhost:3000/components/logos/index.html
• Online: neurobox-design-system.pages.dev/components/logos/index.html

🏷️ Identidade Visual por Projeto

Cada projeto do ecossistema tem seu próprio tema CSS com paleta de cores exclusiva. Clique em um card para aplicar o tema.

Neurobox

Gateway Institucional + Landing Page
→ 00-Neurobox

Cyan → Pink

NeuroBRAIN

Motor Cognitivo do Ecossistema
→ 01-NEUROBOX_PLATFORM/02-NeuroBrain

Purple → Cyan

NeuroLINK

MCP Server & Dashboard de Conexões
→ 01-NEUROBOX_PLATFORM/06-NeuroLINK

Cyan → Purple

NeuroCOS

Sistema Operacional na Nuvem
→ 01-NEUROBOX_PLATFORM/03-NeuroCOS_Nuvem

Fuchsia → Pink

NeuroMenu

Food Service / Cardápios Edge
→ 02-NEUROBOX_SAAS/NeuroMenu

Orange → Amber

NeuroCart

E-commerce Headless Engine
→ 02-NEUROBOX_SAAS/NeuroCart

Pink → Orange

NeuroCreators

Suíte de Mídia / DAW / NLE
→ 02-NEUROBOX_SAAS/NeuroCreators

Purple → Pink

NeuroStudio

Canvas Hub & Automação de Criativos
→ 02-NEUROBOX_SAAS/NeuroStudio

Pink → Purple

NeuroAcademy

Portal de Treinamentos / LMS
→ 04-NEUROBOX_ACADEMY

Amber → Red

Isobox

Roteirização 3D / Motor Isométrico
→ 02-NEUROBOX_SAAS/Isobox

Emerald → Cyan

NeuroGO

Transporte Programado / Logística
→ 02-NEUROBOX_SAAS/NeuroGo

Cyan → Blue

Cores da Marca

Primary

Light

Dark

Secondary

Secondary Dark

--bg

--bg-surface

--bg-card

Gradiente da Marca

--theme-gradient

Tipografia

Outfit Black 900

Plus Jakarta Sans Bold 700

Plus Jakarta Sans Regular — O ecossistema Neurobox está crescendo.

--font-mono: JetBrains Mono · const neurobox = { theme: "var(--theme-primary)" };

Botões

Cards

Basic (Blur)

fundo rgba(13,12,22,0.6) + backdrop blur 20px

Glass

fundo rgba(255,255,255,0.03) + blur 40px

Elevated

Sombra profunda 0 20px 40px rgba(0,0,0,0.6)

Cyan

Tonalidade da marca primary

Pink

Tonalidade da marca secondary

Gradient

Gradiente sutio cyan → purple

Inputs

Default Input

With Error

Email inválido

With Success

Email válido

With Icon

🔍

Pressione Enter para buscar

Badges

Cyan Badge Pink Badge Purple Badge Online ⚠️ Warning ❌ Error Solid

Spacing

Token	Valor	Exemplo
--space-1	4px
--space-2	8px
--space-3	12px
--space-4	16px
--space-6	24px
--space-8	32px

Sombras & Glows

--shadow-sm

--shadow

--shadow-lg

--glow-cyan

--glow-pink

--glow-purple

Dashboard Preview

Receita

R$ 42.500

↑ 12.5%

Usuários

1.284

↑ 8.3%

Requests

89.2K

→ 0%

Projeto	Status	Uptime
Neurobox Gateway	Online	99.9%
NeuroBRAIN Engine	Online	99.7%
NeuroLINK Server	⚠️ Degraded	89.2%