Plano Estratégico

Design System
Freelaw

Um manual visual completo para a Freelaw: todas as cores, fontes, botões e regras de interface em um só lugar. Inspirado nas melhores empresas do Vale do Silício (Linear, Stripe, Vercel). O objetivo é que qualquer pessoa — seja desenvolvedor, designer, gestor ou investidor — saiba exatamente como a Freelaw deve parecer e se comportar em tela.

Escopo

Backstage

305 telas no painel admin

Referência

Linear

Minimalista, preciso

Prioridade

Fundações

Cores, fontes, espaçamentos

Introdução

Visão & Princípios

Filosofia e princípios que orientam cada decisão do DS Freelaw. Inspirado no Linear Design System: poucas opções muito bem pensadas, consistência acima de tudo.

Referência: Linear Design System
O Linear (ferramenta de gestão de projetos do Vale do Silício) é referência mundial em design de produto. Sua abordagem: poucas opções muito bem pensadas, priorizar consistência sobre customização, e gerar temas visuais inteiros a partir de apenas 3 escolhas (cor base, cor de destaque, nível de contraste). A Freelaw vai seguir essa mesma filosofia.

Princípios do DS Freelaw

1. Restrição Intencional

Menos opções, melhor resultado. Cada variável, cor e componente deve ter uma única razão de existir. Se não resolve um problema real, não entra no DS.

2. Consistência > Flexibilidade

Componentes opinados que produzem resultado consistente. Não oferecer 10 variantes quando 3 resolvem. Customização é exceção, não regra.

3. Código é a Fonte de Verdade

Tokens vivem no código (@freelaw/ui). Figma e documentação são derivados. Se divergirem, o código vence.

4. Acessível para Todos

Documentação que um PM entende, um designer navega e um dev copia. Sem jargão desnecessário, com exemplos visuais em tudo.

5. Contexto Jurídico Primeiro

Cada decisão de design considera o público: advogados conservadores que valorizam controle, previsibilidade e reputação. Nada flashy.

Introdução

Arquitetura de Variáveis Visuais

Assim como grandes empresas (Salesforce, IBM, Adobe), organizamos as regras visuais em 3 camadas. Cada camada referencia a anterior, facilitando manutenção e garantindo que tudo mude junto quando precisar.

Variáveis de Componente

botao-fundo-primario, campo-borda-erro

Variáveis por Intenção

cor-fundo-interativo, cor-texto-suave, espaco-entre-itens

Variáveis Globais (BrandBook)

roxo-institucional, lilas, off-white, grafite, dourado, cinza

Como funciona cada camada

Nível	Nomeado por	Exemplo	Muda com tema?
Global (BrandBook)	O que É	`--roxo-institucional`	Não
Por Intenção	O que FAZ	`--cor-fundo-primario`	Sim (muda no modo claro/escuro)
De Componente	ONDE é usado	`--botao-fundo-padrao`	Sim (via intenção)

Fundações

Cores

A paleta oficial da Freelaw (BrandBook Dez/2025). Todas as cores permitidas no produto, com regras de quando e como usar cada uma.

Cores Principais

As 3 cores que formam a identidade. Usadas em 90% da interface.

Roxo Institucional

#330066

Onde: Títulos, botões, links, ícones ativos, logo

Sabedoria, autoridade, inovação

--roxo-institucional

Lilás

#A994E6

Onde: Fundos de apoio, hover, bordas de foco, ícone do logo

Inteligência e serenidade

--lilas

Off-White

#F6F5F3

Onde: Fundo geral, fundo de cards, texto sobre escuro

Clareza e equilíbrio

--off-white

Cores de Apoio

Dão profundidade e contraste em momentos específicos.

Grafite

#2C2C34

Onde: Texto de corpo, parágrafos, fundos escuros

Rigor e estabilidade

--grafite

Dourado

#CC9900

Onde: Badges de tier, destaques premium, CTAs secundários

Prestígio e confiança

--dourado

Cinza

#CCCCCC

Onde: Texto secundário, bordas, separadores, placeholders

Sobriedade e precisão

--cinza

Combinações Aprovadas

As únicas combinações fundo + texto permitidas.

Título em Roxo

Corpo em grafite sobre off-white. Combinação padrão para 90% das telas.

Padrão — Uso geral

Título em Off-White

Corpo em lilás sobre roxo. Para headers e banners.

Destaque — Headers

Título em Roxo

Corpo em grafite sobre lilás suave. Para callouts e cards.

Sutil — Callouts

Destaque Dourado

Texto cinza sobre grafite. Para seções premium e rankings.

Premium — Tier

Cores na Prática

Como a paleta se aplica nos componentes reais do produto.

Botões

Primário = Roxo • Secundário = borda Roxo • Ghost = só texto • Destrutivo = Erro • Sucesso = Aprovação

Menu Lateral

Fundo: Roxo
Ativo: Lilás 20% + Off-White
Inativo: Off-White 60%

Formulário

Nome

E-mail

CNPJ

CNPJ incompleto

Cards de KPI

Receita

R$ 245k

▲ 12,3%

Churn

2,1%

▲ 0,3%

NPS

▲ 5 pts

Tabela

Escritório	Plano	MRR	Status
Resende & Associados	Premium	R$ 2.400	Ativo
Silva Advocacia	Essencial	R$ 890	Em risco

Regras de Uso

Correto

✓ Títulos em Roxo, corpo em Grafite

✓ Fundo padrão Off-White

Errado

✗ Inventar cores fora da paleta

✗ Cinza para texto principal (contraste ruim)

✗ Verde/vermelho para decoração

★

Regra de Ouro — Variações de Cor

As 6 cores do BrandBook são as únicas cores padrão do produto. Variações (tints, shades, transparências) existem no sistema de tokens, mas são reservadas para casos muito específicos e bem definidos — estados de interação, sobreposições, disabled — e nunca devem ser usadas como cores de conteúdo ou identidade.

✓ Correto
var(--roxo-institucional)
var(--roxo-hover) /* estado definido */
var(--grafite-disabled) /* variação prevista */

✗ Proibido
rgba(51, 0, 102, 0.6) /* ad-hoc */
#4D0099 /* shade manual */
#330066CC /* hex+alpha */

Variações ad-hoc criam inconsistência visual, dificultam temas (dark mode, alto contraste) e tornam o DS imprevisível. Se uma variação é necessária, ela deve ser formalizada como token antes de ser usada.

Cores Semânticas

Derivadas da paleta base, usadas para comunicar estado e intenção. Não estão no BrandBook, mas são obrigatórias no produto. Use-as apenas para estado real (erro, aviso, sucesso) — nunca para decoração sem significado. Novas cores semânticas devem ser formalizadas como token antes de usar.

Erro / Destrutivo

#8B2252

Onde: Botão excluir, borda de campo inválido, mensagem de erro, asterisco obrigatório

--erro

Aviso

#CC7700

Onde: Callout de atenção, texto de destaque em alertas, badge pendente

--aviso

Sucesso

#4A5A1E

Onde: Badge aprovado, indicador positivo ▲, confirmação de ação

--sucesso

Fundações

Tipografia

Fraunces para títulos, Public Sans para corpo. Duas fontes, regras claras, zero improvisação.

Nossas Fontes

Fonte Principal

Fraunces

AaBbCc

Quando: Títulos, subtítulos, headings, destaques

Serif • Editorial • Google Fonts

Fonte Secundária

Public Sans

AaBbCc

Quando: Corpo, labels, botões, tabelas, formulários

Sans-serif • Neutro • Google Fonts

Hierarquia Tipográfica

Cada nível tem fonte, peso e tamanho definidos.

Título de Página Fraunces 900 • 36px • lh 1.1

Seção Fraunces 700 • 30px • lh 1.1

Subseção Fraunces 600 • 24px • lh 1.3

Título de Cartão Fraunces 600 • 20px • lh 1.3

Texto corrido padrão — parágrafos e descrições com leitura fluida. Public Sans 300 • 16px • lh 1.6

Última atualização: 16 de março de 2026 Public Sans 400 • 14px • lh 1.5

Dados jan–mar 2026 Public Sans 400 • 12px • lh 1.4

Tela de Painel de Gestão

Backstage

Painel de Gestão

Visão geral das métricas de março.

Métricas Principais

MRR

R$ 245.800

Clientes

387

NPS

Atividade Recente

3 novos escritórios hoje. Premium teve 2 upgrades no período.

Modal de Confirmação

Confirmar exclusão

Tem certeza que deseja excluir Resende & Associados? Esta ação não pode ser desfeita.

Estado Vazio

Nenhum relatório

Ainda não há relatórios para este período. Crie o primeiro.

Nunca fazer

Errado

✗ Fraunces para parágrafos longos (prejudica leitura)

✗ Public Sans para títulos de página

✗ Fontes fora do par Fraunces / Public Sans

✗ ALL CAPS — exceto em labels e captions curtos

Hierarquia de Informação na Tela

Para advogados que valorizam controle e previsibilidade, a ordem das informações na tela não é aleatória. Siga sempre esta prioridade.

Status e Prazos

Sempre visível, sem precisar rolar. O advogado precisa saber imediatamente: qual o status? tem prazo vencendo?

Ações Principais

Botões claros e visíveis. O usuário precisa saber: o que posso fazer agora? Criar, editar, exportar, aprovar.

Detalhes e Dados

Acessíveis mas secundários. Tabelas, gráficos, campos de informação. Disponíveis para quem precisa aprofundar.

Histórico e Contexto

Transparência total. Quem fez, quando fez, o que mudou. Disponível no final da página ou em abas/painéis separados.

Lembre-se: nosso público são advogados conservadores que valorizam controle, previsibilidade e reputação. Toda tela deve transmitir: "você está no comando, tudo está sob controle". Nunca surpresas, nunca informação escondida.

Fundações

Espaçamento

A escala de distâncias que mantém tudo alinhado e proporcional. Base de 4px — todo espaçamento é múltiplo de 4.

Por que 4px?

A base 4 é o padrão da indústria (Google Material, Apple HIG, Linear). Funciona bem em qualquer tela porque 4 é divisível por 2 (retina) e cria uma grade visual natural e previsível.

