OFÍCIO, CONTRASTE E PRECISÃO
Uma estrutura.
Muitas identidades.
O novo site segue a referência da landing page: fotos em destaque, cantos retos, títulos fortes e uma seta diagonal que acompanha cada ação. O painel mantém sua própria tipografia e componentes.
01 · TIPOGRAFIA
Barlow Semi Condensed
+ Roboto
O corte começa
na conversa.
Barlow Semi Condensed 800 para os títulos, em maiúsculas, com entrelinha curta. Roboto 300 para parágrafos, 400 para botões e 500 para os rótulos pequenos. Ambas são fontes gratuitas do Google Fonts.
RÓTULOS COM ESPAÇO PARA RESPIRAR
Rótulos: 9–10 px, letras espaçadas em 0,18–0,22 em. Texto: 14–16 px, entrelinha 1,7–1,8. Hero: 78–150 px no desktop; 46–105 px no celular, conforme o comprimento.
02 · SUPERFÍCIES E CORES
O claro e o escuro
andam juntos.
Os oito papéis de cada paleta continuam definidos. O site acrescenta pares de superfícies claras e escuras, cada um com fundo, texto, texto secundário, borda e destaque próprios. A troca de paleta altera a página inteira, mantendo a composição.
SEÇÃO ESCURA
O próximo corte
começa aqui.
Serviços e rodapé usam a superfície escura.
SEÇÃO CLARA
Um lugar para
o seu estilo.
Sobre, equipe, galeria e depoimentos usam a superfície clara.
| Paleta | Seção escura | Seção clara | Texto no escuro | Texto no claro | Destaque |
|---|
A cor personalizada é opcional. Os destaques são ajustados por superfície para manter contraste; o texto sobre eles usa preto ou branco conforme a melhor leitura.
03 · COMPONENTES
Reto. Fino.
Com direção.
Botões com borda de 1 px, sem sombra e sem arredondamento. A área do texto é separada do quadrado da seta. No celular, as áreas de toque têm pelo menos 44 px e o botão de agendar fica fixo na base.
Cards de serviço são blocos sem fundo elevado, com ícone de linha e borda inferior. Fotos retangulares usam preenchimento proporcional; a galeria é quadrada. O semicírculo “Rolar” é a única forma curva estrutural.