01 — Plataforma
URLs Centrais
| Recurso | URL |
|---|---|
| Hub Principal (IDV) | visual-scale2clinic.digital-ai.tech |
| Manual de Marca | .../brand-manual/ |
| Conceito Aprovado | .../brand-presentation/ |
| Design System | .../design-system/ |
| DS Templates (4 telas) | .../ds-templates/ |
| GitHub Repo | DIGITAL-AI-TECH/visual-scale2clinic |
02 — Identidade
Paleta de Cores Oficial
Navy
#053567
Fundo, headers, sidebar
Blue
#2FA2FD
CTAs, wordmark, links
Gold
#E2D187
Símbolo, destaque premium
Ice
#E6F2FB
Backgrounds sutis
Bordeaux
#7B1E2E
Alertas, status crítico
/* 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 */
03 — Identidade
Tipografia
| Papel | Fonte | Pesos | Uso |
|---|---|---|---|
| Heading | Nunito | 400, 600, 700, 800 | Títulos, headlines, wordmark |
| Body | Inter | 400, 500, 600 | Textos corridos, UI, dados |
<!-- 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">
04 — Assets
Logos (S3 — URLs diretas)
/* Base S3 */
https://s3.amazonaws.com/cdn.digital-ai.tech/uploads/media-cortex/identity/scale-2-clinic/logos/
https://s3.amazonaws.com/cdn.digital-ai.tech/uploads/media-cortex/identity/scale-2-clinic/logos/
05 — Design System
Tokens & CSS
<!-- CSS tokens (importar direto) --> <link rel="stylesheet" href="https://visual-scale2clinic.digital-ai.tech/design-system/tokens/design-tokens.css"> /* JSON W3C DTCG */ Primitivos: .../design-system/tokens/tokens-primitive.json Semânticos: .../design-system/tokens/tokens-semantic.json Componentes: .../design-system/tokens/tokens-components.json Dark mode: .../design-system/tokens/tokens-dark.json
| Nível | URL | Conteúdo |
|---|---|---|
| Atoms | .../atoms/atoms.html | Botões, badges, inputs, chips, avatares |
| Molecules | .../molecules/molecules.html | Cards, navbar, sidebar, formulários |
| Organisms | .../organisms/organisms.html | Header, footer, dashboard completo |
| Templates | .../templates/templates.html | Login, Dashboard, Relatório, Formulário |
06 — Marca
Arquitetura de Marca
| Aspecto | Definição |
|---|---|
| Arquétipo principal | Sábio — clareza, conhecimento, transformação de dados em decisões |
| Arquétipo secundário | Governante — controle, autoridade, gestão com precisão estratégica |
| Posicionamento | Parceiro de inteligência estratégica que transforma dados da clínica em decisões |
| Scale2Clinic É... | Scale2Clinic Não É... |
|---|---|
| Estratégico | Tecnocrata |
| Claro | Simplista |
| Próximo | Informal demais |
| Preciso | Frio |
| Confiável | Arrogante |
07 — Regras
Regras de Uso do Logo
🚫
Símbolo dourado nunca em fundo amarelo ou dourado — contraste insuficiente
🚫
Wordmark azul nunca em fundo azul sem contraste mínimo WCAG AA
⚠️
Área de proteção = altura do símbolo em todos os lados do logo
🚫
Nunca distorcer, recolorir ou separar símbolo do wordmark (exceto variante symbol-only)
✅
Tamanho mínimo: 120px digital / 30mm impresso
08 — Acessibilidade
Contraste WCAG
| Combinação | Ratio | Status |
|---|---|---|
| Branco sobre Navy #053567 | 10.3:1 | ✅ AAA |
| Texto escuro sobre branco | 14.4:1 | ✅ AAA |
| Navy sobre Ice #E6F2FB | 10.2:1 | ✅ AAA |
| Gold #E2D187 sobre Navy | 7.2:1 | ✅ AA |
| Blue #2FA2FD sobre branco | 3.1:1 | ⚠️ AA apenas texto grande |
09 — Grid & Motion
Layout & Espaçamento
| Parâmetro | Valor |
|---|---|
| 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 |
| Motion durations | fast 100ms | normal 200ms | slow 300ms | slower 500ms |
| Easing padrão | cubic-bezier(0, 0, 0.2, 1) — ease-out |