Carteira.
Bleu du livret de travail, surligneur jaune et bulles de discussion. Droit du travail du côté du salarié : populaire, direct et fiable, sans jargon juridique et sans costume-cravate.
- Type
- Landing page
- Thème
- Clair
- Titres
- Rubik
- Texte
- Rubik
PourSalariés ou travailleurs informels de 20 à 60 ans, classes modestes, qui naviguent sur mobile et préfèrent régler les choses par WhatsApp
Sections de la page01/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.
Extrait du DESIGN.md, en portugais pour l'instant.
PourSalariés ou travailleurs informels de 20 à 60 ans, classes modestes, qui naviguent sur mobile et préfèrent régler les choses par WhatsApp
Palette
Les quatre couleurs qui définissent le design et toutes les variables de tokens.css. Cliquez pour copier.
Typographie
Rubik pour les titres, Rubik pour le texte.
TitresRubik
Aag!
Carteira en une ligne
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TexteRubik
La police de lecture porte les longs paragraphes sans fatiguer.
Texte courant, boutons, formulaires et légendes. Les titres prennent la police d'affichage ; celle-ci fait le quotidien de la page.
0123456789 · 1 234,56 € · 25/09 à 19h30
Pour qui
Ce que l'IA compare avec le client pour choisir le design.
- cabinet qui reçoit des particuliers et parle la langue du client
- acquisition par WhatsApp
- marque bleue ou jaune
- professionnel qui veut paraître proche, pas sophistiqué
- service qui doit expliquer des termes techniques
- droit des affaires ou cabinet haut de gamme (utiliser Alicerce)
- public entreprise/B2B
- marque de luxe
- ton sobre et formel
Ton
Ce qui fait Carteira
Les signatures du DESIGN.md : ce qui ne doit pas manquer à l'application.Extrait du DESIGN.md, en portugais pour l'instant.
- 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.
Règles du jeu
Directement du DESIGN.md.Extrait du DESIGN.md, en portugais pour l'instant.
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.
Deux fichiers.
Un prompt.
Carteira devient le design system de votre agent de code : il construit n'importe quel écran avec ce style, pas seulement la landing d'exemple.
Prompt pour l'agent Utiliser avec l'IA
Lis le DESIGN.md à la racine du projet et suis ses règles sur chaque écran. Importe sistema.css une seule fois au point d'entrée du projet et utilise ses classes et tokens au lieu de créer de nouveaux styles. Avant chaque changement d'interface, relis le DESIGN.md.
- 01Téléchargez les deux fichiersDESIGN.md (les règles visuelles) et sistema.css (tokens, composants et signatures du design).
- 02Ajoutez-les au projetDESIGN.md à la racine. sistema.css importé une fois au point d'entrée : fonctionne avec React, Vue, Svelte, HTML ou WordPress.
- 03Collez le prompt dans votre agentIl lit les règles et construit n'importe quel écran (connexion, tarifs, dashboard) avec le style du design.
- 04Fixez la règleMettez le prompt dans les règles du projet de l'agent pour que chaque nouvel écran suive les mêmes couleurs, polices et espacements.
Similaires
Des landings qui partagent un ton ou un secteur avec Carteira.
