Foundation

Design System

Fonte única de verdade para todos os apps eWorks: e.chat, e.dash, e.knowledge, e.identity, e.agent, e.gateway, e.audit, e.brain e e.blog.

v0.1.0@eworks/design-system

Tokens

Cada token tem valor claro e escuro. Nunca use cores fixas em componentes.

brand.blue

Claro: #0084C1
Escuro: #0084C1

Links, foco, gráficos primários.

brand.lime

Claro: #C2D201
Escuro: #C2D201

Ação principal e destaques.

background

Claro: #FFFFFF
Escuro: #292929

Fundo da página.

foreground

Claro: #292929
Escuro: #FFFFFF

Texto principal.

sidebar

Claro: #292929
Escuro: #292929

Fundo do AppShell (sempre escuro).

sidebar-foreground

Claro: #FFFFFF
Escuro: #FFFFFF

Texto e ícones da sidebar.

sidebar-accent

Claro: #3D3D3D
Escuro: #3D3D3D

Item ativo / hover.

sidebar-border

Claro: rgba(255,255,255,.14)
Escuro: rgba(255,255,255,.14)

Divisores de grupo.

sidebar-primary

Claro: #C2D201
Escuro: #C2D201

Ação principal da sidebar.

sidebar-ring

Claro: #C2D201
Escuro: #C2D201

Anel de foco por teclado.

success

Claro: #1E9E5A
Escuro: #35C97C

Confirmações e estados saudáveis.

warning

Claro: #C98A00
Escuro: #F0B429

Alertas não bloqueantes.

error

Claro: #D33A2C
Escuro: #F0574A

Falhas e ações destrutivas.

info

Claro: #0084C1
Escuro: #3BA9DC

Mensagens informativas.

Tipografia

Murecho em toda a plataforma, com escala e pesos fixos.

Murecho

weights: 300 · 400 · 500 · 600

fallback: ui-sans-serif, system-ui, sans-serif

xs12px / 16px · 400
sm14px / 20px · 400
base16px / 24px · 300
lg18px / 28px · 300
xl20px / 28px · 600
2xl24px / 32px · 600
3xl30px / 36px · 600
4xl36px / 40px · 600

Exemplo visual

Eyebrow

Heading one

Corpo de texto em peso 300, com altura de linha confortável para leitura longa em telas densas.

Legenda — metadados e notas.

AppShell

Estrutura padrão de navegação de todos os apps autenticados.

┌──────────────────────────────┬─────────────────────────────┐
│  e.works ▸ app      [ « ]    │                             │
├──────────────────────────────┤   content area              │
│  [ + Primary action      ]   │   max-w 1152px · p-24px     │
├──────────────────────────────┤                             │
│  GROUP A                     │                             │
│   ▸ item                     │                             │
│   ▸ item            (scroll) │                             │
│  GROUP B                     │                             │
│   ▸ item                     │                             │
├──────────────────────────────┤                             │
│  Settings · Docs · Support   │                             │
├──────────────────────────────┤                             │
│  ( CS )  Cesar  ▸            │                             │
└──────────────────────────────┴─────────────────────────────┘

Regras

A sidebar é escura nos dois temas — claro e escuro.
Somente tokens semânticos; nenhuma cor fixa em componentes.
Ícones exclusivamente da biblioteca lucide-react.
Colapsar e expandir a sidebar é obrigatório, com estado persistido.
Sidebar redimensionável por arraste, com largura persistida.
No mobile, a navegação vira um Sheet lateral.
Ordem fixa: marca, colapso, ação principal, listas agrupadas, navegação secundária, chip do usuário.

Padrões de página

Cinco arquétipos cobrem todas as telas da plataforma.

Página shell

AppShell + conteúdo. Base de qualquer app autenticado. Sidebar fixa e área de conteúdo rolável.

grid: 280px / 1fr · sidebar dark · content bg-background

Página de lista

Cabeçalho com título e ação, filtros e tabela ou grid de cards. Estados vazio e de carregamento obrigatórios.

gap-6 · card radius-sm · border-border · py-8

Página de detalhe

Breadcrumb, título, metadados e abas. Painel lateral opcional para ações e histórico.

grid: 1fr 320px · sticky header · py-8

Página de configurações

Navegação secundária à esquerda e formulários em seções. Salvar por seção, nunca global.

max-w 768px · section gap-10 · label text-sm

Landing page

Bandas alternadas claro/escuro, hero com eyebrow e H1, CTA lime. Sem AppShell.

max-w 1152px · px-24px · py 80/112px

Uso para desenvolvedores

Instale o pacote e monte o shell em minutos.

npm install @eworks/design-system

import { AppShell, SidebarGroup, SidebarItem } from "@eworks/design-system";
import { MessageSquare, Settings } from "lucide-react";

export function App() {
  return (
    <AppShell
      appName="e.chat"
      primaryAction={{ label: "New chat", onClick: startChat }}
      user={{ name: user.name, email: user.email, avatarUrl: user.picture }}
      footerNav={[{ label: "Settings", icon: Settings, to: "/settings" }]}
    >
      <SidebarGroup label="Conversations">
        <SidebarItem icon={MessageSquare} to="/c/1">Onboarding</SidebarItem>
      </SidebarGroup>
    </AppShell>
  );
}

Status

v0.1.0@eworks/design-system

Todos os novos aplicativos eWorks devem seguir esta referência.

Os apps existentes serão migrados para o pacote compartilhado @eworks/design-system. Mudanças de token exigem nova versão do pacote.

Repositório do pacote Site de documentação Guia de marca