# Scale2Clinic — AI Guide (Identidade Visual)

> Este documento é o mapa completo da identidade visual Scale2Clinic para agentes de IA.
> Use-o para ter acesso rápido a todos os artefatos, tokens, paleta e regras de uso.
> Versão: v1.0 — 2026-08-01

---

## 1. Plataforma Central

| Recurso | URL |
|---------|-----|
| **Plataforma IDV** (hub principal) | https://visual-scale2clinic.digital-ai.tech |
| **Manual de Marca** | https://visual-scale2clinic.digital-ai.tech/brand-manual/ |
| **Conceito Aprovado** | https://visual-scale2clinic.digital-ai.tech/brand-presentation/ |
| **Design System** | https://visual-scale2clinic.digital-ai.tech/design-system/ |
| **DS Templates (4 telas)** | https://visual-scale2clinic.digital-ai.tech/ds-templates/templates.html |

---

## 2. Paleta de Cores Oficial

```css
/* Scale2Clinic — Paleta Canônica */
--navy:    #053567;  /* Backgrounds escuros, headers, sidebar */
--blue:    #2FA2FD;  /* CTAs, wordmark, links ativos */
--gold:    #E2D187;  /* Símbolo, ênfases premium, badges */
--ice:     #E6F2FB;  /* Backgrounds sutis azulados */
--bordeaux:#7B1E2E;  /* Alertas, status crítico */
--surface: #F5F7FA;  /* Background de seções, cards */
--text:    #1E2A3B;  /* Corpo de texto principal */
--muted:   #6B7A8D;  /* Legendas, placeholders */
--border:  #DDE4F0;  /* Bordas, dividers */
```

**Regra de ouro:** Navy `#053567` é sempre fundo. Blue `#2FA2FD` é sempre ação. Gold `#E2D187` é sempre destaque premium.

---

## 3. Tipografia

| Papel | Fonte | Pesos | Uso |
|-------|-------|-------|-----|
| **Heading** | Nunito | 400, 600, 700, 800 | Títulos, headlines, wordmark |
| **Body** | Inter | 400, 500 | Textos corridos, UI, dados |

```html
<!-- Google Fonts (incluir no head) -->
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
```

---

## 4. Logos (S3 — URLs diretas)

Base: `https://s3.amazonaws.com/cdn.digital-ai.tech/uploads/media-cortex/identity/scale-2-clinic/logos/`

| Variante | URL | Uso |
|----------|-----|-----|
| **Primária** (colorida) | `.../logo-primary.png` | Fundo branco/claro, site, docs |
| **Horizontal** | `.../logo-horizontal.png` | Cabeçalhos, navbar em fundo claro |
| **Vertical** (branca) | `.../logo-vertical.png` | Fundo escuro, banners |
| **Dourado** | `.../logo-vertical-gold.png` | Variante premium, dark mode |
| **Negativa branca** | `.../logo-negative-white.png` | Navbar navy, headers escuros |
| **Negativa transparente** | `.../logo-negative-transparent.png` | ⚠️ Só fundo claro — texto navy |
| **Símbolo "2"** | `.../symbol-only.png` | Avatar, favicon, ícone isolado |
| **SVG fonte** | `.../logo-source-v2.svg` | Edição vetorial |

---

## 5. Design System — Tokens

### CSS (importar direto)
```html
<link rel="stylesheet" href="https://visual-scale2clinic.digital-ai.tech/design-system/tokens/design-tokens.css">
```

### JSON (W3C DTCG)
- Primitivos: `https://visual-scale2clinic.digital-ai.tech/design-system/tokens/tokens-primitive.json`
- Semânticos: `https://visual-scale2clinic.digital-ai.tech/design-system/tokens/tokens-semantic.json`
- Componentes: `https://visual-scale2clinic.digital-ai.tech/design-system/tokens/tokens-components.json`
- Dark mode: `https://visual-scale2clinic.digital-ai.tech/design-system/tokens/tokens-dark.json`

---

## 6. Componentes do Design System

| Nível | HTML | O que contém |
|-------|------|-------------|
| **Atoms** | `.../design-system/components/atoms/atoms.html` | Botões, badges, inputs, chips, avatares |
| **Molecules** | `.../design-system/components/molecules/molecules.html` | Cards, navbar, sidebar, formulários |
| **Organisms** | `.../design-system/components/organisms/organisms.html` | Header, footer, dashboard completo |
| **Templates** | `.../design-system/components/templates/templates.html` | 4 telas completas (Login, Dashboard, Relatório, Formulário) |
| **Design Guide** | `.../design-system/docs/design-guide.html` | Documentação de cores, tipografia, padrões |

