Tipografia

Fonte principal — Montserrat

O SystemClinic usa uma única família tipográfica: Montserrat. Geométrica, sans-serif, com personalidade clara e alto desempenho em telas. Não há fonte secundária para interface — Montserrat cobre todos os contextos com seus pesos.

A única exceção é o código: blocos de código e valores técnicos usam JetBrains Mono.

<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap" rel="stylesheet">

Pesos carregados: 400 · 500 · 600 · 700 · 800 · 400 itálico

---

Escala tipográfica

A escala usa razão 1.25 (Major Third) a partir de 16 px base.

Token	Tamanho	Line-height	Peso	Uso
xs	12 px	1.5	500	Captions, badges, metadados
sm	14 px	1.6	400	Labels, texto auxiliar, datas
base	16 px	1.75	400	Corpo de texto, parágrafos
lg	18 px	1.6	500	Subtítulos de seção
xl	20 px	1.4	600	Títulos de card, modal
2xl	24 px	1.3	700	Títulos de página
3xl	30 px	1.2	700	Headlines
4xl	36 px	1.15	800	Hero — uso pontual

---

Hierarquia de interface

Título de página — H1

font-family: 'Montserrat', sans-serif;
font-size: 24px;
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.025em;
color: #0F2B46;

Título de seção — H2

font-size: 20px;
font-weight: 600;
line-height: 1.4;
letter-spacing: -0.015em;
color: #0F2B46;

Subtítulo / Card — H3

font-size: 16px;
font-weight: 600;
line-height: 1.5;
color: #0F2B46;

Corpo de texto

font-size: 15px;
font-weight: 400;
line-height: 1.75;
color: #585858;

Texto auxiliar / label

font-size: 13px;
font-weight: 500;
line-height: 1.6;
color: #585858;

Caption / badge

font-size: 11px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #8a8a8a;

Código inline

font-family: 'JetBrains Mono', monospace;
font-size: 13px;
font-weight: 400;
background: #f0f0f0;
color: #0F2B46;
padding: 2px 6px;
border-radius: 4px;

---

Regras de uso

Faça

• Use 600 para todos os rótulos de campos de formulário
• Use 500 para itens de menu, tabs e labels
• Use 400 para corpo de texto e descrições
• Aplique letter-spacing negativo em headings grandes (≥ 24 px)
• Mantenha comprimento de linha entre 60 e 72 caracteres em parágrafos

Não faça

• Usar 800 fora de contextos hero ou marketing
• Misturar Montserrat com outra fonte sans-serif na mesma tela
• Usar text-transform: uppercase em mais de um nível de hierarquia por tela
• Aplicar font-size menor que 12 px em qualquer texto visível
• Usar line-height menor que 1.5 em corpo de texto

---

Responsividade

O tamanho base permanece 16 px em mobile. O que escala são os títulos:

Elemento	Desktop	Mobile
H1 — Título de página	24 px	20 px
H2 — Título de seção	20 px	18 px
Corpo	15–16 px	15–16 px
Label	13–14 px	13–14 px

Nunca abaixo de 13 px em mobile — toque exige maior tolerância de leitura que cursor.