Sereno.
Clinique claire et paisible en vert pétrole et menthe. Recherche de rendez-vous dans le hero, spécialités avec icônes, équipe avec numéros d'ordre et pied de page avec responsable médical.
- Type
- Landing page
- Thème
- Clair
- Titres
- Manrope
- Texte
- Inter
PourPatients de tous âges qui cherchent des soins et un rendez-vous
Sections de la page01/08barra de contato
Clínica clara, organizada e humana. Passa confiança sem parecer hospital: verde-petróleo, menta, muito branco e cantos macios.
Extrait du DESIGN.md, en portugais pour l'instant.
PourPatients de tous âges qui cherchent des soins et un rendez-vous
Palette
Les quatre couleurs qui définissent le design et toutes les variables de tokens.css. Cliquez pour copier.
Typographie
Manrope pour les titres, Inter pour le texte.
TitresManrope
Aag!
Sereno 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.
- plusieurs spécialités ou professionnels
- prise de rendez-vous en ligne
- marque en vert, bleu, turquoise ou tons froids
- consultation en cabinet et en ligne
- esthétique axée sur le résultat visuel (utiliser Pétala)
- restaurant/loisirs
- marque aux couleurs chaudes et vibrantes
- SaaS
Ton
Ce qui fait Sereno
Les signatures du DESIGN.md : ce qui ne doit pas manquer à l'application.Extrait du DESIGN.md, en portugais pour l'instant.
- 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.
Règles du jeu
Directement du DESIGN.md.Extrait du DESIGN.md, en portugais pour l'instant.
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).
Deux fichiers.
Un prompt.
Sereno 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 Sereno.
