Sistema de marca e design
Assets de logo, paleta de cores, tipografia, tokens de movimento, biblioteca de componentes e regras de uso do Golan. A referência completa para designers e engenheiros.
Logo
O sistema combina o Particle Inference Core e o wordmark GOLAN, com versões próprias para campos claros e escuros.
O símbolo representa evidências dispersas que se resolvem em uma estrutura de inferência. Use a versão estrutural como favicon, ícone do app ou sempre que o wordmark completo não'for prático. Nunca estique, gire ou recolora.
Colors
Preto e branco são a base. Cada tema de UI combina a base neutra com exatamente uma cor de destaque. O espaço de cores OKLCH garante uniformidade perceptual em todos os temas.
Foundation
Paleta principal
globals.css · :root / .dark
Typography
Roobert: uma sans-serif geométrica. Font-medium (500) é o peso da marca. Roobert Mono para código e dados.
Golan Computer
Golan Computer
const agent = new Golan();
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Escala tipográfica
Motion
Tokens padronizados de duração e easing garantem que cada transição pareça consistente. Clique nos rótulos para acionar a animação.
Escala de duração
Curvas de easing
Spacing
Uma escala de espaçamento consistente baseada em incrementos de 4px. Usada para padding, margens e gaps em toda a UI.
Shadows
Tokens de elevação sutis para superfícies flutuantes. A maior parte do cromo dos aplicativos permanece plana – use sombras apenas quando a profundidade ajudar na hierarquia. Nunca adicione cores, box-shadow values.
--shadow-2xs
Hairline lift — inputs, thumbnails
--shadow-xs
Chips, slider thumbs, glass panels
--shadow-sm
Tabs, sticky bars, hover lift
--shadow-md
Dropdowns, selects, popovers
--shadow-lg
Modals, sheets, toasts
--shadow-xl
Command palette, floating windows
--shadow-2xl
Marketing, large previews
Components
A biblioteca completa de componentes. Cada componente usa uma API consistente com props de variante e tamanho gerenciadas por class-variance-authority. Construída sobre primitives do Radix UI para acessibilidade e composabilidade.
Badge
Rótulos, indicadores de status e tags. Sete variantes, de sólidas a sutis.
Cores sólidas
Variantes base
Status semântico
Sizes
Com ícones
Card
Contêiner com slots para cabeçalho, conteúdo e rodapé. Variantes padrão e glass (translúcida, sem desfoque).
O conteúdo do card vai aqui. Use para agrupar informações relacionadas.
O conteúdo do card vai aqui. Usado para sobreposições e painéis flutuantes.
Input
Entrada de texto para formulários e busca. O tratamento canônico de controle de formulário - Textarea e Select herdam a mesma superfície bg-card, o anel de foco accent e o formato rounded-2xl.
Textarea
Entrada de texto multilinha para conteúdos mais longos. Compartilha o mesmo tratamento com Input e Select - superfície bg-card, anel de foco accent, rounded-2xl, sem sombra.
Select
Seleção em dropdown a partir de uma lista de opções. Combina com Input e Textarea - mesma superfície bg-card, anel de foco accent e formato rounded-2xl.
Grupo de caixas de seleção
Alternância para valores booleanos.
Switch
Controle de alternância para estados ligado/desligado.
Toggle
Um botão de dois estados com variantes padrão e outline.
Somente ícone
Somente texto
Texto + ícone
Grupo de opções
Seleção única a partir de um conjunto de opções.
Tabs
Navegação por abas com variantes padrão e compacta.
Standard
Configurações da conta e preferências.
Underline
Account settings and preferences.
Compact
Conteúdo da visualização diária.
Dialog
Sobreposição modal para interações focadas.
Modal
Sobreposição responsiva: página inferior no celular, caixa de diálogo centralizada no desktop. Suporta variantes secundárias viaside.
Sheet
Painel deslizante a partir da borda do viewport.
Menu suspenso
Menu contextual acionado por um botão. As linhas permanecem neutral— até as destrutivas, como Excluir ou Remover. O vermelho é o freio, não a pintura: aparece apenas no botão final de confirmação, nunca em uma linha do menu.
Tooltip
Informações contextuais ao passar o cursor.
Popover
Painel de conteúdo flutuante anexado a um acionador.
Alert
Notificação inline com variantes contextuais.
Toast
Notificações efêmeras para resultados e feedback assíncronos. Usar successToast, errorToast, infoToast, warningToasteloadingToast from @/componentes/ui/toast - não são chamadas cruas de filho.
Variants
Promise
Caixa de diálogo de alerta
Caixa de diálogo de confirmação para ações destrutivas ou importantes.
Accordion
Seções de conteúdo recolhíveis com animação suave.
Collapsible
Um primitivo mais simples para expandir/recolher. Diferente de Accordion, ele controla uma única seção sem seleção exclusiva.
Separator
Divisor visual entre seções de conteúdo.
Conteúdo acima
Conteúdo abaixo
Skeleton
Espaço reservado de carregamento para conteúdo que ainda não'foi carregado.
Esqueleto de cartão
Variantes inline
Progress
Indicador visual de conclusão ou carregamento.
Slider
Entrada de intervalo para selecionar valores numéricos.
Label
Rótulo acessível para controles de formulário.
Kbd
Indicadores de atalhos de teclado. Sensíveis ao tema, incluindo estilo automático quando aninhados dentro de tooltips.
Teclas individuais
Grupos de teclas (atalhos)
Nas dicas de ferramentas
Table
Exibição de dados estruturados em linhas e colunas.
| Component | Variants | Status | Instances |
|---|---|---|---|
| Button | 6 | Stable | 624 |
| Badge | 7 | Stable | 189 |
| Card | 2 | Stable | 312 |
| Input | 1 | Enhancing | 247 |
Calendar
Grade de calendário do seletor de data.
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Área de rolagem
Contêiner rolável personalizado com barra de rolagem estilizada.
Padrões de página
Como as páginas de lista / gerenciamento da Golan são construídas. Estas são as peças compartilhadas de chrome usadas por/scheduled-tasks, /tunnel. Novas páginas no estilo de gerenciamento devem compor as mesmas peças na mesma ordem para que todo o app pareça um único produto.
PageHeader
O hero canônico para páginas de lista/gerenciamento. Card arredondado com fundo animado, bloco de ícone centralizado e uma única linha de título em negrito. Sempre renderizado dentro de um wrapper de contêiner commax-w-7xlpadding horizontal.
Tarefas agendadas
<div className="container mx-auto max-w-7xl px-3 sm:px-4 py-3 sm:py-4">
<PageHeader icon={Zap}>
<div className="text-2xl sm:text-3xl md:text-4xl font-semibold tracking-tight">
<span className="text-primary">Scheduled Tasks</span>
</div>
</PageHeader>
</div>SpotlightCard
Card de item usado em todas as páginas de lista. Destaque radial que segue o mouse no hover, além de um brilho sutil na borda. Envolva combg-card border border-border/50e aplique seu próprio padding interno.
PageSearchBar
Pílula de busca padrão colocada na barra de ações abaixo do PageHeader. Deixe umamax-w-mdlargura para que ela fique ao lado de uma ação primária alinhada à direita sem dominar o espaço.
Montagem escalonada
Cada página de gerenciamento monta suas três zonas com fade + slide escalonados. Cabeçalho na entrada, barra de busca emdelay-75, conteúdo emdelay-150.
// Page header <div className="... animate-in fade-in-0 slide-in-from-bottom-4 duration-500 fill-mode-both"> // Search + action bar <div className="... animate-in fade-in-0 slide-in-from-bottom-4 duration-500 fill-mode-both delay-75"> // Content area <div className="... animate-in fade-in-0 slide-in-from-bottom-4 duration-500 fill-mode-both delay-150">
Primitives
Pequenas peças de composição usadas em páginas de projeto, detalhes de issues e outras superfícies internas estruturadas que não se encaixam no formato hero + lista.
PageShell
O único wrapper de layout. Padroniza largura máxima, padding horizontal e comportamento de rolagem. Quatro presets de largura: leitura (720), padrão (1000), amplo (1280), full.
<PageShell width="default"> … </PageShell>Section
Seção rotulada dentro de uma PageShell. Microrótulo em maiúsculas, ação final opcional, margem superior opinativa entre elementos irmãos. Sem caixa, sem chrome: tipografia e espaço em branco fazem o trabalho.
About
O conteúdo de descrição fica aqui. As seções separam assuntos em uma página sem nunca desenhar um card.
Details
Uma segunda seção com uma ação final.
SectionCard
O único padrão de painel. Compõe o Card do design system (rounded-2xl) e adiciona o cabeçalho dividido de que toda superfície de configurações/lista precisa: título, contagem discreta, descrição, ação final. Useflushpara posicionar uma List de ponta a ponta, e tone="destructive"para zonas de perigo, sem componente separado. Uma zona de perigo permanece calma: um painel neutro com uma borda quente bem sutil e umneutralgatilho. Vermelho é o freio, não a tinta: ele aparece apenas na confirmação final (o botão ConfirmDialog), nunca no painel.
Members (2)
Pessoas com acesso a esta conta.
O conteúdo do body fica na região com padding. Passe flushpara remover o padding de uma List.
Zona de perigo
Ações irreversíveis ficam aqui.
Excluir esta conta
Remove permanentemente a conta e todos os seus dados.
Avatars
Uma regra:pessoas são redondas, coisas são quadradas. UserAvatarrenderiza um avatar circular para uma pessoa: a foto de perfil do supabase quando existir; caso contrário, iniciais monocromáticas neutras(sem fundos coloridos).EntityAvatarrenderiza um bloco quadrado arredondado para contas, projetos, grupos e outras entidades que não são pessoas: uma inicial ou um ícone. Ambos compartilham o mesmo material neutro e a mesma escala de tamanho para se alinharem em uma linha.
List & ListRow
A lista padrão. Uma lista separada por divisoresList of ListRows, cada uma com um slot de avatar inicial (UserAvatar para pessoas, EntityAvatar para coisas), um título com badges inline, um subtítulo (uma faixa InlineMeta fica bem legível) e um slot final para badges de status ou um menu kebab. Coloque dentro de um SectionCard alinhado às bordas.
Members (2)
- GHgrace@golan.aiYouEntrou em 3 de mar. de 2026·4 projetosOwner
- ATalan@golan.aiEntrou em 1 de abr. de 2026Member
DefinitionList
Pares chave/valor. Coluna de rótulos com largura fixa para alinhar os valores verticalmente. Divisores opcionais para uma lista de metadados no estilo Linear.
- Path
/workspace/jjk-domain-search- Created
- há 2 dias
- Updated
- há 3 min
- Sessions
- 8
InlineMeta
Fatos separados por pontos. Adicione qualquer número de filhos — valores falsy são ignorados. Usado em cabeçalhos de página, subtítulos de linha e rodapés de cards.
EmptyState
O momento didático e tranquilo. Ícone, título, descrição de uma linha e até duas ações. Usado para telas de estado vazio em todas as listas e páginas de detalhes.
Status (Dot, Badge & DiffStat)
A fonte única da verdade para as cores de “isto significa sucesso / aviso / erro / informação”. Os chips usam Badge, as caixas usamInfoBanner— para os casos que um componente não consegue cobrir (um ponto de atividade ao vivo, um contador diff +/-, um ícone de status isolado), useStatusDot, DiffStatou osSTATUS_TEXT/BG/BORDER maps em vez de reinserir inlinetext-emerald-500.
Use StatusBadgepara status informativo (sutil, incl. vermelho).Badge variant="destructive" é uma pílula vermelha SÓLIDA — reserve-a para ações, não para status.
Anti-Patterns
Padrões de código que violam o design system. Siga estas regras para manter consistência, acessibilidade e performance em toda a base de código.
AP-1: Sem style={} inline para valores fixos
Ignora o sistema de utilitários, não pode ser removido pelo purge, cria problemas de especificidade e fica invisível para auditorias do design system.
<div style={{ height: '14px', overflow: 'hidden' }}>
Content
</div><div className="h-3.5 overflow-hidden"> Content </div>
AP-2: Sem tamanhos de texto arbitrários
Cria tamanhos de texto inconsistentes, sem significado semântico e sem relação com a escala tipográfica legível.
<span className="text-[11px]">Label</span> <span className="text-[13.5px]">Meta</span> <span className="text-[0.875em]">Body</span>
<span className="text-xs">Label</span> <span className="text-xs">Meta</span> <span className="text-sm">Body</span>
AP-3: Sem elementos <button> brutos
Botões brutos ignoram o sistema de variantes, têm tamanho/padding/raio inconsistentes, não garantem anel de foco e não oferecem suporte a estado de carregamento.
<button
className="px-3 py-1.5 rounded-lg
bg-neutral-100 hover:bg-neutral-200"
onClick={handleClick}
>
Save
</button><Button
variant="secondary"
size="sm"
onClick={handleClick}
>
Save
</Button>AP-4: Sem transition-colors
Anima todas as propriedades CSS, incluindo largura, altura e padding. Causa layout thrashing. Acaba com a performance em listas grandes.
<div className="transition-colors duration-200 hover:bg-accent">
<div className="transition-colors duration-moderate hover:bg-accent">
AP-5: Sem cores hexadecimais codificadas diretamente
Ignora completamente o sistema de temas. Vai ficar errado em temas não padrão. Quebra o modo escuro.
<div className="text-emerald-500">
Success
</div>
<div style={{ color: '#3b82f6' }}>
Info
</div><div className="text-success"> Success </div> <div className="text-info"> Info </div>
AP-6: Sem elementos <div> clicáveis
Não é acessível por teclado. Não tem anel de foco. Não é anunciado como interativo por leitores de tela.
<div
onClick={handler}
className="cursor-pointer"
>
Click me
</div><Button
variant="ghost"
onClick={handler}
>
Click me
</Button>Usage
Do
Don't