---
version: alpha
name: Availabou-design-system
description: Sistema SaaS calmo e focado em confirmação para agendamento via WhatsApp — ancorado em canvas branco, primary floresta (#1D6F42), confirmação folha (#4AC14B) e tinta charcoal (#3C3C3C). O wordmark com double-check é a voltagem da marca — disponibilidade verificada. Tipografia Outfit (display) + DM Sans (corpo); CTAs com raio 10px; cards suaves 20–28px; chips de demo em pill. UI de produto e marketing compartilham um único set de tokens; superfícies de chat usam o calor do WhatsApp só dentro do widget de conversa.
source: https://availabou.com
logo: ./assets/logo-light.png
logo-dark: ./assets/logo-dark.png

colors:
  primary: "#1D6F42"
  primary-hover: "#155233"
  primary-active: "#0F3C25"
  primary-disabled: "#D1EBE0"
  primary-soft: "#E8F5EE"
  primary-muted: "#27945A"
  alt: "#4AC14B"
  alt-hover: "#3AAF3C"
  alt-soft: "#E9F9EA"
  secondary: "#3C3C3C"
  ink: "#3C3C3C"
  ink-strong: "#1A1A1A"
  body: "#3C3C3C"
  muted: "#6B6B6B"
  muted-soft: "#8F8F8F"
  hairline: "#E5E5E5"
  hairline-soft: "#EEEEEE"
  border-subtle: "rgba(60, 60, 60, 0.08)"
  border-strong: "#C8C8C8"
  canvas: "#FFFFFF"
  surface-soft: "#F7F8F6"
  surface-card: "#FFFFFF"
  surface-strong: "#F4F6F5"
  surface-tint: "#E8F5EE"
  on-primary: "#FFFFFF"
  on-dark: "#FFFFFF"
  on-alt: "#FFFFFF"
  success: "#4AC14B"
  success-text: "#1D6F42"
  warning: "#D97706"
  warning-soft: "#FEF3C7"
  error: "#C13515"
  error-hover: "#B32505"
  error-soft: "#FEECEC"
  info: "#2563EB"
  info-soft: "#EFF6FF"
  legal-link: "#1D6F42"
  online-dot: "#4AC14B"
  scrim: "#000000"
  wa-bg: "#EFEAE2"
  wa-out: "#DCF8C6"
  wa-in: "#FFFFFF"
  wa-header: "#075E54"

typography:
  display-xl:
    fontFamily: "'Outfit', system-ui, sans-serif"
    fontSize: 54px
    fontWeight: 800
    lineHeight: 1.08
    letterSpacing: -0.02em
  display-lg:
    fontFamily: "'Outfit', system-ui, sans-serif"
    fontSize: 36px
    fontWeight: 800
    lineHeight: 1.12
    letterSpacing: -0.02em
  display-md:
    fontFamily: "'Outfit', system-ui, sans-serif"
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: -0.015em
  display-sm:
    fontFamily: "'Outfit', system-ui, sans-serif"
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: -0.01em
  title-md:
    fontFamily: "'Outfit', system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: -0.01em
  title-sm:
    fontFamily: "'Outfit', system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.35
    letterSpacing: 0
  body-lg:
    fontFamily: "'DM Sans', system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0
  body-md:
    fontFamily: "'DM Sans', system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0
  body-sm:
    fontFamily: "'DM Sans', system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0
  caption:
    fontFamily: "'DM Sans', system-ui, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.35
    letterSpacing: 0
  caption-sm:
    fontFamily: "'DM Sans', system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.35
    letterSpacing: 0
  eyebrow:
    fontFamily: "'DM Sans', system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: 0.04em
  badge:
    fontFamily: "'DM Sans', system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0
  button-md:
    fontFamily: "'Outfit', system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: 0
  button-sm:
    fontFamily: "'Outfit', system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: 0
  nav-link:
    fontFamily: "'DM Sans', system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 0
  wordmark:
    fontFamily: "'Outfit', system-ui, sans-serif"
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: -0.02em
  metric-lg:
    fontFamily: "'Outfit', system-ui, sans-serif"
    fontSize: 40px
    fontWeight: 800
    lineHeight: 1.1
    letterSpacing: -0.02em
  chat-body:
    fontFamily: "'DM Sans', system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0

rounded:
  none: 0px
  xs: 4px
  sm: 8px
  md: 10px
  lg: 16px
  xl: 20px
  "2xl": 28px
  "3xl": 40px
  full: 9999px

spacing:
  xxs: 2px
  xs: 4px
  sm: 8px
  md: 12px
  base: 16px
  lg: 24px
  xl: 32px
  xxl: 48px
  section: 64px
  section-lg: 96px

elevation:
  none: none
  soft: "0 8px 30px -12px rgba(15, 20, 18, 0.08)"
  card: "0 16px 40px -20px rgba(15, 20, 18, 0.18)"
  cta: "0 8px 24px -6px rgba(29, 111, 66, 0.45)"
  bubble: "0 1px 0.5px rgba(0, 0, 0, 0.06)"
  focus-ring: "0 0 0 3px rgba(74, 193, 75, 0.35)"

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-md}"
    rounded: "{rounded.md}"
    padding: 12px 24px
    height: 48px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
  button-primary-active:
    backgroundColor: "{colors.primary-active}"
    textColor: "{colors.on-primary}"
  button-primary-disabled:
    backgroundColor: "{colors.primary-disabled}"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.md}"
    padding: 11px 23px
    height: 48px
    border: "1px solid {colors.border-subtle}"
  button-tertiary-text:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.button-sm}"
  button-confirm:
    backgroundColor: "{colors.alt}"
    textColor: "{colors.on-alt}"
    typography: "{typography.button-sm}"
    rounded: "{rounded.full}"
    padding: 8px 16px
    height: 36px
  button-pill-ghost:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.muted}"
    typography: "{typography.badge}"
    rounded: "{rounded.full}"
    padding: 8px 14px
    border: "1px solid {colors.border-subtle}"
  icon-button:
    backgroundColor: "{colors.surface-strong}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    height: 40px
  top-nav:
    backgroundColor: "rgba(255,255,255,0.90)"
    textColor: "{colors.muted}"
    typography: "{typography.nav-link}"
    height: 72px
    backdropFilter: blur(12px)
  nav-link-active:
    textColor: "{colors.ink-strong}"
  wordmark-lockup:
    textColor: "{colors.secondary}"
    typography: "{typography.wordmark}"
  check-mark-primary:
    fill: "{colors.primary}"
  check-mark-alt:
    fill: "{colors.alt}"
  hero-eyebrow:
    textColor: "{colors.primary}"
    typography: "{typography.eyebrow}"
  feature-card:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.2xl}"
    padding: 28px
    border: "1px solid {colors.border-subtle}"
    shadow: "{elevation.soft}"
  feature-icon-well:
    backgroundColor: "{colors.primary-soft}"
    textColor: "{colors.primary}"
    rounded: "{rounded.lg}"
    height: 48px
  step-number-pill:
    backgroundColor: "{colors.primary-soft}"
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    height: 36px
  step-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 16px
    border: "1px solid {colors.border-subtle}"
    shadow: "{elevation.soft}"
  step-card-complete:
    backgroundColor: "{colors.primary-soft}"
    textColor: "{colors.success-text}"
    border: "1px solid {colors.primary-disabled}"
  chat-widget:
    backgroundColor: "{colors.canvas}"
    rounded: "{rounded.xl}"
    shadow: "{elevation.card}"
    border: "1px solid {colors.border-subtle}"
  chat-header:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    padding: 14px 16px
  chat-body:
    backgroundColor: "{colors.surface-strong}"
    typography: "{typography.chat-body}"
  chat-bubble-in:
    backgroundColor: "{colors.wa-in}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    shadow: "{elevation.bubble}"
  chat-bubble-out:
    backgroundColor: "{colors.wa-out}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
  online-badge:
    backgroundColor: "{colors.alt}"
    textColor: "{colors.on-alt}"
    rounded: "{rounded.full}"
    height: 8px
  panel-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    rounded: "{rounded.2xl}"
    padding: 24px
    border: "1px solid {colors.border-subtle}"
    shadow: "{elevation.soft}"
  metric-tile:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 12px
  status-confirmed:
    backgroundColor: "{colors.alt-soft}"
    textColor: "{colors.success-text}"
    typography: "{typography.badge}"
    rounded: "{rounded.full}"
    padding: 4px 10px
  status-pending:
    backgroundColor: "{colors.warning-soft}"
    textColor: "{colors.warning}"
    typography: "{typography.badge}"
    rounded: "{rounded.full}"
    padding: 4px 10px
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: 14px 12px
    height: 48px
    border: "1px solid {colors.hairline}"
  text-input-focus:
    border: "2px solid {colors.primary}"
    shadow: "{elevation.focus-ring}"
  text-input-error:
    border: "1px solid {colors.error}"
    textColor: "{colors.error}"
  faq-item:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    borderBottom: "1px solid {colors.hairline}"
  footer-light:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.muted}"
    typography: "{typography.body-sm}"
    padding: 48px 24px
  footer-link:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
  legal-band:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.muted-soft}"
    typography: "{typography.caption-sm}"
  cta-band:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.2xl}"
    padding: 48px