Escala Visual

Cada bloco roxo representa o tamanho do espaçamento. Use esta referência para escolher a distância certa.

4px

0.25rem

Entre ícone e texto, dentro de badges

--espaco-1

8px

0.5rem

Padding interno de badges, gap entre itens pequenos

--espaco-2

12px

0.75rem

Padding de inputs, gap entre campos de formulário

--espaco-3

16px

1rem

Padding interno de cards, margem entre parágrafos

--espaco-4

24px

1.5rem

Gap entre cards, margem entre seções pequenas

--espaco-6

32px

2rem

Padding lateral de página, margem entre blocos

--espaco-8

48px

3rem

Separação entre seções grandes da página

--espaco-12

64px

4rem

Margem superior/inferior de áreas principais

--espaco-16

96px

6rem

Espaçamento máximo — entre blocos de conteúdo independentes

--espaco-24

Guia Rápido

Se você não sabe qual espaçamento usar, consulte esta tabela.

Preciso de...	Tamanho	Variável	Exemplo
Gap ícone ↔ texto	4px	--espaco-1	Dentro de um botão, badge
Padding de badge/tag	8px	--espaco-2	Padding vertical de badges
Gap entre campos	12px	--espaco-3	Entre label e input
Padding de card	16px	--espaco-4	Dentro de cards, modais
Gap entre cards	24px	--espaco-6	Grade de indicadores, lista de cartões
Padding da página	32px	--espaco-8	Margem lateral do conteúdo
Entre seções	48px	--espaco-12	Entre "Métricas" e "Tabela"
Entre blocos independentes	64-96px	--espaco-16/24	Topo da página, áreas principais

Anatomia do espaçamento — Cartão de Indicador

Receita

R$ 245k

▲ 12,3%

← padding: 16px (--espaco-4)

← gap título ↔ valor: 4px (--espaco-1)

gap entre cards: 24px (--espaco-6) →

Anatomia do espaçamento — Página completa

Padding da página: 32px

↓ 16px entre eyebrow e título

Financeiro

Receita Mensal

Acompanhe a evolução do MRR.

↓ 48px entre header e conteúdo (--espaco-12)

Métricas Principais

↓ gap entre cards: 24px (--espaco-6)

MRR

R$ 245k

Churn

2,1%

NPS

↓ 48px entre seções (--espaco-12)

Atividade Recente

3 novos escritórios cadastrados hoje.

Regras de Uso

Correto

✓ Sempre usar múltiplos de 4px

✓ Usar as variáveis: var(--espaco-4)

✓ Mais espaço = mais importância visual

✓ Consistência: mesma distância para mesma função

Errado

✗ Valores quebrados: 5px, 7px, 13px, 15px

✗ Hardcodar: margin: 17px

✗ Espaçamento diferente para elementos iguais

✗ Zero espaço entre elementos (tudo grudado)

Fundações

Sombras & Cantos

Profundidade e arredondamento. As sombras criam hierarquia visual (o que está "acima" do quê). O radius define a personalidade dos cantos.

Níveis de Elevação

Cada nível representa uma camada visual. Quanto mais elevado, mais destaque e mais sombra. Usamos apenas 5 níveis — nunca invente sombras.

Plano

Nível 0

Sem sombra

Fundo de página, áreas neutras

--sombra-0

Sutil

Nível 1

Sombra sutil

Cards, inputs, badges

--sombra-1

Elevado

Nível 2

Sombra média

Dropdowns, popovers, hover

--sombra-2

Flutuante

Nível 3

Sombra forte

Modais, painéis laterais

--sombra-3

Destaque

Nível 4

Sombra dramática

Diálogos de confirmação

--sombra-4

Importante: As sombras usam Grafite com opacidade (não preto puro). Isso mantém um tom quente e neutro, sem poluir a interface com cores saturadas.

Valores Técnicos

Nível	Valor CSS	Quando usar
0 — Plano	none	Fundo de página, áreas sem destaque
1 — Sutil	0 1px 3px rgba(44,44,52,0.06), 0 1px 2px rgba(44,44,52,0.04)	Cards em repouso, inputs, linhas de tabela
2 — Elevado	0 4px 12px rgba(44,44,52,0.08), 0 2px 4px rgba(44,44,52,0.04)	Cartão ao passar o mouse, listas suspensas, dicas, popovers
3 — Flutuante	0 10px 30px rgba(44,44,52,0.10), 0 4px 8px rgba(44,44,52,0.05)	Modais, painéis laterais (sheets), menus
4 — Destaque	0 20px 60px rgba(44,44,52,0.15), 0 8px 16px rgba(44,44,52,0.06)	Diálogos de confirmação, onboarding

Arredondamento de Cantos

Os produtos Freelaw usam arredondamento sutil (preset Lyra: base 8px em cards e componentes). Isso transmite seriedade e profissionalismo — adequado para o contexto jurídico.

4px

Badges, tags

--radius-sm

8px

Botões, inputs, cards

--radius-md

12px

Cards grandes, modais

--radius-lg

16px

Painéis, diálogos

--radius-xl

Full

Avatares, dots

--radius-full

Guia Rápido

Componente	Arredondamento	Sombra
Etiqueta, tag	4px (sm)	Nível 0
Botão	8px (md)	Nível 0
Campo, seletor	8px (md)	Nível 0-1
Cartão de Indicador	8px (md)	Nível 1
Cartão de conteúdo	12px (lg)	Nível 1
Lista suspensa, popover	8px (md)	Nível 2
Notificação rápida	8px (md)	Nível 2
Modal, dialog	12-16px (lg-xl)	Nível 3-4
Painel lateral (sheet)	16px (xl)	Nível 3
Avatar, status dot	Full (círculo)	Nível 0

Cartão: repouso vs passar o mouse

MRR

R$ 245k

▲ 12,3%

Repouso — Nível 1

MRR

R$ 245k

▲ 12,3%

Ao passar o mouse — Nível 2 + translateY(-2px)

Modal com backdrop

Confirmar ação

Deseja prosseguir com esta operação?

Backdrop = Grafite 40% opacidade • Modal = radius 12px + Sombra Nível 4

Lista Suspensa

Starter

Essencial

Premium

Dropdown = radius 8px + Sombra Nível 2 • Item ativo = fundo Lilás 6% + borda Roxo

Comparativo de Arredondamento

No Backstage, o padrão é 8px (md). Botões em formato pílula (full) são exceção, usados apenas em filtros e tags.

Regras de Uso

Correto

✓ Sombras com base em Grafite (rgba 44,44,52)

✓ Cartão sobe de nível ao passar o mouse (1→2)

✓ Modal sempre com backdrop escuro

✓ Arredondamento consistente: mesmo componente = mesmo arredondamento

Errado

✗ Sombras com base em preto (rgba 0,0,0) ou roxo (rgba 51,0,102)

✗ Inventar sombras fora dos 5 níveis

✗ Misturar radius diferentes no mesmo componente

✗ Cantos retos (0px) exceto em tabelas internas

Fundações

Movimento

Animações e transições. Usadas com moderação para dar feedback ao usuário, nunca para decoração. Nosso público (advogados) valoriza eficiência — tudo que se mexe deve ter razão de existir.

Princípio

Animações na Freelaw são funcionais, não decorativas. Elas existem para três fins: confirmar uma ação, guiar o olhar ou suavizar uma mudança de estado. Se remover a animação e nada se perde em clareza, ela não deveria existir.

Durações

Quanto tempo cada tipo de animação deve durar. A regra geral: quanto menor o elemento, mais rápida a transição.

50ms

Instantâneo

Mudança de cor no hover de ícones, focus ring

--duracao-instant

150ms

Rápido

Passar o mouse em botões e cartões, transições de cor

--duracao-rapida

200ms

Base

Fade in/out, tooltips, popovers

--duracao-base

300ms

Suave

Modais abrindo, painéis laterais, expansão

--duracao-suave

500ms

Lenta

Transição de página, loading skeletons

--duracao-lenta

Curvas de Aceleração

Como o movimento se comporta do início ao fim. A curva certa faz a animação parecer natural.

Ease-out (Entrada)

Começa rápido, termina suave. A mais usada. Para tudo que aparece: modais, toasts, popovers, dropdowns.

cubic-bezier(0, 0, 0.2, 1)

--curva-entrada

Ease-in (Saída)

Começa devagar, termina rápido. Para tudo que desaparece: fechar modal, esconder toast, sair da tela.

cubic-bezier(0.4, 0, 1, 1)

--curva-saida

Ease-in-out (Suave)

Começa e termina devagar. Para transições de estado: mudança de cor, hover, toggle on/off.

cubic-bezier(0.4, 0, 0.2, 1)

--curva-suave

Linear

Velocidade constante do início ao fim. Apenas para: barras de progresso, loading spinners, contadores.

linear

--curva-linear

Guia Rápido

Se não sabe qual animação usar, consulte esta tabela.

Ação	Duração	Curva	Tipo de movimento
Passar o mouse em botão/link	150ms	Ease-in-out	Mudança de cor/sombra
Passar o mouse em cartão (elevação)	200ms	Ease-out	translateY(-2px) + sombra
Abrir tooltip/popover	200ms	Ease-out	Fade in + scale de 95%→100%
Abrir dropdown	200ms	Ease-out	Fade in + slide down
Notificação aparecendo	300ms	Ease-out	Slide in from right
Abrir modal	300ms	Ease-out	Fade in + scale de 95%→100%
Fechar modal	200ms	Ease-in	Fade out + scale de 100%→95%
Painel lateral abrindo	300ms	Ease-out	Slide in from right
Interruptor liga/desliga	150ms	Ease-in-out	Slide + cor
Carregamento com blocos	1500ms	Linear	Shimmer (loop infinito)
Barra de progresso	Variável	Linear	Preenchimento contínuo

Passar o mouse em botões (150ms)

Passar o mouse em cartão — elevação (200ms)

Receita

R$ 245k

▲ 12,3%

Churn

2,1%

▲ 0,3%

Passe o mouse nos cards acima para ver a elevação

Fade in de elemento (200ms, ease-out)

Carregamento com blocos (1500ms, linear, loop infinito)

