AGENDAMENTO VIA WHATSAPP · SISTEMA DE DESIGN
Design System do availabou
Um sistema SaaS calmo e focado em confirmação, ancorado em canvas branco, verde floresta (#1D6F42), verde folha de confirmação (#4AC14B) e tinta charcoal (#3C3C3C). O wordmark com double-check é a voltagem da marca — disponibilidade verificada. Tipografia Outfit + DM Sans; CTAs com raio de 10px; cards suaves em 28px.
Começar grátis →
Ver o sistema em ação
Fundação · 00
Logos e favicons
Wordmarks horizontal e ícones 1:1 (favicon). Use a versão clara em fundos claros e a versão escura em fundos escuros — os checks verdes permanecem iguais nos dois.
Fundação · 01
Paleta de cores
Dupla voltagem em verde: o floresta carrega CTAs e chrome; o folha carrega confirmação, status online e o check da frente no logo. O charcoal acompanha o wordmark.
Marca e destaque
Superfície e texto
Escopo WhatsApp (somente chat)
Fundação · 02
Tipografia
Outfit para display, botões e métricas. DM Sans para corpo, nav e chat. Sem terceira família.
Seu recepcionista digital
Por que usar o availabou
Agenda sincronizada com horários reais
O chatbot conversa com seus clientes, respeita sua agenda real e confirma horários automaticamente — sem planilhas e sem retrabalho.
para WhatsApp
75%
Começar grátis
Componentes · 03
Variantes de botão
CTAs primários usam raio de 10px — amigáveis sem parecer brinquedo. Chips de confirmação vão em pill completo no verde folha.
Começar grátis →button-primary
Ver o sistemabutton-secondary
Confirmarbutton-confirm
Agendarbutton-pill-ghost
Desabilitadobutton-primary-disabled
Componentes · 04
Cards e containers
Cards de feature ficam em faixas suaves, com elevação leve e raio de 28px. Poços de ícone usam primary-soft.
Atendimento 24/7
O chatbot responde no WhatsApp dentro das regras que você define — inclusive fora do horário.
Agenda sincronizada
Só oferece slots disponíveis na sua agenda real. Confirmação reduz faltas.
Confirmação automática
Lembretes e avisos via mensagem de sistema — sem trabalho manual da recepção.
Componentes · 05
Elementos de formulário
Inputs de 48px, raio 10px, borda hairline. No foco: borda floresta + anel de foco folha.
Fundação · 06
Escala de espaçamento
Unidade base de 4px. Faixas de seção em 64–96px; interior de cards em 24–28px.
2
4
8
12
16
24
32
48
64
Fundação · 07
Raio de borda
md 10px para botões/inputs · 2xl 28px para cards de feature · full para chips e status.
xs 4
sm 8
md 10
lg 16
xl 20
2xl 28
full
Fundação · 08
Elevação
A maioria das superfícies fica plana. Sombra suave nos cards; lift do card no widget de chat; brilho opcional no CTA.
plana
suave
card
cta
Compostos · 09
Componentes assinatura
Top nav, badges de confirmação e o widget de chat — a prova de produto acima da dobra.
BenefíciosComo funcionaFAQ
Começar grátis
Confirmado
Pendente
Confirmar
Agendar
Taxa de confirmação
75%
Esta semana
12 agendamentos
12 agendamentos
Assistente availabou
Online agora
Olá! Quer agendar um horário?
Sim, amanhã à tarde
Perfeito — tenho 14:00 e 16:30. Qual prefere?
Sistema · 10
Comportamento responsivo
Conteúdo limitado a ~1152px. No mobile o hero empilha; CTAs ficam em largura total; grids reduzem colunas com limpeza.
| Breakpoint | Largura | Principais mudanças |
|---|---|---|
| Mobile | < 768px | Nav em hamburger; hero empilha; CTAs full-width; grids 1 coluna |
| Tablet | 768–1024px | Links da nav voltam; grids de feature em 2 colunas |
| Desktop | 1024–1280px | Nav centralizada; hero em 2 colunas; grids em 4 colunas |
| Wide | > 1280px | Conteúdo limita em ~1152px; gutters absorvem o resto |
Carregando DESIGN.md…