Novah CareConstela v1.0.0

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

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.

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>