Sereno.
Clínica clara e tranquila em verde-petróleo e menta. Busca de horário no hero, especialidades com ícones, equipe com registro e rodapé com responsável técnico.
- Tipo
- Landing page
- Tema
- Claro
- Títulos
- Manrope
- Texto
- Inter
ParaPacientes de todas as idades procurando atendimento e agendamento
Seções da página01/08barra de contato
Clínica clara, organizada e humana. Passa confiança sem parecer hospital: verde-petróleo, menta, muito branco e cantos macios.
ParaPacientes de todas as idades procurando atendimento e agendamento
Paleta
As quatro cores que definem o design e todas as variáveis do tokens.css. Clique para copiar.
Tipografia
Manrope nos títulos, Inter no texto.
TítulosManrope
Aag!
Sereno em uma linha
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoInter
A fonte de leitura carrega parágrafos longos sem cansar.
Texto corrido, botões, formulários e legendas. Os títulos ficam com a fonte de destaque; aqui é o dia a dia da página.
0123456789 · R$ 1.234,56 · 25/09 às 19h30
Para quem serve
O que a skill /escolher-design compara com o cliente.
- várias especialidades ou profissionais
- agendamento online
- marca em verde, azul, turquesa ou tons frios
- atendimento presencial e online
- estética focada em resultado visual (usar Pétala)
- restaurante/lazer
- marca com cores quentes e vibrantes
- SaaS
Tom
O que faz ser Sereno
As assinaturas do DESIGN.md: o que não pode faltar ao aplicar.
- 01
Barra fina de contato no topo com endereço e telefone.
- 02
Busca de especialidade no hero, em cartão branco com sombra suave.
- 03
Foto com um canto bem mais arredondado que os outros (
rounded-tr-[8rem]). - 04
Rótulos de seção em pílula menta com texto verde.
- 05
Cards de especialidade que ficam verdes por inteiro no hover.
- 06
Passos ligados por uma linha, com números em círculos menta.
Regras do jogo
Direto do DESIGN.md.
Identidade
- Fundo branco esverdeado
#f4f7f6, seções alternando com branco#ffffffe menta clara#e5efec. - Texto petróleo escuro
#0f2a2e; secundário#52696b. - Primária verde-petróleo
#0e6f68para botões, barra de contato e chamada final. - Destaque menta
#8fd3c2só em números de passos, pontos e brilhos. - Fontes: Manrope bold (tracking apertado) nos títulos, Inter no texto, mono só em registros (CRM/CRP).
Regras
- Nada de vermelho, nem de imagem de sangue, agulha ou hospital. Ícones lucide de traço.
- Texto curto e acolhedor, sem jargão médico.
- Sombras sempre suaves e esverdeadas, nunca pretas.
Adaptar à marca do cliente
- Odontologia costuma usar azul:
--d-primary: #1f5fa8e--d-accent: #9cc9f0. - Veterinária: primária pode ir para um verde mais vivo (
#2f8f4e).
Dois arquivos.
Um prompt.
O Sereno vira o sistema do seu agente de código: ele monta qualquer tela com esta cara, não só a landing de exemplo.
Prompt para o agente
Leia o DESIGN.md na raiz do projeto e siga as regras dele em toda tela. Importe o sistema.css uma única vez no ponto de entrada do projeto e use as classes e tokens dele em vez de criar estilos novos. Antes de cada mudança de interface, releia o DESIGN.md.
- 01Baixe os dois arquivosDESIGN.md (as regras visuais) e sistema.css (tokens, componentes e as assinaturas do design).
- 02Coloque no projetoDESIGN.md na raiz. O sistema.css importado uma vez no ponto de entrada: funciona em React, Vue, Svelte, HTML ou WordPress.
- 03Cole o prompt no seu agenteEle lê as regras e passa a montar qualquer tela (login, preços, painel) com a cara do design.
- 04Deixe a regra fixaColoque o prompt nas regras do projeto do agente para toda tela nova seguir as mesmas cores, fontes e espaçamentos.
Parecidos
Landings com tom ou nicho em comum com Sereno.