---

## Visão geral

**availabou** é um produto de agendamento focado em confirmação para WhatsApp — um recepcionista digital que marca, confirma e lembra sem o caos de planilhas. O sistema visual espelha essa promessa: canvas branco limpo (`{colors.canvas}`), tinta charcoal do wordmark (`{colors.secondary}` / `{colors.ink}` — #3C3C3C), voltagem verde floresta (`{colors.primary}` — #1D6F42) para confiança e ação primária, e verde folha (`{colors.alt}` — #4AC14B) para o momento “feito / disponível / online” codificado nos double-checks do logo.

Diferente de marketplaces que apoiam a hierarquia em fotografia, o availabou apoia-se em **prova de UI de produto** — o demo de chat ao vivo, métricas do painel e fluxos em etapas carregam o peso visual. A tipografia de display (**Outfit**) pode ir ousada (700–800) porque a marca vende clareza operacional, não romance editorial. O corpo (**DM Sans**) permanece amigável e altamente legível para copy de produto em português do Brasil.

A linguagem de forma é **suave, porém proposital**: CTAs primários usam `{rounded.md}` (10px) — amigáveis sem virar brinquedo; cards de feature e painel abrem para `{rounded.2xl}` (~28px); chips de modo e badges de status vão em pill completo (`{rounded.full}`). A elevação fica leve — uma sombra suave de card e um lift do widget de chat — para que os CTAs verdes continuem as superfícies mais altas da página.

**Características-chave:**
- Dupla voltagem em verde: `{colors.primary}` (#1D6F42) carrega CTAs, headers e chrome do chat; `{colors.alt}` (#4AC14B) carrega confirmação, status online, glifos de check e momentos de “sucesso” — ecoando os ticks sobrepostos do logo.
- Identidade wordmark-first: **availabou** em minúsculas no charcoal com o “v” em double-check (ou o lockup de checks adjacente do site). Nunca recolore os checks para um único verde plano.
- Pareamento tipográfico: **Outfit** para display / botões / métricas; **DM Sans** para corpo / nav / chat. Sem terceira família.
- Marketing liderado pelo produto: o hero combina headline curta + demo do widget de chat; faixas de seção alternam `{colors.canvas}` e `{colors.surface-soft}` (#f7f8f6).
- Geometria suave: botões 10px, cards 16–28px, chips em pill; sem cantos duros de enterprise.
- Calor do WhatsApp com escopo: tokens `{colors.wa-*}` só em superfícies de chat/conversa — nunca como chrome de página.
- Movimento quieto: reveal no scroll, seta do CTA (+2px), entrada de bolha de chat. Preferir fallbacks de `prefers-reduced-motion`.

## Marca

### Wordmark
O lockup oficial é o wordmark horizontal (`./assets/logo-light.png` no claro; `./assets/logo-dark.png` no escuro): sans geométrica em minúsculas, letras charcoal (`#3C3C3C`) ou brancas no escuro, com a letra **v** substituída por dois checks sobrepostos —
- check de trás / direita → `{colors.primary}` (#1D6F42)
- check da frente / esquerda → `{colors.alt}` (#4AC14B)

**Regras:**
- Preferir o wordmark completo em fundos claros; espaço mínimo de respiro = altura do counter do “a” em todos os lados.
- Não esticar, contornar, adicionar sombra ou recolorir os checks fora do par de tokens acima.
- Em superfícies escuras / verde primary, usar o wordmark branco com o mesmo par de verdes nos checks (os checks não viram brancos).
- Favicon / ícone do app: recortar só o double-check em branco ou `{colors.primary-soft}`, nunca sobre fotografia movimentada.

### Glifo de check (UI)
A UI inline pode usar um SVG simplificado de double-check (como em [availabou.com](https://availabou.com)) em 16–20px ao lado do wordmark em texto, preenchido com `{colors.primary}` + `{colors.alt}` a ~55% de opacidade no check de trás. Ícones de check único em listas de feature usam só `{colors.primary}` — reserve o double-check para momentos de marca e agendamentos confirmados.

## Cores

### Marca e destaque
- **Primary floresta** (`{colors.primary}` — #1D6F42): Verde central da marca. Preenchimento de CTA (“Começar grátis”), header do widget de chat, eyebrows, poços de ícone, bordas de foco, links de marca no footer.
- **Primary hover** (`{colors.primary-hover}` — #155233): Escurecimento no hover / próximo ao press para `{component.button-primary-hover}`.
- **Primary active** (`{colors.primary-active}` — #0F3C25): Estado de press mais profundo e texto de alto contraste em poços verdes suaves.
- **Primary disabled** (`{colors.primary-disabled}` — #D1EBE0): Tint pálido para CTAs desabilitados.
- **Primary soft** (`{colors.primary-soft}` — #E8F5EE): Poços de ícone, cards de etapa concluída, tint suave de seção.
- **Alt folha** (`{colors.alt}` — #4AC14B): Verde de confirmação do check da frente no logo. Dot online, badges “Confirmado”, chips de modo confirmar, toasts de sucesso, traço frontal do double-check. Usar com parcimônia para continuar sendo sinal, não decoração.
- **Alt soft** (`{colors.alt-soft}` — #E9F9EA): Fundo de chips de sucesso / confirmado.

### Superfície
- **Canvas** (`{colors.canvas}` — #FFFFFF): Piso padrão da página no marketing e no shell do app.
- **Surface soft** (`{colors.surface-soft}` — #F7F8F6): Faixas de seção alternadas (Benefícios, Implementação, Integração) — cinza-menta frio, não cinza puro.
- **Surface strong** (`{colors.surface-strong}` — #F4F6F5): Piso do corpo do chat e fills mais densos de painel.
- **Surface card** (`{colors.surface-card}` — #FFFFFF): Cards de feature / painel sobre faixas suaves.

### Hairlines e bordas
- **Hairline** (`{colors.hairline}` — #E5E5E5): Regras de FAQ, bordas de input, separadores de tabela.
- **Hairline soft** (`{colors.hairline-soft}` — #EEEEEE): Divisores editoriais longos.
- **Border subtle** (`{colors.border-subtle}` — rgba(60,60,60,0.08)): Contorno padrão de card e widget — mais suave que cinza sólido.
- **Border strong** (`{colors.border-strong}` — #C8C8C8): Botões outline desabilitados / contornos fortes de campo.

### Texto
- **Secondary / Ink** (`{colors.secondary}` / `{colors.ink}` — #3C3C3C): Charcoal canônico do wordmark. Corpo, botões secundários, texto padrão de UI.
- **Ink strong** (`{colors.ink-strong}` — #1A1A1A): Títulos de display e nav ativa — um passo mais escuro que o wordmark para peso óptico em tamanhos grandes.
- **Muted** (`{colors.muted}` — #6B6B6B): Links de nav em repouso, parágrafos de apoio, corpo do footer.
- **Muted soft** (`{colors.muted-soft}` — #8F8F8F): Texto legal / secundário desabilitado.
- **On primary** (`{colors.on-primary}` — #FFFFFF): Texto e ícones em CTAs floresta e headers de chat.

### Semântico
- **Success** = `{colors.alt}` com texto `{colors.success-text}` (`{colors.primary}`) — sucesso nunca usa um verde aleatório fora do par da marca.
- **Warning** (`{colors.warning}` — #D97706) + fill âmbar suave para slots pendentes / atenção.
- **Error** (`{colors.error}` — #C13515) para validação; hover `{colors.error-hover}`.
- **Info** (`{colors.info}` — #2563EB) só para links informativos fora da marca (docs, avisos raros de sistema).

### Escopo WhatsApp (somente chat)
- **wa-bg** #EFEAE2 · **wa-out** #DCF8C6 · **wa-in** #FFFFFF · **wa-header** #075E54  
Esses tokens recriam a familiaridade da conversa dentro de `{component.chat-widget}` / bolhas de demo. **Não** use wa-header como primary de página ou marketing — o primary floresta carrega o chrome do produto.

### Scrim
- **Scrim** (`{colors.scrim}` — #000000 a 40–50% de opacidade): Fundo de modal / sheet.

## Tipografia

### Famílias
| Papel | Família | Por quê |
|---|---|---|
| Display / chrome de UI | **Outfit** | Geométrica, confiante, combina com a energia sans arredondada do wordmark; carrega CTAs, heroes, métricas. |
| Corpo / copy de produto | **DM Sans** | Altamente legível para UI PT-BR, formulários, chat, nav; terminais mais suaves mantêm o tom de recepcionista. |

Fallback: `system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, sans-serif`.

Carga Google Fonts (produção):
```
family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400
&family=Outfit:wght@500;600;700;800
```

### Hierarquia

| Token | Tamanho | Peso | Line height | Uso |
|---|---|---|---|---|
| `{typography.display-xl}` | 54px | 800 | 1.08 | Hero h1 de marketing |
| `{typography.display-lg}` | 36px | 800 | 1.12 | h2 de seção |
| `{typography.display-md}` | 28px | 700 | 1.2 | Títulos de painel / heroes médios |
| `{typography.display-sm}` | 22px | 700 | 1.25 | Títulos de subseção |
| `{typography.title-md}` | 18px | 700 | 1.3 | Títulos de card de feature |
| `{typography.title-sm}` | 16px | 600 | 1.35 | Cabeças de coluna do footer, títulos densos |
| `{typography.body-lg}` | 18px | 400 | 1.55 | Parágrafo de apoio do hero |
| `{typography.body-md}` | 16px | 400 | 1.55 | Texto corrido padrão |
| `{typography.body-sm}` | 14px | 400 | 1.45 | Corpo de card, meta, respostas de FAQ |
| `{typography.caption}` | 13px | 500 | 1.35 | Labels de campo, texto de ajuda |
| `{typography.caption-sm}` | 12px | 400 | 1.35 | Linha legal |
| `{typography.eyebrow}` | 14px | 600 | 1.3 | Eyebrows de seção (“Benefícios”, “para WhatsApp”) em primary |
| `{typography.badge}` | 12px | 600 | 1.2 | Chips de status, pills de modo do demo |
| `{typography.button-md}` | 16px | 600 | 1.25 | Labels de CTA primary / secondary |
| `{typography.button-sm}` | 14px | 600 | 1.25 | Botões compactos |
| `{typography.nav-link}` | 14px | 500 | 1.25 | Top nav |
| `{typography.wordmark}` | 22px | 700 | 1 | Fallback em texto quando o logo SVG/PNG não estiver disponível |
| `{typography.metric-lg}` | 40px | 800 | 1.1 | Números de KPI do painel (“12”, “75%”) |
| `{typography.chat-body}` | 14px | 400 | 1.4 | Copy de bolha de chat |

### Princípios
- Eyebrows ficam em `{colors.primary}` — nunca cinza, nunca `{colors.alt}` (alt é reservado à confirmação).
- O h1 do hero pode destacar um único substantivo de produto (“WhatsApp”) em `{colors.primary}` — no máximo uma palavra de destaque.
- Métricas são o único lugar em que o tipo “grita” dentro do shell do app; heroes de marketing usam tamanho + peso, não grito de cor.
- Evitar all-caps salvo micro badges raros; o availabou lê como conversa em minúsculas (como o wordmark).

## Layout

### Sistema de espaçamento
- **Unidade base:** 4px (com micro-passo de 2px).
- **Tokens:** `{spacing.xxs}` 2 · `{spacing.xs}` 4 · `{spacing.sm}` 8 · `{spacing.md}` 12 · `{spacing.base}` 16 · `{spacing.lg}` 24 · `{spacing.xl}` 32 · `{spacing.xxl}` 48 · `{spacing.section}` 64 · `{spacing.section-lg}` 96.
- **Padding de seção:** 64–96px vertical no marketing; shell do app mais denso (24–32px).
- **Padding de card:** 24–28px para cards de feature/painel; 16px para linhas de etapa.
- **Gutters:** 16–24px entre cards; 32px+ entre coluna de copy do hero e demo de chat.

### Grid e container
- **Largura máxima de conteúdo:** ~72rem / 1152px (`max-w-6xl`) centralizado — alinhado ao site de marketing.
- **Hero:** 2 colunas no desktop (copy | widget de chat); empilha no mobile com CTAs em largura total.
- **Grids de feature:** cards 2×2 ou 4 colunas; fluxos de etapa 4 colunas colapsando para 1.
- **Painel do app:** conteúdo + trilho opcional de insight à direita; faixa de calendário/semana usa tiles de superfície suave.

### Filosofia de whitespace
Hero aberto (generoso) → prova de produto mais densa abaixo. Faixas de seção em verde suave criam ritmo sem bordas pesadas. O widget de chat é a âncora visual acima da dobra — trate-o como screenshot de produto, não ilustração decorativa.

## Elevação

Três níveis intencionais de sombra + anel de foco:

| Token | Valor | Uso |
|---|---|---|
| `{elevation.none}` | none | Seções planas, FAQ, footer |
| `{elevation.soft}` | `0 8px 30px -12px rgba(15,20,18,0.08)` | Cards de feature, etapa, painel |
| `{elevation.card}` | `0 16px 40px -20px rgba(15,20,18,0.18)` | Widget de chat / demos elevados de produto |
| `{elevation.cta}` | `0 8px 24px -6px rgba(29,111,66,0.45)` | Ênfase opcional no CTA primary (usar com parcimônia; o site costuma enviar CTAs planos) |
| `{elevation.focus-ring}` | `0 0 0 3px rgba(74,193,75,0.35)` | Foco de teclado — halo verde folha |

Cards em hover podem subir `-2px` com `{elevation.soft}` — sem segunda cor de sombra.

## Componentes

### Botões

**`button-primary`** — Fill floresta, label Outfit branca, raio 10px, altura 48px. CTA padrão de marketing + app (“Começar grátis”, “Começar agora”). Sufixo de seta (`→`) move 2px no hover.

**`button-primary-hover` / `button-primary-active`** — Escurece para `{colors.primary-hover}` / `{colors.primary-active}`. Sem bounce de escala.

**`button-primary-disabled`** — Fill `{colors.primary-disabled}`, texto branco, cursor not-allowed.

**`button-secondary`** — Fill branco, texto ink, borda sutil 1px, raio 10px. “Ver o sistema em ação”, Cancelar, ações secundárias de painel.

**`button-tertiary-text`** — Texto ink, sem chrome; sublinhado ou mudança de opacidade no hover. “Entrar”, “Mostrar mais”.

**`button-confirm`** — Pill folha `{colors.alt}` para momentos de confirmação (“Confirmar”, chip de modo ativo). Combina com irmãos inativos `{component.button-pill-ghost}`.

### Navegação

**`top-nav`** — Sticky branco/90 + backdrop blur, 72px, hairline inferior. Wordmark à esquerda, links centralizados (`{typography.nav-link}` muted → ink-strong no hover), utilitários + CTA primary à direita.

**`wordmark-lockup`** — Preferir logo PNG/SVG; fallback em texto usa Outfit 700 + glifo double-check.

### Cards de marketing

**`feature-card`** — Card branco em faixa suave, `{rounded.2xl}`, sombra suave, poço de ícone 48px em `{colors.primary-soft}` com ícone stroke primary.

**`step-card` / `step-card-complete`** — Linhas de fluxo numeradas; a etapa final vira fill primary soft para sinalizar conclusão (metáfora da marca: disponível → confirmado).

**`cta-band`** — A faixa de fechamento pode inverter para verde primary com tipo branco, ou ficar branca com botão primary — escolha um por página; não empilhe os dois tratamentos altos.

### Chat / Demo

**`chat-widget`** — Prova assinatura de produto. Casca branca, `{rounded.xl}`, elevação de card, header floresta com avatar + “Assistente availabou” + estado online (`{component.online-badge}` em folha).

**`chat-bubble-in` / `chat-bubble-out`** — Herda cores do escopo WhatsApp; arredondadas com canto mais agudo na direção do remetente (padrão `rounded-tl-sm` / `rounded-tr-sm`).

**Pills de modo do demo** — Ativo = `{component.button-confirm}` (ou fill primary); inativo = `{component.button-pill-ghost}`.

### Painel do app

**`panel-card`** — Superfície branca elevada para visão da agenda, configurações de mensagem, disponibilidade.

**`metric-tile`** — Superfície suave, número de métrica em Outfit, label de caption (“Confirmados”, “Taxa”).

**`status-confirmed` / `status-pending`** — Badges em pill; confirmado sempre usa o par folha/floresta, nunca um terceiro verde.

### Formulários

**`text-input`** — Altura 48px, raio 10px, borda hairline; foco → primary 2px + anel de foco folha. Erro → borda `{colors.error}` + texto de ajuda.

Labels usam `{typography.caption}` muted acima do campo. Texto de ajuda abaixo em `{typography.caption-sm}`.

### FAQ e footer

**`faq-item`** — Separadores hairline, chevron gira ao abrir, sem chrome de card.

**`footer-light`** — Continuidade do canvas branco; colunas “Produto” / “Acesso”; faixa legal em muted-soft.

## Movimento

| Movimento | Spec | Uso |
|---|---|---|
| Reveal | opacity + translateY(28px) + blur(6px) → repouso, 700ms, cubic-bezier(0.22,1,0.36,1) | Entrada de seção |
| Seta do CTA | translateX(2px), 150ms | Hover do botão primary |
| Bolha de chat | fade + leve scale, ~350ms | Transcrição do demo |
| Expandir FAQ | grid-template-rows 0fr → 1fr, 350ms | Accordion |
| Movimento reduzido | desabilitar reveal/chat/FAQ | `prefers-reduced-motion: reduce` |

## Comportamento responsivo

| Nome | Largura | Principais mudanças |
|---|---|---|
| Mobile | < 768px | Nav → sheet hamburger; hero empilha; CTAs full-width; grids 1 coluna; widget de chat em largura total |
| Tablet | 768–1024px | Links da nav voltam; grids de feature 2 colunas; hero ainda pode empilhar |
| Desktop | 1024–1280px | Nav centralizada completa; hero 2 colunas; grids de feature/etapa 4 colunas |
| Wide | > 1280px | Conteúdo limita em ~1152px; gutters absorvem o resto |

### Alvos de toque
- CTAs primary ≥ 44–48px de altura.
- Botões de ícone da nav ≥ 40px.
- Pills de modo ≥ 36px de altura com padding horizontal generoso.
- Dot de status online é decorativo (8px) — combinar com label de texto para a11y.

## Acessibilidade

- Contraste: primary sobre branco e branco sobre primary passam para texto de UI nos tamanhos especificados; ink do corpo `#3C3C3C` sobre branco supera AA para corpo.
- Não transmitir status só por cor — combinar verde folha com label “Confirmado” / ícone de check.
- Foco visível via `{elevation.focus-ring}`; nunca `outline: none` sem substituição.
- O demo de chat é ilustrativo — fluxos reais de agendamento devem expor atualizações de live region para novas mensagens.

## Voz e conteúdo (UI)

- Nome da marca em minúsculas: **availabou** (nunca “Availabou” no chrome de UI, salvo início de frase se a gramática exigir).
- CTAs concretos: “Começar grátis”, “Começar agora”, “Ver o sistema em ação”.
- Linguagem de confirmação espelha a marca: confirmar, disponível, agendado, lembrete — preferir verbos de conclusão a hype.
- PT-BR primeiro; EN/ES compartilham os mesmos tokens de layout — esperar ~15–20% de expansão de texto em EN/ES.

## Notas de implementação

### Variáveis CSS (starter)
Veja `./tokens.css` para um mapa de custom properties alinhado a este arquivo.

### Mapeamento Tailwind (alinhado ao site)
```
brand.600 → colors.primary (#1d6f42)
brand.700 → colors.primary-hover (#155233)
brand.50  → colors.primary-soft (#e8f5ee)
alt / confirm → colors.alt (#4ac14b)
ink / secondary → colors.secondary (#3c3c3c)
```

### Uso com IA / fluxos estilo getdesign
1. Mantenha este `DESIGN.md` na raiz do projeto ou em `docs/availabou/DESIGN.md`.
2. Oriente o assistente: “Use docs/availabou/DESIGN.md para todo trabalho de UI.”
3. Prefira tokens (`{colors.primary}`) a hex solto em novos componentes.
4. Ao inventar novos componentes, estenda o bloco `components:` em vez de inventar raios/cores one-off.

## Lacunas conhecidas

- **Modo escuro:** ainda não está no site público — os tokens acima assumem canvas claro. Se for adicionado depois, inverta superfícies primeiro; mantenha primary/alt como acentos sobre ink escuro, não recolore os checks para neon.
- **Densidade do shell do app:** raios de marketing (`2xl`) podem apertar para `lg` em tabelas densas — documente overrides por superfície em vez de mudar tokens globais.
- **Sistema de ilustração:** ainda sem biblioteca dedicada; preferir demos de UI e ícones stroke simples em verde primary.
- **Packs de logo vertical / monocromático:** o lockup horizontal colorido é canônico; adicione variantes mono e empilhadas conforme os assets forem produzidos.
- **Arquivo exato da fonte do wordmark:** o marketing usa Outfit como companheiro vivo mais próximo da sans geométrica do logo; se uma fonte proprietária do logo for licenciada depois, mantenha Outfit no display de UI e isole o logo em SVG/PNG.