tecfisio

Design system

Inspirado no Apple HIG: superfícies sóbrias, cores de sistema vibrantes, botões fáceis de ver e tocar.

Cores

Cada família tem cor, soft (fundo) e deep (texto). Texto sobre fundo colorido usa sempre o deep da mesma família.

brandsoft/deep

Ação principal

greensoft/deep

Sucesso / pago

orangesoft/deep

Atenção / pendente

redsoft/deep

Erro / falta

tealsoft/deep

Pacientes / online

indigosoft/deep

Prontuário

purplesoft/deep

Convênios

pinksoft/deep

Pacotes / campanhas

yellowsoft/deep

Aviso leve

Tipografia

Escala Apple: large 34 · title1 28 · title2 22 · title3 20 · body 17 · subhead 15 · footnote 13 · caption 12.

Large — Agenda de hoje

Title 1 — 18 sessões

Title 2 — Próximas sessões

Title 3 — Cabeçalho de card

Body — Evolução: paciente relata redução da dor lombar de 7 para 4 na EVA.

Subhead — padrão da interface, inputs e botões.

Footnote — labels e texto secundário.

Caption — badges e metadados.

Botões

filled = 1 por tela · tinted = secundário colorido (fácil e sóbrio) · outline · ghost. Tons por semântica.

filled

tinted

outline

ghost

tamanhos, ícones, estados

Formulários

Input 40px, foco com halo brand; Field compõe label, hint e erro.

Como consta no documento

CPF inválido

Lembrete por WhatsApp

Badges e status

Status de sessão sempre com texto, nunca só cor.

agendadoconfirmadoem atendimentoconcluídofaltacancelado3/10 sessõesUnimedCIF b280reavaliar

Cards, KPIs e listas

Sessões hoje

18

4 confirmadas

Novos pacientes

3

esta semana

Caixa

R$ 1.240

+12%

Faltas

1

Próximas sessões

Lista agrupada estilo iOS

Nenhum paciente ainda

Cadastre o primeiro paciente ou importe uma planilha.