Skeleton shimmer — usado enquanto dados estão carregando. Duração: 1500ms em loop.

Acessibilidade

Nem todo mundo quer ou pode ver animações. Respeitar a preferência do usuário é obrigatório.

Regra obrigatória: Toda animação deve ser desabilitada quando o usuário ativa "Reduzir movimento" nas configurações do sistema operacional. No CSS, isso é feito com @media (prefers-reduced-motion: reduce).

Regras de Uso

Correto

✓ Animação para dar feedback (hover, clique, salvar)

✓ Transições suaves ao abrir/fechar (modais, painéis)

✓ Skeleton shimmer durante carregamento

✓ Respeitar prefers-reduced-motion

✓ Duração máxima de 500ms (nada deve demorar mais)

Errado

✗ Animações decorativas (bounce, pulse sem razão)

✗ Animações que atrasam a tarefa do usuário

✗ Efeitos chamativos (slide dramático, zoom exagerado)

✗ Animações de mais de 500ms (parece travado)

✗ Ignorar prefers-reduced-motion

Fundações

Formatos de Dados

Como exibir datas, valores, CPF/CNPJ, telefone e outros dados formatados. Consistência obrigatória.

Tipo	Formato correto	Nunca
Data	15/03/2025	Mar 15, 2025 / 2025-03-15
Data e hora	15/03/2025 às 14:30	15/03/2025 14:30:00
Valor	R$ 1.500,00	R500 / 1500.00
CPF	123.456.789-00	12345678900
CNPJ	12.345.678/0001-90	12345678000190
Telefone	(11) 99999-9999	11999999999 / +5511999999999
Valor abreviado (KPI)	R$ 2k / R$ 1,2M	R$ 2000 / R$2K / R$ 2.000k
Faixa de valores	R$ 2k – R$ 8k (en dash)	R$ 2k - R$ 8k (hífen)

Identidade Visual

Logotipo

Regras de uso do logotipo da Freelaw, extraídas diretamente do BrandBook (Dezembro 2025).

O símbolo remete à inteligência modular e sistemas interligados. O lettering usa tipografia contemporânea e precisa. O conjunto transmite profissionalismo, maturidade e confiança.

Assinaturas da Marca

3 configurações: Horizontal (preferencial), Vertical e Ícone. O ícone pode ser usado isolado, mas o logotipo tipográfico nunca deve ser usado sem o ícone.

Variação no Fundo Roxo

