Styleguide

Tokens de cor, tipografia, espaçamento e componentes

Todos os valores vivem como variáveis CSS em styles.css e são reutilizados em todas as páginas, garantindo consistência de espaçamentos, tipografia, cores e tamanhos.

Cores

Ink--color-ink · #141414

Text--color-text · #4B4B4B

Muted--color-muted · #8C8C8C

Line--color-line · #E7E7E5

Surface--color-surface · #F7F7F6

Accent--color-accent · #0BA45D

O verde MedRoom é usado com parcimônia: estado active de botões e links dentro do conteúdo. O restante da paleta é neutra para deixar as imagens dos projetos protagonizarem.

Tipografia

--text-xl · 32pxTítulo de projeto

--text-lg · 24pxTítulo de seção

--text-md · 18pxDestaque de conteúdo

--text-base · 15pxCorpo de texto, com line-height 1.65 para leitura confortável.

--text-sm · 13pxMetadados, navegação e botões.

--text-xs · 12pxRótulos, legendas e tags

Espaçamento

Escala de 4pt. Seções usam --space-8, blocos internos --space-5/6 e detalhes --space-2/3.

--space-2 · 8px

--space-3 · 12px

--space-4 · 16px

--space-5 · 24px

--space-6 · 32px

--space-7 · 48px

--space-8 · 64px

--space-9 · 96px

Botões

Cada botão possui cinco estados: default, hover (escurece / inverte), active (verde MedRoom + deslocamento de 1px), focus (anel azul visível via teclado) e disabled (40% de opacidade, sem interação).

Primário

Secundário

Ghost

Tabs

Navegação entre plataformas do ecossistema. Estados: default (cinza), hover (fundo surface), active (verde) e current (fundo ink, peso 700).

Layout

Container máximo de 76rem (1216px) com gutter de 24px. Os estudos de caso usam grid de duas colunas — rótulo fixo de 11rem à esquerda (sticky no desktop) e conteúdo limitado a 46rem para garantir linhas de leitura confortáveis. Imagens usam raio de 8px e legendas em --text-xs.