Rótulo.
Toute la page est un emballage : vrai tableau nutritionnel à bordure noire et gros filets, sceaux à la loupe pleins d'humour, code-barres et barquettes vues du dessus en SVG. Blanc, noir pur, vert feuille et orange carotte.
- Type
- Landing page
- Thème
- Clair
- Titres
- Oswald
- Texte
- Source Sans 3
PourAdultes de 22 à 50 ans au quotidien chargé qui veulent mieux manger sans cuisiner ; achat récurrent par abonnement ou pack
Sections de la page01/09Topo e navegação
A landing é a embalagem do produto: tabela nutricional, selos em lupa, código de barras e lista de ingredientes. Direto, informativo e com humor. Não é clínica nem academia.
Extrait du DESIGN.md, en portugais pour l'instant.
PourAdultes de 22 à 50 ans au quotidien chargé qui veulent mieux manger sans cuisiner ; achat récurrent par abonnement ou pack
Palette
Les quatre couleurs qui définissent le design et toutes les variables de tokens.css. Cliquez pour copier.
Typographie
Oswald pour les titres, Source Sans 3 pour le texte.
TitresOswald
Aag!
Rótulo en une ligne
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TexteSource Sans 3
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.
- marque avec vert, orange ou noir et blanc
- produit avec information nutritionnelle
- vente par pack/abonnement
- ton léger avec de l'humour
- clinique médicale sérieuse
- marque de luxe ou gastronomique sophistiquée
- salle de sport agressive
- public qui attend un accueil tout en douceur
Ton
Ce qui fait Rótulo
Les signatures du DESIGN.md : ce qui ne doit pas manquer à l'application.Extrait du DESIGN.md, en portugais pour l'instant.
- 01
Tabela nutricional (
.rotulo-tabela+.rotulo-grossa/.rotulo-media/.rotulo-fina): título, "Porção", régua grossa, cabeçalho "Quantidade por porção | %VD*", linhas finas, nota "*%VD". No hero ela descreve o serviço com piada; no cardápio, os macros reais de cada prato. - 02
Selo em lupa (
Selo): colorido, torto, com contorno e sombra. Só mensagens positivas ("Alto em sabor", "Baixo em tédio"). Nunca preto com texto branco nem "alto em açúcar/sódio/gordura": não pode parecer o selo oficial da Anvisa. - 03
Código de barras SVG (
Barras) no hero e na chamada final. - 04
Marmitas vistas de cima (
Prato): SVG chapado, cores da comida emcontent.ts. - 05
Faixa corrida preta tipo lacre ("Conservar congelado a -18 °C").
- 06
Ingredientes em texto corrido pequeno, "Alérgicos" em caixa-alta negrito, "Modo de preparo" em 4 passos.
Règles du jeu
Directement du DESIGN.md.Extrait du DESIGN.md, en portugais pour l'instant.
Identidade
- Fundo branco embalagem
#ffffff; blocos alternados emsurface-2#f1f4ea(verde quase branco). - Texto e réguas em preto puro
#000. Borda preta de 2-4px em tudo que é bloco. - Primária verde-folha
#13a538em botões, destaque do título e chamada final. Texto sobre verde é preto. - Destaque laranja-cenoura
#f26a1bem selos, etiqueta "mais pedido", último passo e sublinhados. - Fontes: Oswald (condensada, bold, caixa-alta) nos títulos e números; Source Sans 3 no texto; mono só em lote, peso e código.
- Cantos quase retos (
4px). Sombra sempre dura e preta (4px 4px 0 #000), nunca desfocada.
Regras
- Títulos em Oswald caixa-alta,
leadingapertado. Rótulo de seção em etiqueta preta. - Botões
.rotulo-botao: borda preta + sombra dura que "afunda" no clique. Máximo 2 por tela. - Muita régua preta, pouca cor: verde e laranja são pontuais, o resto é preto no branco.
- Animação:
data-sobeno hero,data-revelaabaixo; faixa corrida e selo balançando param com movimento reduzido.
Adaptar à marca do cliente
- Troque
--d-primarypela cor da marca, desde que texto preto continue legível sobre ela (verde, amarelo, laranja, rosa claro funcionam; azul-marinho ou roxo escuro não). - Loja de suplementos: a tabela vira a do produto (proteína por dose), selos "Alto em proteína".
- Confeitaria fit: troque a marmita por um pote/bolo visto de cima no mesmo estilo chapado.
- Nutricionista sem produto: tabela do hero descreve a consulta ("Porção: 1 consulta de 60 min").
Deux fichiers.
Un prompt.
Rótulo 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 Rótulo.
