Referência viva
Design System
Terminal Paper — os tokens e componentes reais em uso no Labfy. Documentação completa em DESIGN_SYSTEM.md.
Tipografia
Títulos
Geist Mono em tudo — a escala real usada nas páginas do produto.
Heading 1 — hero
Heading 2 — seção
Heading 3 — subseção
Label CLI — status / metadado
Paleta
Cores
Base quase monocromática (preto + paper) com acentos semânticos de status.
Paper
#F5F5F0
Ink
#383838
Card
#FFFFFF
Border
#C2C0B6
Ink muted
#5A5A5A
Preto (painel)
#000000
Pending
--st-pending
Running
--st-running
Secure / Sucesso
--st-secure
Vulnerable / Alerta
--st-vulnerable
Exposed / Erro
--st-exposed
Ações
Botões
Padrão neutro é borda fina (outline). Cor sólida só para ações semânticas — sucesso, erro, alerta.
Default = ink sólido (ação principal). Sucesso/Erro/Alerta usam os tokens de status (--st-secure, --st-exposed, --st-vulnerable) — nunca cor decorativa aleatória.
Dados
Tabela
Bordas finas, header uppercase discreto, badges de status semânticas.
| Fatura | Membro | Status | Valor |
|---|---|---|---|
| INV001 | [email protected] | Pago | R$ 250,00 |
| INV002 | [email protected] | Em breve | R$ 150,00 |
| INV003 | [email protected] | Ativo | R$ 350,00 |
| INV004 | [email protected] | Falhou | R$ 0,00 |
Dados
Gráfico
Recharts via shadcn/ui chart, cores puxadas dos tokens de status.
Identidade
Avatar
Tamanhos, indicador de status e agrupamento — base para perfil, comunidade e comentários.
Comunidade
Membros & comentários
Card de membro (diretório) e thread de comentários aninhada.
Alguém já testou o novo fluxo de OTP em produção? Achei o código bem mais rápido de digitar que um magic link.
Testei sim — chegou em menos de 5s pelo Resend. Só senti falta de reenviar sem trocar de tela.
Boa observação, já tem um botão de reenviar na tela de código 🙂
Conteúdo
Blog
Card de artigo, breadcrumb e paginação.
Marketplace
Skills de IA
Card de skill publicada pela comunidade, filtro por categoria e formulário de criação.
Conta
Perfil
Header com banner, avatar grande e abas para organizar posts/skills/atividade.
calney
Fundador do Labfy — laboratório de produtos e conteúdo técnico.
Conhecimento
Visão em grafo
React Flow (@xyflow/react), nós flutuantes ligados por linha reta — estilo Obsidian, sem fluxograma.
Arraste os nós, dê zoom — a linha recalcula a interseção com a borda do círculo em tempo real (src/app/design-system/graph/geometry.ts), sem handles fixos de fluxograma. Tamanho do nó = quão conectado ele é na rede.