UP
Qualidade em Saúde
Design System

100% extraído do código-fonte real: mobile/theme.ts, chamados/button.jsx, chamados/card.jsx e tokens CSS do browser em produção. Use como referência única para novas páginas e landing page.

Fonte: Código Real CSS Vars Live 7 Telas Analisadas React + Tailwind + Inter Font Awesome 6 Pro
Cores theme.ts + CSS vars live

Todos os valores extraídos diretamente do código. Nenhuma aproximação visual.

Paleta Principal
Navy
--up-navy
#364F6B
Primary
colors.primary
#00A6F9
Active
tab-menu-active
#00D39D
Btn From
teal-500
#14B8A6
Btn To
cyan-600
#0891B2
Primary Dark
secondButtonBg
#005580
Primary Light
primaryLight
#89C3F1
Link
master-link-hover
#01A77D
Backgrounds
HTML BG
html-bg-color live
#F0F2F5
Sidebar / Card
sidebar-bg-color
#FFFFFF
Auth BG
AuthStyles.bg
#364F6B
Switchbar
switchbar-bg
#F0F1F5
Texto
Text
colors.text
#222222
Text Light
colors.textLight
#777777
Auth Secondary
AuthStyles.secondText
#7D99B3
Sidebar Icon
sidebar-icon-color
#545758
Semânticas (mobile/theme.ts colors.*)
Success
#28A745
Danger
#DC3545
Warning
#FFC107
Info
#17A2B8
Error
#D32F2F
Tipografia Inter — Google Fonts

Fonte Inter via Google Fonts. Pesos: 300, 400, 500, 600, 700, 800. O mobile herda fonte do sistema, inputs e botões usam 15–16px.

H1 / Page Title
32px / 800
Bem vindo(a)
Auth Title
22px / 700
Fazer Login
Card Title
18px / 600
Agenda do Dia
Body / Default
14px / 400
Gerencie suas consultas e pacientes
Input / Auth Body
15px / 400
paciente@gmail.com
Nav / Label
13px / 500
Dashboard • Agenda • Pacientes
Caption / Badge
12px / 600
CRM/SP 658128
Stat Value
30px / 700
28min
/* Google Fonts */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
Espaçamento spacing = 6 (mobile)

Base 6px do mobile, múltiplos de 4px no Tailwind. Input height: 45px (AuthStyles.inputHeight).

4px
--sp-1
8px
--sp-2
12px
--sp-3 (spacing×2)
16px
--sp-4
18px
--sp-5 (spacing×3)
24px
--sp-6 (card padding)
32px
--sp-8
40px
--sp-10
45px
input-h (AuthStyles.inputHeight)
48px
--sp-12 (section gap)
200px
sidebar-width
64px
topbar-height
Sombras & Border Radius

--radius: 0.5rem (8px) no tailwind.config. Cards: rounded-xl (12px). Sidebar: 0px 0px 10px rgba(0,0,0,.3).

Sombras
shadow-sm
shadow-md
shadow-lg
sidebar: 0 0 10px rgba(0,0,0,.3)
btn: teal-500/30%
switchbar: 0 4px 12px rgba(0,0,0,.15)
Border Radius
sm — 4px
md — 6px
lg — 8px ★ padrão
xl — 12px (cards)
pill
VJ
Iconografia Lucide React + Font Awesome 6 Pro

Web usa Lucide React (MessageSquare, Clock, AlertCircle no chamados). Font Awesome 6 Pro carregado no sistema. Cores dos ícones de stat cards abaixo.

📊 Dashboard
📅 Agenda
👥 Pacientes
🎥 Consultas
📋 Relatórios
⚙️ Configurações
💬 Chamados
🔔 Notificações
👤 Perfil
🚪 Logout
📷 Foto Perfil
👁 Ver senha
⚠️ Erro / Alerta
🔍 Buscar
🩺 Especialidade
Cores dos ícones de Stat Cards
📅
Consultas Hoje
0
+0 desde ontem
👥
Pacientes Ativos
1
+0% este mês
⏱
Tempo Médio
28min
Por consulta
❤️
Satisfação
5.0/5
Avaliação média
Padrões Visuais

Fundo da tela de login: padrão de ondas concêntricas sobrepostas em ciano/verde com baixa opacidade sobre o navy. Split-screen com foto de profissional de saúde.

Padrão de ondas concêntricas
Background da tela de Auth/Login
Botões chamados/button.jsx

Default: bg-gradient-to-r from-teal-500 to-cyan-600, rounded-lg, font-medium text-sm, shadow teal-500/25.