---

## 7. Arquitetura de Marca

### Arquétipo
- **Sábio (dominante)** — clareza, conhecimento, transformação de dados em decisões
- **Governante (secundário)** — controle, autoridade, gestão com precisão estratégica

### Posicionamento
"Para dentistas-empreendedores, a Scale2Clinic é o parceiro de inteligência estratégica que transforma dados da clínica em decisões — vai além do software e conecta operação, gestão e crescimento em um único lugar."

### Tom de Voz

| Scale2Clinic É... | Scale2Clinic Não É... |
|---|---|
| Estratégico | Tecnocrata |
| Claro | Simplista |
| Próximo | Informal demais |
| Preciso | Frio |
| Confiável | Arrogante |

---

## 8. Regras de Uso de Logo

1. Símbolo dourado **nunca** em fundo amarelo ou dourado
2. Wordmark azul **nunca** em fundo azul sem contraste (WCAG AA mínimo)
3. Área de proteção = altura do símbolo em todos os lados
4. **Nunca** distorcer, recolorir ou separar símbolo do wordmark (exceto variante symbol-only)
5. Tamanho mínimo: 120px digital / 30mm impresso

---

## 9. Layout & Grid

- **Grid:** 12 colunas, gap 24px, container max 1280px
- **Breakpoints:** sm 640px | md 768px | lg 1024px | xl 1280px
- **Espaçamento:** múltiplos de 4px (--space-1 a --space-24)
- **Border radius:** sm 4px | base 6px | md 8px | lg 12px | full 9999px

---

## 10. Motion

- **Durations:** fast 100ms | normal 200ms | slow 300ms | slower 500ms
- **Easing principal:** `cubic-bezier(0, 0, 0.2, 1)` (ease-out)
- **Spring:** `cubic-bezier(0.34, 1.56, 0.64, 1)` (para interações com feedback)
- **Regra:** sempre respeitar `prefers-reduced-motion`

---

## 11. Acessibilidade

| Combinação | Ratio | Status |
|-----------|-------|--------|
| Branco sobre Navy | 10.3:1 | ✅ AAA |
| Texto escuro sobre branco | 14.4:1 | ✅ AAA |
| Navy sobre Ice | 10.2:1 | ✅ AAA |
| Gold sobre Navy | 7.2:1 | ✅ AA |
| Blue sobre branco | 3.1:1 | ⚠️ AA apenas texto grande |

---

## 12. Referência de Arquivos no Cortex

```
/cortex/projects/identity-engine/scale-2-clinic/
├── brand-identity.md          # SSOT — fonte de verdade dos tokens
├── briefing.md                # Brief original do cliente
├── estrategia.md              # Estratégia visual aprovada
├── conceito-aprovado.md       # Conceito de marca aprovado
├── manual-de-marca.html       # Manual completo (S3 + Cortex)
├── design-system/             # Design System enterprise completo
│   ├── docs/                  # DESIGN.md + design-guide.html
│   ├── tokens/                # JSON W3C DTCG (8 arquivos)
│   └── components/            # Atoms, Molecules, Organisms, Templates
├── ds/templates.html          # 4 telas da plataforma
└── platform/                  # Site deployado em CF Pages
    ├── index.html             # Hub principal
    ├── brand-manual/          # Viewer iframe Manual
    ├── brand-presentation/    # Viewer iframe Conceito
    ├── design-system/         # DS standalone
    └── ai-guide.md            # Este arquivo
```

---

## 13. Deploy & Infraestrutura

| Item | Valor |
|------|-------|
| **URL produção** | https://visual-scale2clinic.digital-ai.tech |
| **Cloudflare Pages** | visual-scale2clinic |
| **GitHub repo** | https://github.com/DIGITAL-AI-TECH/visual-scale2clinic |
| **Branch produção** | main |
| **Conta CF** | Digital AI (fe0885a03431922a8c75fe7ce4f8a722) |

---

*Scale2Clinic Design System v1.0 — Julho 2026*
*Gerado por identity-platform skill — Digital AI*