01
Área Paciente
Acompanhe seu tratamento, registre sintomas, entenda seus exames e tire dúvidas com clareza.
Plataforma Clínica
MVP v0.1
Apoio preciso
entre consultas.
Uma plataforma desenhada para suportar pacientes
e médicos com dados, calculadoras e respostas — no momento certo.
Busca em desenvolvimento · disponível em breve
Áreas do Produto
Três dimensões
de suporte.
Cada área é projetada para um perfil específico de usuário e necessidade clínica.
02
Área Ferramentas
Calculadoras clínicas, conversores de dose e utilitários de prescrição para apoio imediato.
03
Área do Médico
Painéis de acompanhamento de pacientes, alertas e dados longitudinais de tratamento.
Validação Visual Interna
Design System
Foundation
Seção de inspeção da linguagem visual do TirzeAPP. Todos os tokens, componentes e estados verificados abaixo.
Tipografia
Aa
Tireoide
Acompanhamento clínico
Resultado de exames
TSH: 2,4 mUI/L
Seu nível de TSH está dentro da faixa de referência esperada para o seu perfil de tratamento atual.
A levotiroxina deve ser tomada em jejum, 30 a 60 minutos antes da primeira refeição, com água apenas.
Próxima consulta — 14 dias
Última atualização: hoje
Superfícies
surface-00
#000000
surface-01
#0A0A0A
surface-02
#111111
surface-03
#161616
surface-04
#1A1A1A
surface-05
#222222
Botões
Primary
Secondary
Ghost & Muted
Inputs
O valor inserido não é válido para este campo.
Cards
Resultado
TSH — Análise
2,4
mUI/L · Ref: 0,4–4,0
Calculadora
Dose de Levotiroxina
Calcule a dose inicial baseada no peso corporal e perfil clínico do paciente.
Próximo
Consulta Agendada
14
dias restantes
Badges & Tags
Default
Outline
Normal
Atenção
Em breve
MVP v0.1
Beta
Divisores
Seção
Escala de Espaçamento
4px
8px
16px
24px
32px
48px
64px
80px
Design System — Módulo Visual
Visual &
Media Components
Componentes visuais ricos prontos para integração na homepage. Todos são monocromáticos, responsivos, testados em 375 px e documentados com tags de uso por tipo de mídia.
01 · Card com Imagem
[STATIC-IMG]
Três variantes: padrão 16/9, compacto 21/9 e editorial lateral. Uso futuro: cards de especialidade, resultados e materiais clínicos.
Endocrinologia
Tireoide e metabolismo
Uma visão completa do eixo hipotálamo-hipófise-tireoide e seu impacto no tratamento.
Calculadora
IMC e risco metabólico
Avaliação integrada do índice de massa corporal com perfil de risco associado.
Futuro
Slot de conteúdo
Este card receberá conteúdo dinâmico via API. Placeholder para validação de layout.
Editorial · Destaque
Variante editorial — imagem lateral com corpo de texto mais longo
Este layout é ideal para materiais em destaque, base clínica principal ou conteúdo âncora de seções. A imagem ocupa 200px à esquerda e o texto se expande naturalmente à direita.
02 · Card Editorial — Repositório
[STATIC-IMG]
Estética de periódico médico premium. Uso futuro: base de artigos, publicações, casos clínicos e educação continuada.
Endocrinologia
Revisão sistemática
Hipotireoidismo subclínico: quando tratar e quando observar
A controvérsia sobre o tratamento do hipotireoidismo subclínico persiste na literatura. Esta revisão analisa evidências recentes e diretrizes internacionais para auxiliar na decisão clínica individualizada.
Farmacologia
Protocolo clínico
Levotiroxina: ajuste de dose em situações especiais
Gestação, cirurgia bariátrica, uso de carbonato de cálcio e outros cenários que exigem atenção redobrada no manejo da reposição hormonal tireoidiana.
Em breve
Slot futuro
Título do próximo artigo da base clínica
Placeholder de layout para conteúdo dinâmico via API. A thumbnail e os metadados serão preenchidos automaticamente.
03 · Split Section 50/50
[STATIC-IMG]
Bloco editorial de alto impacto. Uso futuro: "Por que TirzeAPP", diferenciais clínicos, proposta de valor de cada área do produto.
Área Paciente
Clareza clínica no momento certo
Entenda seus exames, acompanhe seu tratamento e tire dúvidas com base em informação clínica de qualidade — sem precisar esperar a próxima consulta.
Variante invertida
Área Ferramentas
Calculadoras para decisão precisa
Ferramentas clínicas desenvolvidas com endocrinologistas. Calcule doses, interprete resultados e tome decisões baseadas em dados — direto no ponto de cuidado.
04 · Bloco com Imagem de Fundo
[BG-IMAGE]
Para uso em hero alternativo, seções imersivas ou interstitials.
Overlay via ::before.
Grayscale na camada de imagem separada.
Interstitial · Variante Contida
Precisão que
Precisão que
transforma cuidado.
Uma plataforma construída sobre evidência clínica, para pacientes e médicos que exigem mais do que o padrão.
05 · Componentes de Vídeo
[THUMB-VIDEO]
[BG-VIDEO]
Dois componentes: card com thumbnail interativa e bloco de vídeo de fundo. Uso futuro: tutoriais, orientações ao paciente, webinars, depoimentos.
Vídeo
Orientação ao paciente
Como tomar levotiroxina corretamente
Vídeo
Base clínica
Interpretando o TSH: faixa de referência e contexto clínico
Em breve
Slot futuro
Título do próximo vídeo educativo
Seção de vídeo de fundo [BG-VIDEO]
BG-VIDEO · Demo estrutural
Vídeo de fundo
Vídeo de fundo
pronto para produção.
Em produção: substituir o fallback estático por
<video autoplay muted loop playsinline>.
O JS pausará automaticamente em mobile e
quando prefers-reduced-motion estiver ativo.
06 · Media Panel — Biblioteca
[STATIC-IMG]
[THUMB-VIDEO]
Painel de grade para biblioteca de conteúdo. Uso futuro: base clínica, repositório de artigos, vídeos educativos, calculadoras e materiais por especialidade.
Base Clínica
8 materiais disponíveis
Artigo
Endocrinologia
Hipotireoidismo subclínico: quando tratar
Vídeo
Orientação
Como tomar levotiroxina corretamente
Calculadora
Ferramenta
Dose inicial de levotiroxina por peso
Em breve
Slot futuro
Próximo conteúdo da base clínica
Variante Lista — .media-panel--list
Protocolos Recentes
Vista compacta
Protocolo
Hipotireoidismo subclínico — conduta
Calculadora
Dose de levotiroxina por peso e perfil
Referência
TSH em gestação — faixas por trimestre
07 · Card Stat Visual
[BG-IMAGE]
Cards de métrica com imagem de fundo e sobreposição de dados. Uso futuro: painéis de KPIs, resultados de exame, indicadores de tratamento.
TSH — Jan 2025
2,4
mUI/L
Normal
T4 Livre — Jan 2025
1,1
ng/dL
Ref: 0,8–1,8
Próxima consulta
14
dias
Dr. Silva · Endo
Design System — Módulo Analítico
Data Display
System
Biblioteca de componentes para visualização de dados e organização analítica. Monocromático, preciso, silencioso. Projetado para as áreas clínicas da TirzeAPP sem parecer um template de admin genérico.
01 · KPI Cards
[KPI]
Anatomia: overline → valor → label → microtendência → sparkline (opcional). Hierarquia tipográfica refinada, espaçamento generoso, sem cores de alerta vibrantes.
Variante padrão — com tendência
Conteúdos ativos
248
Materiais publicados e disponíveis na base clínica
Buscas realizadas
4.7k
Consultas na base de conhecimento clínico
Calculadoras em destaque
9
Ferramentas clínicas ativas e validadas
Última atualização
2h
Protocolo de hipotireoidismo subclínico revisado
Variante featured · ghost · compacta
Perguntas mais acessadas
1.2k
Sobre TSH, levotiroxina e efeitos colaterais
Materiais médicos
64
Artigos revisados por pares disponíveis
Taxa de retorno
73%
Usuários que retornam ao conteúdo
Variante com sparkline [SPARK]
Acessos — 30 dias
12.4k
Visualizações de conteúdo clínico
Buscas diárias
156
Média diária de consultas na base
Conteúdo novo
8
Novos materiais publicados esta semana
02 · Filtros
[FILTER]
Pills, barra horizontal, contadores, grupos e selects. Scroll horizontal transparente em mobile. Touch targets mínimos de 32px.
Barra horizontal de filtros
Pills com contador numérico
Filtros ativos — removíveis
Ativos:
Grupos de filtros
Categoria
Público
Status
Filter selects
Tipo de conteúdo
Período
Ordenar por: Mais recentes
03 · Pesquisa Estruturada
[SEARCH]
Busca para conteúdo estruturado com estados visuais documentados: vazio, digitando, com resultados, sem resultado.
Estado: com resultados
3 resultados
Base Clínica
Hipotireoidismo subclínico: quando tratar e quando observar
Hipotireoidismo congênito: protocolo de rastreio neonatal
Diagnóstico diferencial de hipotireoidismo em adultos
Estado: sem resultado
0 resultados
Nenhum resultado encontrado
Tente termos relacionados à tireoide, medicação ou exames laboratoriais.
Busca + filtros integrados
04 · Gráficos
[CHART]
Gráficos monochrome via Chart.js. Sem cores saturadas: escala de branco e cinza. Grid lines sutis, eixos discretos, tooltips premium.
Acessos à base clínica
Visualizações mensais
Jan — Jun 2025 · dados simulados
Acessos totais
Conteúdo mais acessado
Top 6 materiais
Últimos 30 dias · dados simulados
Distribuição de conteúdo
Por tipo de material
Base clínica completa
248
total
Artigos 64
Protocolos 31
Casos 126
Outros 27
Documentação de padrões
Regras de uso dos gráficos
Paleta
Escala de branco/cinza. Opacidades 0.15 → 0.8. Sem cores saturadas.
Grid lines
rgba(255,255,255,0.06) — sutil, não compete com dados.
Eixos
Font Archivo 11px, cor text-disabled. Sem border no eixo Y.
Tooltip
surface-04, borda border-default, radius-md, sem sombra colorida.
Mobile
Altura mínima 180px. Eixo X com rotação 30° se > 6 labels.
Complexidade
Máx. 1 série em linha; máx. 8 barras; máx. 6 fatias no donut.
05 · Tabela Premium
[TABLE]
Aparência de periódico técnico: cabeçalho em uppercase tracking, linhas com hover sutil, seleção com indicador, paginação discreta.
Base Clínica
248 materiais · 1 selecionado
| Título | Categoria | Público | Status | Atualização | Ação | |
|---|---|---|---|---|---|---|
|
Hipotireoidismo subclínico: quando tratar
Revisão sistemática · 12 min
|
Endocrinologia | Médico | Ativo | Hoje, 08:42 | ||
|
Levotiroxina: ajuste de dose em situações especiais
Protocolo clínico · 9 min
|
Farmacologia | Ambos | Ativo | Ontem, 14:30 | ||
|
TSH em gestação: faixas por trimestre
Referência clínica · 6 min
|
Endocrinologia | Médico | Em revisão | 3 jan 2025 | ||
|
Dose inicial de levotiroxina por peso corporal
Calculadora · Interativo
|
Farmacologia | Ambos | Ativo | 28 dez 2024 | ||
|
Diagnóstico diferencial de hipotireoidismo em adultos
Caso clínico · 15 min
|
Metabolismo | Médico | Rascunho | 20 dez 2024 | ||
|
Carbonato de cálcio e absorção de levotiroxina
Artigo · 7 min
|
Farmacologia | Ambos | Arquivado | 10 nov 2024 |
Estado vazio
Rascunhos
0 materiais
Nenhum rascunho encontrado
Crie um novo material para começar a editar antes de publicar na base clínica.
06 · Containers Analíticos
[ANALYTIC]
Wrappers reutilizáveis para qualquer combinação de título, subtítulo, gráfico ou tabela, filtros locais e ação discreta.
Container analítico — com gráfico interno
6 meses
Container analítico — painel de KPIs + dados
Ao vivo
Buscas hoje
87
↑ +12
Conteúdo ativo
248
— estável
Taxa retorno
73%
↑ +5pp
Materiais mais acessados hoje
Hipotireoidismo subclínico: quando tratar
142 views
Dose de levotiroxina por peso
98 views
TSH em gestação: faixas por trimestre
76 views
Levotiroxina: ajuste em situações especiais
54 views
Carbonato de cálcio e absorção da levotiroxina
41 views
Design System — Paleta Auxiliar
Semantic
Color System
Paleta auxiliar controlada para microelementos funcionais. Não redefine a identidade visual monocromática — apenas adiciona acentos semânticos precisos onde a cor carrega significado informativo.
01 · Swatches & Tokens
[SEMANTIC]
Quatro categorias semânticas. Cada uma gera quatro tokens derivados: cor base, dim (fundo), border e text (variante clara para texto).
Paleta base
#4CAF7D
#D95F5F
#C9A84C
#4A90B8
Tokens derivados por categoria
| Token CSS | Valor | Preview | Uso indicado |
|---|---|---|---|
| --color-semantic-positive | #4CAF7D | Ponto de legenda, dot de status, fill de mini-barra | |
| --color-semantic-positive-dim | rgba(76,175,125,0.12) | Fundo de badge, highlight inline | |
| --color-semantic-positive-border | rgba(76,175,125,0.25) | Borda de badge, borda de trend-badge | |
| --color-semantic-positive-text | #6FCF97 | Texto de delta, label de status, valor de KPI | |
| --color-semantic-negative | #D95F5F | Dot de status erro, fill de barra de risco | |
| --color-semantic-negative-dim | rgba(217,95,95,0.12) | Fundo de badge de erro, highlight inline | |
| --color-semantic-negative-border | rgba(217,95,95,0.25) | Borda de badge de erro | |
| --color-semantic-negative-text | #E07070 | Texto de delta negativo, label de erro | |
| --color-semantic-warning | #C9A84C | Dot de status revisão, fill de barra de atenção | |
| --color-semantic-warning-dim | rgba(201,168,76,0.12) | Fundo de badge de atenção | |
| --color-semantic-warning-border | rgba(201,168,76,0.25) | Borda de badge de atenção | |
| --color-semantic-warning-text | #E2C97E | Texto de delta warning, label de revisão | |
| --color-semantic-info | #4A90B8 | Dot de progresso, ponto de legenda informativa | |
| --color-semantic-info-dim | rgba(74,144,184,0.12) | Fundo de badge informativo | |
| --color-semantic-info-border | rgba(74,144,184,0.25) | Borda de badge informativo | |
| --color-semantic-info-text | #7EB4C9 | Texto de delta info, label de progresso |
02 · Aplicações ao Vivo
Cada cor semântica manifestada nos microelementos permitidos: setas de tendência, badges, pontos de legenda, mini-barras e highlights inline.
Positivo
Delta / seta
+14%
Trend badge
+8,2%
Badge status
Normal
Dot de status
Ativo
Legenda
TSH Normal
Highlight
2.4 mUI/L
Mini-barra de status
Negativo
Delta / seta
−6%
Trend badge
−3,1%
Badge status
Risco
Dot de status
Erro
Legenda
TSH Alto
Highlight
8.7 mUI/L
Mini-barra de status
Atenção
Delta / seta
+2%
Trend badge
±1,8%
Badge status
Atenção
Dot de status
Revisão
Legenda
Borderline
Highlight
4.5 mUI/L
Mini-barra de status
Informação
Delta / seta
+5%
Trend badge
+4,0%
Badge status
Em progresso
Dot de status
Ativo
Legenda
T4 Livre
Highlight
1.2 ng/dL
Mini-barra de status
Legenda combinada — exemplo de gráfico
Exemplo de legenda de gráfico com os quatro pontos semânticos combinados. A cor reforça o significado, mas não é o único indicador.
TSH Normal (0.4–4.0)
TSH Elevado (>4.0)
Borderline (3.5–4.0)
T4 Livre (ref.)
Mini-barras de distribuição
03 · KPI Cards com Semântica
KPI cards usando acentos semânticos apenas nos microelementos de delta, badges de tendência e highlights. O card em si permanece monocromático.
TSH — Última medição
2.4
mUI/L
Dentro do intervalo de referência (0.4 – 4.0 mUI/L)
TSH — Monitoramento
8.7
mUI/L
Acima do limite superior de referência — revisar dose
T4 Livre
1.2
ng/dL
Referência: 0.7 – 1.8 ng/dL · estável há 3 meses
Dose Levotiroxina
75
mcg/dia
Ajuste pendente — aguardando retorno laboratorial
Highlights inline em contexto clínico
O exame de TSH realizado em 15/01 apresentou valor de 8.7 mUI/L, acima do limite superior de referência. O T4 Livre permanece em 1.2 ng/dL (referência: 0.7–1.8 ng/dL), dentro do esperado. A dose atual de 75 mcg/dia de levotiroxina será reavaliada na próxima consulta, agendada para 28/02/2025.
04 · Regras de Uso
Diretrizes precisas para aplicação controlada da paleta semântica. O uso correto mantém a identidade monocromática intacta.
Onde usar
- Setas de tendência (kpi-delta)
- Percentuais de variação
- Pontos de legenda de gráficos
- Badges de status (pequenos)
- Mini-barras de status horizontal
- Highlights discretos inline em texto
- Dots de status em tabelas
Nunca usar em
- Fundos dominantes de seção
- Botões principais ou CTAs
- Headlines ou títulos
- Cards inteiros com fundo colorido
- Gradientes de cor semântica
- Elementos decorativos sem significado
- Mais de 2 categorias na mesma área
Coerência semântica
- Verde sempre = positivo, crescimento, normal
- Vermelho sempre = risco, queda, erro crítico
- Amarelo sempre = atenção, revisão, borderline
- Azul sempre = informação, progresso, neutro ativo
- Não inverter significados por contexto estético
- Manter consistência entre todas as telas do produto
Acessibilidade
- Combinar cor com ícone, seta ou label de texto
- Não depender exclusivamente de cor para significado
- Usar aria-label descritivo em elementos de cor
- Manter contraste mínimo AA em texto semântico
- Testar em simuladores de daltonismo
- Garantir leitura em telas de alto contraste
05 · Contraste & Acessibilidade
Verificação de contraste das variantes text em fundo preto (#000000). Todos os valores de texto semântico atendem ao mínimo WCAG AA para textos pequenos (4.5:1).
| Token de texto | Cor | Fundo | Contraste (aprox.) | WCAG AA (≥4.5:1) | Demonstração |
|---|---|---|---|---|---|
| --color-semantic-positive-text | #6FCF97 | #000000 | 7.2:1 | ✓ Aprovado | ↑ +14% Normal |
| --color-semantic-negative-text | #E07070 | #000000 | 5.4:1 | ✓ Aprovado | ↓ −6% Risco |
| --color-semantic-warning-text | #E2C97E | #000000 | 8.1:1 | ✓ Aprovado | ! Revisão pendente |
| --color-semantic-info-text | #7EB4C9 | #000000 | 6.3:1 | ✓ Aprovado | ↗ Em progresso |
| --color-semantic-positive (base) | #4CAF7D | #000000 | 4.7:1 | ✓ Aprovado | ● Status ativo |
| --color-semantic-negative (base) | #D95F5F | #000000 | 4.5:1 | ✓ Aprovado | ● Status erro |
| --color-semantic-warning (base) | #C9A84C | #000000 | 6.0:1 | ✓ Aprovado | ● Status revisão |
| --color-semantic-info (base) | #4A90B8 | #000000 | 4.6:1 | ✓ Aprovado | ● Status info |
Acesso antecipado
Em desenvolvimento
ativo.
O TirzeAPP está sendo construído com foco em clareza clínica e experiência de qualidade. Entre na lista para ser notificado quando estiver disponível.
Sem spam. Apenas novidades relevantes.