Alicerce.
Éditorial et sobre : papier crème, bleu marine et laiton, empattements classiques et doubles filets. Domaines d'intervention en index à chiffres romains et contact formel.
- Type
- Landing page
- Thème
- Clair
- Titres
- Cormorant Garamond
- Texte
- Inter
PourEntreprises et particuliers à la recherche d'un service professionnel spécialisé
Sections de la page01/08Topo e navegação
Escritório tradicional, sem ser antigo. Parece a primeira página de um jornal de qualidade: serifa clássica, filetes, muito respiro e nenhum excesso.
Extrait du DESIGN.md, en portugais pour l'instant.
PourEntreprises et particuliers à la recherche d'un service professionnel spécialisé
Palette
Les quatre couleurs qui définissent le design et toutes les variables de tokens.css. Cliquez pour copier.
Typographie
Cormorant Garamond pour les titres, Inter pour le texte.
TitresCormorant Garamond
Aag!
Alicerce en une ligne
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TexteInter
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 avec associés et inscription à un ordre professionnel
- marque bleu marine, vert foncé, bordeaux ou doré
- service à forte valeur et relation de long terme
- communication qui doit rester discrète selon les règles de l'ordre
- public jeune et informel
- commerce de détail, promotions ou prix mis en avant
- loisirs, restauration ou beauté
- startup technologique
Ton
Ce qui fait Alicerce
Les signatures du DESIGN.md : ce qui ne doit pas manquer à l'application.Extrait du DESIGN.md, en portugais pour l'instant.
- 01
Cabeçalho de jornal: marca centralizada com monograma em moldura dupla e menu dividido dos dois lados, fechado por um filete duplo (
.alicerce-filete-duplo). - 02
Coluna de "fatos" ao lado do hero, como um sumário lateral.
- 03
Áreas de atuação como índice em numeração romana (I, II, III...), com linha fina até a descrição (
.alicerce-guia). - 04
Citação grande em itálico, com aspa em latão.
- 05
Blocos marinho com lista de etapas separadas por filetes.
- 06
Fotos dos sócios em tons de cinza (
.alicerce-foto), com registro em mono. - 07
Formulário formal com campos só com linha inferior.
Règles du jeu
Directement du DESIGN.md.Extrait du DESIGN.md, en portugais pour l'instant.
Identidade
- Fundo papel
#f6f3ec, superfícies#fbf9f4e#ece6d9. Nunca branco puro. - Texto e blocos azul-marinho
#13243d. Os blocos cheios (escritório, contato) são marinho com texto papel. - Detalhe latão
#a8864b: numeração romana, rótulos, a palavra em destaque do título e o botão do formulário. Só em detalhe, nunca em fundo grande. - Fontes: Cormorant Garamond 500/600 nos títulos (itálico para ênfase), Inter no texto, JetBrains Mono só em registros (OAB, CRC) e numeração de etapas.
Regras
- Cantos retos em tudo (raio 0). Nada de pílula nem sombra.
- Botões em caixa-alta espaçada; no máximo um botão cheio por tela.
- Animação só na entrada e ao rolar (
data-sobe,data-revela). - Ícones lucide pequenos, só onde forem úteis (endereço, telefone, seta).
Adaptar à marca do cliente
- Marca em verde-escuro ou vinho: troque
--d-texte--d-primarypela cor (precisa ser escura o bastante para texto) e mantenha papel e latão. - Marca com dourado próprio: troque só
--d-accent. - Contabilidade/consultoria: troque "OAB" por "CRC" e reescreva as áreas; o layout serve igual.
Deux fichiers.
Un prompt.
Alicerce 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 Alicerce.