Quando aplicada sobre o Roxo Institucional, a marca deve ser alterada para a versão em Off-White (#F6F5F3).

Uso em Fundos Coloridos

Sobre fundos que não sejam Off-White ou Roxo Institucional, usar versões monocromáticas para garantir contraste e legibilidade.

Área de Proteção

Manter espaço ao redor da marca, livre de outros elementos. A margem de segurança é obtida pela altura do ícone.

Tamanho Mínimo

Digital: mínimo 150px de largura. Impresso: mínimo 2,5cm de largura. Nunca reduzir abaixo disso.

Como NÃO Usar a Marca

Nunca rotacionar, distorcer, alterar tipografia, alterar cor ou adicionar sombra ao logotipo.

Correto

✓ Usar as versões oficiais fornecidas

✓ Respeitar a área de proteção

✓ Mínimo 150px (digital) / 2,5cm (impresso)

✓ Off-White sobre Roxo, monocromático sobre outros fundos

Errado

✗ Rotacionar o logo

✗ Distorcer proporções

✗ Alterar as cores ou a tipografia

✗ Adicionar sombra ou efeitos

Identidade Visual

Iconografia

Os ícones da Freelaw seguem o princípio das ilustrações: síntese, clareza e intenção. Traço fino, formas simples, ritmo e equilíbrio — funcionam como extensões do sistema visual com consistência.

Ícones no Produto

Nos produtos Freelaw, usamos a biblioteca Lucide — outline, stroke-width 1.5, formas geométricas simples. Use sempre a cor semântica correspondente ao contexto via currentColor ou variável CSS.

Documento

Buscar

Usuário

Calendário

Métricas

Segurança

Configurações

Notificação

Filtrar

Adicionar

Tamanho padrão

16px inline (texto corrido)

20px em botões

24px standalone

32px+ destaque / hero

Cor

Sempre via currentColor CSS ou variável semântica como var(--color-primary).

Nunca hardcode hex (#330066) diretamente no SVG.

Acessibilidade

Ícone decorativo: aria-hidden="true" + texto visível adjacente.

Ícone funcional (sem texto): aria-label="Descrição" no elemento pai.

Biblioteca de ícones

Clique para copiar o componente React · Shift+clique para baixar o SVG

Ver biblioteca completa — 140 ícones

Correto

✓ Ícones no estilo Freelaw: traço contínuo (outline), cor Roxo Institucional

✓ Usar ícones da biblioteca Lucide (padrão do projeto)

✓ Traço fino, formas simples, ritmo e equilíbrio

✓ Ícones sempre acompanhados de texto (exceto quando óbvios + dica flutuante)

Errado

✗ NUNCA usar emojis na interface do produto

✗ Ícones preenchidos (sólidos) — sempre outline

✗ Ícones coloridos (usar apenas Roxo Institucional ou Cinza)

✗ Ícones de bibliotecas diferentes (manter consistência)

✗ Ícone sozinho sem dica flutuante (o usuário não sabe o que significa)

📋 📈 📅 ⚠️ ❌

Emojis são proibidos na interface

Componentes

Top 58 Componentes

Os 58 componentes dos produtos Freelaw. Para cada um: o que é, quando usar, quando NÃO usar, variantes disponíveis e exemplo visual.

Ações Navegação Dados Formulários Feedback Sobreposições Estrutura

1. Botão Ações

@freelaw/ui · Button

A peça mais usada do sistema. Toda ação passa por um botão. Tem 8 estilos visuais e 8 tamanhos.

✓ Ação principal: Primário
✓ Ação secundária: Contorno/Fantasma
✓ Excluir/cancelar: Destrutivo
✓ Aprovar/confirmar: Sucesso

✗ Dois botões primários na mesma tela
✗ Botão sem texto (exceto só ícone)
✗ Dourado para ações comuns

2. Tabela Dados

@freelaw/ui · Table

Exibe dados em linhas e colunas. Os produtos Freelaw são pesados em tabelas — escritórios, clientes, financeiro, suporte. Sempre com rolagem horizontal no celular.

Nome	Plano	MRR	Status
Resende & Associados	Premium	R$ 2.400	Ativo	⋮
Costa Jurídico	Essencial	R$ 1.200	Em risco	⋮

✓ Cabeçalho com ordenação clicável
✓ Menu de ações por linha (⋮)
✓ Sempre com paginação

✗ Tabela sem cabeçalho
✗ Mais de 8 colunas visíveis
✗ Tabela sem estado vazio

3. Cartão Dados

@freelaw/ui · Card

Caixa que agrupa informações relacionadas. Tem cabeçalho, conteúdo e rodapé. Cantos arredondados 12px, sombra sutil.

Detalhes do escritório

Informações gerais do cadastro

Razão social, CNPJ, responsável, data de adesão e plano contratado.

✓ Agrupar informações relacionadas
✓ Sobe ao passar o mouse (elevação)

✗ Cartão dentro de cartão
✗ Cartão sem título ou contexto

4. Cartão de Indicador Dados

@freelaw/ui · StatsCard

Cartão de métrica com título, valor principal e seta de tendência (subindo/descendo). Usado em painéis de gestão. Aceita ícone e clique.

MRR

R$ 245k

▲ 12,3%

Churn

2,1%

▲ 0,3%

NPS

▲ 5 pts

✓ Sempre em grid de 3 ou 4 colunas
✓ Tendência com cor semântica (sucesso/erro)

✗ Fora de grid (card solto sem contexto)
✗ Valores sem unidade

5. Campo de Texto Formulários

@freelaw/ui · Input

Onde o usuário digita informações. Sempre com rótulo acima e mensagem de erro abaixo (quando inválido). Borda Cinza, destaque Lilás ao clicar.

Nome do escritório

CNPJ

CNPJ incompleto — informe os 14 dígitos

✓ Sempre com rótulo
✓ Texto-exemplo como dica, não instrução
✓ Erro com mensagem clara e humana

✗ Campo sem rótulo
✗ Texto-exemplo como substituto do rótulo
✗ Mensagem de erro técnica ("campo obrigatório")

6. Seletor Formulários

@freelaw/ui · Select

Lista suspensa para escolher uma opção entre várias. Até 7 opções use o Seletor; mais que 7 use o Seletor com Busca (item 15).

✓ Até 7 opções → Seletor
✓ Mais de 7 → Seletor com Busca
✓ Sempre com rótulo

✗ 20+ opções sem busca
✗ Texto padrão "Selecione..." sem sentido
✗ Múltiplas escolhas (use Caixa de Marcação)

7. Etiqueta de Status Dados

@freelaw/ui · Badge · StatusBadge

Pequenas etiquetas coloridas que indicam o status de algo (ativo, pendente, rejeitado). Cada status tem sua cor fixa.

● Ativo ● Pendente ● Rejeitado ● Em análise ● Em andamento ● Arquivado ★ Premium

✓ Cor fixa por status (não mude)
✓ Texto curto (1-2 palavras)
✓ Etiqueta de Status para status, Etiqueta genérica para categorias

✗ Mais de 3 etiquetas numa célula
✗ Etiqueta como botão (use Botão)
✗ Inventar cores fora da paleta

8. Janela de Confirmação Sobreposições

@freelaw/ui · Dialog

Janela que aparece centralizada sobre a tela para confirmações e formulários curtos. O fundo escurece (Grafite 40%). Para exclusões, use a versão de alerta.

✓ Confirmar ações importantes
✓ Formulários de até 5 campos
✓ Sempre com título e descrição

✗ Formulários longos (use página própria)
✗ Janela dentro de janela
✗ Informação que não exige ação

9. Estado Vazio Feedback

@freelaw/ui/patterns/feedback · EmptyState

OBRIGATÓRIO. Toda lista e tabela precisa mostrar algo quando não há dados. Exibe ícone, título explicativo, descrição e botão para criar o primeiro item.

Nenhum relatório encontrado

Crie o primeiro relatório para acompanhar os resultados.

✓ Obrigatório em toda lista e tabela
✓ Ícone + título + descrição + botão

✗ NUNCA: tela em branco sem explicação
✗ NUNCA: mensagem genérica "Sem dados"

10. Estado de Carregamento Feedback

@freelaw/ui · LoadingState

OBRIGATÓRIO. Toda tela precisa mostrar que está carregando. Tipos: bolinha girando (ação curta), blocos piscando (dados carregando), pontos (aguardando resposta).

Bolinha girando

Skeleton

✓ Blocos piscando para listas e tabelas
✓ Bolinha girando para ações (salvar, enviar)

✗ Tela completamente em branco
✗ Carregamento sem fim (máximo 10s)

11. Abas Navegação

@freelaw/ui · Tabs

Navegação dentro de uma página. Alterna conteúdo sem mudar de tela. Máximo 6 abas; mais que isso, use submenu ou página própria.

Visão Geral

Detalhes

Histórico

✓ Máximo 6 abas
✓ Nomes curtos (1-2 palavras)

✗ Abas como menu principal
✗ Conteúdo que exige tela própria

12. Menu de Ações Navegação

@freelaw/ui · DropdownMenu

Lista de ações que aparece ao clicar. Usado nos três pontinhos (⋮) das linhas de tabela, botões "mais opções" e menu do usuário. Sombra nível 2.

✓ Ações em linhas de tabela
✓ Ação de exclusão sempre por último, em vermelho

✗ Mais de 8 itens sem agrupamento
✗ Menu dentro de menu

13. Painel Lateral Sobreposições

@freelaw/ui · Sheet

Painel que desliza da direita da tela. Ideal para ver detalhes sem sair da página atual (ex: clicar num escritório da lista e ver seus dados ao lado).

✓ Ver detalhes de um item da lista
✓ Edição rápida
✓ Filtros avançados

✗ Conteúdo muito longo (use página)
✗ Painel dentro de painel

14. Cabeçalho de Página Estrutura

@freelaw/ui/patterns/layout · PageHeaderPattern

OBRIGATÓRIO no topo de toda página. Contém: título da página, descrição breve, trilha de navegação e botões de ação.

Backstage › Financeiro › Receita

Receita Mensal

Acompanhe a evolução do MRR.

✓ Obrigatório no topo de toda página
✓ Título + descrição + breadcrumb + ações

✗ Página sem cabeçalho
✗ Título sem breadcrumb

15. Seletor com Busca Formulários

@freelaw/ui · SmartCombobox

Lista suspensa com campo de busca integrado. Para listas longas (escritórios, cidades, responsáveis). Permite também digitar valores novos.

✓ Mais de 7 opções
✓ Buscar em listas grandes

✗ Menos de 7 opções (use Seletor simples)
✗ Seleção múltipla

16. Dica Flutuante Sobreposições

@freelaw/ui · Tooltip

Pequena caixa de texto que aparece ao passar o mouse sobre um elemento. Para explicações curtas (máximo 1 frase).

✓ Explicar ícones sem texto
✓ Mostrar texto completo que foi cortado

✗ Conteúdo clicável (use Popover)
✗ Texto longo (mais de 1 frase)

17. Interruptor Formulários

@freelaw/ui · Switch

Chave liga/desliga para configurações. O efeito é imediato (não precisa clicar "salvar"). Para formulários que precisam de confirmação, use Caixa de Marcação.

✓ Configurações com efeito imediato
✓ Ativar/desativar funcionalidades

✗ Dentro de formulários com botão salvar
✗ Mais de 2 estados (use grupo de opções)

18. Trilha de Navegação Navegação

@freelaw/ui · Breadcrumb

Caminho que mostra onde o usuário está dentro do sistema (ex: Backstage > Financeiro > Receita). Sempre no topo da página, dentro do Cabeçalho. O último item não é clicável.

Backstage › Financeiro › Receita Mensal

✓ Máximo 4 níveis
✓ Último item é texto (sem link)

✗ Mais de 4 níveis (simplificar caminho)
✗ Trilha sem Cabeçalho de Página

19. Notificação Rápida Feedback

@freelaw/ui · useToast

Mensagem temporária que aparece no canto da tela após uma ação (salvou, deu erro, aviso). Desaparece sozinha em 5 segundos.

✓ Documento salvo com segurança

✗ Não foi possível salvar

✓ Confirmar que a ação foi concluída
✓ Tom: claro e direto, sem exagero

✗ Informações que precisam de ação do usuário
✗ Mensagens técnicas (códigos de erro)

20. Menu Lateral Navegação

@freelaw/ui · DashboardLayout · SidebarNav

Navegação principal do sistema, fixa na lateral esquerda. A cor do fundo muda conforme o produto: Roxo no Contratante, Cinza no Prestador e Off-White no Backstage. Pode ser recolhida com Cmd/Ctrl+B.

Contratante

Studio Offices

● Processos

■ Demandas

● Financeiro

Fundo: #330066
Texto: Off-White

Prestador

freelaw

■ Visão Geral

● Serviços

● Financeiro

Fundo: #CCCCCC
Texto: Roxo Institucional

Backstage

● Financeiro

■ Vendas

● Suporte

Fundo: #F6F5F3
Texto: Roxo Institucional

Produto	Fundo do Menu	Texto / Ícones	Item Ativo	Significado
Contratante	Roxo #330066	Off-White #F6F5F3	Lilás 20% + Off-White	Sabedoria, autoridade
Prestador	Cinza #CCCCCC	Roxo #330066	Roxo 15% + Roxo	Sobriedade, precisão
Backstage	Off-White #F6F5F3	Roxo #330066	Roxo 8% + Roxo	Clareza, equilíbrio

✓ Cor do menu muda por produto (contratante/prestador/backstage)
✓ Máximo 2 níveis de profundidade
✓ Ícone + texto em cada item

✗ Misturar cores de menu entre produtos
✗ Mais de 10 itens no nível raiz
✗ Itens sem ícone

21. Grupo de Botões Ações

@freelaw/ui · ButtonGroup

Agrupa botões relacionados em sequência contínua, sem gap entre eles. Bordas internas fundidas para parecer uma única unidade visual. Suporta orientação horizontal e vertical.

Horizontal

Vertical

✓ Ações mutuamente exclusivas (ex.: filtros de período)
✓ Ações fortemente relacionadas (ex.: exportar)
✓ Máximo 4–5 itens

✗ Ações sem relação entre si
✗ Misturar com botões soltos na mesma linha
✗ Mais de 6 itens (use tabs ou select)

22. Campo com Addon Formulários

@freelaw/ui · InputGroup

Input com prefixo e/ou sufixo visual fixos. O addon pode ser texto (R$, @, https://) ou ícone. Não quebra o foco do campo.

https:// .freelaw.com

✓ Unidade monetária (R$, %, h)
✓ Protocolo de URL
✓ Domínio de e-mail fixo

✗ Addon interativo (use botão dentro do campo)
✗ Addon com mais de 6 caracteres
✗ Substituir o rótulo pelo addon

23. Seletor Nativo Formulários

@freelaw/ui · NativeSelect

Select HTML puro, estilizado com tokens DS. Usa o picker nativo do sistema operacional no celular (roda no iOS/Android). Para listas simples onde o SmartCombobox seria excessivo.

Quando usar cada um:
NativeSelect — filtros simples, até 10 opções, mobile first
Select (Radix) — opções estilizadas, ícones, grupos
SmartCombobox — busca, multi-seleção, 10+ opções

✓ Filtros rápidos em formulários simples
✓ Mobile: picker nativo do SO
✓ Máxima acessibilidade (screen readers)

✗ Opções com ícones ou formatação
✗ Multi-seleção
✗ Mais de 20 opções (use SmartCombobox)

24. Tecla de Atalho Estrutura

@freelaw/ui · Kbd

Representa teclas de teclado com visual de keycap. Três tamanhos: sm, md, lg. Fonte monoespaçada, borda sutil, fundo off-white.

sm · Esc md · ⌘K lg · Enter Pressione ⌘B para recolher

✓ Documentar atalhos de teclado
✓ Command palette (tooltips e hints)
✓ Tutoriais e onboarding

✗ Representar cliques ou toques
✗ Em textos longos sem contexto
✗ Como substituto de botão

25. Menu de Navegação Horizontal Navegação

@freelaw/ui · NavigationMenu

Barra de navegação horizontal para landing pages, marketing e apps com múltiplas seções. Suporta links simples e dropdowns com trigger hover. Para navegação lateral de app, use o Menu Lateral (#20).

✓ Landing pages e sites de marketing
✓ Apps com seções distintas no topo
✓ Dropdown para subcategorias

✗ Navegação de app interno (use Sidebar)
✗ Mais de 6 itens no nível raiz
✗ Mobile sem fallback para hamburger

26. Proporção Fixa Estrutura

@freelaw/ui · AspectRatio

Container que mantém proporção width/height constante, independente do tamanho pai. Implementado com CSS aspect-ratio nativo (sem JavaScript).

16:9 — Vídeo

▶ 16:9

1:1 — Avatar

1:1

4:3 — Thumbnail

4:3

✓ Thumbnails e previews de documentos
✓ Embeds de vídeo responsive
✓ Avatares em grids uniformes

✗ Conteúdo que precisa crescer livremente
✗ Formulários ou listas
✗ Quando o conteúdo define a altura

27. Gráfico Dados

@freelaw/ui · Chart · ChartGrid · ChartTooltip

Wrapper Recharts com tokens DS aplicados automaticamente: paleta dataviz, grid discreto (Grafite 8%), tooltip estilizado, fonte Public Sans, ResponsiveContainer 100%. Não reinvente — use sempre este wrapper.

Demandas por mês

Criadas Concluídas

Paleta dataviz DS: Roxo Principal → Lilás → Dourado → Verde-oliva → Grafite claro → Cobre. Use CHART_SERIES_ORDER[i] para ciclar automaticamente.

✓ Sempre use ChartGrid + ChartTooltip
✓ Múltiplas séries: use CHART_SERIES_ORDER
✓ Inclua ChartLegend em 2+ séries

✗ Importar Recharts direto sem o wrapper
✗ Cores fora da paleta DS
✗ Mais de 6 séries simultâneas

28. Seletor de Data Formulários

@freelaw/ui · DatePicker · DateRangePicker

Input de data com calendário em popover. Compõe Calendar + Popover do DS. Locale pt-BR por padrão. Também disponível em versão range (de → até).

Data de audiência

Período

Dois componentes: DatePicker — data única | DateRangePicker — intervalo (de/até, 2 meses visíveis)

✓ Datas de audiência, prazo, entrega
✓ Filtros de período em dashboards
✓ Locale pt-BR automático (dd/MM/yyyy)

✗ Campo de texto livre para data (use este)
✗ Input type="date" nativo (sem estilo DS)
✗ Mais de 3 DatePickers na mesma tela

29. Barra de Menus Navegação

@freelaw/ui · Menubar · MenubarMenu…

Barra de menus horizontal estilo app desktop (Arquivo / Editar / Ver). Quando um menu está aberto, passar o mouse em outro trigger troca automaticamente. Setas ← → navegam entre menus com teclado.

Novo documento ⌘N

Abrir ⌘O

Exportar PDF

Sair

Suporta: itens simples, separadores, atalhos de teclado (MenubarShortcut), checkboxes, radio groups e submenus.

✓ Editores de documentos (peças, contratos)
✓ IDEs e ferramentas avançadas
✓ Storybook e ambientes de design

✗ Apps mobile (sem espaço)
✗ Dashboards simples (use DropdownMenu)
✗ Substituir a Sidebar principal

30. AcordeãoDisclosure

@freelaw/ui · Accordion

Quais documentos são obrigatórios? −

RG, CPF, comprovante de residência e certidão de nascimento são os documentos básicos exigidos no cadastro.

Quanto tempo leva a análise? +

Posso acompanhar o status? +

✓ FAQs e dúvidas frequentes
✓ Seções longas de configuração
✓ Detalhes opcionais de um registro

✗ Conteúdo principal (use abas)
✗ Mais de 8 itens (preferir busca)
✗ Aninhar acordeões

31. AlertaFeedback

@freelaw/ui · Alert

✓

Processo enviado com sucesso

A peça foi protocolada e o número é 2024.001234.

⚠

Prazo expirado

O prazo para recurso venceu em 15/03/2025.

✓ Mensagens de contexto inline
✓ Avisos permanentes visíveis na página
✓ Resumo de erros de formulário

✗ Notificações transitórias (use Toast)
✗ Substituir estado vazio
✗ Pilhas de alertas (max 2 por página)

32. Diálogo de AlertaOverlays

@freelaw/ui · AlertDialog

Excluir processo?

Esta ação não pode ser desfeita. Todos os documentos vinculados serão permanentemente removidos.

✓ Exclusões permanentes e irreversíveis
✓ Ações destrutivas com consequências
✓ Confirmação de encerramento de contrato

✗ Ações reversíveis (use Dialog)
✗ Confirmações simples (use Dialog)
✗ Formulários (use Dialog ou Sheet)

33. AvatarDisplay

@freelaw/ui · Avatar

✓ Identificação de usuário/prestador
✓ Grupos de colaboradores
✓ Perfil em cabeçalhos e tabelas

✗ Avatares sem fallback de iniciais
✗ Imagens sem alt text
✗ Tamanhos menores que 24px

34. CarrosselDisplay

@freelaw/ui · Carousel

Peça 1 de 4

Petição Inicial

PDF · 2,4 MB

Peça 2 de 4

Contestação

PDF · 1,8 MB

›

‹

✓ Galeria de documentos/imagens
✓ Passos de onboarding
✓ Cards de destaque em tela cheia

✗ Navegação principal
✗ Mais de 8 itens sem paginação
✗ Conteúdo crítico (usuários ignoram)

35. CheckboxFormulário

@freelaw/ui · Checkbox

Aceito os termos de uso

Receber notificações por email

Compartilhar dados de uso (desabilitado)

✓ Múltiplas seleções independentes
✓ Termos e consentimentos
✓ Filtros de tabela multi-seleção

✗ Seleção única (use RadioGroup)
✗ Ação imediata ao clicar (use Switch)
✗ Sem label associada

36. ColapsávelDisclosure

@freelaw/ui · Collapsible

Filtros avançados

Período: Janeiro 2025 – Março 2025

Status: Ativo, Pendente

Responsável: Ana Lima

✓ Filtros e configurações secundárias
✓ Detalhes opcionais em formulários
✓ Logs e histórico expandível

✗ Conteúdo principal sempre visível
✗ Substituir Accordion (sem múltiplos itens)
✗ Conteúdo que o usuário sempre precisa

37. Paleta de ComandosNavegação

@freelaw/ui · Command

Recentes

Processo 2024.001234 – Recurso

Ana Beatriz Lima

Nova petição

ESC para fechar · ↑↓ navegar · Enter selecionar

✓ Busca global ⌘K
✓ Navegação rápida entre entidades
✓ Ações frequentes sem contexto de página

✗ Formulários complexos
✗ Substituir navegação lateral
✗ Resultados sem loading state

38. Menu de ContextoNavegação

@freelaw/ui · ContextMenu

Clique com o botão direito aqui

Abrir

Editar

Duplicar

Excluir

✓ Ações em itens de tabela/lista
✓ Power users que conhecem o atalho
✓ Alternativa compacta ao dropdown

✗ Ações primárias (devem ser visíveis)
✗ Ação única (use botão direto)
✗ Mobile (sem botão direito)

39. Tabela de DadosData Display

@freelaw/ui · DataTable

Nº

Cliente ↕

Status

Prazo ↑

#1234

Ana Beatriz Lima

Ativo

15/03

⋯

#1233

Carlos Eduardo

Pendente

28/03

⋯

✓ Tabelas com ordenação e filtros
✓ Seleção em massa + bulk actions
✓ Paginação server-side integrada

✗ Tabelas simples sem interação (use Table)
✗ Menos de 5 linhas
✗ Sem tipos de coluna definidos com TanStack

40. GavetaOverlays

@freelaw/ui · Drawer

Conteúdo da página

Adicionar comentário

Textarea aparece aqui…

✓ Ações mobile deslizando de baixo
✓ Formulários em telas pequenas
✓ Confirmações de ação em mobile

✗ Desktop (use Sheet ou Dialog)
✗ Conteúdo muito longo (precisa scrollar)
✗ Fluxos com múltiplos passos

41. Campo com LabelFormulário

@freelaw/ui · FieldWrapper

Nome completo *

CPF *

CPF inválido. Verifique os dígitos.

✓ Todo campo de formulário
✓ Label + input + mensagem de erro juntos
✓ Campos obrigatórios marcados com *

✗ Input sem label (sempre use FieldWrapper)
✗ Label genérica "Campo 1"
✗ Esconder o estado de erro

42. Cartão ao HoverOverlays

@freelaw/ui · HoverCard

@ana.lima

Ana Beatriz Lima

Coordenadora Jurídica

47 processos ativos · Membro desde Jan 2023

✓ Preview de perfil/entidade em links
✓ Informação extra sem abrir nova página
✓ Metadados de @menções

✗ Ações interativas (use Popover)
✗ Conteúdo muito longo
✗ Mobile (sem hover)

43. Código de VerificaçãoFormulário

@freelaw/ui · InputOTP

Digite o código enviado para ••••@gmail.com

−

✓ Verificação 2FA / MFA
✓ Códigos de convite e ativação
✓ PIN de confirmação de operação

✗ Senhas longas (use Input type=password)
✗ Códigos alfanuméricos maiores que 8
✗ Campos editáveis sem auto-avançar

44. LabelFormulário

@freelaw/ui · Label

Email profissional

Aceito receber comunicações

✓ Associar label a todo input/checkbox
✓ Usar htmlFor correspondendo ao id
✓ Texto claro e descritivo

✗ Label flutuante sem placeholder
✗ Input sem label associada
✗ Labels genéricas como "Campo"

45. PaginaçãoNavegação

@freelaw/ui · Pagination

✓ Listas e tabelas com mais de 20 itens
✓ Paginação server-side
✓ Mostrar total de registros junto

✗ Menos de 20 itens (renderize tudo)
✗ Infinito scroll em contextos legais
✗ Sem indicar a página atual

46. PopoverOverlays

@freelaw/ui · Popover

Período

Últimos 7 dias Últimos 30 dias Este ano

✓ Filtros e configurações rápidas
✓ Formulários pequenos ancorados
✓ Seleção de cor ou data inline

✗ Conteúdo longo (use Sheet)
✗ Ações destrutivas (use AlertDialog)
✗ Mais de 3 campos no formulário

47. ProgressoFeedback

@freelaw/ui · Progress

Cadastro do processo67%

Upload de documentos100%

Análise jurídica15%

✓ Onboarding multi-etapas
✓ Upload e processamento de arquivos
✓ Conclusão de perfil

✗ Progresso indeterminado (use Spinner)
✗ Sem label do que está progredindo
✗ Sem valor percentual associado

48. Grupo de OpçõesFormulário

@freelaw/ui · RadioGroup

Tipo de cliente

Pessoa física Pessoa jurídica Entidade pública (em breve)

✓ Seleção única entre 2–5 opções
✓ Opções mutuamente exclusivas
✓ Quando as opções precisam ser visíveis

✗ Mais de 5 opções (use Select)
✗ Múltipla seleção (use Checkbox)
✗ Ligado/desligado (use Switch)

49. Painéis RedimensionáveisLayout

@freelaw/ui · Resizable

PROCESSOS

2024.001234

2024.001233

DETALHES — 2024.001234

Ana Beatriz Lima · Trabalhista

Audiência: 20/04/2025

✓ IDEs e layouts master-detail
✓ Painéis de código/preview
✓ Usuários avançados com workspaces

✗ Layouts simples (use grid CSS)
✗ Mobile (use Sheet ou tabs)
✗ Proporções fixas que nunca mudam

50. Área de ScrollLayout

@freelaw/ui · ScrollArea

Petição inicial protocolada — 10/01/2025

Despacho recebido — 15/01/2025

Contestação do réu — 01/02/2025

Réplica apresentada — 15/02/2025

Audiência marcada — 20/04/2025

✓ Listas longas em containers fixos
✓ Logs e histórico de atividades
✓ Scrollbar customizada e consistente

✗ Container com altura dinâmica
✗ Tabelas (use overflow diretamente)
✗ Quando o scroll nativo resolve

51. SeparadorLayout

@freelaw/ui · Separator

Dados pessoais

Endereço

Documentos

✓ Separar seções de formulário
✓ Divisórias verticais em sidebars
✓ Separador "ou" em login

✗ Decoração visual sem semântica
✗ Substituir espaçamento (use margin/gap)
✗ Múltiplos separadores seguidos

52. EsqueletoFeedback

@freelaw/ui · Skeleton

✓ Placeholder do layout enquanto carrega
✓ Replicar a forma real do conteúdo
✓ Listas e cards com estrutura conhecida

✗ Spinner para skeleton (experiência piora)
✗ Skeleton de formato diferente do conteúdo
✗ Manter skeleton após erro (mostre ErrorState)

53. Controle DeslizanteFormulário

@freelaw/ui · Slider

Valor da causaR$ 25.000

R$ 0R$ 60.000

Faixa de honoráriosR$ 2k – R$ 8k

✓ Filtros de faixa de valor
✓ Volume, zoom, intensidade
✓ Quando o valor exato é menos importante que a faixa

✗ Precisão absoluta necessária (use Input)
✗ Opções discretas (use RadioGroup)
✗ Mais de 2 handles

54. Indicador de CarregamentoFeedback

@freelaw/ui · Spinner

Salvando…

✓ Loading indeterminado inline
✓ Botão em estado de loading
✓ Operações rápidas (<3s)

✗ Carregamento de página inteira (use Skeleton)
✗ Operações longas sem progresso (use Progress)
✗ Sobreposto sem fundo escurecido

55. Área de TextoFormulário

@freelaw/ui · Textarea

Descrição do caso

Ação trabalhista por rescisão indireta. Cliente alega falta de pagamento de salários por três meses consecutivos e assédio moral pelo supervisor direto.

142 / 500

✓ Texto de formato livre longo
✓ Notas, descrições, comentários
✓ Permitir resize vertical

✗ Textos curtos de uma linha (use Input)
✗ Conteúdo rico com formatação (use editor)
✗ Desabilitar resize sem motivo

56. Botão ToggleAções

@freelaw/ui · Toggle

✓ Formatação de texto (bold/italic)
✓ Modo ativo/inativo de uma opção
✓ Filtros visuais simples

✗ Estado persistente (use Switch)
✗ Mais de 5 toggles soltos (use ToggleGroup)
✗ Ação destrutiva

57. Grupo de TogglesAções

@freelaw/ui · ToggleGroup

Visualização

Alinhamento

✓ Troca de modo de visualização
✓ Filtros com seleção única visível
✓ Alinhamento e formatação agrupados

✗ Mais de 5 opções (use Select)
✗ Misturar com Toggle solto
✗ Opções longas (use RadioGroup)

58. TipografiaTipografia

@freelaw/ui · Typography

Processos ativos

Visão geral do escritório

Seção de resultados

Texto de corpo padrão. Use para descrições, parágrafos e conteúdo informativo. A família Public Sans garante legibilidade em qualquer tamanho.

Texto secundário para metadados, datas, labels e contexto auxiliar.

componente.tsx:42

✓ Usar tokens DS (h1-h6, body, small, code)
✓ Fraunces para headings, Public Sans para corpo
✓ Hierarquia clara com no máximo 3 tamanhos por página

✗ Tamanhos arbitrários fora da escala
✗ Mais de 2 famílias tipográficas
✗ Body text menor que 12px

Componentes

Blocos Prontos

Padrões compostos pré-construídos que combinam múltiplos componentes DS num UI realista. Copie, adapte os tokens e use — sem partir do zero.

Blocos Prontos são composições pré-montadas dos componentes Top 58. Use-os como ponto de partida — extraia componentes individuais conforme necessário ou adapte o bloco completo aos tokens do DS.

Todos os blocos vêm de blocks.shadcn.com — já compatíveis com nossos tokens DS. Antes de usar, substitua cores hardcoded por variáveis DS e rode lint:colors para garantir conformidade.

Dashboard

KPIs + gráficos + tabela

Analytics

Autenticação

Auth

•••• •••• •••• 3456

Método de Pagamento

Cartão, endereço, confirmação

Conversa + input + histórico

Comunicação

Configurações

Sidebar + seções + toggles

Settings

Convidar membros da equipe

Time / Membros

Convite, papéis, gestão

Colaboração

Processando solicitação

Loading States

Syncing, updating, processing

Feedback

8

3

7

−

Verificar via email ou telefone

Two-Factor Auth

OTP + verificação + backup

Segurança

Março 2025

Calendário

Agenda + eventos + faixas

Scheduling

Arraste ou clique para enviar

PDF, DOC até 10 MB

Upload de Arquivo

Drag-and-drop + progresso

Forms

Notificações

Centro + lidas/não lidas

Feedback

Gabriel Freitas

gabriel@freelaw.com.br

Perfil / Conta

Avatar + dados + ações

Settings

Buscar ou pedir algo…

⌘K

Processo 2024.001234

Ana Beatriz Lima

Nova petição

Busca Global

⌘K + resultados + ações

Navegação

Formulário Multi-etapas

Wizard + progresso + validação

Forms

Inbox / Email

Lista + leitura + resposta

Comunicação

Editor de Texto Rico

Toolbar + formatação + markdown

Forms

01/03

→

31/03

Intervalo de Datas

Date range picker + presets

Forms

Tasks

KPIs + tabela drag-to-reorder + paginação

Gestão

Componentes

Estendendo o DS Guia

Quando o componente que você precisa não existe em @freelaw/ui, siga esta ordem antes de criar do zero.

① Primeiro

shadcn/ui base

Componentes primitivos do shadcn já usam os tokens DS automaticamente. Instale com npx shadcn@latest add

② Segundo

Registros da comunidade

blocks.shadcn.com, Aceternity, Origin UI. Adapte os tokens antes de usar em produção.

③ Último recurso

Criar no DS

Abra uma PR em packages/ui com o novo componente. Ele deve usar tokens DS e ter Storybook.

Por que este ecossistema

Maturidade de tooling

IntelliSense nativo, suporte a Prettier, integração com class-variance-authority — o ecossistema foi pensado junto. Não é uma coleção de peças soltas.

Por que este ecossistema

Consistência de escala

Espaçamento, cores e tipografia seguem uma escala padrão testada em produção em milhares de projetos. Inventar escala própria cria inconsistência visual que cresce com o produto.

Regra inegociável: qualquer bloco externo precisa substituir cores hardcoded por variáveis DS (--color-primary, --radius, --font-sans) antes de entrar em produção. O hook de lint lint:colors bloqueia cores hardcoded no commit.

Padrões de Página

Modelos de Tela

Os 4 modelos de página que cobrem 95% das telas dos produtos Freelaw. Toda nova tela deve partir de um destes templates — nunca comece do zero.

1. Painel de Gestão

Tela com indicadores no topo, gráficos no meio e tabela de detalhes embaixo. Usada em: Financeiro, Vendas, Suporte, RH.

Backstage › Financeiro

Receita Mensal

Acompanhe MRR, churn e receita líquida.

MRR

R$ 245k

▲ 12,3%

Churn

2,1%

▲ 0,3%

Clientes

387

▲ 8 novos

NPS

▲ 5 pts

Evolução do MRR

Detalhamento

Escritório	Plano	MRR	Status
Resende & Assoc.	Premium	R$ 2.400	Ativo
Costa Jurídico	Essencial	R$ 1.200	Em risco

Estrutura: Cabeçalho de Página → Cartões de Indicador (3-4 em linha) → Gráfico → Tabela com paginação

✓ Indicadores sempre no topo
✓ Gráfico ocupa largura total
✓ Tabela com ordenação e paginação
✓ Botão de exportar no cabeçalho

✗ Mais de 4 indicadores na mesma linha
✗ Gráfico sem título
✗ Tabela sem estado vazio
✗ Misturar estilos de gráfico na mesma tela

2. Listagem

Tela de lista com busca, filtros e tabela. A mais comum nos produtos Freelaw. Usada em: Escritórios, Clientes, Prestadores, Chamados, Negócios.

Escritórios

387 escritórios cadastrados

Plano: Todos ▼ Status: Ativo ▼

Nome	Plano	MRR	Status
Resende & Associados	Premium	R$ 2.400	Ativo	⋮
Silva Advocacia	Essencial	R$ 890	Em risco	⋮
Mendes & Peixoto	Starter	R$ 390	Ativo	⋮

Mostrando 1-10 de 387

‹ 1 2 3 ›

Estrutura: Cabeçalho (título + contagem + botão criar) → Busca + Filtros → Tabela → Paginação

✓ Busca sempre visível
✓ Filtros como chips ao lado da busca
✓ Contagem total no subtítulo
✓ Ações por linha nos três pontinhos (⋮)

✗ Filtros escondidos num botão "Filtrar"
✗ Lista sem busca
✗ Lista sem paginação (não carregar tudo)
✗ Botão "Novo" longe do título

2.1 Padrão de Filtros

Como filtros funcionam em qualquer listagem dos produtos Freelaw. O fluxo completo: busca + filtros rápidos + filtros avançados + chips aplicados + limpar tudo.

Estado 1 — Sem filtros aplicados

Filtros

Busca sempre visível. Botão "Filtros" abre o painel de opções.

Estado 2 — Painel de filtros aberto

Filtros

Plano

Todos ▼

Status

Ativo ▼

Responsável

Todos ▼

Limpar filtros

Estado 3 — Filtros aplicados (chips visíveis)

Filtros 2

Status: Ativo ✕ Plano: Premium ✕ Limpar tudo

Cada filtro ativo aparece como chip. O ✕ remove individualmente. "Limpar tudo" remove todos de uma vez.

Estado 4 — Nenhum resultado encontrado

Filtros

Nenhum resultado para "xyzabc"

Tente ajustar os filtros ou usar outros termos de busca.

Limpar busca e filtros

✓ Busca sempre visível (nunca escondida)
✓ Botão "Filtros" com ícone de funil
✓ Contador no botão quando filtros estão ativos
✓ Chips abaixo da busca mostrando filtros aplicados
✓ Cada chip tem ✕ para remover individualmente
✓ "Limpar tudo" sempre disponível
✓ Resultado vazio orienta a limpar filtros

✗ Filtros que só aparecem ao rolar a tela
✗ Aplicar filtro sem feedback visual
✗ Filtro aplicado sem chip visível
✗ Sem opção de limpar filtros
✗ Resultado vazio genérico ("Sem dados")
✗ Busca e filtros misturados sem separação
✗ Mais de 5 filtros no painel (use filtros avançados no painel lateral)

3. Formulário

Tela para criar ou editar um item. Campos agrupados por assunto, com ações (salvar/cancelar) fixas no rodapé. Usada em: cadastro de escritório, edição de cliente, configurações.

Backstage › Escritórios › Novo

Cadastrar Escritório

Dados do Escritório

Razão Social

CNPJ

Responsável

Nome

E-mail

Estrutura: Cabeçalho → Grupos de campos (com título) → Separadores entre grupos → Botões de ação alinhados à direita

✓ Campos agrupados por assunto
✓ Máximo 2 campos por linha
✓ Botão principal à direita ("Salvar")
✓ Cancelar sempre ao lado do salvar

✗ Mais de 10 campos sem agrupamento
✗ Botões de ação no topo
✗ Formulário sem validação ao vivo
✗ Campo "obrigatório" sem asterisco

4. Configurações

Tela com menu lateral de seções e conteúdo à direita. Cada seção é um grupo de opções. Usada em: configurações do sistema, perfil, permissões.

Configurações

Geral

Notificações

Permissões

Integrações

Zona de perigo

Geral

Configurações gerais do sistema.

Modo escuro

Ativar tema escuro na interface

Idioma

Idioma da interface

Português (BR) ▼

Fuso horário

Horário exibido no sistema

Brasília (GMT-3) ▼

Estrutura: Cabeçalho → Menu lateral de seções → Conteúdo à direita (opção + descrição + controle)

✓ Cada opção com nome + descrição
✓ Interruptores para efeito imediato
✓ "Zona de perigo" sempre por último, em destaque

✗ Configurações sem descrição
✗ Misturar interruptores e botão salvar
✗ Ação destrutiva sem confirmação

Padrões de Página

Estados Obrigatórios

Toda tela dos produtos Freelaw deve tratar 3 estados além do normal. Se algum estiver faltando, a tela não está pronta.

Carregando

Enquanto os dados não chegaram. Mostre blocos piscando (skeleton) que imitam o layout final.

Vazio

Quando não há dados. Explique o porquê e ofereça ação.

Nenhum item

Crie o primeiro para começar.

Erro

Quando algo deu errado. Nunca mostre mensagem técnica — explique em linguagem humana e ofereça "tentar novamente".

Não foi possível carregar os dados. Tente novamente.

Sem permissão

Quando o usuário não tem acesso. Explique e indique quem pode ajudar.

Acesso restrito

Fale com o administrador para solicitar acesso.

Conteúdo & Voz

Regras de Escrita

Como escrever cada texto que aparece na interface. Do BrandBook: a Freelaw fala de forma Clara, Direta, Segura, Profissional e Humana. Aqui traduzimos isso para cada elemento da tela.

Tom de Voz na Interface

A Freelaw fala com advogados experientes que valorizam controle e reputação. O tom é firme, respeitoso e objetivo — sem exageros, sem promessas vazias, sem informalidade excessiva.

Clara

Compreensível mesmo em temas complexos

Direta

Valoriza o tempo com mensagens organizadas

Segura

Com convicção, sem exageros ou apelação

Profissional

Postura institucional, respeito ao jurídico

Humana

Reconhece pessoas, sem informalidade excessiva

Como escrever cada elemento

Títulos de Página Fraunces Black, Roxo

✓ "Receita Mensal"
✓ "Escritórios"
✓ "Configurações"

✗ "Veja a receita mensal aqui!"
✗ "Seus escritórios incríveis"
✗ "Configurações do sistema v2.3"

Regra: Substantivo ou nome curto (1-3 palavras). Sem verbos, sem artigos desnecessários, sem versões.

Descrições / Subtítulos Public Sans Light, Cinza

✓ "Acompanhe a evolução do MRR e churn."
✓ "387 escritórios cadastrados"

✗ "Aqui você pode ver tudo sobre receita!"
✗ "Página para gerenciar escritórios do sistema"

Regra: Comece com ação ou dado concreto. Nunca "Página para..." ou "Aqui você pode...". Máximo 1 linha.

Botões Public Sans Semibold

✓ "Salvar escritório"
✓ "Exportar relatório"
✓ "Confirmar exclusão"
✓ "Cancelar"

✗ "Clique aqui para salvar"
✗ "OK"
✗ "Enviar" (enviar o quê?)
✗ "Sim" / "Não" (sem contexto)

Regra: Verbo + objeto (o que vai acontecer). Nunca "Clique aqui". Nunca só "OK" ou "Sim".

Rótulos de Campo Public Sans Semibold, Grafite

✓ "Nome do escritório"
✓ "E-mail do responsável"
✓ "Data de adesão"

✗ "Nome:" (com dois pontos)
✗ "Insira o nome" (é instrução, não rótulo)
✗ "name" (em inglês)

Regra: Nome do dado em português, sem dois pontos, sem verbos. Se precisa de contexto, adicione "do/da" (ex: "Nome do responsável").

Placeholder (dentro do campo) Public Sans Light, Cinza

✓ "ex: Resende & Associados"
✓ "00.000.000/0000-00"
✓ "Buscar escritório..."

✗ "Digite o nome do escritório"
✗ "Nome" (repete o rótulo)
✗ "Enter name here"

Regra: Mostrar um exemplo real do formato esperado. Nunca repetir o rótulo. Nunca usar como instrução.

Mensagens de Erro Public Sans Regular, cor Erro

✓ "CNPJ incompleto — informe os 14 dígitos"
✓ "E-mail inválido — verifique o formato"
✓ "Campo obrigatório"

✗ "Error: invalid input"
✗ "Validation failed: field required"
✗ "Erro 422"
✗ "Preencha corretamente" (correto como?)

Regra: Diga o que está errado + como corrigir. Nunca código de erro. Nunca em inglês. Nunca genérico.

Cabeçalhos de Tabela Public Sans Semibold, Cinza, MAIÚSCULO

✓ "NOME" / "PLANO" / "MRR" / "STATUS"
✓ Curto: 1 palavra quando possível

✗ "Nome do Escritório Cadastrado"
✗ "Status do Cliente no Sistema"

Regra: 1 palavra em maiúsculo. Máximo 2 palavras. Se precisar explicar, use dica flutuante.

Estado Vazio Título Fraunces + descrição Public Sans

✓ "Nenhum relatório encontrado"
✓ "Crie o primeiro para acompanhar os resultados."

✗ "Sem dados"
✗ "Não há registros no banco de dados"
✗ "Empty"

Regra: Título = "Nenhum(a) [coisa] encontrado(a)". Descrição = explique o motivo ou oriente a próxima ação. Sempre com botão de ação relevante (criar, tentar novamente ou voltar).

Conteúdo & Voz

Mensagens Padrão

Modelos prontos para cada tipo de notificação. Copie e adapte — não invente do zero.

Sucesso

Tom: Confirmação clara, sem euforia.
Estrutura: "[Coisa] [ação] com segurança/sucesso"

✓ Documento salvo com segurança

✓ Escritório cadastrado com sucesso

✓ Prazo registrado no sistema

Erro

Tom: Direcionamento claro, não crítica.
Estrutura: "Não foi possível [ação]. [Orientação]"

✗ Não foi possível salvar. Verifique os dados.

✗ Erro ao carregar dados. Tente novamente.

✗ Conexão perdida. Verifique sua internet.

Alerta

Tom: Atenção sem alarmismo.
Estrutura: "[Situação] — [o que fazer]"

! Prazo vence em 3 dias — verifique o status

! Alterações não salvas — salve antes de sair

! Plano vence em 7 dias — renove para continuar

Confirmação (antes de ação)

Tom: Claro sobre consequências.
Estrutura: "Tem certeza que deseja [ação]? [Consequência]"

Confirmar exclusão

Tem certeza que deseja excluir Resende & Associados? Esta ação não pode ser desfeita.

Templates de Mensagem Rápida

Copie e adapte — não invente do zero. Textos prontos para os casos mais frequentes.

Erro de validação

"Campo obrigatório. Preencha para continuar."

Confirmação de exclusão

"Tem certeza? Esta ação não pode ser desfeita."

Sucesso ao salvar

"Alterações salvas com sucesso."

Sessão expirada

"Sua sessão expirou. Entre novamente para continuar."

Regras Gerais de Escrita

Correto

✓ Português claro, sem jargão técnico

✓ Botões com verbo + objeto ("Salvar escritório")

✓ Erro = o que deu errado + como resolver

✓ Tom respeitoso e profissional

✓ Usar os termos do glossário acima

Errado

✗ Termos em inglês na interface (dashboard, submit, delete)

✗ Tom apelativo ("Incrível!", "Parabéns!", "Uau!")

✗ Mensagens técnicas (error codes, stack traces)

✗ Tutear o usuário ("tu", "teu") — usar "você"

✗ Gírias ou informalidade excessiva

Conteúdo & Voz

Glossário de Termos

Como chamar cada coisa no produto. Se a palavra não está aqui, não use — pergunte antes.

Termos usados consistentemente em toda a interface Freelaw. Ao nomear novos recursos, consulte este glossário antes de criar novos termos.

Usamos	Nunca usamos	Contexto
Escritório	Firma, banca, organização	O cliente da Freelaw
Prestador	Freelancer, correspondente, terceiro	Advogado da rede Freelaw
Demanda	Serviço, tarefa, job, ticket	Trabalho delegado ao prestador
Processo	Case, caso, ação	Processo judicial acompanhado
Petição	Documento, peça, arquivo	Documento jurídico produzido
Prazo	Deadline, SLA, due date	Data limite para ação
Publicação	Intimação, notificação do diário	Publicação no Diário de Justiça
Responsável	Owner, assignee, dono	Pessoa encarregada de algo
Painel de gestão	Painel de gestão, tela inicial	Tela com indicadores e métricas
Cadastrar	Registrar, criar, add, inputar	Adicionar novo item ao sistema
Salvar	Gravar, enviar	Guardar alterações feitas
Excluir	Deletar, apagar, remover, delete	Remover permanentemente
Buscar	Pesquisar, search, procurar	Encontrar item por texto

Regra de ouro do BrandBook: A Freelaw nunca usa jargão tecnológico na interface. Termos como "dashboard", "submit", "deploy", "input" nunca aparecem para o usuário final. Tudo em português, claro e acessível.

Avançado

Acessibilidade

Diretrizes WCAG 2.1 aplicadas ao Backstage. Todo componente deve atingir nível AA mínimo.

Princípios obrigatórios

Contraste mínimo 4.5:1 para texto normal, 3:1 para texto grande
Todos os elementos interativos acessíveis via teclado (Tab, Enter, Space, Esc)
Labels explícitos em todos os inputs — nunca apenas placeholder
aria-label em ícones sem texto visível
Focus ring visível — nunca outline: none sem substituto
Mensagens de erro anunciadas por screen reader (role="alert" ou aria-live)
Imagens decorativas com alt="" vazio; imagens informativas com alt descritivo

Checklist de Acessibilidade

12 itens que todo PR com UI deve verificar. Estado salvo automaticamente.

Tabela de Contraste

Pares de cor do DS com ratio calculado e badge de conformidade WCAG.

Par	Fundo	Texto	Ratio	WCAG
Aa	#330066	#F6F5F3	13.8:1	AAA
Aa	#F6F5F3	#330066	13.8:1	AAA
Aa	#2C2C34	#F6F5F3	13.1:1	AAA
Aa	#330066	#A994E6	5.1:1	AA
Aa	#F6F5F3	#2C2C34	13.1:1	AAA
Aa	#F6F5F3	#CCCCCC (placeholder)	1.6:1	FAIL só decorativo

Padrões de Teclado

Comportamento esperado por componente para cada tecla.

Tecla	Modal / Dialog	Dropdown / Select	Accordion
`Tab`	Navega entre ações internas (foco preso)	Move para próximo item se aberto	Move para próximo acordeão
`Shift+Tab`	Navega para trás (foco preso)	Move para item anterior	Move para acordeão anterior
`Enter`	Confirma ação focada	Abre / seleciona item focado	Expande / colapsa
`Space`	Confirma botão focado	Abre dropdown fechado	Expande / colapsa
`Esc`	Fecha e devolve foco ao trigger	Fecha sem selecionar	Colapsa se expandido
`↑ ↓`	Move foco entre ações do modal	Navega opções sem fechar	Navega entre itens

Avançado

Responsividade

O Backstage é primariamente desktop. Mobile é suporte secundário com breakpoints definidos.

Breakpoints

Nome	Valor	Uso
sm	640px	Mobile landscape
md	768px	Tablet
lg	1024px	Desktop base
xl	1280px+	Desktop wide

Regras por Contexto

Como cada elemento do layout se transforma em diferentes tamanhos de tela.

Sidebar

< 768px: oculta, abre com botão hamburger
768–1023px: colapsa para ícones (56px)
≥ 1024px: expande completa (240px)
Overlay escuro ao abrir em mobile

Tabelas

< 640px: viram cards empilhados
Cada linha vira um card com label + valor
Ações ficam no rodapé do card
Colunas menos prioritárias são ocultadas primeiro

Modais

< 640px: full-screen (100vw × 100dvh)
Sem border-radius em mobile
Bottom sheet para confirmações simples
Header fixo com botão fechar sempre visível

Formulários

Colunas lado-a-lado → coluna única em mobile
Touch target mínimo: 44px de altura
Botões: full-width em mobile
Teclado virtual não deve cobrir o campo ativo

Checklist de Responsividade

8 itens que todo PR com UI deve verificar antes do merge.

Testado em viewport 375px (iPhone SE) Nenhum overflow horizontal em mobile Touch targets ≥ 44px em todas as ações Tabelas viram cards ou têm scroll horizontal controlado Modais são full-screen em mobile Formulários em coluna única em mobile Sidebar colapsa corretamente (hamburger funcional) Texto não ultrapassa 100% da largura do container

Avançado

Gráficos & Dados

Regras para visualização de dados no Backstage. Consistência visual antes de criatividade — sempre usar chart-colors.ts, nunca inventar cores.

Paleta oficial de gráficos

5 papéis semânticos derivados diretamente do BrandBook. Cada cor carrega um significado fixo — não trocá-los entre si.

Principal

#330066 var(--roxo)

Secundário

#A994E6 var(--lilas)

Terciário

#CC9900 var(--dourado)

Positivo

#7A8C3C var(--sucesso)

Cor semântica — não é do BrandBook.
Use apenas para indicar resultado positivo.

Negativo

#8B2252 var(--erro)

Cor semântica — não é do BrandBook.
Use apenas para indicar resultado negativo.

Exemplo — Gráfico de barras

Série única usa apenas a cor Principal. Múltiplas séries seguem a ordem: Principal → Secundário → Terciário.

Resultado mensal

Contratos por mês

Jan

Fev

Mar

Abr

Mai ▲

Contratos fechados

Melhor mês — var(--sucesso)

Regras de uso

Cor	Usar quando	Evitar quando
Principal var(--roxo)	Série primária, métrica principal, dado mais importante do gráfico	Combinado com Secundário sem distinguir hierarquia
Secundário var(--lilas)	Segunda série em gráfico comparativo, período anterior, categoria de apoio	Único dado no gráfico (usar Principal)
Terciário var(--dourado)	Terceira série, meta definida, linha de referência, benchmark	Dado negativo ou de alerta (confunde com Alerta semântico)
Positivo var(--sucesso) Semântica — não é cor do BrandBook	Resultado positivo, crescimento, aprovação, meta atingida	Dado neutro ou ambíguo — verde sempre comunica "bom"
Negativo var(--erro) Semântica — não é cor do BrandBook	Queda, rejeição, dado crítico, falha, churn	Dado neutro ou abaixo de meta sem ser crítico (usar Terciário)

Correto e Errado

Correto

✓ Importar de chart-colors.ts sempre

✓ Usar var(--sucesso) para crescimento

✓ Usar var(--erro) para queda/falha

✓ Série única = só var(--roxo)

✓ Eixos com cor #999, grid lines opacidade 0.15

Errado

✗ Cores do Tailwind (#16A34A, #DC2626)

✗ #7C3AED ou #A78BFA — não estão no BrandBook

✗ Verde para dado neutro (lê-se como "positivo")

✗ 3D, gradientes decorativos nos dados

✗ Omitir legenda com mais de uma série

Catálogo de Gráficos — shadcn/ui

Componentes prontos via npx shadcn add chart (base) + variante. Todos usam Recharts internamente e aceitam nossos tokens DS via CSS variables.

Instale a base uma vez: npx shadcn add chart — depois adicione cada variante. Substitua as cores geradas por chart-colors.ts antes de usar em produção.

Area Chart

Tendência + volume ao longo do tempo

Série

npx shadcn add chart-areaCopiado!

Bar Chart

Comparação entre categorias

Comparação

npx shadcn add chart-barCopiado!

Line Chart

Evolução temporal, múltiplas séries

Tendência

npx shadcn add chart-lineCopiado!

Pie / Donut Chart

Proporção entre partes de um todo

Proporção

npx shadcn add chart-pieCopiado!

Radar Chart

Comparação multidimensional

Multi-dim

npx shadcn add chart-radarCopiado!

Radial Chart

Progresso, gauge, percentual

Progresso

npx shadcn add chart-radialCopiado!

Design System Completo

Freelaw v1.0

Identidade Visual, Fundações, Componentes, Padrões de Página, Conteúdo & Voz, Guia para Desenvolvedores e BrandBook — tudo documentado em um único lugar.

Design SystemFreelaw

Visão & Princípios

Princípios do DS Freelaw

Arquitetura de Variáveis Visuais

Como funciona cada camada

Cores

Cores Principais

Cores de Apoio

Combinações Aprovadas

Cores na Prática

Regras de Uso

Cores Semânticas

Tipografia

Nossas Fontes

Hierarquia Tipográfica

Painel de Gestão

Métricas Principais

Atividade Recente

Confirmar exclusão

Nenhum relatório

Nunca fazer

Hierarquia de Informação na Tela

Espaçamento

Por que 4px?

Escala Visual

Guia Rápido

Receita Mensal

Métricas Principais

Atividade Recente

Regras de Uso

Sombras & Cantos

Níveis de Elevação

Valores Técnicos

Arredondamento de Cantos

Guia Rápido

Confirmar ação

Regras de Uso

Movimento

Princípio

Durações

Curvas de Aceleração

Guia Rápido

Acessibilidade

Regras de Uso

Formatos de Dados

Logotipo

Assinaturas da Marca

Variação no Fundo Roxo

Uso em Fundos Coloridos

Área de Proteção

Tamanho Mínimo

Como NÃO Usar a Marca

Iconografia

Ícones no Produto

Top 58 Componentes

Blocos Prontos

Estendendo o DS Guia

Modelos de Tela

1. Painel de Gestão

2. Listagem

2.1 Padrão de Filtros

3. Formulário

4. Configurações

Estados Obrigatórios

Regras de Escrita

Tom de Voz na Interface

Como escrever cada elemento

Mensagens Padrão

Templates de Mensagem Rápida

Regras Gerais de Escrita

Glossário de Termos

Acessibilidade

Princípios obrigatórios

Checklist de Acessibilidade

Tabela de Contraste

Padrões de Teclado

Responsividade

Breakpoints

Regras por Contexto

Checklist de Responsividade

Design System
Freelaw