Carteira.
Azul de libreta de trabajo, resaltador amarillo y globos de conversación. Abogacía laboral del lado del trabajador: popular, directa y confiable, sin jerga legal y sin traje y corbata.
- Tipo
- Landing page
- Tema
- Claro
- Títulos
- Rubik
- Texto
- Rubik
ParaTrabajador formal o informal, de 20 a 60 años, clases media-baja y baja, que accede por celular y prefiere resolver por WhatsApp
Secciones de la 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.
Del DESIGN.md, que por ahora está en portugués.
ParaTrabajador formal o informal, de 20 a 60 años, clases media-baja y baja, que accede por celular y prefiere resolver por WhatsApp
Paleta
Los cuatro colores que definen el diseño y todas las variables de tokens.css. Haz clic para copiar.
Tipografía
Rubik en los títulos, Rubik en el texto.
TítulosRubik
Aag!
Carteira en una línea
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoRubik
La fuente de lectura sostiene párrafos largos sin cansar.
Texto corrido, botones, formularios y leyendas. Los títulos usan la fuente destacada; esta es la del día a día.
0123456789 · $1.234,56 · 25/09 a las 19:30
Para quién es
Lo que la IA compara con el cliente para elegir el diseño.
- estudio que atiende a personas físicas y habla el idioma del cliente
- captación por WhatsApp
- marca azul o amarilla
- profesional que quiere parecer cercano, no sofisticado
- servicio que necesita explicar términos técnicos
- abogacía empresarial o de alto nivel (usar Alicerce)
- público corporativo/B2B
- marca de lujo
- tono sobrio y formal
Tono
Lo que lo hace Carteira
Las firmas del DESIGN.md: lo que no puede faltar al aplicarlo.Del DESIGN.md, que por ahora está en portugués.
- 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.
Reglas del juego
Directo del DESIGN.md.Del DESIGN.md, que por ahora está en portugués.
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.
Dos archivos.
Un prompt.
Carteira se vuelve el sistema de tu agente de código: arma cualquier pantalla con este estilo, no solo la landing de ejemplo.
Prompt para el agente Usar con IA
Lee el DESIGN.md en la raíz del proyecto y sigue sus reglas en cada pantalla. Importa sistema.css una sola vez en el punto de entrada del proyecto y usa sus clases y tokens en lugar de crear estilos nuevos. Antes de cada cambio de interfaz, vuelve a leer el DESIGN.md.
- 01Descarga los dos archivosDESIGN.md (las reglas visuales) y sistema.css (tokens, componentes y las firmas del diseño).
- 02Ponlos en el proyectoDESIGN.md en la raíz. sistema.css importado una vez en el punto de entrada: funciona en React, Vue, Svelte, HTML o WordPress.
- 03Pega el prompt en tu agenteLee las reglas y arma cualquier pantalla (login, precios, panel) con el estilo del diseño.
- 04Deja la regla fijaPon el prompt en las reglas del proyecto del agente para que cada pantalla nueva siga los mismos colores, fuentes y espaciados.
Similares
Landings con tono o nicho en común con Carteira.
