Carteira.
Work-booklet blue, yellow highlighter and chat bubbles. Labor law on the worker's side: popular, direct and trustworthy, no legalese and no suit and tie.
- Type
- Landing page
- Theme
- Light
- Headings
- Rubik
- Body
- Rubik
ForFormal or informal workers aged 20-60, lower-middle and low-income, browsing on mobile and preferring to sort things out on WhatsApp
Page sections01/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.
From DESIGN.md, which is in Portuguese for now.
ForFormal or informal workers aged 20-60, lower-middle and low-income, browsing on mobile and preferring to sort things out on WhatsApp
Palette
The four colors that define the design and every variable in tokens.css. Click to copy.
Typography
Rubik for headings, Rubik for body text.
HeadingsRubik
Aag!
Carteira in one line
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
BodyRubik
The reading font carries long paragraphs without tiring the eye.
Running text, buttons, forms and captions. Headings get the display font; this is the page's everyday voice.
0123456789 · $1,234.56 · Sep 25, 7:30 PM
Who it's for
What the AI compares with your client to pick the design.
- firm serving individuals and speaking the client's language
- lead capture through WhatsApp
- blue or yellow brand
- professional who wants to seem approachable, not sophisticated
- service that needs to explain technical terms
- corporate or high-end law (use Alicerce)
- corporate/B2B audience
- luxury brand
- sober, formal tone
Tone
What makes it Carteira
The signatures from DESIGN.md: what must be there when you apply it.From DESIGN.md, which is in Portuguese for now.
- 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.
House rules
Straight from DESIGN.md.From DESIGN.md, which is in Portuguese for now.
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.
Two files.
One prompt.
Carteira becomes your coding agent's design system: it builds any screen with this look, not just the sample landing.
Prompt for the agent Use with AI
Read the DESIGN.md at the project root and follow its rules on every screen. Import sistema.css once at the project's entry point and use its classes and tokens instead of creating new styles. Before every UI change, reread DESIGN.md.
- 01Download the two filesDESIGN.md (the visual rules) and sistema.css (tokens, components and the design's signatures).
- 02Add them to the projectDESIGN.md at the root. sistema.css imported once at the entry point: works with React, Vue, Svelte, HTML or WordPress.
- 03Paste the prompt into your agentIt reads the rules and builds any screen (login, pricing, dashboard) with the design's look.
- 04Make the rule stickPut the prompt in your agent's project rules so every new screen follows the same colors, fonts and spacing.
Similar
Landings that share a tone or niche with Carteira.
