Fundamentos
Tipografia
Plus Jakarta Sans em títulos, navegação, botões e header de tabela. DM Sans em texto, labels, inputs e células. Source Serif 4 só no corpo de artigos longos, em sites de leitura.
As três fontes vêm no pacote (subset latino, cobre todos os acentos do português) e são servidas do próprio site, sem depender do Google Fonts.
| Variável |
Família |
Pesos |
--font-heading |
Plus Jakarta Sans |
500 a 800 |
--font-sans |
DM Sans |
400 a 700 |
--font-serif |
Source Serif 4 |
200 a 900, com itálico |
Escala
Cada estilo também existe como classe: .nc-display-lg, .nc-body-md e assim por diante.
Display
display-lg36px / 44px · 700 · -0.02emHero do site e capas. Um por página.
Saúde Ocupacional que trabalha por você
display-sm30px / 38px · 700 · -0.02emTítulo de página nos portais. Também o número do card de KPI.
Controle de Exames
Títulos
heading-lg24px / 32px · 600 · -0.01emSeção principal.
Colaboradores ativos
heading-md20px / 28px · 600Subseção e título de card.
Dados ocupacionais
heading-sm16px / 24px · 600Título de widget e de grupo.
ASOs a vencer em 30 dias
Texto
body-lg16px / 24px · 400Texto principal de leitura, portais voltados ao colaborador e site.
O exame periódico de Ana Souza foi agendado na clínica credenciada mais próxima.
body-md14px / 20px · 400Texto de interface, células de tabela.
Unidade Centro · GHE 03 · Operador de empilhadeira
body-sm12px / 18px · 400Legendas, helpers, rótulo do card de KPI.
Atualizado há 5 minutos
label14px / 20px · 500Label de formulário.
CPF do colaborador
Interface
overline12px / 16px · 600 · 0.05emCategorizadores, tags e header de tabela. Sempre em caixa alta (text-transform: uppercase).
SAÚDE OCUPACIONAL
button-md14px / 20px · 600Rótulo de botão md. sm usa 12px, lg usa 16px.
Agendar exame
Leitura
article-lead20px / 32px · 400Linha fina de artigo, logo abaixo do título. Só em sites editoriais.
O PCMSO define quais exames cada função precisa fazer e com que frequência.
article-body18px / 30px · 400Corpo de artigos longos. Coluna de no máximo 68 caracteres.
A NR-7 estabelece a obrigatoriedade do Programa de Controle Médico de Saúde Ocupacional para toda empresa com empregados registrados.
article-quote20px / 32px · 400Citação e destaque dentro do artigo.
O exame periódico acompanha a saúde de quem já está na função.
Regras
display-lg só no hero do site e em capas. Um por página.
display-sm no título da página nos portais.
body-md (14px) é o padrão de interface; body-lg (16px) é o padrão de leitura.
overline sempre em caixa alta, com espaçamento de 0.05em.
- Use caixa de frase em títulos, botões e menus: "Agendar exame", não "Agendar Exame".
- Não use outras famílias. Arial é aceito só como fallback e em documentos DOCX.
Leitura
Sites de leitura (base de conhecimento, artigos, blog) usam o editorial.css. O corpo do artigo vai em Source Serif 4, 18/30, numa coluna de no máximo 68 caracteres. Títulos, metadados, tabelas e interface continuam na fonte da marca.
Atualizado em 24/10/2026 · 6 min de leitura
O que o PCMSO precisa ter
O programa define quais exames cada função faz e com que frequência.
A NR-7 estabelece a obrigatoriedade do Programa de Controle Médico de Saúde Ocupacional para toda empresa com empregados registrados. O documento é elaborado por médico do trabalho e revisado sempre que os riscos mudam.
O exame periódico acompanha a saúde de quem já está na função.
<article class="nc-article">
<p class="nc-article__meta">Atualizado em 24/10/2026 · 6 min de leitura</p>
<h2>O que o PCMSO precisa ter</h2>
<p class="nc-article__lead">O programa define quais exames cada função faz e com que frequência.</p>
<p>A NR-7 estabelece a obrigatoriedade do Programa de Controle Médico de Saúde Ocupacional para toda empresa com empregados registrados. O documento é elaborado por médico do trabalho e revisado sempre que os riscos mudam.</p>
<blockquote>O exame periódico acompanha a saúde de quem já está na função.</blockquote>
</article>