Uma linguagem. Infinitas experiências.
Componentes AllVita: tokens do 09 transformados em ações, navegação e produtos — no App, nos portais, em Light e Dark.
01 · Abertura
Token → componente → experiência.
Light
action.primary.bg
Azurefocus.ring
TealRetorno com Dra. L. Castro
Qui, 15 out · 09:30
Dark
action.primary.bg
Jadefocus.ring
ChartreuseRetorno com Dra. L. Castro
Qui, 15 out · 09:30
02 · Anatomia, estados e densidades
Mesma estrutura. Três escalas.
- 1
Contêiner · altura de controle
control.height.{densidade} - 2
Padding lateral
control.padX - 3
Ícone 20/24 · traço 1,75
icon.size · icon.stroke - 4
Rótulo Satoshi 500
type.label - 5
Raio · pílula no App, 10 px nos portais
control.radius - 6
Cor por variante
action.{variante}.bg/fg - 7
Borda (contorno/destrutivo)
action.outline.border - 8
Anel de foco duplo
focus.ring + focus.offset
Seis estados obrigatórios
Light
Dark
Três densidades
Light
Editorial · Marca e comunicação
52 px · ícone 20 · texto 17 · toque ≥ 52Confortável · App e Vita
48 px · ícone 20 · texto 16 · toque ≥ 48Operacional · Portais
36 px · ícone 16 · texto 14 · toque ≥ 44Dark
Editorial · Marca e comunicação
52 px · ícone 20 · texto 17 · toque ≥ 52Confortável · App e Vita
48 px · ícone 20 · texto 16 · toque ≥ 48Operacional · Portais
36 px · ícone 16 · texto 14 · toque ≥ 44Contratos complementares do Lote A · PROPOSTA
| Token | Light | Dark | Função |
|---|---|---|---|
focus.ring | sem:focus | sem:focus | Anel de foco visível (2 px) |
focus.offset | 2px | 2px | Distância do anel; sobre Azure/Jade usa anel duplo com canvas |
focus.halo | sem:canvas | sem:canvas | Contorno interno do anel duplo |
action.disabled.bg | sem:disabled.bg | sem:disabled.bg | Desativado — nunca só opacidade |
action.disabled.fg | sem:text.muted | sem:text.muted | Rótulo desativado (com ícone e motivo) |
action.loading.fg | currentColor | currentColor | Spinner herda o rótulo; largura preservada |
selected.bg | sem:selected.bg | sem:selected.bg | Item selecionado (Jade) |
selected.fg | sem:selected.fg | sem:selected.fg | Texto do selecionado |
nav.bg | sem:surface | sem:surface | Fundo de sidebar/topbar |
nav.bar.bg | brand:azure | sem:surface.raised | Barra inferior do App |
nav.item.fg | sem:text.secondary | sem:text.secondary | Item de navegação |
nav.item.hover | sem:surface.sunken | sem:surface.raised | Hover de item |
nav.indicator | brand:teal | brand:jade | Indicador de seção ativa (barra 3 px) |
nav.badge.bg | brand:chartreuse | brand:chartreuse | Contagem de notificação |
nav.badge.fg | brand:azure | brand:azure | Número da contagem |
nav.dot | sem:notification | sem:notification | Ponto de novidade sem número |
fab.elevation | sem:shadow.2 | sem:shadow.2 | Elevação do flutuante |
glass.bg | mix:sem:surface|sem:canvas|30 | mix:sem:surface.raised|sem:canvas|30 | Glass seletivo (com opacidade 78%) |
vita.nav.size | 60px | 60px | Orb oficial na barra (toque 64) |
vita.nav.lift | -18px | -18px | Elevação óptica acima da barra |
vita.nav.halo | sem:canvas | sem:canvas | Anel neutro que separa Orb e barra |
vita.nav.focus | sem:focus | sem:focus | Foco da Orb |
vita.motion.reduced | static | static | Reduced motion: Orb estática, sem pulsação |
Hover e pressed por variante são misturas de semânticos existentes (ex.: mix:brand:azure|brand:teal|22). Nenhuma cor nova. Ícones: Lucide, 16 compacto · 20 desktop · 24 mobile, traço 1,75.
03 · Ações principais
Seis níveis de ênfase. Nenhum igual ao outro.
Primário Azure
Estrutura. Uma por área. No Dark vira Snow.
action.primary.*Light
Texto longo quebra em até 2 linhas; nunca reduz a fonte.
Dark
Texto longo quebra em até 2 linhas; nunca reduz a fonte.
Primário Jade contextual
Sobre cartão escuro, Azure ou tinta de domínio — também no Light.
action.jade.*Light
Texto longo quebra em até 2 linhas; nunca reduz a fonte.
Dark
Texto longo quebra em até 2 linhas; nunca reduz a fonte.
Secundário
Alternativa direta à principal.
action.secondary.*Light
Texto longo quebra em até 2 linhas; nunca reduz a fonte.
Dark
Texto longo quebra em até 2 linhas; nunca reduz a fonte.
Terciário
Baixa ênfase dentro de cartões e listas.
action.tertiary.*Light
Texto longo quebra em até 2 linhas; nunca reduz a fonte.
Dark
Texto longo quebra em até 2 linhas; nunca reduz a fonte.
Contorno
Filtros e ações neutras.
action.outline.*Light
Texto longo quebra em até 2 linhas; nunca reduz a fonte.
Dark
Texto longo quebra em até 2 linhas; nunca reduz a fonte.
Texto
Navegar, ver mais, links de ação.
action.text.*Light
Texto longo quebra em até 2 linhas; nunca reduz a fonte.
Dark
Texto longo quebra em até 2 linhas; nunca reduz a fonte.
Hierarquia em contexto
Light · hierarquia em contexto
Teleconsulta amanhã, 10:00
Dr. P. Neves · Clínica geral
1 primária · 1 secundária · 1 texto
Convite do seu médico
Conecte-se para compartilhar documentos.
Sobre Azure a primária passa a Jade
Agenda · 9 consultas hoje
Dark · hierarquia em contexto
Teleconsulta amanhã, 10:00
Dr. P. Neves · Clínica geral
1 primária · 1 secundária · 1 texto
Convite do seu médico
Conecte-se para compartilhar documentos.
Sobre Azure a primária passa a Jade
Agenda · 9 consultas hoje
Contraste medido · rótulo sobre fundo da variante
Light
Primário15,99:1 · passa
Jade13,21:1 · passa
Secundário16,21:1 · passa
Terciário16,40:1 · passa
Contorno16,47:1 · passa
Texto7,44:1 · passa
Chartreuse15,07:1 · passa
Destrutivo5,13:1 · passa
Anel de foco sobre canvas7,22:1
Dark
Primário15,99:1 · passa
Jade13,21:1 · passa
Secundário8,88:1 · passa
Terciário12,09:1 · passa
Contorno11,55:1 · passa
Texto11,55:1 · passa
Chartreuse15,07:1 · passa
Destrutivo5,48:1 · passa
Anel de foco sobre canvas15,07:1
Cálculo sRGB; transparentes medidos sobre surface. Desativado não é medido como texto ativo: sempre tem rótulo, ícone e motivo. Não é declaração de conformidade WCAG geral.
04 · Ações especiais
Ações com intenção clara.
Light
Circular · Adicionar
Ícone isolado · com notificação
Flutuante (FAB)
Nunca sobre a Orb da Vita.Contextual · Abrir menu (interativo)
Teclado: Enter abre, setas navegam, Esc fecha.Destaque Chartreuse
Um por tela. Nunca em fluxo clínico.Carregando (interativo)
Largura preservada; anuncia “Carregando”.Desfazer · reversível
Excluir com confirmação
Irreversível → confirmação contextual com nome do item.
Split action · quando há padrão claro
Ação padrão + alternativas no menu. Não usar para ações sem relação.Confirmar · Cancelar · Remarcar
Dark
Circular · Adicionar
Ícone isolado · com notificação
Flutuante (FAB)
Nunca sobre a Orb da Vita.Contextual · Abrir menu (interativo)
Teclado: Enter abre, setas navegam, Esc fecha.Destaque Chartreuse
Um por tela. Nunca em fluxo clínico.Carregando (interativo)
Largura preservada; anuncia “Carregando”.Desfazer · reversível
Excluir com confirmação
Irreversível → confirmação contextual com nome do item.
Split action · quando há padrão claro
Ação padrão + alternativas no menu. Não usar para ações sem relação.Confirmar · Cancelar · Remarcar
07 · Campos e busca
Escrever com calma. Corrigir sem culpa.
Inclua o domínio depois do @, por exemplo: nome@email.com
Usamos para recuperar sua conta.
- 1Rótulo visível (nunca só placeholder)
- 2Marcador “opcional” — obrigatório é o padrão
- 3Caixa: fundo field.bg + borda field.border ≥3:1
- 4Ícone ou prefixo à esquerda
- 5Valor digitado — 16 px mínimo no toque
- 6Ação final: limpar, mostrar senha, carregando
- 7Mensagem: ícone + texto, ligada por aria-describedby
- 8Ajuda e contador
Erro nunca é só a borda
A borda vira 1,5 px validation.error.border, mas o sinal é a mensagem: ícone, texto que diz o que fazer, aria-invalid e role=alert. Valide ao sair do campo ou ao tocar em Continuar — nunca a cada tecla.
Sucesso funcional ≠ verificado
“Formato completo” informa que a máscara foi preenchida. Nenhum campo do livro declara identidade, contato ou documento verificados — isso depende de servidor.
Leitura e desativado
Somente leitura: sem borda de campo, texto selecionável e focável. Desativado: fundo apagado e um motivo escrito ao lado — nunca só opacidade.
Estados
Light
Escreva pelo menos 3 letras.
Formato completo
Muda só em Assinatura.
Definido no cadastro.
Buscando unidades…
Dark
Escreva pelo menos 3 letras.
Formato completo
Muda só em Assinatura.
Definido no cadastro.
Buscando unidades…
Variantes · interativas
Light
Vírgula decimal.
Mínimo de 8 caracteres.
Inclua o domínio, por exemplo: nome@email.com
34/60
Registro manual · você · 08/10 08:12Manual · não é medida do Sense
Não escreva sintomas aqui.53/140
Dark
Vírgula decimal.
Mínimo de 8 caracteres.
Inclua o domínio, por exemplo: nome@email.com
34/60
Registro manual · você · 08/10 08:12Manual · não é medida do Sense
Não escreva sintomas aqui.53/140
Três densidades
Editorial · comunicação
Confortável · App e Vita
Operacional · portais
Faça
- — Rótulo acima do campo, sempre visível
- — Teclado certo: numérico para CPF, e-mail para e-mail
- — Unidade como sufixo, nunca dentro do valor
- — Origem visível em dado de saúde (manual, quem, quando)
Evite
- — Placeholder no lugar do rótulo
- — Erro só com borda vermelha
- — Validar a cada tecla digitada
- — Chamar formato completo de “verificado”
Tokens utilizados · PROPOSTA
| Token | Light | Dark | Função |
|---|---|---|---|
field.bg | sem:surface | sem:surface.sunken | Fundo do campo |
field.bg.hover | mix:sem:surface|sem:surface.tint|60 | sem:surface.raised | Hover — muda fundo e borda |
field.border | sem:border.field | sem:border.field | Borda do campo (≥3:1) |
field.border.hover | sem:border.field.hover | sem:border.field.hover | Borda no hover |
field.focus | sem:focus | sem:focus | Borda 1,5 px + halo 4 px no foco |
field.placeholder | mix:sem:text.muted|sem:text.secondary|30 | sem:text.muted | Exemplo de formato — nunca substitui o rótulo (10E: Light escurecido para ≥4,5:1) |
field.readonly.bg | sem:surface.sunken | mix:sem:surface.sunken|sem:canvas|40 | Somente leitura: sem borda de campo, texto selecionável |
field.disabled.bg | sem:disabled.bg | sem:disabled.bg | Desativado: fundo + texto apagado + motivo |
field.affix.bg | sem:surface.sunken | sem:surface.raised | Prefixo / sufixo (+55, kg, mmHg) |
field.affix.fg | sem:text.secondary | sem:text.secondary | Texto do prefixo/sufixo |
validation.error.fg | sem:critical.fg | sem:critical.fg | Mensagem de erro — sempre ícone + texto |
validation.error.border | sem:critical.border | sem:critical.border | Borda 1,5 px de erro (reforço, não o sinal) |
validation.success.fg | sem:success.fg | sem:success.fg | Sucesso funcional (formato aceito) — nunca 'verificado' |
Contraste medido · Lote B
| Par | Light | Dark | Mínimo |
|---|---|---|---|
| Texto sobre campo | 17,52 ✓ | 13,08 ✓ | 4,50:1 |
| Borda do campo | 4,05 ✓ | 4,87 ✓ | 3,00:1 |
| Foco sobre campo | 7,44 ✓ | 12,33 ✓ | 3,00:1 |
| Erro sobre campo | 5,98 ✓ | 6,66 ✓ | 4,50:1 |
| Erro sobre superfície | 5,98 ✓ | 7,12 ✓ | 4,50:1 |
| Sucesso sobre superfície | 6,39 ✓ | 8,29 ✓ | 4,50:1 |
| Marca de seleção | 15,99 ✓ | 13,21 ✓ | 4,50:1 |
| Seleção ligada sobre superfície | 16,47 ✓ | 11,55 ✓ | 3,00:1 |
| Switch desligado | 4,05 ✓ | 5,20 ✓ | 3,00:1 |
| Faixa do slider | 7,44 ✓ | 11,55 ✓ | 3,00:1 |
| Prefixo/sufixo | 7,52 ✓ | 8,21 ✓ | 4,50:1 |
| Placeholder · PROPOSTA 10E | 4,93 ✓ | 6,24 ✓ | 4,50:1 · Light antes 4,05:1 |
08 · Seleção
Cada escolha tem a sua forma.
Light
Setas, digitação e Esc funcionam.
Escolha um convênio ou “Particular”.
Backspace remove o último.
Dark
Setas, digitação e Esc funcionam.
Escolha um convênio ou “Particular”.
Backspace remove o último.
Cinco intenções que não se confundem
Light
Ação
Executa algo agora. Sem estado ligado.Escolha
Uma opção entre várias. Setas trocam.Filtro
Restringe uma lista. Liga/desliga.Consentimento
Decisão com consequência. Nunca é chip.Informativo
Descreve. Não é clicável.Dark
Ação
Executa algo agora. Sem estado ligado.Escolha
Uma opção entre várias. Setas trocam.Filtro
Restringe uma lista. Liga/desliga.Consentimento
Decisão com consequência. Nunca é chip.Informativo
Descreve. Não é clicável.Teclado
- — Select: Enter/Espaço abre · setas · digitar a letra · Esc fecha
- — Combobox: digitar filtra · ↓/↑ destacam · Enter escolhe · Backspace remove a última tag
- — Radio e chips de escolha: Tab entra no grupo · setas trocam
- — Checkbox e switch: Espaço alterna · pai mostra estado indeterminado
- — Slider: setas ajustam · Home/End vão aos extremos · valor anunciado com unidade
- — Filtros: Tab entre chips · Espaço/Enter liga e desliga (aria-pressed)
Tokens utilizados · PROPOSTA
| Token | Light | Dark | Função |
|---|---|---|---|
selection.on.bg | brand:azure | brand:jade | Checkbox, radio, switch ligados |
selection.on.fg | sem:text.inverse | brand:azure | Marca de seleção |
selection.soft.bg | sem:selected.bg | sem:surface.tint | Escolha selecionada (chip de escolha) |
switch.track.off | sem:border.field | sem:border.field | Trilho desligado (≥3:1) |
switch.thumb | sem:surface | sem:canvas | Polegar |
slider.track | sem:border.decorative | sem:surface.tint | Trilho do slider |
slider.range | brand:teal | brand:jade | Faixa preenchida |
09 · Data, hora, telefone, OTP e upload
Formatos brasileiros. Nenhuma promessa falsa.
Light
Fins de semana indisponíveis nesta agenda fictícia.
Data e hora: quinta-feira, 15 de outubro · 09:30 · horário de Brasília
Formato completo · não verificado
A máscara organiza o formato. Ela não confirma quem você é.
Use dia, mês e ano com 4 dígitos.
Use números; as barras entram sozinhas.
6 dígitos · você pode colar o código
pedido-exame-exemplo.pdf
Anexado · 402 KB
foto-receita-exemplo.jpg
36% · 2,2 MB
video-consulta.mov
Formato não aceito. Envie PDF, JPG ou PNG.
Arquivos ficam só nesta página. Recarregar apaga tudo.
Dark
Fins de semana indisponíveis nesta agenda fictícia.
Data e hora: quinta-feira, 15 de outubro · 09:30 · horário de Brasília
Formato completo · não verificado
A máscara organiza o formato. Ela não confirma quem você é.
Use dia, mês e ano com 4 dígitos.
Use números; as barras entram sozinhas.
6 dígitos · você pode colar o código
pedido-exame-exemplo.pdf
Anexado · 402 KB
foto-receita-exemplo.jpg
36% · 2,2 MB
video-consulta.mov
Formato não aceito. Envie PDF, JPG ou PNG.
Arquivos ficam só nesta página. Recarregar apaga tudo.
Faça
- — Data de nascimento digitada (dd/mm/aaaa)
- — Calendário para datas próximas, com dias indisponíveis anunciados
- — Horários como botões grandes
- — OTP num único campo que aceita colar
Evite
- — Calendário para nascimento (rolar décadas)
- — Seis campos separados no OTP
- — “Identidade verificada” sem servidor
- — Remover arquivo sem nome e ícone no botão
Tokens utilizados · PROPOSTA
| Token | Light | Dark | Função |
|---|---|---|---|
otp.cell.active | sem:focus | sem:focus | Célula ativa do OTP |
upload.zone.bg | sem:surface.tint | sem:surface.sunken | Área de envio (tracejada) |
upload.progress | brand:teal | brand:jade | Barra de progresso |
10 · Formulários e onboarding
Uma etapa por vez.
Seu cuidado continua entre as consultas.
Organize sua jornada, prepare consultas e acompanhe próximos passos com seus profissionais.
Controles da demonstração
Regras deste fluxo · POC v0.4 §6 e §7
- — Uma etapa por vez, uma ação principal por tela. Densidade Confortável, toque ≥ 44 px.
- — Erros aparecem ao tocar em Continuar, presos ao campo, com texto que diz o que fazer.
- — CPF e telefone usam máscara brasileira; formato completo nunca significa identidade confirmada.
- — O código não é verificado; “Fim da demonstração” não cria conta.
- — Consentimentos por finalidade: essenciais separados de opcionais; comercial separado do cuidado; nenhum pré-marcado. TEXTO ILUSTRATIVO — REQUER VALIDAÇÃO JURÍDICA E DE PRODUTO.
- — Recusar o WhatsApp não bloqueia a identidade no app. O WhatsApp é companhia da mesma conta, não um canal paralelo.
- — Sem conexão: o que foi digitado fica no aparelho; só “Enviar código” espera a conexão, com o motivo escrito.
- — Primeiro objetivo e WhatsApp podem ser pulados. Nada pede dados de saúde nesta etapa.
Recortes por produto · densidade Operacional
Formulários curtos dentro de cada portal. Menus reais não foram alterados e nenhuma rota nova foi criada. Nomes, unidades e textos são fictícios.
Portal Médico · nota de atendimento e filtros da Agenda
Agenda e Atendimento em código · campos ilustrativosLight
Filtrar agenda
Registrar informação · paciente fictício
48/500
Dark
Filtrar agenda
Registrar informação · paciente fictício
48/500
Portal Clínica · convite para a Equipe
Equipe em código · campos ilustrativos, confirmar no produtoLight
Lista ilustrativa; no produto vem do cadastro da clínica.
Dark
Lista ilustrativa; no produto vem do cadastro da clínica.
Portal Gestão · CRM AllVita
CRM em código · campos ilustrativosLight
Nova oportunidade · formulário curto
Filtros operacionais
Dark
Nova oportunidade · formulário curto
Filtros operacionais
Portal Marca · campanha
FUTURO · só no PRD, não implementadoLight
Somente médicos parceiros. Nenhum dado de paciente é usado ou mostrado.
Dark
Somente médicos parceiros. Nenhum dado de paciente é usado ou mostrado.
Faça
- — Formulário curto em uma coluna; dois campos lado a lado só quando relacionados
- — Salvar com feedback escrito e carregando no próprio botão
- — Consentimento médico separado de autorização comercial
- — Status FUTURO visível quando a função não existe
Evite
- — Cadastro inteiro numa tela longa
- — Botão Continuar desativado sem explicar o motivo
- — Campos de saúde no Portal Marca
- — Fingir que a conta foi criada
Tokens utilizados · PROPOSTA
| Token | Light | Dark | Função |
|---|---|---|---|
form.gap.field | 6px | 6px | Rótulo → campo → ajuda |
form.gap.stack | 20 / 18 / 14 | 20 / 18 / 14 | Entre campos: Editorial / Confortável / Operacional |
form.gap.group | 40 / 32 / 24 | 40 / 32 / 24 | Entre grupos de campos |
11 · Sistema de cards
Cada superfície, uma função.
Minha Saúde
Frequência cardíaca
Última medida
72bpm
Sem faixas de referência neste card. Tendência e gráfico pertencem ao Capítulo 11.
Anatomia
- 01Superfície · card.bg + card.border
- 02Ícone em disco (cor do domínio)
- 03Título + contexto
- 04Status (semântico, nunca domínio)
- 05Valor principal
- 06Unidade
- 07Contexto temporal + origem
- 08Área de conteúdo
- 09Rodapé · divisor + ações
- 10Padding · raio · elevação por densidade
Um único AvCard: superfície (o que é) × interação (o que faz: nenhuma, clicar, selecionar, expandir) × densidade (onde vive). Card informativo é div sem hover; card clicável é button com foco visível e não contém outros botões.
Variantes de forma
Light
Compacta
Consulta
Padrão
Documentos
Horizontal
Hemograma completo
Documento importado · 02 out
Destaque
Próxima consulta
Dra. Helena Prado
Ter, 14 out · 09:30
Dark
Compacta
Consulta
Padrão
Documentos
Horizontal
Hemograma completo
Documento importado · 02 out
Destaque
Próxima consulta
Dra. Helena Prado
Ter, 14 out · 09:30
11.1 · Card base
Light
Padrão · borda + sombra 1
Card padrão
Com borda · sem sombra
Com borda
Sem borda · sunken
Sem borda
Elevado · sombra 2
Elevado
Plano
Plano
Selecionável · role checkbox
Clicável · hover + foco
Foco visível (forçado)
Expansível · aria-expanded
Leve seus exames recentes e a lista de medicamentos em uso. Nenhuma instrução clínica é gerada automaticamente.
Desativado · com motivo
Carregando
Com cabeçalho e rodapé
Lembretes
Você recebe um aviso 24 h antes de cada consulta.
Dark
Padrão · borda + sombra 1
Card padrão
Com borda · sem sombra
Com borda
Sem borda · sunken
Sem borda
Elevado · sombra 2
Elevado
Plano
Plano
Selecionável · role checkbox
Clicável · hover + foco
Foco visível (forçado)
Expansível · aria-expanded
Leve seus exames recentes e a lista de medicamentos em uso. Nenhuma instrução clínica é gerada automaticamente.
Desativado · com motivo
Carregando
Com cabeçalho e rodapé
Lembretes
Você recebe um aviso 24 h antes de cada consulta.
11.2 · Card tint · cores de domínio identificam assunto, nunca gravidade
Light
Jade
Cuidado, continuidade, AllVita
Aqua
Recuperação, registros gerais
Sky
Agenda, informação
Lavender
Sono, HRV
Coral
Frequência cardíaca
Amber
Temperatura, laboratório
Mint
Atividade, movimento
Rose
Saúde feminina
Dark
Jade
Cuidado, continuidade, AllVita
Aqua
Recuperação, registros gerais
Sky
Agenda, informação
Lavender
Sono, HRV
Coral
Frequência cardíaca
Amber
Temperatura, laboratório
Mint
Atividade, movimento
Rose
Saúde feminina
11.3 · Card institucional
Light
Identidade AllVita
Seu cuidado, em continuidade.
Informação institucional
Seus dados, suas escolhas
Ação relevante
Agende seu retorno
Vita pode organizar suas perguntas
Assistiva: prepara, não diagnostica. Você revisa antes de enviar.
Dark
Identidade AllVita
Seu cuidado, em continuidade.
Informação institucional
Seus dados, suas escolhas
Ação relevante
Agende seu retorno
Vita pode organizar suas perguntas
Assistiva: prepara, não diagnostica. Você revisa antes de enviar.
11.4 · Card de saúde · valor + unidade + data/hora + origem + estado
Light
APP-P1
Minha Saúde
12
Registros
5
Documentos
3
Exames
Registro manual
Peso
68,4kg
Resultado laboratorial
Valor do laudo
5,4%
Informação de saúde
Dark
APP-P1
Minha Saúde
12
Registros
5
Documentos
3
Exames
Registro manual
Peso
68,4kg
Resultado laboratorial
Valor do laudo
5,4%
Informação de saúde
APP-P2 · Sense — conceitual, não disponível na APP-P1
Light
Frequência cardíaca
Repouso
61bpm
Sono
Duração
7h 12min
Atividade
Passos
8.240
Dark
Frequência cardíaca
Repouso
61bpm
Sono
Duração
7h 12min
Atividade
Passos
8.240
11.5 · Card de agenda
Light
Próxima consulta
Dra. Helena Prado
Ter, 14 out · 09:30
Consulta confirmada
Consultório · Unidade exemplo
Retorno
Horários disponíveis · selecionáveis
Reagendamento solicitado
Sem consultas marcadas
Quando você agendar, ela aparece aqui.
Dark
Próxima consulta
Dra. Helena Prado
Ter, 14 out · 09:30
Consulta confirmada
Consultório · Unidade exemplo
Retorno
Horários disponíveis · selecionáveis
Reagendamento solicitado
Sem consultas marcadas
Quando você agendar, ela aparece aqui.
11.6 · Card clínico · rótulos reais do Patient Clinical Workspace
Light
Marina Costa
46 anos · Particular · código AV-0000
Situação atual
Acompanhamento ativo
Último encontro
Atendimento realizado
Próxima etapa
Próximo atendimento
Continuidade do cuidado
Continuidade e retorno
Informações recentes
- Pré-consulta enviadaInformado pelo paciente10 out
- Cadastro atualizadoInformado pelo paciente02 out
- Exames e documentos · HemogramaDocumento importado02 out
Vita · resumo para a próxima consulta
Organiza fatos já registrados, com origem. Não gera diagnóstico; você revisa.
Dark
Marina Costa
46 anos · Particular · código AV-0000
Situação atual
Acompanhamento ativo
Último encontro
Atendimento realizado
Próxima etapa
Próximo atendimento
Continuidade do cuidado
Continuidade e retorno
Informações recentes
- Pré-consulta enviadaInformado pelo paciente10 out
- Cadastro atualizadoInformado pelo paciente02 out
- Exames e documentos · HemogramaDocumento importado02 out
Vita · resumo para a próxima consulta
Organiza fatos já registrados, com origem. Não gera diagnóstico; você revisa.
11.7 · Card operacional · densidade dos portais
Light
Agenda de hoje
- 08:30Marina CostaConfirmado pelo paciente
- 09:30Paulo MendesPré-consulta enviada
- 11:00Horário reservadoHorário sem paciente identificado
Precisa da sua atenção
- Documento para revisão · Paulo Mendes
- Pré-consulta recebida · Marina Costa
Atividade recente
- Atendimento registrado · 09:58
- Prescrição emitida · ontem
Filtros
Gestão · FUTURO
Resumo de CRM
18
Leads
6
Em proposta
42
Ativas
Ações operacionais
Dark
Agenda de hoje
- 08:30Marina CostaConfirmado pelo paciente
- 09:30Paulo MendesPré-consulta enviada
- 11:00Horário reservadoHorário sem paciente identificado
Precisa da sua atenção
- Documento para revisão · Paulo Mendes
- Pré-consulta recebida · Marina Costa
Atividade recente
- Atendimento registrado · 09:58
- Prescrição emitida · ontem
Filtros
Gestão · FUTURO
Resumo de CRM
18
Leads
6
Em proposta
42
Ativas
Ações operacionais
11.8 · Card comercial · Portal Marca, somente dados transacionais
Light
Campanha
Outubro · linha nutrição
Pedidos atribuídos
1.284
Produto
Kit vitamínico 30 dias
R$ 129,90
Pedidos
Hoje
86
Novos
61
Enviados
3
Cancelados
Transações autorizadas
R$ 48.210,00
Somente dados comerciais autorizados. Nenhum dado clínico, nem agregado ou anonimizado.
Dark
Campanha
Outubro · linha nutrição
Pedidos atribuídos
1.284
Produto
Kit vitamínico 30 dias
R$ 129,90
Pedidos
Hoje
86
Novos
61
Enviados
3
Cancelados
Transações autorizadas
R$ 48.210,00
Somente dados comerciais autorizados. Nenhum dado clínico, nem agregado ou anonimizado.
11.9 · Materialidade premium
Light
Gradiente leve + borda luminosa
Superfície → Jade
Microgradiente de 160°; borda 1 px; sem glow.
Elevação sutil
Sombra 2
Só quando há sobreposição real.
Fundo tint
Jade 42% / 14%
Assunto, nunca gravidade.
Superfície profunda + geometria
Azure → Petrol
Dark
Gradiente leve + borda luminosa
Superfície → Jade
Microgradiente de 160°; borda 1 px; sem glow.
Elevação sutil
Sombra 2
Só quando há sobreposição real.
Fundo tint
Jade 42% / 14%
Assunto, nunca gravidade.
Superfície profunda + geometria
Azure → Petrol
Três densidades · mesmo significado
Editorial · 32 / 32
Próxima consulta
Dra. Helena Prado
Confortável · 20 / 24
Próxima consulta
Dra. Helena Prado
Operacional · 16 / 14
Próxima consulta
Dra. Helena Prado
Composições · comportamento dos cards em layouts plausíveis — não são telas finais
A · Home do Paciente · APP-P1
Light
Olá, Marina
Seu cuidado,
em dia.
Próxima consulta
Dra. Helena Prado
Ter, 14 out · 09:30
Vita · preparar perguntas para terça?
Dark
Olá, Marina
Seu cuidado,
em dia.
Próxima consulta
Dra. Helena Prado
Ter, 14 out · 09:30
Vita · preparar perguntas para terça?
B · Minha Saúde · APP-P1 com Sense separado como APP-P2
Light
Minha Saúde
Último exame
Valor do laudo
5,4%
Peso
68,4kg
Pressão
118/76mmHg
Sense
Conceitual · APP-P2Sono
7h 12
Passos
8.240
Dark
Minha Saúde
Último exame
Valor do laudo
5,4%
Peso
68,4kg
Pressão
118/76mmHg
Sense
Conceitual · APP-P2Sono
7h 12
Passos
8.240
C · Home do Médico · rótulos reais
Light
Bom dia
Dra. Helena Prado
Vita e próxima consulta
Marina Costa · 09:30
Vita reuniu 3 fatos registrados desde o último encontro. Revise antes de iniciar.
Agenda de hoje
Precisa da sua atenção
Itens em aberto
2
Documento para revisão · Pré-consulta recebida
Acompanhamentos
Pacientes em continuidade
18
Nada em aberto
Nada precisa da sua atenção agora.
Dark
Bom dia
Dra. Helena Prado
Vita e próxima consulta
Marina Costa · 09:30
Vita reuniu 3 fatos registrados desde o último encontro. Revise antes de iniciar.
Agenda de hoje
Precisa da sua atenção
Itens em aberto
2
Documento para revisão · Pré-consulta recebida
Acompanhamentos
Pacientes em continuidade
18
Nada em aberto
Nada precisa da sua atenção agora.
D · Patient Clinical Workspace · rótulos reais
Light
Pacientes
Marina Costa
Código 00000 · 46 anos · Feminino · 00/00/1980 · (00) 00000-0000
Resumo de continuidade
Vita assistiva: organiza registros autorizados, com origem; não gera diagnóstico.
Situação atual
Aguardando aceite do paciente
Último encontro
12/09/2026, 13:00
Próxima etapa
Sem agendamento futuro.
Linha do tempo do cuidado
10/09/2026, 21:16
Ficha criada
Início do acompanhamento na AllVita.
12/09/2026, 13:00
Último encontro
Atendimento registrado na Agenda.
Informações recentes
Conteúdo enviado pelo paciente permanece identificado como tal e nunca é fundido à nota médica.
Dark
Pacientes
Marina Costa
Código 00000 · 46 anos · Feminino · 00/00/1980 · (00) 00000-0000
Resumo de continuidade
Vita assistiva: organiza registros autorizados, com origem; não gera diagnóstico.
Situação atual
Aguardando aceite do paciente
Último encontro
12/09/2026, 13:00
Próxima etapa
Sem agendamento futuro.
Linha do tempo do cuidado
10/09/2026, 21:16
Ficha criada
Início do acompanhamento na AllVita.
12/09/2026, 13:00
Último encontro
Atendimento registrado na Agenda.
Informações recentes
Conteúdo enviado pelo paciente permanece identificado como tal e nunca é fundido à nota médica.
Nomes de pessoas, valores e datas são fictícios. Nenhum card substitui o prontuário nem gera diagnóstico; Vita aparece sempre como assistiva e revisável.
Contraste medido · Lote C
Misturas medidas em sRGB (aproximação do render em oklab).
| Par | Light | Dark | Mínimo |
|---|---|---|---|
| Texto sobre tint Jade | 16,00 ✓ | 8,28 ✓ | 4,50:1 |
| Texto secundário sobre tint Jade | 7,34 ✓ | 5,62 ✓ | 4,50:1 |
| Ícone Jade sobre disco | 7,44 ✓ | 5,19 ✓ | 3,00:1 |
| Texto sobre tint Aqua | 15,33 ✓ | 8,47 ✓ | 4,50:1 |
| Texto secundário sobre tint Aqua | 7,03 ✓ | 5,76 ✓ | 4,50:1 |
| Ícone Aqua sobre disco | 7,44 ✓ | 5,36 ✓ | 3,00:1 |
| Texto sobre tint Sky | 15,07 ✓ | 8,52 ✓ | 4,50:1 |
| Texto secundário sobre tint Sky | 6,91 ✓ | 5,79 ✓ | 4,50:1 |
| Ícone Sky sobre disco | 5,79 ✓ | 4,75 ✓ | 3,00:1 |
| Texto sobre tint Lavender | 14,72 ✓ | 8,65 ✓ | 4,50:1 |
| Texto secundário sobre tint Lavender | 6,75 ✓ | 5,88 ✓ | 4,50:1 |
| Ícone Lavender sobre disco | 7,22 ✓ | 4,59 ✓ | 3,00:1 |
| Texto sobre tint Coral | 13,95 ✓ | 9,00 ✓ | 4,50:1 |
| Texto secundário sobre tint Coral | 6,40 ✓ | 6,12 ✓ | 4,50:1 |
| Ícone Coral sobre disco | 5,90 ✓ | 4,26 ✓ | 3,00:1 |
| Texto sobre tint Amber | 15,11 ✓ | 8,61 ✓ | 4,50:1 |
| Texto secundário sobre tint Amber | 6,93 ✓ | 5,85 ✓ | 4,50:1 |
| Ícone Amber sobre disco | 6,48 ✓ | 4,84 ✓ | 3,00:1 |
| Texto sobre tint Mint | 15,43 ✓ | 8,36 ✓ | 4,50:1 |
| Texto secundário sobre tint Mint | 7,08 ✓ | 5,68 ✓ | 4,50:1 |
| Ícone Mint sobre disco | 6,39 ✓ | 4,93 ✓ | 3,00:1 |
| Texto sobre tint Rose | 14,69 ✓ | 8,71 ✓ | 4,50:1 |
| Texto secundário sobre tint Rose | 6,74 ✓ | 5,92 ✓ | 4,50:1 |
| Ícone Rose sobre disco | 6,53 ✓ | 4,58 ✓ | 3,00:1 |
| Texto sobre institucional | 15,99 ✓ | 13,97 ✓ | 4,50:1 |
| Secundário sobre institucional | 13,21 ✓ | 11,55 ✓ | 4,50:1 |
| Texto sobre selecionado | 16,21 ✓ | 10,04 ✓ | 4,50:1 |
| Borda do selecionado | 7,44 ✓ | 11,55 ✓ | 3,00:1 |
| Tooltip | 15,99 ✓ | 15,99 ✓ | 4,50:1 |
Contratos locais do Lote C · PROPOSTA
| Token | Light | Dark | Função |
|---|---|---|---|
card.bg | sem:surface | sem:surface | Fundo do card padrão |
card.border | sem:border.decorative | sem:border.decorative | Borda discreta (1 px) — nunca o único sinal de estado |
card.hover | mix:sem:surface|sem:surface.tint|70 | sem:surface.raised | Hover de card clicável — fundo + elevação |
card.selected.bg | mix:sem:surface|brand:jade|35 | mix:sem:surface|brand:jade|12 | Selecionado: fundo Jade suave + borda 1,5 px + ícone ✓ |
card.selected.border | brand:teal | brand:jade | Borda do selecionado |
card.elevation.flat | none | none | Plano: em listas e dentro de outro card |
card.elevation.rest | sem:shadow.1 | sem:shadow.1 | Elevado em repouso |
card.elevation.hover | sem:shadow.2 | sem:shadow.2 | Elevado no hover (só clicável) |
card.tint.bg | mix:sem:surface|expr:<domínio>|42 | mix:sem:surface.raised|expr:<domínio>|14 | Fundo tint por domínio — assunto, nunca gravidade |
card.tint.disc | sem:surface | mix:sem:surface.raised|expr:<domínio>|24 | Disco do ícone no tint |
card.institutional.bg | brand:azure | brand:petrol | Institucional / Vita: Azure no Light, Petrol no Dark |
card.deep.bg | mix:brand:azure|brand:teal|18 | mix:brand:azure|brand:petrol|50 | Superfície profunda com microgradiente |
card.premium.edge | mix:sem:surface|brand:jade|80 | mix:brand:jade|sem:surface|70 | Borda luminosa discreta (1 px, sem glow) |
card.padding | 32 · 20 · 16 px | 32 · 20 · 16 px | Editorial · Confortável · Operacional |
card.radius | 32 · 24 · 14 px | 32 · 24 · 14 px | Editorial · Confortável · Operacional |
card.header | sem:text | sem:text | Título 15–20 px Medium; ícone 20/24 px em disco |
card.footer | sem:border.decorative | sem:border.decorative | Divisor do rodapé; ações à direita |
glass.bg | mix:sem:surface|transparent|22 | mix:sem:surface.raised|transparent|22 | Glass contextual — nunca atrás de dado clínico |
glass.blur | 16px | 16px | Blur máximo; fallback opaco sem backdrop-filter |
glass.border | mix:sem:surface|transparent|30 | mix:sem:text|transparent|88 | Borda do glass |
overlay.scrim | sem:scrim | sem:scrim | Scrim de modal/sheet |
modal.elevation | sem:shadow.3 | sem:shadow.3 | Modal e diálogo |
sheet.elevation | sem:shadow.3 | sem:shadow.3 | Sheet inferior e painel lateral |
drawer.width | 420 · 480 px | 420 · 480 px | Painel lateral portal · detalhe largo |
popover.surface | sem:surface.raised | sem:surface.raised | Popover e menu flutuante |
tooltip.surface | brand:azure | sem:text | Tooltip: inverso do canvas; texto text.inverse |
12 · Camadas e overlays
Por cima, sem perder o lugar.
Interativos · teste teclado, Esc e retorno do foco
Light
Dark
Modais e diálogos · oito tipos
Light
Confirmar horário?
Ter, 14 out · 09:30 com Dra. Helena Prado. Você pode reagendar até 24 h antes.
Como seus dados são usados
Compartilhar com um médico é pedido médico por médico. Nada é liberado para marcas.
Não foi possível enviar
Sem conexão. O que você escreveu ficou salvo neste aparelho.
Excluir este registro?
O registro de peso de 12 out sai do seu histórico. Registros feitos por profissionais não são afetados.
Editar contato
Hemograma completo.pdf
Documento importado · 02 outLembretes desativados
Você não receberá avisos de consulta. Pode reativar quando quiser.
Enviando pré-consulta…
Isso leva alguns segundos. Não feche o aplicativo.
Dark
Confirmar horário?
Ter, 14 out · 09:30 com Dra. Helena Prado. Você pode reagendar até 24 h antes.
Como seus dados são usados
Compartilhar com um médico é pedido médico por médico. Nada é liberado para marcas.
Não foi possível enviar
Sem conexão. O que você escreveu ficou salvo neste aparelho.
Excluir este registro?
O registro de peso de 12 out sai do seu histórico. Registros feitos por profissionais não são afetados.
Editar contato
Hemograma completo.pdf
Documento importado · 02 outLembretes desativados
Você não receberá avisos de consulta. Pode reativar quando quiser.
Enviando pré-consulta…
Isso leva alguns segundos. Não feche o aplicativo.
Drawers, sheets e painéis
App · sheet inferior
Light
Escolha uma data
outubro 2026
| D | S | T | Q | Q | S | S |
|---|---|---|---|---|---|---|
Setas movem o dia · PageUp/PageDown trocam o mês
Ações
Dark
Escolha uma data
outubro 2026
| D | S | T | Q | Q | S | S |
|---|---|---|---|---|---|---|
Setas movem o dia · PageUp/PageDown trocam o mês
Ações
Portais · painel lateral (densidade operacional)
Light
Detalhes do agendamento
Portal Médico · CÓDIGO
Ter, 14 out · 09:30
Marina Costa
Filtros
Portal Médico · agenda
Convidar profissional
Portal Clínica · campos ilustrativos
Filtrar equipe
Portal Clínica
Clínica Exemplo · CRM
Portal Gestão
Em proposta
Último contato 03 out · próxima ação: enviar proposta.
Filtrar transações autorizadas
Portal Marca · somente dados comerciais
Nenhum dado clínico, nem agregado ou anonimizado.
Dark
Detalhes do agendamento
Portal Médico · CÓDIGO
Ter, 14 out · 09:30
Marina Costa
Filtros
Portal Médico · agenda
Convidar profissional
Portal Clínica · campos ilustrativos
Filtrar equipe
Portal Clínica
Clínica Exemplo · CRM
Portal Gestão
Em proposta
Último contato 03 out · próxima ação: enviar proposta.
Filtrar transações autorizadas
Portal Marca · somente dados comerciais
Nenhum dado clínico, nem agregado ou anonimizado.
Popover, tooltip, accordion e menu
Light
Popover (prévia)
Documento importado
Enviado pelo paciente. Disponível não é o mesmo que revisado.
Menu flutuante (prévia)
Accordion
Tooltip (prévia)
Copiar código do pacienteDark
Popover (prévia)
Documento importado
Enviado pelo paciente. Disponível não é o mesmo que revisado.
Menu flutuante (prévia)
Accordion
Tooltip (prévia)
Copiar código do pacienteGlass contextual + fallback opaco
Light · glass contextual
Barra flutuante sobre fundo decorativo
Glass só sobre fundo decorativo; nunca atrás de dado clínico. Blur 16 px; sem suporte, vira superfície opaca.
Dark · glass contextual
Barra flutuante sobre fundo decorativo
Glass só sobre fundo decorativo; nunca atrás de dado clínico. Blur 16 px; sem suporte, vira superfície opaca.
Regras de camada
- — Modal: título + descrição ligados por aria; foco inicial no primeiro controle; Esc fecha; foco volta ao gatilho.
- — Destrutivo: AlertDialog, foco inicial em Cancelar, clicar fora não fecha, rótulo diz o que acontece.
- — App usa sheet inferior; portais usam painel lateral de 420–480 px. Mesmo contrato, outro lado.
- — Scrim
sem:scrim; elevaçãoshadow.3; z-index do 09 (overlay 300, sheet 400, modal 500). - — Movimento reduzido: sem deslocamento nem escala; só aparece.
13 · Estados do sistema
Dizer o que está acontecendo.
13.1 · Carregamento
Light
Texto
Card
Lista
Tabela
Agenda
Painel clínico
O botão em carregamento mantém a largura e anuncia "ocupado"; o skeleton anuncia uma vez e fica estático com movimento reduzido.
Dark
Texto
Card
Lista
Tabela
Agenda
Painel clínico
O botão em carregamento mantém a largura e anuncia "ocupado"; o skeleton anuncia uma vez e fica estático com movimento reduzido.
13.2 · Estados vazios
Light
Ausência legítima
Nenhuma consulta agendada.
Quando houver um agendamento, ele aparece aqui.
Ausência legítima
Nenhum paciente na sua lista ainda.
Pacientes aparecem após o primeiro atendimento ou convite aceito.
Ausência legítima
Nenhuma conversa.
Mensagens trocadas com seus médicos ficam aqui.
Ausência legítima
Nenhum documento enviado.
Documentos enviados por você ou pelo médico aparecem com a origem.
Dark
Ausência legítima
Nenhuma consulta agendada.
Quando houver um agendamento, ele aparece aqui.
Ausência legítima
Nenhum paciente na sua lista ainda.
Pacientes aparecem após o primeiro atendimento ou convite aceito.
Ausência legítima
Nenhuma conversa.
Mensagens trocadas com seus médicos ficam aqui.
Ausência legítima
Nenhum documento enviado.
Documentos enviados por você ou pelo médico aparecem com a origem.
Ausência ≠ permissão ≠ indisponível ≠ erro
Light
Ausência legítima
Nada em aberto
Nada precisa da sua atenção agora.
Sem permissão
Você não tem acesso a esta informação
O paciente não autorizou o compartilhamento com você.
Indisponível
Informação indisponível no momento
O serviço de documentos está fora do ar. Os dados não foram perdidos.
Sem dados sincronizados
Nenhum dado de dispositivo recebido.
Nada foi estimado ou preenchido no lugar.
Dark
Ausência legítima
Nada em aberto
Nada precisa da sua atenção agora.
Sem permissão
Você não tem acesso a esta informação
O paciente não autorizou o compartilhamento com você.
Indisponível
Informação indisponível no momento
O serviço de documentos está fora do ar. Os dados não foram perdidos.
Sem dados sincronizados
Nenhum dado de dispositivo recebido.
Nada foi estimado ou preenchido no lugar.
Regra: um estado vazio nunca preenche o espaço com informação inventada. Cada tipo tem rótulo próprio, ícone e forma distintos — a cor não é o único sinal.
13.3 · Erros com recuperação
Light
Erro: Não foi possível carregar a agenda.
Atenção: Sem conexão.
Erro: O tempo de resposta esgotou.
Informe um e-mail completo, como nome@clinica.com.br.
Aviso: Permissão insuficiente.
Aviso: Informação indisponível.
Erro: Não foi possível salvar as alterações.
Atenção: Conflito de atualização.
Dark
Erro: Não foi possível carregar a agenda.
Atenção: Sem conexão.
Erro: O tempo de resposta esgotou.
Informe um e-mail completo, como nome@clinica.com.br.
Aviso: Permissão insuficiente.
Aviso: Informação indisponível.
Erro: Não foi possível salvar as alterações.
Atenção: Conflito de atualização.
13.4 · Salvamento
Light
Nota de evolução
"Salvo" só aparece depois da confirmação simulada (1,2 s). Somente leitura não oferece Salvar.
Dark
Nota de evolução
"Salvo" só aparece depois da confirmação simulada (1,2 s). Somente leitura não oferece Salvar.
14 · Feedback e notificações
Proporção, não alarme.
Componentes e demonstrações
Light
Toasts não movem o foco, pausam com hover/foco e têm Fechar; erro e desfazer ficam 10 s.
Informação: Nova mensagem de Marina Costa.
Concluído: Convite enviado.
Prioritário: Integração de agenda parada desde 08:00.
Concluído: Salvo às 10:45.
Atenção: Campo obrigatório para emitir o recibo.
Dark
Toasts não movem o foco, pausam com hover/foco e têm Fechar; erro e desfazer ficam 10 s.
Informação: Nova mensagem de Marina Costa.
Concluído: Convite enviado.
Prioritário: Integração de agenda parada desde 08:00.
Concluído: Salvo às 10:45.
Atenção: Campo obrigatório para emitir o recibo.
14.1 · Hierarquia de criticidade
| Nível | Significado | Anúncio | Persistência |
|---|---|---|---|
| Informativo | Não exige intervenção. | role=status | Toast 6 s ou inline |
| Sucesso | Confirma conclusão real — só após a confirmação da operação. | role=status | Toast 5 s; nunca antecipado |
| Atenção | Exige observação ou revisão. | role=status | Inline ou banner até resolver |
| Erro | A operação não foi concluída. | role=alert | Persistente até nova tentativa |
| Crítico | Prioridade operacional, linguagem proporcional. Nunca alarme clínico fictício. | role=alert | Banner persistente, fechar só após ação |
Status operacional ≠ status clínico. Erro e crítico usam o mesmo vermelho semântico do 09; o crítico ganha borda e persistência, não mais saturação.
14.2 · Notificações clínicas
Light
Exame de sangue (PDF) · não revisado · Responsável: Dra. Helena Prado
Consulta de ter, 14 out · 09:30 · Responsável: Dra. Helena Prado
Paulo Mendes · qui, 16 out · Responsável: Recepção da clínica
Dados fictícios. Cada notificação preserva origem, contexto, momento, responsável e leitura. A Vita nunca é responsável por decisão clínica; não há alarmes médicos.
Dark
Exame de sangue (PDF) · não revisado · Responsável: Dra. Helena Prado
Consulta de ter, 14 out · 09:30 · Responsável: Dra. Helena Prado
Paulo Mendes · qui, 16 out · Responsável: Recepção da clínica
Dados fictícios. Cada notificação preserva origem, contexto, momento, responsável e leitura. A Vita nunca é responsável por decisão clínica; não há alarmes médicos.
UX writing · quatro perguntas
| Contexto | O que aconteceu | O que significa | O que fazer | O que não aconteceu |
|---|---|---|---|---|
| Médico Salvar | Não foi possível salvar as alterações. | A nota continua neste dispositivo, sem envio. | Tentar novamente. | Nada foi gravado no prontuário. |
| Médico Agendamento | Não foi possível atualizar o agendamento. | O horário anterior continua valendo. | Tentar novamente ou abrir a Agenda. | O paciente não foi avisado. |
| Paciente Documento | Documento enviado. | Seu médico verá como enviado por você. | Ver documento. | Ainda não foi revisado. |
| Clínica Convite | Convite enviado para o e-mail informado. | A pessoa precisa aceitar para entrar na equipe. | Reenviar ou cancelar. | Nenhum acesso foi liberado ainda. |
| Paciente Conexão | Você está sem conexão. | Mostramos o que já estava salvo. | Continuar vendo; enviaremos quando voltar. | Nada novo foi enviado. |
| Gestão CRM | Responsável atribuído. | A oportunidade aparece na fila dessa pessoa. | Desfazer. | O cliente não foi contatado. |
| Marca Pedido | Pedido atualizado para ‘Em separação’. | Status comercial, sem dado de saúde. | Ver pedido. | Nenhuma cobrança nova. |
Evitar: “Algo deu errado.” · “Sucesso!” · “Erro desconhecido.” · “Atenção! Urgente!” · “Salvo (antes da confirmação)”
Paciente: segunda pessoa, simples. Médico: objetivo e factual. Clínica: operacional. Gestão: direto, com responsável. Marca: só comercial e transacional.
15 · Progresso e comunicação
Onde estou, o que falta.
Componentes de progresso
Light
- Conta (concluída)
- Verificação (concluída)
- Perfil (atual)
- Consentimentos (pendente)
- WhatsApp (pendente)
- Família (pendente)
- Pronto (pendente)
Etapa 3 de 7Perfil
5 de 12 campos
2,4 MB · simulado
Pode levar alguns segundos.
2 de 4 concluídos
- Confirmar e-mail — concluído
- Verificar telefone — concluído
- Aceitar termos de uso — pendenteObrigatório
- WhatsApp — pendenteOpcional — recusar não bloqueia o app
- Perfil atualizadoPor você
- Telefone verificadoCódigo confirmado (simulado)
- Conta criadaPor você
Dark
- Conta (concluída)
- Verificação (concluída)
- Perfil (atual)
- Consentimentos (pendente)
- WhatsApp (pendente)
- Família (pendente)
- Pronto (pendente)
Etapa 3 de 7Perfil
5 de 12 campos
2,4 MB · simulado
Pode levar alguns segundos.
2 de 4 concluídos
- Confirmar e-mail — concluído
- Verificar telefone — concluído
- Aceitar termos de uso — pendenteObrigatório
- WhatsApp — pendenteOpcional — recusar não bloqueia o app
- Perfil atualizadoPor você
- Telefone verificadoCódigo confirmado (simulado)
- Conta criadaPor você
15.1 · App do Paciente
Light
Etapa 3 de 7Perfil
Código de verificação
6 dígitos · você pode colar o código
Informação: Reenviar em 0:42.
Atenção: Consentimento pendente
Cadastro familiar
1 registro manual aguardando conexão. Nada foi perdido.
Registro manual
Dark
Etapa 3 de 7Perfil
Código de verificação
6 dígitos · você pode colar o código
Informação: Reenviar em 0:42.
Atenção: Consentimento pendente
Cadastro familiar
1 registro manual aguardando conexão. Nada foi perdido.
Registro manual
15.2–15.5 · Portais
15.2 · Portal Médico
Light
Concluído: Agendamento confirmado.
Informação: Consulta alterada.
Atenção: Documento pendente de revisão.
Sem permissão
Mensagens indisponível neste acesso
O item existe; fica disponível quando o servidor confirma ambiente, vínculo, permissão e liberação de comunicação — não apenas o plano.
Ausência legítima
Acompanhamento sem registros
Nada registrado desde o último encontro.
Dark
Concluído: Agendamento confirmado.
Informação: Consulta alterada.
Atenção: Documento pendente de revisão.
Sem permissão
Mensagens indisponível neste acesso
O item existe; fica disponível quando o servidor confirma ambiente, vínculo, permissão e liberação de comunicação — não apenas o plano.
Ausência legítima
Acompanhamento sem registros
Nada registrado desde o último encontro.
15.3 · Portal Clínica · campos ilustrativos, confirmar no produto
Light
Informação: Convite de equipe enviado para helena@clinica.com.br.
Informe um e-mail completo.
Dark
Informação: Convite de equipe enviado para helena@clinica.com.br.
Informe um e-mail completo.
15.4 · Portal Gestão · CRM AllVita (existente)
Light
Concluído: Lead movido para o estágio ‘Proposta’.
Informação: Responsável: Carla Nunes.
Indisponível
Operação indisponível
Exportação ainda não implementada.
Ausência legítima
Suporte sem implementação comprovada
A aba existe em Operações e está vazia; nenhum feedback de suporte é demonstrado.
Dark
Concluído: Lead movido para o estágio ‘Proposta’.
Informação: Responsável: Carla Nunes.
Indisponível
Operação indisponível
Exportação ainda não implementada.
Ausência legítima
Suporte sem implementação comprovada
A aba existe em Operações e está vazia; nenhum feedback de suporte é demonstrado.
15.5 · Portal Marca · apenas comercial e transacional
Light
Informação: Pedido #10284 em separação.
Atenção: Estoque baixo: linha nutrição 500 g.
Dark
Informação: Pedido #10284 em separação.
Atenção: Estoque baixo: linha nutrição 500 g.
Composições · estados em contexto, com cards e camadas do Lote C — não são telas finais
A · Home do Médico · carregamento, vazio e atenção
Light
Agenda de hoje
Precisa da sua atenção
Dark
Agenda de hoje
Precisa da sua atenção
B · Patient Clinical Workspace · salvamento e indisponível
Light
Situação atual
Aguardando aceite do paciente
Informações recentes
Sem permissão
Informações indisponíveis
O paciente ainda não aceitou o vínculo; registros enviados por ele não podem ser exibidos.
Dark
Situação atual
Aguardando aceite do paciente
Informações recentes
Sem permissão
Informações indisponíveis
O paciente ainda não aceitou o vínculo; registros enviados por ele não podem ser exibidos.
C · App do Paciente · onboarding e conexão
Ver 15.1 acima: progresso do cadastro, verificação, consentimento e conexão no mesmo celular.
D · Portal Gestão · feedback operacional e notificações
Light
Gestão · CRM AllVita
Clínica Exemplo
Notificações
Lead entrou no estágio ‘Proposta’
Responsável: Carla Nunes
Novo lead · Fonte: Site
Responsável: Você
Dark
Gestão · CRM AllVita
Clínica Exemplo
Notificações
Lead entrou no estágio ‘Proposta’
Responsável: Carla Nunes
Novo lead · Fonte: Site
Responsável: Você
Tokens e contraste
Tokens locais · Lote D (PROPOSTA)
| Token | Referência | Função |
|---|---|---|
feedback.info.bg / fg / border | sem:info.bg · sem:info.fg · sem:info.border | Informativo |
feedback.success.* | sem:success.* | Sucesso confirmado |
feedback.warning.* | sem:warning.* | Atenção / revisão |
feedback.error.* | sem:critical.* | Erro: operação não concluída |
feedback.critical.* | sem:critical.* + borda 2 px | Crítico operacional — mesma cor do erro, mais peso estrutural, nunca mais saturação |
alert.radius · pad | 16 · 14 px (op. 12 · 12) Dark: 16 · 14 px | Alerta inline |
alert.accent | 3 px à esquerda | Faixa do tom + ícone + título — nunca só cor |
banner.bg | sem:surface Dark: sem:surface.raised | Banner: superfície neutra + faixa do tom (evita grandes caixas coloridas) |
toast.surface | brand:azure Dark: sem:surface.raised | Toast inverso no Light; elevado no Dark |
toast.duration | 5–6 s; pausa com hover/foco Dark: 5–6 s | Erro e undo não somem sozinhos antes de 10 s |
skeleton.base · shine | sem:surface.sunken · sem:border.decorative | Shimmer 1,4 s; estático com reduced motion |
progress.track · fill | sem:surface.sunken · brand:teal Dark: sem:surface.sunken · brand:jade | Barra 6 px (op. 4 px) |
status.dot | 8 px + rótulo | Ponto nunca aparece sem texto |
notification.unread | brand:teal Dark: brand:chartreuse | Não lida: ponto + texto ‘Não lida’ + peso 500 |
loading.spinner | currentColor 2 px | Rotação 900 ms; vira ponto pulsante estático com reduced motion |
Contraste calculado · Lote D
Superfícies opacas; medição em tela registrada no relatório.
| Par | Light | Dark | Mín. |
|---|---|---|---|
| Texto info sobre fundo info | 5,04 ✓ | 5,94 ✓ | 4,50 |
| Texto info sobre superfície (banner) | 5,79 ✓ | 7,06 ✓ | 4,50 |
| Faixa info sobre superfície | 5,79 ✓ | 7,06 ✓ | 3,00 |
| Texto success sobre fundo success | 5,61 ✓ | 6,06 ✓ | 4,50 |
| Texto success sobre superfície (banner) | 6,39 ✓ | 7,17 ✓ | 4,50 |
| Faixa success sobre superfície | 4,99 ✓ | 7,17 ✓ | 3,00 |
| Texto warning sobre fundo warning | 5,71 ✓ | 6,48 ✓ | 4,50 |
| Texto warning sobre superfície (banner) | 6,48 ✓ | 7,65 ✓ | 4,50 |
| Faixa warning sobre superfície | 4,73 ✓ | 7,65 ✓ | 3,00 |
| Texto critical sobre fundo critical | 5,13 ✓ | 5,48 ✓ | 4,50 |
| Texto critical sobre superfície (banner) | 5,98 ✓ | 6,16 ✓ | 4,50 |
| Faixa critical sobre superfície | 5,98 ✓ | 6,16 ✓ | 3,00 |
| Texto do toast | 15,99 ✓ | 12,09 ✓ | 4,50 |
| Preenchimento da barra de progresso | 6,96 ✓ | 10,81 ✓ | 3,00 |
| Texto secundário em estado vazio | 8,04 ✓ | 9,49 ✓ | 4,50 |
Nomes, horários e valores são fictícios. Nenhuma demonstração salva, envia ou sincroniza dados reais.
16 · Tabelas e listas
Densidade com leitura calma.
16.1 · Anatomia da data table
Light
| Situação da ficha | Conta AllVita | Ações | |||||||
|---|---|---|---|---|---|---|---|---|---|
| 39 | Particular | Ativa | Em acompanhamento | 02/10/2026 | 14/10/2026 | Conectada | |||
| 52 | Convênio Exemplo | Ativa | Retorno pendente | 18/09/2026 | — | Não conectada | |||
| 28 | Particular | Ativa | Novo | — | 09/10/2026 | Não conectada | |||
| 61 | Convênio Exemplo | Suspensa | Inativo | 11/03/2026 | — | Conectada | |||
| 44 | Particular | Ativa | Em acompanhamento | 29/09/2026 | 20/10/2026 | Conectada |
Dark
| Situação da ficha | Conta AllVita | Ações | |||||||
|---|---|---|---|---|---|---|---|---|---|
| 39 | Particular | Ativa | Em acompanhamento | 02/10/2026 | 14/10/2026 | Conectada | |||
| 52 | Convênio Exemplo | Ativa | Retorno pendente | 18/09/2026 | — | Não conectada | |||
| 28 | Particular | Ativa | Novo | — | 09/10/2026 | Não conectada | |||
| 61 | Convênio Exemplo | Suspensa | Inativo | 11/03/2026 | — | Conectada | |||
| 44 | Particular | Ativa | Em acompanhamento | 29/09/2026 | 20/10/2026 | Conectada |
- 01Legenda. Título real do portal (‘Seus Pacientes’) — também é a legenda acessível da tabela.
- 02Cabeçalho. 13 px, 500, sem caixa alta; fixo ao rolar. Ordenável = botão + seta + aria-sort.
- 03Seleção. Checkbox rotulado por linha; o cabeçalho marca/desmarca as linhas visíveis (estado misto).
- 04Célula principal. Cabeçalho de linha (th scope=row); abre o detalhe em painel lateral.
- 05Números. Alinhados à direita, algarismos tabulares — idades e horas comparáveis.
- 06Datas. dd/mm/aaaa; ‘—’ quando não há registro (nunca inventado).
- 07Status. Etiqueta com texto; o tom reforça, não substitui o rótulo.
- 08Ações da linha. Menu ⋯ com nome do paciente no rótulo acessível.
- 09Paginação. ‘1–5 de 12’ + páginas com aria-current; anterior/próxima desativam no limite.
16.2 · Variantes
Light
Operacional densa · agenda do dia (rótulos ilustrativos)
| Local | Situação | Ações | ||
|---|---|---|---|---|
| 08:30 | Marina CostaRetorno | Consultório | Concluída | |
| 09:30 | Helena DuartePrimeira consulta | Consultório | Confirmada | |
| 10:30 | Tiago AlvesRetorno | Teleconsulta | Aguardando confirmação | |
| 14:00 | Clara RibeiroRetorno | Consultório | Confirmada |
Tabela em card · Lote C
Funil do CRM AllVita
| Lead | 18 | +3 |
|---|---|---|
| MQL | 9 | −1 |
| Reivindicação de Perfil | 6 | +2 |
| Demonstração | 5 | 0 |
| Proposta | 4 | +1 |
| Assinatura | 3 | +1 |
| Cliente ativo | 21 | +2 |
Dark
Operacional densa · agenda do dia (rótulos ilustrativos)
| Local | Situação | Ações | ||
|---|---|---|---|---|
| 08:30 | Marina CostaRetorno | Consultório | Concluída | |
| 09:30 | Helena DuartePrimeira consulta | Consultório | Confirmada | |
| 10:30 | Tiago AlvesRetorno | Teleconsulta | Aguardando confirmação | |
| 14:00 | Clara RibeiroRetorno | Consultório | Confirmada |
Tabela em card · Lote C
Funil do CRM AllVita
| Lead | 18 | +3 |
|---|---|---|
| MQL | 9 | −1 |
| Reivindicação de Perfil | 6 | +2 |
| Demonstração | 5 | 0 |
| Proposta | 4 | +1 |
| Assinatura | 3 | +1 |
| Cliente ativo | 21 | +2 |
16.3 · Estados
Light
Estados de linha (forçados para documentação)
| Estado | Ações | ||||
|---|---|---|---|---|---|
| Default | 39 | Em acompanhamento | |||
| Hover | 52 | Retorno pendente | |||
| Focus | 28 | Novo | |||
| Selected | 44 | Em acompanhamento | |||
| Disabled | Ficha suspensa — reative para editar | 61 | Inativo |
Selecionada = checkbox + fundo + barra 3 px. Indisponível mostra o motivo em texto. Foco é anel de 2 px na linha.
Dark
Estados de linha (forçados para documentação)
| Estado | Ações | ||||
|---|---|---|---|---|---|
| Default | 39 | Em acompanhamento | |||
| Hover | 52 | Retorno pendente | |||
| Focus | 28 | Novo | |||
| Selected | 44 | Em acompanhamento | |||
| Disabled | Ficha suspensa — reative para editar | 61 | Inativo |
Selecionada = checkbox + fundo + barra 3 px. Indisponível mostra o motivo em texto. Foco é anel de 2 px na linha.
Light
| Ações | |||||
|---|---|---|---|---|---|
| 39 | Em acompanhamento | 14/10/2026 | |||
| 52 | Retorno pendente | — | |||
| 28 | Novo | 09/10/2026 | |||
| 61 | Inativo | — |
Dark
| Ações | |||||
|---|---|---|---|---|---|
| 39 | Em acompanhamento | 14/10/2026 | |||
| 52 | Retorno pendente | — | |||
| 28 | Novo | 09/10/2026 | |||
| 61 | Inativo | — |
Carregamento, vazio e erro reutilizam skeleton, estado vazio e alerta do Lote D. Somente leitura remove seleção e menu e é anunciado na legenda. “Sem resultado” ≠ “nenhum cadastro”.
16.4 · Densidades
Light
| Ações | |||||
|---|---|---|---|---|---|
| 39 | Em acompanhamento | 14/10/2026 | |||
| 52 | Retorno pendente | — | |||
| 28 | Novo | 09/10/2026 | |||
| 61 | Inativo | — |
Dark
| Ações | |||||
|---|---|---|---|---|---|
| 39 | Em acompanhamento | 14/10/2026 | |||
| 52 | Retorno pendente | — | |||
| 28 | Novo | 09/10/2026 | |||
| 61 | Inativo | — |
Operacional nunca fica abaixo de 44 px de linha; o checkbox e o menu ganham área de 44 px em telas de toque. Editorial é para apresentações e relatórios; Confortável, para o App e a Vita.
16.5 · Listas
Light
Simples
Com avatar
Carla Nunes
Bruno Teixeira
Helena Prado
Com ícone
Pedido de exames
Atestado
Múltiplas linhas
Retorno em 30 dias
Revisar exames enviados pela paciente antes do retorno.
Agrupada
B
- Em acompanhamento
Beatriz Rocha
C
- Em acompanhamento
Clara Ribeiro
Dark
Simples
Com avatar
Carla Nunes
Bruno Teixeira
Helena Prado
Com ícone
Pedido de exames
Atestado
Múltiplas linhas
Retorno em 30 dias
Revisar exames enviados pela paciente antes do retorno.
Agrupada
B
- Em acompanhamento
Beatriz Rocha
C
- Em acompanhamento
Clara Ribeiro
Light
Pacientes (seleção única)
- 14/10
- 09/10
Compromissos
- 08:30
Marina Costa
- 09:30
Helena Duarte
- 10:30
Tiago Alves
- 14:00
Clara Ribeiro
Notificações · Lote D
Documento enviado pela paciente
Marina Costa
Consulta remarcada
Responsável: Você
Atividades · Lote D
- Ficha atualizadaVocê
- Consulta concluídaVocê
- Convite aceitoMarina Costa
Expansível
Marina Costa
- Código
- 00001
- Idade
- 39 anos
- Convênio
- Particular
- Situação da ficha
- Ativa
- Status CRM
- Em acompanhamento
- Último atendimento
- 02/10/2026
- Próximo atendimento
- 14/10/2026
- Conta AllVita
- Conectada
Paulo Mendes
- Código
- 00002
- Idade
- 52 anos
- Convênio
- Convênio Exemplo
- Situação da ficha
- Ativa
- Status CRM
- Retorno pendente
- Último atendimento
- 18/09/2026
- Próximo atendimento
- —
- Conta AllVita
- Não conectada
Helena Duarte
- Código
- 00003
- Idade
- 28 anos
- Convênio
- Particular
- Situação da ficha
- Ativa
- Status CRM
- Novo
- Último atendimento
- —
- Próximo atendimento
- 09/10/2026
- Conta AllVita
- Não conectada
Dark
Pacientes (seleção única)
- 14/10
- 09/10
Compromissos
- 08:30
Marina Costa
- 09:30
Helena Duarte
- 10:30
Tiago Alves
- 14:00
Clara Ribeiro
Notificações · Lote D
Documento enviado pela paciente
Marina Costa
Consulta remarcada
Responsável: Você
Atividades · Lote D
- Ficha atualizadaVocê
- Consulta concluídaVocê
- Convite aceitoMarina Costa
Expansível
Marina Costa
- Código
- 00001
- Idade
- 39 anos
- Convênio
- Particular
- Situação da ficha
- Ativa
- Status CRM
- Em acompanhamento
- Último atendimento
- 02/10/2026
- Próximo atendimento
- 14/10/2026
- Conta AllVita
- Conectada
Paulo Mendes
- Código
- 00002
- Idade
- 52 anos
- Convênio
- Convênio Exemplo
- Situação da ficha
- Ativa
- Status CRM
- Retorno pendente
- Último atendimento
- 18/09/2026
- Próximo atendimento
- —
- Conta AllVita
- Não conectada
Helena Duarte
- Código
- 00003
- Idade
- 28 anos
- Convênio
- Particular
- Situação da ficha
- Ativa
- Status CRM
- Novo
- Último atendimento
- —
- Próximo atendimento
- 09/10/2026
- Conta AllVita
- Não conectada
16.6 · Responsividade
Light · 390 px
Seus Pacientes
- Em acompanhamento
Marina Costa
- Código
- 00001
- Idade
- 39 anos
- Convênio
- Particular
- Situação da ficha
- Ativa
- Status CRM
- Em acompanhamento
- Último atendimento
- 02/10/2026
- Próximo atendimento
- 14/10/2026
- Conta AllVita
- Conectada
- Retorno pendente
Paulo Mendes
- Código
- 00002
- Idade
- 52 anos
- Convênio
- Convênio Exemplo
- Situação da ficha
- Ativa
- Status CRM
- Retorno pendente
- Último atendimento
- 18/09/2026
- Próximo atendimento
- —
- Conta AllVita
- Não conectada
- Novo
Helena Duarte
- Código
- 00003
- Idade
- 28 anos
- Convênio
- Particular
- Situação da ficha
- Ativa
- Status CRM
- Novo
- Último atendimento
- —
- Próximo atendimento
- 09/10/2026
- Conta AllVita
- Não conectada
- Inativo
Rafael Lima
- Código
- 00004
- Idade
- 61 anos
- Convênio
- Convênio Exemplo
- Situação da ficha
- Suspensa
- Status CRM
- Inativo
- Último atendimento
- 11/03/2026
- Próximo atendimento
- —
- Conta AllVita
- Conectada
Dark · 390 px
Seus Pacientes
- Em acompanhamento
Marina Costa
- Código
- 00001
- Idade
- 39 anos
- Convênio
- Particular
- Situação da ficha
- Ativa
- Status CRM
- Em acompanhamento
- Último atendimento
- 02/10/2026
- Próximo atendimento
- 14/10/2026
- Conta AllVita
- Conectada
- Retorno pendente
Paulo Mendes
- Código
- 00002
- Idade
- 52 anos
- Convênio
- Convênio Exemplo
- Situação da ficha
- Ativa
- Status CRM
- Retorno pendente
- Último atendimento
- 18/09/2026
- Próximo atendimento
- —
- Conta AllVita
- Não conectada
- Novo
Helena Duarte
- Código
- 00003
- Idade
- 28 anos
- Convênio
- Particular
- Situação da ficha
- Ativa
- Status CRM
- Novo
- Último atendimento
- —
- Próximo atendimento
- 09/10/2026
- Conta AllVita
- Não conectada
- Inativo
Rafael Lima
- Código
- 00004
- Idade
- 61 anos
- Convênio
- Convênio Exemplo
- Situação da ficha
- Suspensa
- Status CRM
- Inativo
- Último atendimento
- 11/03/2026
- Próximo atendimento
- —
- Conta AllVita
- Conectada
| Informação | Desktop 1440 | Tablet 820 | Mobile 390 |
|---|---|---|---|
| Paciente (nome) | Coluna fixa, abre a ficha | Coluna fixa | Título do card-row |
| Código · Idade | Colunas | Sob o nome | Linha de apoio do card-row |
| Status CRM | Coluna com etiqueta | Coluna | Etiqueta à direita do título |
| Próximo atendimento | Coluna | Coluna | Linha de apoio |
| Convênio · Situação da ficha | Colunas | Rolagem horizontal | Detalhes expansíveis |
| Último atendimento · Conta AllVita | Colunas (visíveis por ‘Colunas visíveis’) | Rolagem horizontal | Detalhes expansíveis |
| Ações da linha | Menu ⋯ na última coluna | Menu ⋯ | Menu ⋯ no card-row |
| Seleção em lote | Checkbox por linha | Checkbox | Modo seleção (checkbox no card-row) |
Nenhuma informação é removida no mobile: o que não cabe no card-row vai para “Mais informações”, com o mesmo conteúdo da tabela.
17 · Operações, filtros e ferramentas
Encontrar, decidir, agir.
17.1 · Fluxo operacional · Portal Médico
Light · Portal Médico · Pacientes
| Tags | Ações | |||||
|---|---|---|---|---|---|---|
| 39 | Em acompanhamento | 14/10/2026 | — | |||
| 52 | Retorno pendente | — | — | |||
| 28 | Novo | 09/10/2026 | — | |||
| 61 | Inativo | — | — | |||
| 44 | Em acompanhamento | 20/10/2026 | — |
Dark · Portal Médico · Pacientes
| Tags | Ações | |||||
|---|---|---|---|---|---|---|
| 39 | Em acompanhamento | 14/10/2026 | — | |||
| 52 | Retorno pendente | — | — | |||
| 28 | Novo | 09/10/2026 | — | |||
| 61 | Inativo | — | — | |||
| 44 | Em acompanhamento | 20/10/2026 | — |
- 01Busca. Placeholder e rótulo reais; limpar com ×.
- 02Filtros. Situação, convênio e status CRM com as opções reais.
- 03Chips ativos. Cada filtro removível; ‘Limpar filtros’ zera todos.
- 04Contagem. ‘7 pacientes de 12’, anunciada sem roubar o foco.
- 05Atualização. Hora da última atualização + botão; ‘Atualizando…’ anunciado.
- 06Ação principal. ‘Novo paciente’ à direita; exportação é demonstrativa.
- 07Seleção. Checkbox por linha; cabeçalho seleciona as visíveis.
- 08Em lote. Barra aparece com seleção; ações simuladas com Desfazer.
- 09Densidade. Alterna sem perder filtros, seleção ou página.
Ações em lote (“Adicionar tag”, “Exportar seleção”) são PROPOSTA de padrão — não foram confirmadas na lista real de pacientes.
17.2 · Portal Clínica · Equipe e corpo clínico
Light · Portal Clínica
Equipe institucional · colunas reais
| Membro desde | Ações | ||||
|---|---|---|---|---|---|
| Carla Nunes | carla@clinica-exemplo.com.br | Responsável principal | Ativo | 03/2025 | |
| Bruno Teixeira | bruno@clinica-exemplo.com.br | Administração | Ativo | 07/2025 | |
| Helena Prado | helena@clinica-exemplo.com.br | Recepção | Pendente | — | |
| Igor Matos | igor@clinica-exemplo.com.br | Recepção | Suspenso | 11/2025 |
Corpo clínico · colunas reais
| CRM / UF | Visibilidade pública | Ações | ||
|---|---|---|---|---|
| Dra. Ana Lopes | 000001/SP | Vínculo ativo | Exibido no perfil | |
| Dr. Marcos Vieira | 000002/SP | Vínculo ativo | Não exibido | |
| Dra. Paula Reis | 000003/RJ | Convite pendente | Não exibido | |
| Dr. Caio FreitasVínculo encerrado — sem ações | 000004/MG | Vínculo encerrado | Não exibido |
Ações no menu limitam-se às existentes no portal (“Cancelar” convite, “Encerrar vínculo”). Papéis e vínculos são exibidos como no produto; nenhuma permissão nova é sugerida.
Dark · Portal Clínica
Equipe institucional · colunas reais
| Membro desde | Ações | ||||
|---|---|---|---|---|---|
| Carla Nunes | carla@clinica-exemplo.com.br | Responsável principal | Ativo | 03/2025 | |
| Bruno Teixeira | bruno@clinica-exemplo.com.br | Administração | Ativo | 07/2025 | |
| Helena Prado | helena@clinica-exemplo.com.br | Recepção | Pendente | — | |
| Igor Matos | igor@clinica-exemplo.com.br | Recepção | Suspenso | 11/2025 |
Corpo clínico · colunas reais
| CRM / UF | Visibilidade pública | Ações | ||
|---|---|---|---|---|
| Dra. Ana Lopes | 000001/SP | Vínculo ativo | Exibido no perfil | |
| Dr. Marcos Vieira | 000002/SP | Vínculo ativo | Não exibido | |
| Dra. Paula Reis | 000003/RJ | Convite pendente | Não exibido | |
| Dr. Caio FreitasVínculo encerrado — sem ações | 000004/MG | Vínculo encerrado | Não exibido |
Ações no menu limitam-se às existentes no portal (“Cancelar” convite, “Encerrar vínculo”). Papéis e vínculos são exibidos como no produto; nenhuma permissão nova é sugerida.
17.3 · Portal Gestão · CRM AllVita
Light · Portal Gestão · CRM AllVita
| Tipo | Status | Fonte | |||
|---|---|---|---|---|---|
| instituição | Proposta | open | Site | 01/10/2026 | |
| médico | Demonstração | open | Indicação | 28/09/2026 | |
| marca | Lead | open | Evento | 25/09/2026 | |
| médico | Reivindicação de Perfil | open | Perfil AllVita | 22/09/2026 | |
| instituição | Cliente ativo | closed | — | 02/06/2026 | |
| médico | Churn | closed | Site | 14/03/2026 |
Colunas, estágios e a mensagem “Nenhum lead encontrado.” são os do portal. O Status aparece como o valor gravado (open/closed); um rótulo em português é PROPOSTA. Busca e filtro por estágio são PROPOSTA de ferramenta — a tela real lista sem filtros.
Dark · Portal Gestão · CRM AllVita
| Tipo | Status | Fonte | |||
|---|---|---|---|---|---|
| instituição | Proposta | open | Site | 01/10/2026 | |
| médico | Demonstração | open | Indicação | 28/09/2026 | |
| marca | Lead | open | Evento | 25/09/2026 | |
| médico | Reivindicação de Perfil | open | Perfil AllVita | 22/09/2026 | |
| instituição | Cliente ativo | closed | — | 02/06/2026 | |
| médico | Churn | closed | Site | 14/03/2026 |
Colunas, estágios e a mensagem “Nenhum lead encontrado.” são os do portal. O Status aparece como o valor gravado (open/closed); um rótulo em português é PROPOSTA. Busca e filtro por estágio são PROPOSTA de ferramenta — a tela real lista sem filtros.
17.4 · Portal Marca · Médicos parceiros
Light · Portal Marca
- Ativo
Dra. Renata Moura
- Em onboarding
Dr. Felipe Andrade
- Contatado
Dra. Camila Torres
- Prospectado
Dr. Gustavo Peixoto
Campos reais do card: nome, status do CRM da Marca, CRM/UF, especialidade, cidade · UF e “Ver Perfil AllVita”. Filtro por status é PROPOSTA.
Dark · Portal Marca
- Ativo
Dra. Renata Moura
- Em onboarding
Dr. Felipe Andrade
- Contatado
Dra. Camila Torres
- Prospectado
Dr. Gustavo Peixoto
Campos reais do card: nome, status do CRM da Marca, CRM/UF, especialidade, cidade · UF e “Ver Perfil AllVita”. Filtro por status é PROPOSTA.
17.5 · App do Paciente · listas compactas
Light · 390 px
Seus registros
Próximas consultas
- Confirmada
Documentos
Registros de saúde autorizados
- 68,4 kg
Peso
- —
Passos
Dark · 390 px
Seus registros
Próximas consultas
- Confirmada
Documentos
Registros de saúde autorizados
- 68,4 kg
Peso
- —
Passos
No App não há tabela: consultas, documentos e registros viram listas com ícone, origem do dado e valor à direita. Ausência de dado aparece como “—”, nunca estimada.
17.6 · Tokens locais e acessibilidade
| Token (PROPOSTA) | Light | Dark | Função |
|---|---|---|---|
table.bg | sem:surface | sem:surface | Superfície da tabela (dentro de AvCard ou solta) |
table.header.fg | sem:text.secondary | sem:text.secondary | Cabeçalho 13 px, peso 500, sem caixa alta |
table.header.bg | sem:surface.sunken | sem:surface.raised | Faixa do cabeçalho; fixa ao rolar |
table.row.divider | sem:border.decorative | sem:border.decorative | Separador 1 px — sem zebra |
table.row.hover | mix:sem:surface|sem:surface.tint|60 | sem:surface.raised | Hover de linha (só fundo) |
table.row.selected | mix:sem:surface|brand:jade|35 | mix:sem:surface|brand:jade|12 | Selecionada: mesmo fundo do card selecionado (Lote C) + checkbox + barra 3 px |
table.row.selected.bar | brand:teal | brand:jade | Barra lateral da linha selecionada |
table.row.focus | sem:focus | sem:focus | Anel 2 px interno na linha/célula com foco |
table.row.disabled | sem:text.muted | sem:text.muted | Linha indisponível: texto atenuado + motivo legível |
table.cell.numeric | tabular-nums · alinhado à direita | tabular-nums · alinhado à direita | Números e horas comparáveis na vertical |
toolbar.gap | 8 px (op.) · 12 px (conf.) | 8 px · 12 px | Busca → filtros → contagem → ações; ação principal à direita |
filter.chip.active | sem:surface.tint · brand:azure | sem:surface.raised · sem:text | Chip de filtro ativo com botão remover (rótulo ‘Remover filtro X’) |
bulk.bar | brand:azure · sem:text.inverse | sem:surface.raised · sem:text | Barra de ações em lote — aparece só com seleção |
pagination.current | brand:azure · sem:text.inverse | sem:text · brand:azure | Página atual com aria-current |
list.item.pad | 12/16/20 px por densidade | igual | Itens de lista; divisor recuado após o ícone/avatar |
Contraste calculado
- L · Cabeçalho sobre faixa7,52 PASS
- L · Texto da linha sobre superfície17,52 PASS
- L · Texto secundário da linha8,04 PASS
- L · Texto secundário em hover7,68 PASS
- L · Texto secundário em selecionada7,43 PASS
- L · Barra de seleção sobre selecionada6,88 PASS
- L · Foco sobre superfície7,44 PASS
- L · Texto da barra em lote15,99 PASS
- D · Cabeçalho sobre faixa8,21 PASS
- D · Texto da linha sobre superfície13,97 PASS
- D · Texto secundário da linha9,49 PASS
- D · Texto secundário em hover8,21 PASS
- D · Texto secundário em selecionada6,82 PASS
- D · Barra de seleção sobre selecionada8,30 PASS
- D · Foco sobre superfície13,17 PASS
- D · Texto da barra em lote12,09 PASS
Sem cor nova: tudo referencia semânticos do 09. Hover e selecionado nunca são o único sinal.
Acessibilidade aplicada
- Tabela nativa com legenda, th scope=col e th scope=row.
- Ordenação: botão no cabeçalho + aria-sort (ascendente/descendente/nenhuma).
- Seleção por checkbox rotulado com o nome da linha; estado misto no cabeçalho.
- Rolagem horizontal em região focável e rotulada.
- Paginação em nav com aria-current e limites desativados.
- Contagem, atualização e barra em lote anunciam por status educado; o foco não é movido.
- Alvos de toque de 44 px no checkbox, menu e páginas em telas de toque.
- Movimento reduzido: sem transições de linha nem giro do ícone de atualizar.
Leitor de tela e zoom real de 200% não verificados neste ambiente. Sem declaração de conformidade WCAG.
18 · Clínicos e continuidade
Quem registrou. Quando. Com que certeza.
18.1 · Identidade contextual do paciente
Light · Portal Médico
Marina Costa
- Particular
- Ficha ativa
- Aguardando aceite do paciente
- Conta AllVita não conectada
Dark · Portal Médico
Marina Costa
- Particular
- Ficha ativa
- Aguardando aceite do paciente
- Conta AllVita não conectada
Status reais do Patient Clinical Workspace (Particular, Ficha ativa, Aguardando aceite do paciente, Conta AllVita não conectada). Nome, código e idade fictícios; nenhum documento pessoal é exibido.
18.2 · Situação clínica · alternância de origem
Light
6 itens visíveis
Situação atual
Acompanhamento de rotina; sem pendência registrada pelo profissional.
Último encontro
Consulta de retorno · 02 out 2026.
Próxima etapa
Retorno · 15 out · 09:30.
Informação recebida do paciente
Peso 68,4 kg · hemograma em PDF.
Exame externo importado
Arquivo recebido de laboratório parceiro.
Resumo de continuidade
Rascunho assistivo — precisa de revisão antes de usar.
Dark
6 itens visíveis
Situação atual
Acompanhamento de rotina; sem pendência registrada pelo profissional.
Último encontro
Consulta de retorno · 02 out 2026.
Próxima etapa
Retorno · 15 out · 09:30.
Informação recebida do paciente
Peso 68,4 kg · hemograma em PDF.
Exame externo importado
Arquivo recebido de laboratório parceiro.
Resumo de continuidade
Rascunho assistivo — precisa de revisão antes de usar.
18.3 · Origem e confiabilidade
Light
Dark
Cada origem tem ícone, rótulo e traço próprios — contínuo (profissional/estruturado), pontilhado (paciente), duplo (documento/integração/dispositivo), tracejado com Orb (Vita). Sem selo de “clinicamente validado”.
18.4 · Documentos e resultados
Light
Pedido de exames
02 out · Arquivo acessível a quem tem permissão
Registro do médicoResultado de hemograma
21 set · Recebido; ainda não revisado pelo profissional
Registro manual do pacienteLaudo de imagem
Solicitado 02 out · Solicitado; ainda não recebido
Documento clínicoGlicemia de jejum
02 out · Registrado pelo profissional, sem interpretação automática
Registro do médicoExame externo (PDF)
12 ago · Arquivo (PDF/imagem); valores não extraídos
Integração externaPainel laboratorial estruturado
— · Sem implementação comprovada; não demonstra valores normais
Informação estruturadaDark
Pedido de exames
02 out · Arquivo acessível a quem tem permissão
Registro do médicoResultado de hemograma
21 set · Recebido; ainda não revisado pelo profissional
Registro manual do pacienteLaudo de imagem
Solicitado 02 out · Solicitado; ainda não recebido
Documento clínicoGlicemia de jejum
02 out · Registrado pelo profissional, sem interpretação automática
Registro do médicoExame externo (PDF)
12 ago · Arquivo (PDF/imagem); valores não extraídos
Integração externaPainel laboratorial estruturado
— · Sem implementação comprovada; não demonstra valores normais
Informação estruturadaSem interpretação diagnóstica e sem valores de referência. “Estruturado” é FUTURO até existir implementação comprovada.
18.5 · Linha do tempo
Light
Consulta
Consulta de retorno
Evolução registrada; ajuste de rotina discutido.
Registro do médicoDra. L. CastroRegistro manual
Peso informado
68,4 kg · registro manual no App.
Registro manual do pacientePacienteDocumento
Resultado de hemograma
PDF enviado · não estruturado.
Documento clínicoEnviado pela pacienteComunicação · não clínico
Mensagem enviada
Lembrete de preparo para exame.
Registro do médicoEquipe da clínicaAcompanhamento
Acompanhamento autorizado
Paciente autorizou compartilhar registros manuais.
Registro manual do pacientePacienteAdministrativo · não clínico
Agendamento criado
Retorno agendado para 15 out.
Informação estruturadaRecepção
Dark
Consulta
Consulta de retorno
Evolução registrada; ajuste de rotina discutido.
Registro do médicoDra. L. CastroRegistro manual
Peso informado
68,4 kg · registro manual no App.
Registro manual do pacientePacienteDocumento
Resultado de hemograma
PDF enviado · não estruturado.
Documento clínicoEnviado pela pacienteComunicação · não clínico
Mensagem enviada
Lembrete de preparo para exame.
Registro do médicoEquipe da clínicaAcompanhamento
Acompanhamento autorizado
Paciente autorizou compartilhar registros manuais.
Registro manual do pacientePacienteAdministrativo · não clínico
Agendamento criado
Retorno agendado para 15 out.
Informação estruturadaRecepção
Marcador circular = evento clínico; marcador quadrado + “não clínico” = comunicação e administrativo. A expansão não sai da página.
19 · Vita
Assistiva. Nunca autônoma.
19.1 · Orb oficial · estados existentes
Repouso
Implementado no livro · homologação pendente
Escuta
Implementado no livro · voz NÃO operacional
Processando
Implementado no livro · homologação pendente
Sugestão
Implementado no livro · homologação pendente
Fala
Implementado no livro · voz NÃO operacional
Indisponível
PROPOSTA · Orb estática + texto, sem animação nova
Mesma MasterOrb do livro — nenhum redesenho, nenhuma animação nova. Voz não está operacional; “Escuta” e “Fala” não são oferecidos como recursos.
19.2–19.4 · Interação, contexto clínico e confirmação
Light
O que mudou desde a última consulta?
Resposta: Sugestão
Desde 02 out, foram recebidos:
- 1 registro manual de peso, informado pela paciente.
- 1 resultado em PDF, ainda não revisado.
Sugestão assistiva. Decisão sempre do profissional.
Dark
O que mudou desde a última consulta?
Resposta: Sugestão
Desde 02 out, foram recebidos:
- 1 registro manual de peso, informado pela paciente.
- 1 resultado em PDF, ainda não revisado.
Sugestão assistiva. Decisão sempre do profissional.
Respostas são exemplos escritos para o livro — a Vita não interpretou nenhum dado. “Usar como rascunho” pede confirmação; “Ação confirmada” só aparece depois dela.
A Vita não pode
- Criar diagnóstico autônomo
- Prescrever autonomamente
- Definir conduta
- Alterar prontuário sem ação e autorização adequadas
- Registrar ações sem confirmação quando exigida
- Compartilhar dados clínicos com o Portal Marca
Gerado × realizado
- RascunhoSomente gerado
- SugestãoSomente gerado
- Revisão necessáriaSomente gerado
- Ação confirmadaAção realizada
- FalhaSomente gerado
- Informação insuficienteSomente gerado
19.5 · Vita no App do Paciente
Light · 390 px · PROPOSTA DE UX PRIORIZADA
Número e nomes das abas NÃO decididos — Capítulo 13.
Dark · 390 px · PROPOSTA DE UX PRIORIZADA
Número e nomes das abas NÃO decididos — Capítulo 13.
20 · Sense e ecossistema
Preparado para o dispositivo. Independente dele.
20.1 · Estados do dispositivo · pareamento e sincronização fictícios
Light
AllVita Sense
Nenhum dispositivo vinculado. O app funciona sem Sense.
Todos os 11 estados
AllVita Sense
Nenhum dispositivo vinculado. O app funciona sem Sense.
AllVita Sense
Confirme o código no dispositivo para continuar.
AllVita Sense
Procurando o dispositivo próximo.
AllVita Sense
Dispositivo vinculado à sua conta.
AllVita Sense
Recebendo dados autorizados.
AllVita Sense
Hoje, 07:12 · dados podem estar desatualizados.
AllVita Sense
Conectado, mas ainda sem registros no período.
AllVita Sense
Você não autorizou este tipo de dado. Altere em Privacidade.
AllVita Sense
Vínculo removido. Dados já recebidos continuam no histórico.
AllVita Sense
Não foi possível receber dados. Nada foi perdido.
AllVita Sense
Somente se o dispositivo homologado expuser essas informações.
Dark
AllVita Sense
Nenhum dispositivo vinculado. O app funciona sem Sense.
Todos os 11 estados
AllVita Sense
Nenhum dispositivo vinculado. O app funciona sem Sense.
AllVita Sense
Confirme o código no dispositivo para continuar.
AllVita Sense
Procurando o dispositivo próximo.
AllVita Sense
Dispositivo vinculado à sua conta.
AllVita Sense
Recebendo dados autorizados.
AllVita Sense
Hoje, 07:12 · dados podem estar desatualizados.
AllVita Sense
Conectado, mas ainda sem registros no período.
AllVita Sense
Você não autorizou este tipo de dado. Altere em Privacidade.
AllVita Sense
Vínculo removido. Dados já recebidos continuam no histórico.
AllVita Sense
Não foi possível receber dados. Nada foi perdido.
AllVita Sense
Somente se o dispositivo homologado expuser essas informações.
20.2–20.3 · Dados e indicadores condicionais
Light
Frequência cardíaca
62bpm
Repouso · últimas 24 h
Sono
7,1h
Noite anterior
Atividade
6.420passos
Hoje até 18:00
SpO₂
97%
Média noturna
Variabilidade da FC
48ms
Média noturna
Estresse
—
Sem algoritmo homologado
Recuperação
—
Sem algoritmo homologado
Fora do Sense: Glicose, Pressão arterial automática, ECG. Nenhum indicador é recurso confirmado de um wearable ainda não homologado.
Dark
Frequência cardíaca
62bpm
Repouso · últimas 24 h
Sono
7,1h
Noite anterior
Atividade
6.420passos
Hoje até 18:00
SpO₂
97%
Média noturna
Variabilidade da FC
48ms
Média noturna
Estresse
—
Sem algoritmo homologado
Recuperação
—
Sem algoritmo homologado
Fora do Sense: Glicose, Pressão arterial automática, ECG. Nenhum indicador é recurso confirmado de um wearable ainda não homologado.
20.4 · APP-P1 × APP-P2
Light
- P1Identidade
- P1Agenda
- P1Saúde manual
- P1Consultas
- P1Documentos
- P1Comunicação
- P1Acompanhamento autorizado
Os recursos P1 continuam iguais nas duas fases — nenhum fluxo fundamental depende do Sense.
Dark
- P1Identidade
- P1Agenda
- P1Saúde manual
- P1Consultas
- P1Documentos
- P1Comunicação
- P1Acompanhamento autorizado
Os recursos P1 continuam iguais nas duas fases — nenhum fluxo fundamental depende do Sense.
20.5 · Saúde feminina, crônicas e bem-estar
Saúde feminina
Ciclo e registros pessoais
FUTURO · sem requisitos próprios — nenhum diagnóstico, risco ou alerta automático.
Condições crônicas
Acompanhamento autorizado
FUTURO · sem requisitos próprios — nenhum diagnóstico, risco ou alerta automático.
Bem-estar
Hábitos e rotina
FUTURO · sem requisitos próprios — nenhum diagnóstico, risco ou alerta automático.
20.6 · Matriz de componentes por produto
| Componente | Portal Médico | Portal Clínica | Portal Gestão | Portal Marca | App do Paciente | Vita | Sense | Nota |
|---|---|---|---|---|---|---|---|---|
| Identidade contextual do paciente | Sim | Condicional | — | Proibido | Condicional | Condicional | — | Clínica conforme permissão; no App é a própria identidade |
| Situação clínica e continuidade | Sim | Condicional | — | Proibido | — | Condicional | — | Vita lê o contexto, não escreve |
| Origem da informação | Sim | Condicional | — | Proibido | Sim | Sim | Sim | Obrigatória em todo dado de saúde |
| Documentos e resultados | Sim | Condicional | — | Proibido | Sim | — | — | Sem interpretação automática |
| Timeline clínica | Sim | Condicional | — | Proibido | Condicional | Condicional | — | App: histórico do próprio paciente |
| Interação Vita | Sim | Condicional | — | — | Sim | Sim | — | Marca: nenhuma Vita com dado clínico |
| Revisão e confirmação Vita | Sim | Condicional | — | Proibido | Sim | Sim | — | Ação só após confirmação |
| Estados do dispositivo | — | — | — | Proibido | Condicional | — | Sim | APP-P2 |
| Indicadores Sense | Condicional | — | — | Proibido | Condicional | Condicional | Sim | APP-P2, com autorização do paciente |
| Tabelas comerciais (Lote E) | — | Sim | Sim | Sim | — | — | — | Marca só dados comerciais |
Médico ↔ Paciente
Relação clínica: prontuário, continuidade, documentos, Vita assistiva.
Clínica ↔ Equipe
Operação: agenda, corpo clínico, acesso conforme permissão.
Marca ↔ Médico
Comercial: parceria e relacionamento. Nunca informação clínica, nem agregada.
Portal Marca nunca recebe informação clínica, nem agregada — nenhum componente de prontuário ou acompanhamento no contexto comercial.
20.7 · Composições conceituais A–D
A · Patient Clinical Workspace · Light
Marina Costa
- Particular
- Ficha ativa
Linha do tempo
Consulta
Consulta de retorno
Evolução registrada; ajuste de rotina discutido.
Registro do médicoDra. L. CastroRegistro manual
Peso informado
68,4 kg · registro manual no App.
Registro manual do pacientePacienteDocumento
Resultado de hemograma
PDF enviado · não estruturado.
Documento clínicoEnviado pela paciente
Pendências
- Laudo de imagem solicitadoDocumento clínico
- Hemograma enviado, não revisadoRegistro manual do paciente
A · Patient Clinical Workspace · Dark
Marina Costa
- Particular
- Ficha ativa
Linha do tempo
Consulta
Consulta de retorno
Evolução registrada; ajuste de rotina discutido.
Registro do médicoDra. L. CastroRegistro manual
Peso informado
68,4 kg · registro manual no App.
Registro manual do pacientePacienteDocumento
Resultado de hemograma
PDF enviado · não estruturado.
Documento clínicoEnviado pela paciente
Pendências
- Laudo de imagem solicitadoDocumento clínico
- Hemograma enviado, não revisadoRegistro manual do paciente
B · Vita no contexto clínico · Light
Preparar próxima consulta
Pontos para retomar em 15 out (exemplo):
- Resultado em PDF ainda não revisado.
- Laudo de imagem pendente.
Confira as fontes antes de usar.
B · Vita no contexto clínico · Dark
Preparar próxima consulta
Pontos para retomar em 15 out (exemplo):
- Resultado em PDF ainda não revisado.
- Laudo de imagem pendente.
Confira as fontes antes de usar.
C · Minha Saúde · Light
Minha Saúde
APP-P1 · sem SensePeso
68,4kg
Pressão arterial
118/76mmHg
Humor
Bem
Pressão arterial aqui é registro manual — não leitura do Sense.
C · Minha Saúde · Dark
Minha Saúde
APP-P1 · sem SensePeso
68,4kg
Pressão arterial
118/76mmHg
Humor
Bem
Pressão arterial aqui é registro manual — não leitura do Sense.
D · Sense · Light
Dispositivo
APP-P2 · com SenseAllVita Sense
Hoje, 07:12 · dados podem estar desatualizados.
Sono
7,1h
Noite anterior
Recuperação
—
Sem algoritmo homologado
Indicadores condicionais ao hardware homologado.
D · Sense · Dark
Dispositivo
APP-P2 · com SenseAllVita Sense
Hoje, 07:12 · dados podem estar desatualizados.
Sono
7,1h
Noite anterior
Recuperação
—
Sem algoritmo homologado
Indicadores condicionais ao hardware homologado.
20.8 · Contratos de componentes
| Componente | Responsabilidade | Anatomia | Variantes | Estados | Propriedades | Evento | Produto | Permissão | Origem dos dados | Acessibilidade | Reutiliza |
|---|---|---|---|---|---|---|---|---|---|---|---|
AvPatientIdentity | Quem é o paciente e em que contexto | Avatar · nome · código · demografia permitida · faixa de status · contexto · ações · origem | completo, compacto | vínculo, ficha, conta, sem permissão | name, code, demographics[], status[], context, actions, source | onAction(id) | Médico, Clínica (cond.) | Ações filtradas antes do render | Ficha do portal; exemplos fictícios | h3 + dl; status como texto | AvAvatar, AvPill, AvButton |
AvSource | Origem e confiabilidade | Ícone · rótulo · autor · data/hora · sincronização · confirmação | inline, detalhado | confirmado, pendente, sincronizado, desatualizado | kind, author, time, status | — | Todos com dado de saúde | — | Metadado do registro | Texto completo; traço decorativo | Estende AvProvenance (Lote C) |
AvTimeline | Histórico longitudinal do cuidado | Trilho · marcador por tipo · data · tipo · resumo · origem · responsável · ação · detalhe | clínica, administrativa separada | recolhido, expandido, vazio, falha | events[], filter | onToggle(id) | Médico, App (próprio histórico) | Eventos filtrados por vínculo | Eventos do prontuário | ol + botão aria-expanded | AvPill, AvButton, AvEmptyState |
AvDocumentRow | Estado do documento/resultado | Ícone · título · estado · origem · data · ação | lista, card | 6 estados (inclui FUTURO) | title, state, source, time | onOpen | Médico, App | Download só com permissão | Arquivo; sem extração | Estado em texto | AvListItem, AvPill |
AvVitaComposer | Entrada de interação com a Vita | Orb mini · campo · ações sugeridas · enviar · voz (indisponível) | desktop, mobile | pronto, processando, indisponível | suggestions[], disabled, voice=false | onSubmit(text) | Médico, App, Vita | Contexto limitado ao vínculo | Nada é enviado no livro | label, Enter envia, status educado | MasterOrb, AvButton, AvActionChip |
AvVitaMessage | Mensagem do usuário ou resposta assistiva | Autor · corpo · estado · fontes · feedback | usuário, Vita | rascunho, sugestão, revisão, confirmada, falha, insuficiente | role, state, sources[] | onFeedback, onReview | Médico, App | — | Gerado (assistivo), nunca registro | article com rótulo do autor | AvPill, AvSource |
AvDeviceStatus | Estado do dispositivo Sense | Ícone · nome · estado · texto · ação | cartão, linha | 11 estados | state, name | onAction | App (APP-P2), Sense | Autorização do paciente por tipo de dado | Contrato de apresentação; sem SDK | role=status | AvPill, AvSyncStatus |
AvSenseMetric | Indicador condicional | Rótulo · valor · unidade · período · origem · qualidade · disponibilidade | compacto, padrão | disponível, ausente, não homologado | label, value, unit, period, available | — | App (APP-P2) | Por tipo autorizado | Fictício e sinalizado | Ausência lida como ‘Sem dado’ | AvMetric (Lote C) |
Comum a todos: densidades editorial/confortável/operacional via KitScope; Light/Dark pelos semânticos do 09; tokens em 20.7.
20.9 · Tokens locais e contraste
| Token (PROPOSTA) | Light | Dark | Função |
|---|---|---|---|
clinical.source.mark | sem:text.secondary | sem:text.secondary | Ícone + rótulo da origem; o traço (contínuo, tracejado, pontilhado, duplo) diferencia sem cor |
clinical.source.vita | brand:teal | brand:jade | Traço tracejado + Orb mini: conteúdo assistivo, nunca equivalente a registro |
clinical.status.bg | sem:surface.sunken | sem:surface.raised | Faixa de situação (vínculo, ficha, contexto) — estado de interface |
timeline.rail | sem:border.decorative | sem:border.decorative | Trilho vertical 1 px; marcador por tipo de evento (forma + ícone) |
timeline.marker.bg | sem:surface | sem:surface | Disco do marcador sobre o trilho |
patient.identity.bg | mix:sem:surface|sem:surface.tint|70 | sem:surface.raised | Cabeçalho de identidade contextual |
vita.prompt.bg | sem:surface | sem:surface.raised | Campo de interação; borda field do 09 |
vita.response.bg | mix:sem:surface|brand:jade|18 | mix:sem:surface|brand:jade|8 | Resposta assistiva — fundo próprio, distinto do registro clínico |
vita.review.border | sem:warning.border | sem:warning.border | Revisão necessária: borda + ícone + rótulo (interface, não gravidade clínica) |
vita.confirmed | sem:success.fg | sem:success.fg | Ação confirmada (simulada no livro) |
sense.device.bg | sem:surface | sem:surface.raised | Cartão de dispositivo |
sense.sync | AvSyncStatus (Lote D) | AvSyncStatus (Lote D) | Reutiliza o status de sincronização existente |
sense.metric | AvMetric (Lote C) | AvMetric (Lote C) | Valor + unidade + período + origem; ausência como “—” |
Contraste calculado
- L · Texto da resposta Vita16,90 PASS
- L · Secundário na resposta Vita7,75 PASS
- L · Traço Vita sobre resposta7,17 PASS
- L · Secundário na identidade7,61 PASS
- L · Origem sobre superfície8,04 PASS
- L · Borda de revisão sobre superfície4,73 PASS
- L · Confirmada sobre superfície6,39 PASS
- D · Texto da resposta Vita11,32 PASS
- D · Secundário na resposta Vita7,69 PASS
- D · Traço Vita sobre resposta9,36 PASS
- D · Secundário na identidade8,21 PASS
- D · Origem sobre superfície9,49 PASS
- D · Borda de revisão sobre superfície8,84 PASS
- D · Confirmada sobre superfície8,29 PASS
20.10 · Inventário do capítulo 10 · seções 01–20
| Seções | Lote | Status |
|---|---|---|
| 01–06 · Fundação, ações, navegação | 0 / A | Implementado · aguardando homologação |
| 07–10 · Campos, seleção, data/OTP, formulários | B | Implementado · aguardando homologação |
| 11–12 · Cards e camadas | C | Implementado · aguardando homologação |
| 13–15 · Estados, feedback, progresso | D | Implementado · aguardando homologação |
| 16–17 · Tabelas, listas, operações | E | Implementado · aguardando homologação |
| 18–20 · Clínicos, Vita, Sense | F | Implementado · em avaliação |
Nenhuma seção está aprovada pelo owner. Leitor de tela, zoom 200% e toque real permanecem NÃO VERIFICADOS em todo o capítulo.
Acessibilidade aplicada
- Origem por ícone + rótulo + traço — nunca só cor.
- Resposta da Vita em article com rótulo “Assistiva · não é registro clínico”.
- Timeline em lista ordenada; detalhes com aria-expanded/aria-controls.
- Estados de dispositivo, sincronização e Vita anunciados por status educado.
- Voz desativada com rótulo explicativo, não oculta.
- Movimento reduzido: Orb e giros respeitam a preferência do sistema.