República de Moçambique· Ministério da Saúde — MISAU· Sistema de Design v0.4 DESIGN-system.md ↗
Saúde MoçambiquePlataforma Nacional de Saúde
← Voltar
Princípios Cor Tipografia Botões Campos Cards Tabelas Estados Navegação Quadro de telefone Padrões
00 · Fundamentos

Sistema de Design

Linguagem visual partilhada entre EMR, App do Cidadão, Sistema de Farmácia e Auditoria. Tom institucional, sóbrio e acessível — concebido para tablets de gama baixa, ecrãs com luz solar directa e utilizadores em todo o espectro de literacia digital.

§ 01 / Princípios

Tom institucional

O que separa um portal público de uma aplicação de consumo. Aplicar a cada decisão de UI.

01

Calmo, não promocional

Sem gradientes, sem efeitos de vidro, sem sombras teatrais. Blocos de cor sólidos, hierarquia tipográfica clara, espaço em branco generoso. A informação é o herói.

02

Previsível antes de elegante

Layouts alinhados à grelha. Formulários parecem formulários. Os mesmos componentes em todas as superfícies. Confiança vem de repetição.

03

Para luz solar e tablets baratos

Contraste alto (texto AA+, sem cinzentos sobre cinzentos). Alvos de toque ≥44 px. Corpo ≥16 px em mobile, ≥14 px em desktop. Suporta 7″ Android em paisagem.

04

Português moçambicano

Toda a UI em PT-MZ. Nomes, províncias, distritos e quadros clínicos realistas. Sem lorem ipsum. Codificação clínica em CID-10 PT.

05

Estado sempre visível

Conectividade, fila de sincronização, identidade de quem está autenticado, estado de prescrição. Nunca esconder estado crítico atrás de menus.

06

Confirmação para acções clínicas

Prescrever, dispensar, fundir registos, override de emergência: dois toques mínimo, com justificação obrigatória onde aplicável. Acção destrutiva nunca um único clique.

§ 02 / Cor

Paleta institucional

Verde MISAU como primária. Azul-tinta para estrutura. Estados clínicos em âmbar e vermelho — usados apenas onde significam algo.

Primária — Verde institucional
green-900#0F3D27
green-700#1B5E3F
green-600#247A52
green-100#E4EFE9
blue-900#152A45
blue-700#1F3A5F
Neutros
ink#1A1A1A
ink-2#3A3A3A
ink-3#5E5E5E
line#D9D7CF
bg-2#F2F1EB
bg#FAFAF7
Estados clínicos — usar apenas com significado
good-700OK · Sucesso
amber-500Aviso · Atenção
red-500Urgência · Crítico
good-100Fundo OK
amber-100Fundo aviso
red-100Fundo crítico
§ 03 / Tipografia

IBM Plex Sans & Mono

Sans-serif sóbrio para tudo. Mono para identificadores, códigos, datas técnicas e dosagens.

display
Saúde para todos.
Plex Sans · 44/48 · 600 · -2%
h1
Painel de hoje
Plex Sans · 32/36 · 600 · -1.5%
h2
Pacientes em sala de espera
Plex Sans · 24/28 · 600 · -1%
h3
Receita médica nº 4128-A
Plex Sans · 18/22 · 600
h4
Sintoma principal
Plex Sans · 15/20 · 600
lead
Triagem orientada por enfermeiros, com escalonamento opcional para consulta médica em vídeo.
Plex Sans · 16/24 · 400
body
Beatriz Machava · 34 anos · BI 110xxx — última consulta a 12/03/2026 no Centro de Saúde de Maxixe.
Plex Sans · 14/20 · 400
meta
Validade: 30 dias · Prescritor: Dr. Adérito Mucopo
Plex Sans · 12/16 · 400
overline
Hipótese diagnóstica
Plex Sans · 11/14 · 600 · CAPS
mono
Rx-2026-04-MZ-0184128A · BI 110456789B
Plex Mono · 14/18 · 400
§ 04 / Botões

Acções

Primária para a próxima acção esperada. Secundária para alternativas. Destrutiva para acções clínicas reversíveis com confirmação. Ghost para hierarquia baixa.

