Scale2Clinic — Design System Guide

01 — Identidade

Fundação da Marca

Scale2Clinic une dois arquétipos complementares para criar uma presença visual de autoridade tecnológica com propósito clínico.

Arquétipo Primário

🦉 Sábio (Sage)

Clareza, conhecimento, dados que iluminam decisões. A plataforma que entende mais do negócio do que o próprio gestor esperava.

Arquétipo Secundário

👑 Governante (Ruler)

Controle, autoridade, ordem. O gestor que usa Scale2Clinic comanda a clínica com precisão estratégica.

🔬

Clareza Técnica

Dados densos com hierarquia precisa — nunca confuso

🏆

Premium Discreto

Dourado em toques cirúrgicos — não ostentação

⚡

Autoridade Digital

Navy profundo como base — seriedade clínica

📈

Crescimento Visível

Azul vibrante como acento — progresso e tecnologia

02 — Logotipo

Sistema de Logotipo

12 variantes cobrindo todos os contextos de uso — do favicon à sidebar da plataforma.

Primary

Fundo branco · Uso geral

Primary White

Documentos e apresentações

Negative Transparent ⭐

Sidebar, heroes, fundos escuros

Secondary ⭐

Escrita branca · Fundo azul

Avatar Dourado ⭐

Foto de perfil social oficial · Fundo Navy

Avatar Branco

Símbolo dourado · Fundo branco

Regras de Uso

✅ Correto

Usar logo-negative-transparent.png em sidebars e heroes navy
Usar logo-primary.png em rodapés e topbars brancas
Fixar por largura: width: 200px; height: auto
Manter área de proteção = altura do símbolo em todos os lados
Logo apenas na sidebar — nunca duplicar na topbar

❌ Proibido

Esticar ou distorcer o logo
Fixar por height — a proporção 1.78:1 distorce
Aplicar sombra, brilho ou contorno
Usar sobre fundo sem contraste suficiente
Alterar as cores do logotipo
Tamanho abaixo de 120px (digital) ou 25mm (print)

03 — Cores

Paleta de Cores

Sistema cromático com 7 cores oficiais — Azul Profundo, Azul Claro, Azul Gelo, Dourado, Bordô, Cinza Claro e Branco — com tokens W3C DTCG completos.

Azul Profundo ★

#053567

--s2c-color-navy

Azul Claro ★

#2FA2FD

--s2c-color-blue

Azul Gelo ★

#E6F2FB

--s2c-color-ice

Dourado ★

#E2D187

--s2c-color-gold

Bordô ★

#7B1E2E

--s2c-color-bordeaux

Cinza Claro ★

#F5F7FA

--s2c-color-surface

Branco ★

#FFFFFF

--s2c-color-white

Azul Escuro

#1A6EBF

--s2c-color-blue-700

Dourado Claro

#DDB84E

--s2c-color-gold-300

Bordô Ice

#FBE6EA

--s2c-color-bordeaux-50

Border

#DDE4F0

--s2c-color-neutral-200

Muted

#6B7A8D

--s2c-color-neutral-400

Text

#1E2A3B

--s2c-color-neutral-600

★ = Cores oficiais da paleta Scale2Clinic

Contraste WCAG 2.2

Aa

10.8:1

AAA Branco sobre Navy — sidebar, heroes, headers

Aa

11.2:1

AAA Texto sobre Surface — corpo da aplicação

Aa

4.8:1

AA Muted sobre White — labels e metadados

Aa

3.2:1

AA Branco sobre Blue — apenas texto grande (18px+)

04 — Tipografia

Sistema Tipográfico

Inter — fonte variável com legibilidade superior em densidades de dados. Suporte a números tabulares essencial para KPIs.

display

32px · 800 · 1.1

R$184.320

display-sm

26px · 800 · 1.2

347 Procedimentos

title

22px · 700 · 1.3

Dashboard da Clínica

title-sm

18px · 700 · 1.3

Procedimentos por Receita

subtitle

16px · 600 · 1.4

Análise de Performance — Julho 2026

body-lg

15px · 500 · 1.5

Implante Osseointegrado · 28 realizados

body

14px · 400 · 1.6

Acompanhe faturamento, procedimentos e performance em tempo real.

sm / label

12px · 600 · 1.4

PROCEDIMENTOS · TICKET MÉDIO · RECEITA

xs / badge

10px · 700 · 1.4

▲ 12,4% · CONFIRMADO · NOVO

05 — Espaçamento

Sistema de Espaçamento

