Carteira.
Azul carteira de trabalho, marca-texto amarelo e balões de conversa. Advocacia trabalhista do lado do trabalhador: popular, direta e confiável, sem juridiquês e sem terno e gravata.
- Tipo
- Landing page
- Tema
- Claro
- Títulos
- Rubik
- Texto
- Rubik
ParaTrabalhador CLT ou informal, 20-60 anos, classes C e D, acessa pelo celular e prefere resolver pelo WhatsApp
Seções da página01/11nav fixa com WhatsApp
Azul carteira de trabalho, marca-texto amarelo e balões de conversa. Advocacia trabalhista do lado do trabalhador: fala como gente, explica sem juridiquês e chama pelo WhatsApp. É o oposto do Alicerce (advocacia premium): nada de mármore, serifa dourada ou terno e gravata.
ParaTrabalhador CLT ou informal, 20-60 anos, classes C e D, acessa pelo celular e prefere resolver pelo WhatsApp
Paleta
As quatro cores que definem o design e todas as variáveis do tokens.css. Clique para copiar.
Tipografia
Rubik nos títulos, Rubik no texto.
TítulosRubik
Aag!
Carteira em uma linha
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoRubik
A fonte de leitura carrega parágrafos longos sem cansar.
Texto corrido, botões, formulários e legendas. Os títulos ficam com a fonte de destaque; aqui é o dia a dia da página.
0123456789 · R$ 1.234,56 · 25/09 às 19h30
Para quem serve
O que a skill /escolher-design compara com o cliente.
- escritório que atende pessoa física e fala a língua do cliente
- captação pelo WhatsApp
- marca azul ou amarela
- profissional que quer parecer próximo, não sofisticado
- serviço que precisa explicar termos técnicos
- advocacia empresarial ou de alto padrão (use Alicerce)
- público corporativo/B2B
- marca de luxo
- tom sóbrio e formal
Tom
O que faz ser Carteira
As assinaturas do DESIGN.md: o que não pode faltar ao aplicar.
- 01
Carteira de trabalho aberta no hero: capa azul costurada + página pautada com campos em mono, anotação com marca-texto e carimbo azul ("Direitos a conferir") que carimba ao entrar.
- 02
Balões de conversa (
carteira-balao, rabinho com::after): a pergunta do trabalhador na primeira pessoa abre o hero, as situações e as dúvidas. Dúvidas são um chat: pergunta em balão azul à direita, resposta do escritório em balão branco à esquerda. - 03
Tradutor de juridiquês: "No papel" (termo em mono) → "Quer dizer" (explicação simples), numa página de "Anotações gerais".
- 04
Marca-texto amarelo (
carteira-marca) numa palavra por título, nunca em frase inteira. - 05
Régua do prazo em bloco amarelo: informação geral, com aviso de que cada caso é analisado. Não é contagem regressiva.
- 06
Checklist de documentos marcável só com CSS (checkbox +
:has), com contador (counter()). - 07
Botões "tecla" com sombra sólida embaixo (
shadow-[0_10px_0_-4px_...]), que sobem no hover.
Regras do jogo
Direto do DESIGN.md.
Identidade
- Fundo
#f5f7fb(papel azulado), cartões brancos, blocos alternados emsurface-2#e7edfa. - Texto azul-marinho
#0d1b3e; secundário#4b5a7c. Nada de preto puro. - Primária azul
#1a4fd6: botões, carimbo, numeração, balões do trabalhador. - Destaque amarelo
#ffc629: marca-texto atrás da palavra-chave, bloco do prazo, botão da chamada final. Amarelo é caneta, não fundo de página inteira (o bloco do prazo é a única exceção). - Capa da carteira
#102a72 → #0a1d52com textura e costura tracejada amarela (classecarteira-capa). - Fontes: Rubik em tudo (600/700 nos títulos, tracking apertado). JetBrains Mono para o que parece "preenchido no documento": campos da carteira, rótulos de seção, termos jurídicos, OAB.
Regras
- Linguagem de conversa: "você", frases curtas, exemplos do dia a dia. Termo técnico só se vier explicado.
- Chamada principal é sempre o WhatsApp. No celular o botão fica na nav fixa. No máximo 2 botões por tela.
- Mobile primeiro: o público usa celular. Títulos quebram bem em 360px, balões com
max-w-[88%]. - Animação:
data-sobeno hero,data-revelaabaixo da dobra, carimbo, pontinhos "digitando" e marcador da régua. Tudo para comprefers-reduced-motion. - Ícones lucide com traço padrão; WhatsApp representado por
MessageCircle(sem logo de terceiro).
Adaptar à marca do cliente
- Marca com azul próprio: troque
--d-primary,--carteira-tintae a cor da sombra dos botões. Mantenha a capa marinho, porque ela é a carteira de trabalho. - Marca sem amarelo: o destaque pode virar verde-limão ou laranja claro, desde que funcione como marca-texto sobre o marinho e sobre o fundo claro.
- Serve para previdenciário (troque a carteira por "extrato do INSS" e os direitos por benefícios) e consumidor (nota fiscal/contrato). Para advocacia empresarial, use Alicerce.
Dois arquivos.
Um prompt.
O Carteira vira o sistema do seu agente de código: ele monta qualquer tela com esta cara, não só a landing de exemplo.
Prompt para o agente
Leia o DESIGN.md na raiz do projeto e siga as regras dele em toda tela. Importe o sistema.css uma única vez no ponto de entrada do projeto e use as classes e tokens dele em vez de criar estilos novos. Antes de cada mudança de interface, releia o DESIGN.md.
- 01Baixe os dois arquivosDESIGN.md (as regras visuais) e sistema.css (tokens, componentes e as assinaturas do design).
- 02Coloque no projetoDESIGN.md na raiz. O sistema.css importado uma vez no ponto de entrada: funciona em React, Vue, Svelte, HTML ou WordPress.
- 03Cole o prompt no seu agenteEle lê as regras e passa a montar qualquer tela (login, preços, painel) com a cara do design.
- 04Deixe a regra fixaColoque o prompt nas regras do projeto do agente para toda tela nova seguir as mesmas cores, fontes e espaçamentos.
Parecidos
Landings com tom ou nicho em comum com Carteira.