Variantes
Tamanhos
Bloco (mobile)
Estados focáveis
§ 05 / Campos

Inputs & formulários

Formulários clínicos densos com secções agrupadas, validação inline e gravação de rascunho. Sem floating labels.

Tipos de campo
Formato: 9 dígitos + 1 letra
Estados de validação
✓ Verificado contra DNI
BI não encontrado. Criar registo temporário
3 sugestões correspondem
§ 06 / Cards

Cards de domínio

Padrões reutilizados: paciente, encontro, prescrição, entrada de auditoria. Densidade alta sem ruído visual.

Paciente

Activo
BM
Beatriz Machava
F · 34 anos · BI 110456789B
Maxixe, Inhambane · +258 84 123 4567
AlergiasPenicilina
CrónicasHTA · DM tipo 2
Última consulta12/03/2026
US habitualCS Maxixe

Encontro · 12/03/2026

Concluído
Hipótese diagnóstica
Malária simples não complicada (B54)
Plano
Artemether-Lumefantrina 80/480 mg · 6 doses · 3 dias. Paracetamol 500 mg SOS.
Dra. Cláudia Tembe · Tec. de Medicina · CS Maxixe

Receita Rx-2026-04-MZ-018

Parcialmente dispensada
Beatriz Machava · 34 a · F
Rx-2026-04-MZ-018
Validade até 28/04/2026 · 2 dos 3 itens dispensados
Artemether-Lum.ParacetamolSulfato Ferroso · em falta

Entrada de auditoria

Sinalizada
AM
Adérito Mucopo · Médico
Hospital Provincial de Inhambane · 14/04/2026 22:48
Acedeu: Encontro 12/03/2026 · Notas SOAP · Resultado de laboratório
Motivo declarado: Override de emergência — paciente inconsciente no SU
§ 07 / Tabelas

Tabelas clínicas densas

Cabeçalho fixo, linhas com altura confortável (44 px), seleccionáveis. Para listas de pacientes, encontros e dispensas.

PacienteBIIdadeSintomaTriagemEstado
BM
Beatriz Machava110456789B34Febre + calafriosVermelhoEm consultaAbrir
JM
João Matavele209887412C62Tosse 2 sem.AmareloSala 2Abrir
EC
Esperança ChissanoTMP-2026-048127Dor abdominalVerdeAguardaAbrir
HN
Helena Nhachote182331904A5IRA · febre 39°VermelhoEm consultaAbrir
RM
Rogério Manjate301229811A71Controlo HTAVerdeAguardaAbrir
§ 08 / Estados

Badges & conectividade

Vocabulário de estado partilhado entre superfícies. Triagem usa Manchester (verde/amarelo/vermelho).

Estado de receita
Pendente Parcialmente dispensada Dispensada Expirada Sinalizada
Triagem (Manchester)
Vermelho · Imediata Amarelo · 60 min Verde · Não urgente Azul · Não clínica
Auditoria
Acesso normal Fora do âmbito Override de emergência Sinalizado pelo paciente
Conectividade (clínico)
Sincronizado · há 12s A sincronizar · 8 alterações Offline · 14 alterações em fila
§ 10 / Quadro de telefone

Mobile (eHealth)

Quadro Android 360×760, status bar institucional, tab bar inferior com 4 itens. Tudo o que é mobile renderiza dentro deste quadro.

09:42
•••4G87%
Bom dia
Beatriz Machava
BI 110456789B · Maxixe
BM
Receitas
2
1 a dispensar
Acessos
7
esta semana

Consulta recente

12/03/2026 · CS Maxixe
Malária simples — em recuperação
§ 11 / Padrões

Modal, banner, toast, vazio

Confirmação em dois passos para acções clínicas. Banners para notificações persistentes. Estados vazios desenhados.

Confirmação de dispensa
Banners de notificação
Estado vazio

Sem consultas registadas

Quando uma unidade sanitária registar uma consulta consigo, aparecerá aqui.

Toast
Receita Rx-2026-04-MZ-018 enviada para a sua conta