Variantes (fonte: button.jsx variants)
Tamanhos
Auth Buttons (login)
/* chamados/button.jsx — variante default */ "bg-gradient-to-r from-teal-500 to-cyan-600 text-white hover:from-teal-600 hover:to-cyan-700 shadow-lg shadow-teal-500/25" /* CSS equivalente */ .btn-primary { background: linear-gradient(to right, #14B8A6, #0891B2); border-radius: 8px; /* rounded-lg */ box-shadow: 0 4px 12px rgba(20,184,166,.25); font-weight: 500; font-size: 14px; color: white; }
Inputs & Forms AuthStyles.input

Altura 45px (AuthStyles.inputHeight). Border auth: 1px solid #7D99B3. Sistema: 1px solid rgba(0,0,0,.15). Border-radius: 8px sistema / 6px auth.

Sistema (dashboard, configurações)
Auth (tela de login — #364F6B background)
Esqueci minha senha
⚠️ Credenciais inválidas
Cards chamados/card.jsx

rounded-xl border border-slate-100 bg-white/80 backdrop-blur-sm shadow-xl. Hover: hover:shadow-xl hover:border-teal-200.

Stat Cards (Dashboard)
📅
Consultas Hoje
0
+0 desde ontem
👥
Pacientes Ativos
1
+0% este mês
⏱
Tempo Médio
28min
Por consulta
❤️
Satisfação
5.0/5
Avaliação média
Content Card (Consulta / Ticket)
🟡#001 — 09:40-10:30 — Israel Silva

Consulta agendada — clique para visualizar detalhes da consulta.

AgendadaConsulta
⏱ 08/05/2026
Badges & Status chamados/badge.jsx + PriorityBadge.jsx

Fonte: rounded-full border px-2.5 py-0.5 text-xs font-semibold. Todas as cores extraídas diretamente dos componentes.

Status (TicketList.jsx statusColors)
Aberto Em andamento Aguardando resposta Resolvido Fechado
Prioridades (PriorityBadge.jsx)
1 — Baixa 2 — Normal 3 — Média 4 — Alta 5 — Crítica
Tipos de Chamado (TicketList.jsx tipoIcons)
🔴Erros - Falhas 🟡Melhoria - Modificação 🟢Nova Função - Recursos
Especialidades / Tags
Nutrologia Clínica Geral Psiquiatria CRM/SP 658128
Pills & Tabs

Pills para filtros de período (Relatórios). Tabs para seções (Agenda). Ativo usa gradiente teal→cyan.

Filter Pills (Relatórios)
Tabs (Agenda)
Calendário

Grid 7 colunas. Botão "Hoje" com gradiente. Dia atual com destaque. Eventos com bullet ciano (#00D39D). Navegação com setas < >.

Maio 2026
Seg
Ter
Qua
Qui
Sex
Sáb
Dom
1
08:50 Israel Silva
2
3
4
5
6
7
8
9
10
Auth / Login Layout

Split 50/50. Esquerda: foto + texto bold all-caps + ondas. Direita: formulário sobre fundo navy. Botões: altura 45px, gradiente (primary) e dark (secondary).

SAÚDE
MENTAL
UP
Qualidade em Saúde
Fazer Login
Entre com suas credenciais para acessar sua conta
Ou acesse com
Dashboard Layout

Topbar (64px height, navy) + sidebar (200px, branca) + conteúdo (bg #F0F2F5). Grid 4 stat cards + seções. Padding conteúdo: 24px.

Dashboard
VJ
VJ
VALDIR AMARAL
CRM/SP 658128
📊 Dashboard 📅 Agenda 👥 Pacientes 🎥 Consultas 📋 Relatórios ⚙️ Configurações
Bem vindo(a), VALDIR
Gerencie suas consultas e pacientes
📅
Consultas Hoje
0
+0 desde ontem
👥
Pacientes Ativos
1
+0% este mês
⏱
Tempo Médio
28min
Por consulta
❤️
Satisfação
5.0/5
Avaliação média
📅 Agenda do Dia
Suas próximas consultas
👥 Fila de Espera
Pacientes aguardando
Tokens CSS — Referência Completa

Cole no :root de qualquer novo projeto para 100% de consistência com o sistema UP.

/* UP QUALIDADE EM SAÚDE — DESIGN TOKENS OFICIAIS v1.0 */ :root { /* ── CORES ─────────────────────────────────────── */ --up-navy: #364F6B; /* topbar, auth bg — panel.headerBackground */ --up-primary: #00A6F9; /* azul principal — colors.primary */ --up-primary-light: #89C3F1; /* azul claro — colors.primaryLight */ --up-primary-dark: #005580; /* escuro — secondButtonBackground */ --up-active: #00D39D; /* ativo — tab-menu-active-bg-active-color */ --up-btn-from: #14B8A6; /* gradiente — teal-500 */ --up-btn-to: #0891B2; /* gradiente — cyan-600 */ --up-link: rgba(1,167,125,.6); --up-link-hover: #01A77D; /* master-link-hover-color */ /* ── BACKGROUNDS ───────────────────────────────── */ --up-bg: #F0F2F5; /* html-bg-color — rgb(240,242,245) */ --up-bg-sidebar: #FFFFFF; /* sidebar-bg-color */ --up-bg-auth: #364F6B; /* AuthStyles.background */ --up-bg-switchbar: #F0F1F5; /* switchbar-bg-color */ /* ── BORDAS ───────────────────────────────────── */ --up-border: rgba(0,0,0,.15); --up-border-sidebar: #ECECEC; /* ── TEXTO ────────────────────────────────────── */ --up-text: #222222; /* colors.text */ --up-text-light: #777777; /* colors.textLight */ --up-text-auth2: #7D99B3; /* AuthStyles.secondText */ --up-icon-sb: #545758; /* sidebar-icon-color */ /* ── SEMÂNTICAS ───────────────────────────────── */ --up-success: #28A745; --up-danger: #DC3545; --up-warning: #FFC107; --up-info: #17A2B8; --up-error: #D32F2F; /* ── LAYOUT ───────────────────────────────────── */ --up-sidebar-w: 200px; --up-topbar-h: 64px; --up-input-h: 45px; /* ── RADIUS ───────────────────────────────────── */ --up-r: 8px; --up-r-xl: 12px; --up-r-pill: 9999px; --up-r-full: 50%; /* ── SOMBRAS ──────────────────────────────────── */ --up-sh-sb: 0px 0px 10px rgba(0,0,0,.3); --up-sh-card: 0 4px 24px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04); --up-sh-btn: 0 4px 12px rgba(20,184,166,.30); /* ── GRADIENTES ───────────────────────────────── */ --up-grad: linear-gradient(to right, #14B8A6, #0891B2); --up-grad-logo: linear-gradient(135deg, #00D39D, #00A6F9); /* ── FONTE ─────────────────────────────────────── */ --up-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }