Alicerce.
Editorial and sober: cream paper, navy blue and brass, classic serif and double rules. Practice areas as a Roman-numeral index and a formal contact section.
- Type
- Landing page
- Theme
- Light
- Headings
- Cormorant Garamond
- Body
- Inter
ForCompanies and individuals looking for specialized professional services
Page sections01/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.
From DESIGN.md, which is in Portuguese for now.
ForCompanies and individuals looking for specialized professional services
Palette
The four colors that define the design and every variable in tokens.css. Click to copy.
Typography
Cormorant Garamond for headings, Inter for body text.
HeadingsCormorant Garamond
Aag!
Alicerce in one line
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
BodyInter
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 with partners and professional registration
- brand in navy, dark green, burgundy or gold
- high-value service with a long-term relationship
- communication that must stay discreet under professional-board rules
- young, informal audience
- retail, promotions or prominent pricing
- leisure, food or beauty
- tech startup
Tone
What makes it Alicerce
The signatures from DESIGN.md: what must be there when you apply it.From DESIGN.md, which is in Portuguese for now.
- 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.
House rules
Straight from DESIGN.md.From DESIGN.md, which is in Portuguese for now.
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.
Two files.
One prompt.
Alicerce 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 Alicerce.
