Identidade visual

CRO-TO Design System

Cores, tipografia, componentes e regras de uso do site e do painel do Conselho Regional de Odontologia do Tocantins.

Princípios

Institucional sem ser burocrático

Conteúdo e voz

Português do Brasil, direto e cordial, para quem exerce a odontologia e para quem é atendido por ela.
Caixa de frase em títulos e botões; verbo primeiro nas ações: “Emitir certidão”, “Ver todas as notícias”.
Rótulo de seção em caixa de frase, sem CAIXA-ALTA espaçada. Sem emoji, sem exclamação.
Datas e números em pt-BR (12/10/2026, 1,2 MB), em Geist com tabular-nums quando alinhados.
Serviço do Implanta ou do CFO abre em nova aba e leva o selo de origem.

Forma

Bordô (primary) é a marca: uma ação preenchida por vista.
Branco clínico e neutros frios no site; grafite frio no painel escuro.
O escuro só emoldura: barra do topo em bordô escuro e rodapé em grafite. O conteúdo fica claro, com um painel bordô por página.
O painel bordô leva o gradiente WebGL (BrandGradient), sempre entre bordo-900 e bordo-500 para o texto branco manter AA.
Mapas em Mapbox, claros e sem rótulos de comércio; a única cor forte é o marcador bordô.
Newsreader só em h1, h2 e notícias; o resto em Geist. Mono só para códigos.
Bordas de 1px fazem o trabalho; sombras só em elevação real.
Todo card clicável usa card-interactive (sobe 2px, borda bordô, sombra), chip card-icon e setas arrow-out ou arrow-forward.
Foco sempre visível, um h1 por página, ícones decorativos com aria-hidden.

Cor

Bordô, neutros e status

Cada amostra é a variável CSS real, renderizada nos três temas: claro (site), escuro (painel) e alto contraste (barra de acessibilidade).

Superfícies e texto

TokenClaroEscuroAlto contraste

background
Fundo da página: branco clínico no site, grafite frio no painel escuro. Recebe foreground (17,7:1 claro · 16,2:1 escuro) e muted-foreground (6:1 claro · 7,4:1 escuro).
Claro: #ffffff
Escuro: #111415
Alto contraste: #000000
foreground
Texto principal sobre background, card, muted e well — ≥12,9:1 nos três temas.
Claro: #15191c
Escuro: #eff0f1
Alto contraste: #ffffff
card
Superfície de cards, tabelas, campos e o cartão de busca do hero. Sempre com 1px de border.
Claro: #ffffff
Escuro: #191d1f
Alto contraste: #000000
card-foreground
Texto sobre card (17,7:1 claro · 14,9:1 escuro).
Claro: #15191c
Escuro: #eff0f1
Alto contraste: #ffffff
popover
Menus, popovers, selects, diálogos e o mega-menu do site.
Claro: #ffffff
Escuro: #191d1f
Alto contraste: #000000
popover-foreground
Texto sobre popover. ATENÇÃO: o tema alto contraste não redefine este token — herda #15191c sobre popover preto (1,2:1). Corrigir na origem (globals.css).
Claro: #15191c
Escuro: #eff0f1
Alto contraste: #15191c
well
Poço neutro um passo mais escuro: placeholder de imagem (Cover), moldura da foto do hero, admin-surface-well.
Claro: #eef1f3
Escuro: #24292b
Alto contraste: #111111
well-foreground
Texto sobre well (15,6:1 claro). ATENÇÃO: não redefinido no alto contraste — #15191c sobre #111111 (1,1:1).
Claro: #15191c
Escuro: #eff0f1
Alto contraste: #15191c
muted
Porcelana: fundo das seções alternadas do site (serviços, agenda), rodapé e barra utilitária; hover de ghost/outline, lista de Tabs, cabeçalho de tabela.
Claro: #f5f7f8
Escuro: #1e2224
Alto contraste: #111111
muted-foreground
Texto secundário, metadados, datas e placeholders sobre background, card, muted e primary-soft (≥5:1 claro · ≥6,4:1 escuro).
Claro: #5b656c
Escuro: #9ea5a9
Alto contraste: #ffffff
secondary
Preenchimento do Button secondary.
Claro: #f1f3f5
Escuro: #24292b
Alto contraste: #111111
secondary-foreground
Texto sobre secondary (≥12,9:1 em todos os temas).
Claro: #1f2529
Escuro: #eff0f1
Alto contraste: #ffffff
border
Bordas e filetes de 1px — as bordas fazem o trabalho, sombras são raras. Alto contraste: branco.
Claro: #e3e7ea
Escuro: #30373b
Alto contraste: #ffffff
input
Borda de Input, Textarea, Toggle outline e do campo de busca.
Claro: #d4dade
Escuro: #394246
Alto contraste: #ffffff
ring
Anel de foco: ring-3 (3px) em ring a 50%; bordas em foco usam foreground a 55%.
Claro: #8b0e1a
Escuro: #c8323f
Alto contraste: #ffeb3b

