Fundamentos
Ícones
Lucide na interface, o mesmo do painel. Quando o ícone vira peça — card do site, post, story — ele entra num bloco arredondado.
O conjunto
Lucide: traço de 2 em 24, canto arredondado, sem preenchimento — a mesma família geométrica da Outfit. Não se mistura com outro conjunto. A única exceção é a secretária, que é o símbolo da marca. Clique pra copiar o nome.
Tamanhos
Cinco tamanhos, e o ícone segue o texto ao lado: 16 com text-sm, 20 com text-base. Sempre quadrado (size-4, nunca largura e altura separadas). Acima de 32 px, só dentro do bloco.
size-3.5
14px · badge, legenda
size-4
16px · botão, input, linha de tabela — o mais comum
size-5
20px · item de menu, barra de página
size-6
24px · ícone solto, toolbar
size-8
32px · empty state — o maior que anda solto
Cor
O ícone não tem cor própria: herda a do texto onde está. O sage é a única exceção, e só pra ação e pra secretária.
O ícone herda currentColor. Ao lado de uma frase ele é da frase — não ganha cor própria.
Ícone que só ajuda a ler (tipo, categoria) fica em muted ou dimmed, abaixo do texto.
text-primary. É a única cor que o ícone usa pra chamar atenção — e é a mesma da secretária.
warning e error pintam o ícone que representa a situação. Sucesso é sage — o que diferencia é o ícone, não a cor.
Em bloco
O ícone centrado num quadrado arredondado — o "estilo avatar". É a forma do ícone fora da interface e também o avatar sem foto da lista. A regra é proporção: raio de um quarto do lado, ícone de metade do lado. Um ícone por bloco, nunca texto dentro, e o bloco assenta sobre um fundo de outro valor.
- 32UI — linha de lista, paciente sem foto
- 40UI — cabeçalho de card, empty state
- 56Site — card de recurso
- 96Site — destaque, seção de abertura
- 160Post 1080 × 1080 — um por conceito
- 240Story 1080 × 1920 — o bloco sozinho
Na interface
Dois esquemas, em token semântico. Neutro (bg-elevated text-dimmed) é o avatar de linha: o paciente sem foto na lista. Suave (bg-primary/10 text-primary) é destaque: cabeçalho de card, empty state, a secretária. Os dois seguem o tema.
Nenhum registro nesta sessão
Em peça — site, post, story
Quatro esquemas com hex da paleta, que não invertem por tema. O bloco leva a cor que o fundo pede: linho sobre papel, sage claro sobre sage profundo, branco sobre sage. Escolha o fundo da peça e o bloco certo vem junto.
Papel, com bloco linho
Agenda que se organiza sozinha
Marca, remarca e confirma pelo WhatsApp, enquanto você atende.
Prontuário assinado
Registro por sessão, com assinatura e adendo — como o CFP pede.
Cobrança sem constrangimento
A secretária lembra, cobra e dá baixa. Você só recebe.
O que a secretária faz
Três coisas que você não precisa mais fazer
Story
A agenda se organiza enquanto você atende
secretariapsi.com
Post e story nas medidas reais, em escala: 160 no post, 240 no story.
Perfil
A foto de perfil da SecretáriaPsi é o símbolo, nunca um ícone. Instagram e WhatsApp recortam em círculo, então o bloco vai redondo, com o símbolo na metade da altura. Sobre sage profundo por padrão.