Base 4px. Escala consistente para padding, margin e gap em todos os componentes.

space-1

4px — Gap mínimo

space-2

8px — Gap interno

space-3

12px — Padding pequeno

space-4

16px — Padding padrão

space-5

20px — Padding de card

space-6

24px — Padding generoso

space-8

32px — Seção interna

space-10

40px — Seção

space-14

56px — Hero padding

06 — Elevação

Sombras e Elevação

Sistema de 3 elevações com sombras baseadas no navy para coerência cromática.

shadow-sm

Cards em repouso · Padrão

0 1px 3px rgba(17,43,103,.06)
0 1px 2px rgba(17,43,103,.04)

shadow-md

Hover de cards · Dropdowns

0 4px 12px rgba(17,43,103,.10)
0 2px 4px rgba(17,43,103,.06)

shadow-lg

Modais · Painéis flutuantes

0 12px 32px rgba(17,43,103,.14)
0 4px 8px rgba(17,43,103,.08)

07 — Componentes

Biblioteca de Componentes

Componentes prontos para uso com todos os estados documentados.

Botões

Badges e Status

Confirmado Premium ▲ 12,4% Cancelado Pendente

Campos de Input

Default Texto de apoio opcional

Focus Campo ativo com ring azul

Error Mensagem de erro aqui

08 — Layout

Shell e Grids

Padrão SaaS BI com sidebar fixa navy e content area fluida. Logo exclusivamente na sidebar.

/* Shell Principal */
.shell {
  display: flex;
  height: 100vh;
}
.sidebar {
  width: 248px;     /* largura fixa */
  background: #053567;  /* navy */
  flex-shrink: 0;
}
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #F5F7FA;  /* surface */
}
.topbar {
  height: 56px;
  background: #FFFFFF;
  border-bottom: 1px solid #DDE4F0;
}

/* KPI Grid */
.kpi-row { grid-template-columns: repeat(4, 1fr); gap: 16px; }

/* Dashboard Grid */
.content-grid { grid-template-columns: 1fr 340px; gap: 20px; }

/* Form Grid */
.form-grid { grid-template-columns: 1fr 1fr; gap: 16px; }

09 — Acessibilidade

WCAG 2.2

Conformidade mínima AA em todos os componentes. Foco visível obrigatório desde WCAG 2.2.

/* Foco visível — obrigatório WCAG 2.2 */
:focus-visible {
  outline: 2px solid #2FA2FD;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Motion reduzido */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Números tabulares em dados */
.kpi-value, td.numeric {
  font-variant-numeric: tabular-nums;
}

10 — Implementação

Quick Start

Copie e use. Os tokens CSS cobrem 100% dos valores necessários.

<!-- 1. Fonte -->
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">

<!-- 2. Tokens CSS -->
<link rel="stylesheet" href="tokens/style-dictionary/css/variables.css">

<!-- 3. Favicon -->
<link rel="icon" type="image/png" sizes="32x32" href="[S3]/logos/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="[S3]/logos/favicon-16.png">

/* Card padrão */
.card {
  background: var(--s2c-bg-primary);
  border: 1px solid var(--s2c-color-border);
  border-radius: 10px;
  box-shadow: var(--s2c-shadow-sm);
  padding: 20px;
}

/* Botão primário */
.btn-primary {
  background: linear-gradient(135deg, #2FA2FD, #1A6EBF);
  color: var(--s2c-text-inverse);
  padding: 9px 18px;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  box-shadow: 0 3px 10px rgba(47,162,253,.30);
}

11 — Assets

Links e Recursos

Todos os assets hospedados no S3 com CDN. Copie as URLs direto para produção.

Asset	URL	Uso
Logo Primary	`…/logos/logo-primary.png`	Fundos brancos
Logo Negative ⭐	`…/logos/logo-negative-transparent.png`	Fundos escuros/navy
Avatar Blue ⭐	`…/logos/symbol-avatar-blue.png`	Foto de perfil social
Avatar White	`…/logos/symbol-avatar-white.png`	Topbars escuras
Favicon 32px	`…/logos/favicon-32.png`	Browser tab
Favicon 16px	`…/logos/favicon-16.png`	Browser tab pequeno
Atoms DS	`…/ds/atoms.html`	Preview componentes base
Molecules DS	`…/ds/molecules.html`	Preview composições
Organisms DS	`…/ds/organisms.html`	Preview seções completas
Templates DS	`…/ds/templates.html`	Preview telas completas

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