Alicerce.
Editorial y sobrio: papel crema, azul marino y latón, serifa clásica y filetes dobles. Áreas de práctica como índice en números romanos y contacto formal.
- Tipo
- Landing page
- Tema
- Claro
- Títulos
- Cormorant Garamond
- Texto
- Inter
ParaEmpresas y personas físicas que buscan un servicio profesional especializado
Secciones de la página01/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.
Del DESIGN.md, que por ahora está en portugués.
ParaEmpresas y personas físicas que buscan un servicio profesional especializado
Paleta
Los cuatro colores que definen el diseño y todas las variables de tokens.css. Haz clic para copiar.
Tipografía
Cormorant Garamond en los títulos, Inter en el texto.
TítulosCormorant Garamond
Aag!
Alicerce en una línea
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoInter
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 con socios y matrícula profesional
- marca en azul marino, verde oscuro, vino o dorado
- servicio de alto valor y relación de largo plazo
- comunicación que debe ser discreta por norma del colegio profesional
- público joven e informal
- retail, promociones o precio destacado
- ocio, comida o belleza
- startup tecnológica
Tono
Lo que lo hace Alicerce
Las firmas del DESIGN.md: lo que no puede faltar al aplicarlo.Del DESIGN.md, que por ahora está en portugués.
- 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.
Reglas del juego
Directo del DESIGN.md.Del DESIGN.md, que por ahora está en portugués.
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.
Dos archivos.
Un prompt.
Alicerce 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 Alicerce.