Sereno.
Clínica clara y tranquila en verde petróleo y menta. Búsqueda de turno en el hero, especialidades con íconos, equipo con matrícula y pie de página con responsable técnico.
- Tipo
- Landing page
- Tema
- Claro
- Títulos
- Manrope
- Texto
- Inter
ParaPacientes de todas las edades que buscan atención y turnos
Secciones de la 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.
Del DESIGN.md, que por ahora está en portugués.
ParaPacientes de todas las edades que buscan atención y turnos
Paleta
Los cuatro colores que definen el diseño y todas las variables de tokens.css. Haz clic para copiar.
Tipografía
Manrope en los títulos, Inter en el texto.
TítulosManrope
Aag!
Sereno 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.
- varias especialidades o profesionales
- turnos online
- marca en verde, azul, turquesa o tonos fríos
- atención presencial y online
- estética enfocada en resultado visual (usar Pétala)
- restaurante u ocio
- marca con colores cálidos y vibrantes
- SaaS
Tono
Lo que lo hace Sereno
Las firmas del DESIGN.md: lo que no puede faltar al aplicarlo.Del DESIGN.md, que por ahora está en portugués.
- 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.
Reglas del juego
Directo del DESIGN.md.Del DESIGN.md, que por ahora está en portugués.
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).
Dos archivos.
Un prompt.
Sereno 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 Sereno.
