Aesthetic-Usability Effect
Interfaces estéticas são percebidas como mais fáceis.
Aplicação: O acabamento gera confiança do médico nas recomendações do bundle 1h.
Manual de marca v1.0
Voltar para a homeSurviving Sepsis Campaign 2026
Um manual para
decisões clínicas
sob pressão.
O sistema visual e de UX que sustenta a sepse.com.br: tokens, componentes e princípios pensados para reduzir carga cognitiva no primeiro atendimento à sepse e choque séptico.
Triagem qSOFAHemoculturasLactato séricoAntibioticoterapiaVasopressoresHFNC e pronação
Hora 1+
PAM ≥ 65+
Cristaloide 30 mL/kg+
Frequência cardíaca
Meta 85 bpmAtual 112 bpm
01 — Fundação
A marca por trás do bundle 1h
A sepse.com.br existe para encurtar a distância entre a melhor evidência e a próxima decisão à beira do leito. Cada elemento visual e de copy deve sustentar essa promessa.
PRINCÍPIO 01
Clínico, não estético
A estética serve à decisão. Nenhum elemento decorativo pode competir com a leitura de doses, alvos ou alertas críticos.
PRINCÍPIO 02
Tempo é o substrato
O design respeita a hora-ouro. Caminhos críticos exigem menos cliques, mais contraste e respostas em <400 ms.
PRINCÍPIO 03
Evidência verificável
Toda recomendação aponta para uma diretriz ou ensaio. A interface mostra a fonte, não esconde a fonte.
Atributos de personalidade
Objetivo
Sem ornamentação
Confiável
Cita a fonte
Calmo
Sem alarme falso
Brasileiro
pt-BR sem anglicismo gratuito
Atual
SSC 2026 first
Respeitoso
Médico decide; o app apoia
Promessa de marca
“Sepse na prática, baseada em evidência, em até três toques.”
Use a promessa como filtro: se um fluxo precisa de mais de três toques para a próxima decisão, simplifique antes de adicionar.
02 — Logotipo
O ponto como sinal vital
O wordmark é composto pelo nome em peso black mais um ponto-acento amarelo. O ponto representa o gesto editorial — uma afirmação clínica — e nunca pode ser removido.
Construção
sepse
Altura do ponto = 18% da altura da letra-x. O espaço entre o último caractere e o ponto é exatamente a meia-largura do ponto.
Variações
sepse
sepse
sepse
Espaço mínimo
Mantenha pelo menos a largura do “s” de respiro em todos os lados. Tamanho mínimo: 64 px de largura em tela.
Não
Não recolorir o wordmark
Use apenas ink ou branco. Acentos coloridos confundem com alertas semânticos.
Não
Não remover o ponto
O ponto é parte integrante. Sem ele, vira texto.
Não
Não rotacionar ou comprimir
O wordmark sempre alinhado à linha de base, nunca em diagonal.
03 — Cores
Paleta calma com um único acento
A interface vive em tons terrosos. Cor é reservada para sinal — não decoração. Cada uso semântico tem hex fixo e razão de contraste ≥ 4.5:1 sobre Paper.
Paleta de marca
Ink
#0E0E0C
Texto, CTA primário
Sand
#EDEAE2
Fundo de página
Paper
#F6F4EE
Superfície principal
Accent
#E6E84A
Sinal e acento
Accent Soft
#F2F4A6
Fundos sutis
Moss
#4A6B3A
Ilustração
Paleta semântica
Success
#3B7A4C
Confirmações, bundle completo
Warning
#C68A1E
PAM 65–70, lactato 2–4
Danger
#B8413A
Lactato ≥ 4, PAM < 65
Info
#2E5C8A
Aviso editorial e links
Contraste WCAG 2.2
| Combinação | Razão | Nível |
|---|---|---|
| Ink sobre Paper | 16.4 : 1 | AAA |
| Ink sobre Accent | 13.1 : 1 | AAA |
| Ink/65% sobre Paper | 7.2 : 1 | AAA |
| Danger sobre Paper | 4.9 : 1 | AA |
| Accent Deep sobre Paper | 4.6 : 1 | AA |
Regras de uso
- Accent nunca cobre texto de parágrafo — apenas destaques curtos, ícones, marcadores e CTAs secundários.
- Danger só aparece quando há um alvo clínico violado. Cor de alarme não pode ser cor de marketing.
- Em superfícies escuras, suba a tonalidade do acento ou use o ponto amarelo como anchor para preservar identidade.
- Não use mais de uma cor semântica por seção — o olho deve ir ao sinal mais grave primeiro (Von Restorff).
04 — Tipografia
Geist em escala modular
Família única: Geist Sans para texto, Geist Mono para dados (doses, alvos, IDs). A escala segue base 16 px com fator 1.25 (major third) — passo previsível, fácil de auditar.
Display
Sepse 2026
60 / 60 · -3%
H1
Reconhecimento precoce
36 / 40 · -2%
H2
Antibioticoterapia em 1h
30 / 36 · -1%
H3
Alvos hemodinâmicos
20 / 28
Body
Iniciar amplo espectro em até uma hora.
16 / 26
Small
Lactato sérico em até 3h da admissão.
14 / 22
Caption
PAM ≥ 65 mmHg
12 / 16 · +18%
Hierarquia clínica
Em uma tela de prescrição, a hierarquia é droga → dose → via → intervalo. O nome do fármaco é H3; dose e via, body bold; intervalo, caption mono. Nunca inverta a ordem — o olho do plantonista busca primeiro o nome.
Pesos disponíveis
Regular 400 — texto contínuo
Medium 500 — chips e labels
Semibold 600 — CTAs
Bold 700 — H2, H3
Black 900 — H1, Display
05 — Espaçamento
Grid base 4 pt
Todo espaçamento é múltiplo de 4 px. 8 px é o passo padrão entre componentes; 24–32 px separam blocos relacionados; 48–64 px separam seções; 96 px reserva-se para o fim de página.
4pxÍcone ↔ label
8pxPadrão entre componentes próximos
12pxPadding interno de chip
16pxPadding de input / botão
24pxEntre blocos relacionados
32pxPadding de card
48pxEntre seções na mesma página
64pxSeparação visual de tópico
96pxFim de página / hero
06 — Raio & elevação
Cantos suaves, sombras discretas
A linguagem é orgânica, com raios generosos. Elevação é restrita: 4 níveis, todos com sombra inferior alongada e baixa opacidade — sem halo, sem brilho.
Raio de canto
xs
6px
sm
10px
md
16px
lg
24px
xl
32px
pill
pill
Níveis de elevação
elevation/sm
elevation/md
elevation/lg
elevation/xl
sm hairline · md chips e pílulas · lg cards flutuantes · xl superfície principal.
07 — Iconografia
Linha 1.6 px, terminais arredondados
Ícones vivem em viewbox 24×24, peso 1.6 px, com cantos arredondados. Use-os para identificar categorias clínicas — nunca para decorar parágrafos.
Estetoscópio
Microscópio
Frasco
DNA
Ambulância
Pílula
08 — Motion
Curto, calmo e funcional
Movimento sempre indica causa-efeito: o que apareceu, por quê, e de onde. Nunca anima para decorar — o limiar de Doherty exige resposta percebida em <400 ms.
Durações
- fast
- 120 ms — micro-feedback (hover, toggle)
- base
- 200 ms — entrada/saída padrão
- slow
- 320 ms — transições de página
Easing
cubic-bezier(0.22, 1, 0.36, 1)
Saída suave, entrada firme — natural para tags flutuantes e cards que respondem ao toque.
Princípios
- Respeitar
prefers-reduced-motion. - Nunca passar 400 ms em ação crítica.
- Não animar sinais vitais — eles atualizam, não "dançam".
09 — Componentes
Blocos que respeitam o plantão
Cada componente carrega estado visual explícito (default, hover, focus, disabled). O foco é sempre visível — médicos navegam com teclado em estações compartilhadas.
Botões — variantes
default
Iniciarhover
Iniciarfocus
Iniciardisabled
IniciarTamanho mínimo de alvo: 44×44 px (Fitts). Ações destrutivas exigem confirmação e nunca ficam adjacentes a ações primárias.
Inputs e formulário
Alertas e estados
Sucesso
Bundle 1h concluído
ATB administrado, hemoculturas coletadas, cristaloide titulado para PAM alvo. Reavaliar em 1h.
Atenção
Lactato em 2,4 mmol/L
Acima do alvo (< 2). Repetir em 2–4h e reavaliar resposta volêmica.
Crítico
PAM 58 mmHg após reposição
Iniciar noradrenalina precoce para alvo ≥ 65 mmHg. Considerar arterial invasivo.
Informação
SSC 2026 atualizada
Hemoculturas de sítio único agora recomendadas com base em RS de 2025.
Cards de dados e avatares
PAM
Crítico58 mmHg
Alvo ≥ 65 — iniciar vasopressor
Lactato
Atenção2,4 mmol/L
Repetir em 2–4h
Bundle 1h
3/5Falta: cultura e cristaloide.
Avatares
TMARJC+4
10 — Padrões
Como esses blocos se montam
Padrões repetíveis que aparecem em mais de uma tela. Cada um foi desenhado para reduzir tempo de decisão e fadiga visual.
Stepper do bundle 1h
- ✓Lactato sérico
- ✓Hemoculturas (1 sítio)
- ✓Antibiótico amplo espectro
- Cristaloide titulado
- Vasopressor se PAM < 65
Empty state
Sem pacientes em observação
Adicione um caso para iniciar o acompanhamento do bundle.
Linha de progresso editorial
Conteúdo extenso usa marcador lateral: linha tênue à esquerda, círculo preenchido para itens publicados, vazio para futuros.
Reconhecimento precoce
Publicado
Antibioticoterapia empírica
Publicado
Ressuscitação volêmica
Revisão clínica
Pós-sepse
Em redação
11 — Leis de UX
Heurísticas que orientam o produto
Cada lei é citada com a aplicação concreta no contexto clínico — para que decisões de design sejam discutíveis com base, não com opinião.
Doherty Threshold
Produtividade dispara abaixo de 400 ms de resposta.
Aplicação: Busca de antibiótico e cálculo de dose retornam em <400 ms.
Fitts's Law
Tempo até o alvo cresce com distância e cai com tamanho.
Aplicação: CTAs primários ≥ 44×44 px, longe de ações destrutivas.
Hick's Law
Decisão fica mais lenta com mais opções.
Aplicação: ATB empírico mostra só esquemas aplicáveis ao foco escolhido.
Jakob's Law
Usuários esperam padrões dos outros produtos que já usam.
Aplicação: Layout de prescrição alinhado a convenções de EHR.
Law of Common Region
Elementos numa mesma área são percebidos como grupo.
Aplicação: Alvos hemodinâmicos vivem em um único card.
Law of Proximity
Itens próximos parecem relacionados.
Aplicação: Dose, via e intervalo grudados ao nome do fármaco.
Law of Similarity
Elementos parecidos formam grupos visuais.
Aplicação: Cor e ícone únicos para todas as ações do bundle.
Law of Uniform Connectedness
Conexão visual é mais forte que proximidade.
Aplicação: Stepper liga visualmente os passos do bundle 1h.
Miller's Law
Memória de trabalho gira em 7±2 itens.
Aplicação: Checklists clínicos limitados a 5–7 itens visíveis.
Peak-End Rule
A memória da experiência fica no pico e no fim.
Aplicação: Fechamento de caso resume o que foi feito e o próximo passo.
Serial Position Effect
Itens no início e no fim de uma lista são mais lembrados.
Aplicação: Lactato abre e ATB fecha o checklist 1h.
Tesler's Law
Toda complexidade irreduzível é absorvida por alguém.
Aplicação: O app absorve cálculo de clearance e ajuste renal.
Von Restorff Effect
O item distinto é o mais lembrado.
Aplicação: Lactato ≥ 4 e PAM < 65 em vermelho dominante.
Zeigarnik Effect
Tarefas inacabadas ocupam mais memória.
Aplicação: Progresso do bundle persiste até completar.
Goal-Gradient Effect
Motivação para concluir aumenta perto da meta.
Aplicação: Indicador “3 de 5” acelera o fechamento na hora.
Postel's Law
Conservador no envio, liberal no recebimento.
Aplicação: Aceita peso com vírgula ou ponto; renderiza padronizado.
Pareto Principle
~80% dos efeitos vêm de ~20% das causas.
Aplicação: Triagem, bundle e ATB empírico têm prioridade absoluta.
Occam's Razor
Entre soluções equivalentes, a mais simples vence.
Aplicação: Um botão “Aplicar protocolo” em vez de múltiplos toggles.
12 — Acessibilidade
WCAG 2.2 AA como mínimo
Médicos usam o produto sob fadiga, com luz baixa, em estações compartilhadas e às vezes só com teclado. Acessibilidade é requisito clínico, não enfeite.
Checklist
- ✓Contraste de texto ≥ 4.5:1; ≥ 3:1 para texto grande e ícones informativos.
- ✓Foco sempre visível: anel de 3 px em
Accentcom offset. - ✓Nunca usar cor sozinha como portadora de significado — sempre dobre com ícone ou label.
- ✓Alvos de toque ≥ 44×44 px; espaçamento mínimo de 8 px entre alvos.
- ✓
aria-live="polite"para alertas não-críticos;role="alert"para crítico. - ✓
prefers-reduced-motionrespeitado em todas as transições. - ✓Hierarquia semântica de cabeçalhos (h1 → h2 → h3) sem pulos.
Foco visível
O anel amarelo só aparece em navegação por teclado. Em mouse, um estado hover sutil basta — evitar “ruído” em sessões longas.
Botão com focoInput com foco
13 — Voz e tom
Português clínico, sem floreio
Escrevemos para médicos sob pressão. Frases curtas, sujeito explícito, voz ativa, métricas com unidade. Sem jargão estrangeiro quando há equivalente brasileiro consagrado.
Matriz de tom
| Contexto | Tom |
|---|---|
| Alerta crítico | Direto, imperativo, < 12 palavras |
| Educacional | Explicativo, fonte citada |
| Empty state | Calmo, com próxima ação clara |
| Confirmação | Sóbrio, sem celebração |
Faça / Não faça
Faça
“Iniciar noradrenalina. Alvo PAM ≥ 65 mmHg.”
Evite
“Que tal considerarmos um vasopressor?”
Faça
“Hemocultura de sítio único, 10 mL, antes do ATB.”
Evite
“Coleta de blood culture — boa prática!”