Design System
SorrisoJa
Documentação completa dos tokens de design, componentes e padrões visuais utilizados na landing page da Clínica Odontológica SorrisoJa.
01 — Colors
Brand palette
Primary
#3B82F6
Blue 500
Primary Dark
#1D4ED8
Blue 700
Cyan
#0891B2
Cyan 600
Cyan Light
#00E5FF
Glow
Purple
#7C3AED
Violet 700
Green
#22C55E
Green 500
Dark backgrounds
Hero / Default
#040F1C
Alt section
#071828
Service card 2
#0A0514
Service card 3
#051409
Gradients
Hero
Card glow
Overlay fade
02 — Typography
Display — Heading 1
Seu sorriso,
nossa missão
Heading 2
Tratamentos especializados
32px · font-black
Heading 3
Ortodontia Moderna
20px · font-bold
Body Large
Atendimento humanizado com tecnologia de ponta para garantir o melhor resultado.
17px · regular · lh 1.7
Body Small
Processo ágil e transparente. Me explicaram cada etapa e nunca me senti ansiosa.
14px · regular · lh 1.6
Special — Label · Counter · Caption
Label
Prevenção & Diagnóstico
Counter
2.400+
pacientes atendidos
Caption
Implante · Estética · Ortodontia
04 — Badges & Tags
Service tags (filled)
Article tags (outlined)
Stars
Feature pill
05 — Cards
Feature card (dark)
Prevenção & Diagnóstico
Exames de rotina e limpeza profissional para identificar problemas antes que causem dor.
Testimonial card
“Sempre tive vergonha de sorrir em fotos. Depois das facetas, não consigo parar de sorrir.”
Fernanda Costa
Paciente — Facetas de Porcelana
Service card (dark + badge)
Article card
Stat item
2.400+
pacientes
98%
satisfação
15 anos
experiência
06 — Icons (Lucide)
Used in project