Marca

TokenClaroEscuroAlto contraste

primary
Bordô institucional do Sistema CFO/CROs: botão e CTA primários, links, eyebrow, ícones de serviço, anel de foco. Como texto: 9,7:1 sobre background no claro; no escuro (#c8323f) só 3,5:1 — reservar para texto ≥24px, ícones e preenchimentos.
Claro: #8b0e1a
Escuro: #c8323f
Alto contraste: #ffeb3b
primary-hover
Hover do CTA primário (hover:bg-primary-hover; o Button usa primary a 90%). No escuro, primary-foreground sobre ele fica em 4,3:1.
Claro: #730b16
Escuro: #d94554
Alto contraste: #fff176
primary-foreground
Texto e ícones sobre preenchimento primary (9,7:1 claro · 5,3:1 escuro · 17:1 alto contraste).
Claro: #ffffff
Escuro: #ffffff
Alto contraste: #000000
primary-soft
Tinta bordô: chip do ícone de serviço, DateBlock, ícone do EmptyState, selo “Vigente”, badge brand do painel.
Claro: #f7eaea
Escuro: #3a1418
Alto contraste: #222200
primary-soft-foreground
Texto sobre primary-soft (9,4:1 claro · 9,6:1 escuro · 13:1 alto contraste).
Claro: #7a0d19
Escuro: #f3b8bf
Alto contraste: #ffeb3b
accent
Realce em tom ouro claro (selects/combobox e pílulas accent do painel).
Claro: #f6eedc
Escuro: #3a2e17
Alto contraste: #222200
accent-foreground
Texto sobre accent (7:1 claro · 9,6:1 escuro).
Claro: #6b4a12
Escuro: #f1d9a6
Alto contraste: #ffeb3b
gold
Ouro — só como detalhe (estrela de destaque, ícones decorativos). Nunca texto pequeno: 3,2:1 sobre background no claro.
Claro: #b8862f
Escuro: #d9ae5f
Alto contraste: #b8862f
bordo-950
Bordô quase preto: a barra institucional do topo (texto branco a 80%, 13:1+) e o fim do gradiente do placeholder de capa. Não use como fundo de seção de conteúdo.
Claro: #24060b
Escuro: #24060b
Alto contraste: #000000
bordo-900
Escala bordô — fundos escuros de marca.
Claro: #3d0a12
Escuro: #3d0a12
Alto contraste: #000000
bordo-800
Escala bordô.
Claro: #5e0b16
Escuro: #5e0b16
Alto contraste: #000000
bordo-700
Escala bordô — meio do gradiente do placeholder de capa.
Claro: #7a0d19
Escuro: #7a0d19
Alto contraste: #7a0d19
bordo-600
Escala bordô — o mesmo valor de primary no claro.
Claro: #8b0e1a
Escuro: #8b0e1a
Alto contraste: #8b0e1a
bordo-500
Escala bordô — brilho do gradiente do placeholder de capa (texto branco 7,7:1).
Claro: #a3172a
Escuro: #a3172a
Alto contraste: #a3172a
bordo-300
Escala bordô — texto/ícone claro sobre bordo-950 (7,2:1).
Claro: #d98a94
Escuro: #d98a94
Alto contraste: #d98a94
bordo-100
Escala bordô — mesma tinta de primary-soft.
Claro: #f7eaea
Escuro: #f7eaea
Alto contraste: #f7eaea
ink-950
Grafite quase preto: o rodapé (texto branco, secundário a 70%, 12:1+), véu sobre fotos e overlay de diálogos (a 40%). Não use como fundo de seção de conteúdo.
Claro: #0f1316
Escuro: #0f1316
Alto contraste: #000000
ink-975
Grafite mais profundo: a faixa de contatos e a linha final do rodapé, abaixo da faixa ink-950. A troca de tom separa os blocos sem linha.
Claro: #0a0d0f
Escuro: #0a0d0f
Alto contraste: #0a0d0f
ink-900
Tinta escura: texto sobre selos brancos em fotos.
Claro: #15191c
Escuro: #15191c
Alto contraste: #15191c
on-ink-muted
Texto secundário sobre ink-950 (rodapé): links, endereços e contatos (7,9:1). Títulos ficam em branco.
Claro: #a3aaaf
Escuro: #a3aaaf
Alto contraste: #a3aaaf
on-ink-subtle
Texto terciário sobre ink-950: horários, @, linha final do rodapé (5,5:1).
Claro: #858d92
Escuro: #858d92
Alto contraste: #858d92
logo-bordo
Tinta do logotipo oficial (símbolo “cro TO”). Só no logo — a UI usa primary (#8b0e1a).
Claro: #8e0f13
Escuro: #8e0f13
Alto contraste: #8e0f13
logo-gray
Tinta do descritor “Conselho Regional de Odontologia do Tocantins” no logo (5:1 sobre background). Só no logo.
Claro: #6f6f6f
Escuro: #6f6f6f
Alto contraste: #6f6f6f

Status

TokenClaroEscuroAlto contraste

destructive
Erros, exclusão, “Revogado”. Em botões e selos vai como texto sobre tinta destructive a 10%. Não redefinido no alto contraste: 3,2:1 sobre preto.
Claro: #b42318
Escuro: #f87171
Alto contraste: #b42318
destructive-foreground
Texto sobre preenchimento sólido destructive (6,6:1 claro). Não redefinido no escuro: branco sobre #f87171 = 2,8:1 — evitar preenchimento sólido no tema escuro.
Claro: #ffffff
Escuro: #ffffff
Alto contraste: #ffffff
success
Status “Aberto”, confirmações. Sobre success-soft: 4,43:1 no claro — um pouco abaixo de 4,5:1 (fonte original; selo de 12px semibold).
Claro: #15803d
Escuro: #4ade80
Alto contraste: #15803d
success-soft
Fundo dos selos de sucesso.
Claro: #e7f4ec
Escuro: #13301f
Alto contraste: #e7f4ec
warning
Avisos (NoticeBar WARNING, badge warning). Sobre warning-soft: 4,46:1 no claro — limítrofe.
Claro: #b45309
Escuro: #fbbf24
Alto contraste: #b45309
warning-soft
Fundo de avisos e selos de atenção.
Claro: #fbf0e1
Escuro: #3a2a10
Alto contraste: #fbf0e1
info
Informação, status “Resultado”. Sobre info-soft: 5,5:1 claro · 5,9:1 escuro.
Claro: #1d5fa8
Escuro: #60a5fa
Alto contraste: #1d5fa8
info-soft
Fundo de avisos informativos e selos info.
Claro: #e6eff8
Escuro: #132741
Alto contraste: #e6eff8

Painel

TokenClaroEscuroAlto contraste

sidebar
Fundo da barra lateral do painel.
Claro: #ffffff
Escuro: #151819
Alto contraste: #ffffff
sidebar-foreground
Texto da barra lateral.
Claro: #15191c
Escuro: #eff0f1
Alto contraste: #15191c
sidebar-accent
Item ativo/hover da barra lateral.
Claro: #f5f7f8
Escuro: #1e2224
Alto contraste: #f5f7f8
sidebar-accent-foreground
Texto do item ativo da barra lateral.
Claro: #15191c
Escuro: #eff0f1
Alto contraste: #15191c
sidebar-border
Divisória da barra lateral.
Claro: #e3e7ea
Escuro: #282e31
Alto contraste: #e3e7ea

Tipografia

Newsreader, Geist e Geist Mono

Títulos editoriais em serifa com tracking negativo, interface em sans e rótulos em mono caixa-alta.

Editorial (Newsreader)

hero-display
4rem / 1.02 · 500 · -0.025em
Odontologia ética, segura e valorizada em todo o Tocantins.
h1 da home (xl). Abaixo: 3.25rem (sm) e 2.75rem. text-balance.
page-title
3.75rem / 1.02 · 500 · -0.025em
Legislação
h1 do PageHero (md: text-6xl). Abaixo: 3rem (sm) e 2.6rem.
section-title
2.75rem / 1.08 · 500 · -0.02em
Serviços mais procurados
h2 do SectionHeading (md). Mobile: 2rem.
feature-title
2.5rem / 1.1 · 500 · -0.015em
CRO-TO realiza fiscalização em Araguaína
Título do PostCard feature/spotlight (md). Mobile: 1.875rem.
card-title
1.5rem / 1.2 · 500 · -0.015em
Plenária aprova calendário 2026
Título do PostCard padrão.
quiet-title
1.25rem / 1.4 · 500 · -0.025em
Nenhum documento encontrado
Título do EmptyState.
date-day
28px / 1 · 500
14
Dia no DateBlock da agenda.
stat-number
3.5rem / 1 · 500 · -0.02em
139
Números em destaque (CRO de Vantagens), tabular e lining. Mobile: 2.75rem.

Interface (Geist)

lead
1.25rem / 1.625 · 400
Inscrição, certidões, anuidade e fiscalização em um só lugar.
Lead do PageHero (md: text-xl, leading-relaxed) em muted-foreground. Mobile: 1.125rem.
body-lg
1.125rem / 1.625 · 400
Acompanhe as decisões do plenário e a agenda do conselho.
Descrição do SectionHeading (md) e resumo de notícia em destaque.
body
1rem / 1.5 · 400
O CRO-TO fiscaliza o exercício da odontologia no Tocantins.
Texto corrido e campos (Input usa text-base no mobile, text-sm no md+).
card-heading
17px / 1.375 · 600 · -0.01em
Certidão de regularidade
Título do ServiceCard.
row-heading
15px / 1.375 · 600
Resolução CFO nº 263/2025
Título de DocumentRow; excerto do PostCard (15px, relaxed).
ui
0.875rem / 1.4286 · 500
Área do profissional
Botões, abas, labels, células de tabela (text-sm). CTAs do site em 600.
meta
13px / 1.4 · 400
Palmas · Auditório do CRO-TO · 19h
Linha de meta do EventRow, “Mais buscados”.
caption
0.75rem / 1.333 · 600
Aberto
StatusBadge do site (text-xs semibold).
kicker
0.875rem / 1.4286 · 600
Para o cidadão
Eyebrow: nome da seção acima do título, em primary, caixa de frase, sem régua.
label
13px / 1.4 · 500
Fiscalização 23 set 2025
Metadados: categoria e data do PostMeta, Breadcrumbs (peso 400), número de documento, títulos de coluna do rodapé (600).

Códigos (Geist Mono)

label-mono
10px / 1.4 · 500 · 0.16em
RASCUNHO
Só no painel: Badge, cabeçalho de tabela e StatusBadge, em CAIXA-ALTA. No site, rótulos usam label (sans).
code
0.875rem / 1.4 · 500
OUV-2026-00412
Códigos que a pessoa digita ou copia: protocolo e teclas (kbd). Nada além disso usa mono no site.

Espaço e forma

Medidas, raios e sombras

Espaço

spacing 0.25rem
Unidade do Tailwind v4 (p-4 = 1rem, gap-2.5 = 0.625rem).
container-max 1240px
Largura máxima do utilitário container-site.
container-pad 1.25rem
Respiro lateral do container-site no mobile.
container-pad-md 2rem
Respiro lateral do container-site a partir de 48rem.
section-y 4rem
Padding vertical das seções do site no mobile (py-16).
section-y-md 5rem
Padding vertical das seções no desktop (md:py-20, o mais comum; faixas de destaque vão a 6–7rem).
card-pad 1.5rem
Padding do ServiceCard (p-6); EmptyState usa 2rem/2.5rem.
control-h 2.75rem
Altura de Button, Input e botões de ícone (h-11, alvo de toque de 44px).
control-h-sm 2.5rem
Chips de filtro, CTA do cabeçalho, botões xs/icon-sm (h-10).
utility-bar-h 2.5rem
Altura da barra utilitária bordô.
header-h 72px
Altura do cabeçalho fixo no mobile (84px a partir de lg).
header-h-lg 84px
Altura do cabeçalho fixo a partir de lg.

Raios

radius 0.75rem
Base do sistema (--radius).
radius-sm 8px
rounded-sm = radius − 4px: miniaturas pequenas, imagens em linha.
radius-md 10px
rounded-md = radius − 2px; também o literal rounded-[10px] do CTA do cabeçalho, botão “Buscar” e aba ativa.
radius-lg 12px
rounded-lg; o literal rounded-[12px] de Button, Input, Textarea, Card e Tabs; imagens no conteúdo.
radius-search 14px
Campo de busca do hero e admin-surface-well.
radius-xl 16px
rounded-xl = radius + 4px: chip de ícone (44px), DateBlock, capa de notícia.
radius-2xl 1rem
rounded-2xl (16px): cards do site — ServiceCard, EmptyState, mega-menu, painéis do admin.
radius-3xl 1.5rem
rounded-3xl: moldura da foto do hero.
radius-full 9999px
Pílulas: StatusBadge, Badge, chips de filtro, botão circular de download.

Sombras

shadow-card-hover
Hover do ServiceCard (com -translate-y-0.5 e borda primary a 25%).
shadow-header
Cabeçalho fixo depois de rolar (com fundo a 85% e blur).
shadow-search
Campo de busca do hero em repouso.
shadow-search-focus
Campo de busca do hero com foco.
shadow-menu
Mega-menu da navegação desktop.
shadow-float
ConsultaCard flutuando sobre a foto do hero.
shadow-dialog
Diálogo de busca (Ctrl + K).

Logotipo

Arquivos oficiais, nunca redesenhados

No código, use <Logo /> de @/components/brand/logo (tone="inverse" em fundo escuro, compact para o símbolo).

Iconografia

Font Awesome Pro, duotone e regular

Duotone regular a partir de 18px, regular até 16px; setas e controles sempre no regular. Ícones herdam a cor do texto; serviços escolhem o ícone por nome em uma lista fechada e nome desconhecido cai em file-lines.

award
badge-check
badge-percent
book-open
briefcase
building-2
calculator
calendar-days
circle-help
clipboard-list
credit-card
download
file-badge
file-check
file-search
file-text
folder-open
gavel
globe
graduation-cap
heart-pulse
id-card
inbox
landmark
laptop
layout-grid
mail
map-pin
megaphone
message-square
message-square-text
newspaper
phone
qr-code
receipt
scale
search
shield-check
stethoscope
user-check
user-plus
user-search
users
wallet

Componentes

Peças do site e do painel

Amostras renderizadas com os componentes React do próprio site.

Button

src/components/ui/button.tsx

Uma ação default por vista; destrutivo é tinta a 10%, nunca preenchimento sólido.

Eyebrow, SectionHeading e ArrowLink

src/components/site/section-heading.tsx

Notícias

O que acontece no conselho

Fiscalização, plenárias, eventos e decisões que afetam quem exerce a odontologia no Tocantins.

Ver todas as notícias

Área do profissional

Conheça a diretoria

BrandGradient

src/components/site/brand-gradient.tsx

Fundo WebGL do painel bordô de cada página. Até 30 fps, pausa fora da tela; com movimento reduzido, um quadro só; sem WebGL, bordô sólido. Passe o ponteiro.

Área do profissionalAcesse os Serviços Online

OfficeMap

src/components/site/office-map.tsx

Mapbox light-v11 nos neutros do site, marcador bordô. A roda do mouse rola a página; zoom pelos botões ou por pinça.

Breadcrumbs

src/components/site/breadcrumbs.tsx

ServiceCard e OriginBadge

src/components/site/service-card.tsx

Certidão de regularidade

Emita a certidão de inscrição e regularidade profissional.

Implanta

Anuidade 2026

Boletos, parcelamento e descontos para pagamento antecipado.

CFO

Fiscalização

Como o conselho fiscaliza e como fazer uma denúncia.

CRO-TO

ImplantaCRO-TOFiscalizaçãoEventos

PostCard

src/components/site/post-card.tsx

Sem imagem, a capa usa o placeholder bordô da marca. Amostra sem links.

Fiscalização08 out 2026

Fiscalização visita consultórios no norte do estado

Equipe do conselho orienta profissionais sobre registro, publicidade e biossegurança.

Eventos02 out 2026

Plenária aprova o calendário de eventos de 2026

Cursos, encontros regionais e a semana da odontologia estão confirmados.

DocumentRow e StatusBadge

src/components/site/document-row.tsx

Amostra sem links.

Portaria nº 19/2026

Nomeia a comissão de tomada de contas do exercício (abre em nova aba)

Designa os membros responsáveis pela análise das contas do conselho.

12/10/2026248 KBPDF

Vigente

Edital nº 02/2026

Processo seletivo para estágio em comunicação (abre em nova aba)

01/10/20261,2 MBPDF

Aberto

AbertoEncerradoResultadoVigenteRevogado

EventRow

src/components/site/event-row.tsx

Amostra sem links.

14nov

Plenária ordinária

14 de novembro de 2026Palmas · Sede do CRO-TO · 19h

03out

Encontro regional de odontologia do trabalho

03 de outubro de 2026Araguaína · 8h30

FilterChips

src/components/site/filter-chips.tsx

NoticeBar

src/components/site/notice-bar.tsx

Avisos dispensados ficam ocultos neste navegador.

Anuidade 2026 disponível.Pague até 31 de janeiro com desconto.Saiba mais

Atendimento presencial com horário marcado.Agende pelo WhatsApp.Ver contatos

Expediente reduzido em 28/10.Serviços on-line seguem disponíveis.

UtilityBar

src/components/site/utility-bar.tsx

Os controles funcionam: alto contraste e A+ valem para esta página.

AcessibilidadeAcessibilidade

EmptyState

src/components/site/empty-state.tsx

Nenhum documento encontrado

Ajuste os filtros ou tente outro termo de busca.

Input, Label e Textarea

src/components/ui/input.tsx

Nome completo

E-mail

Informe um e-mail válido.

Mensagem

Badge

src/components/ui/badge.tsx

NovoRascunhoPáginaPublicadoFalhou

Painel escuro

Grafite frio com o mesmo bordô

O painel usa o tema .dark: neutros em grafite com leve toque de petróleo. Estas amostras rodam dentro de um contêiner .dark.

RascunhoDestaquePublicadoArquivadoAgendadoErro

Título	Categoria	Status	Publicado em
Fiscalização visita consultórios no norte do estado	Fiscalização	Publicado	08/10/2026
Plenária aprova o calendário de eventos de 2026	Eventos	Publicado	02/10/2026
Semana da odontologia: programação	Eventos	Agendado	20/10/2026
Novo horário de atendimento	Institucional	Rascunho	—

Nome completo

E-mail

Informe um e-mail válido.

Mensagem

Nenhuma notícia agendada

Agende uma notícia para que ela apareça aqui.