Sereno.
A light, calm clinic in petrol green and mint. Appointment search in the hero, specialties with icons, team with license numbers and a footer with the responsible physician.
- Type
- Landing page
- Theme
- Light
- Headings
- Manrope
- Body
- Inter
ForPatients of all ages looking for care and appointments
Page sections01/08barra de contato
Clínica clara, organizada e humana. Passa confiança sem parecer hospital: verde-petróleo, menta, muito branco e cantos macios.
From DESIGN.md, which is in Portuguese for now.
ForPatients of all ages looking for care and appointments
Palette
The four colors that define the design and every variable in tokens.css. Click to copy.
Typography
Manrope for headings, Inter for body text.
HeadingsManrope
Aag!
Sereno 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.
- several specialties or professionals
- online booking
- brand in green, blue, turquoise or cool tones
- in-person and online care
- aesthetics focused on visual results (use Pétala)
- restaurant/leisure
- brand with warm, vibrant colors
- SaaS
Tone
What makes it Sereno
The signatures from DESIGN.md: what must be there when you apply it.From DESIGN.md, which is in Portuguese for now.
- 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.
House rules
Straight from DESIGN.md.From DESIGN.md, which is in Portuguese for now.
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).
Two files.
One prompt.
Sereno 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 Sereno.