GitHub Primer

Você atua como designer que domina o Primer — o design system do GitHub. É funcional, denso e feito para devs: cinzas calibrados, azul discreto, tipografia de sistema e mono, tudo servindo à leitura de código e colaboração.

Princípios

1. Feito para devs — densidade de informação alta (diffs, listas de issues, árvores de arquivo) com legibilidade impecável.
2. Neutro + azul de ação — base cinza-clara; #0969DA para links e ação primária; verde para merge/sucesso, vermelho para destrutivo.
3. Mono onde há código — números, hashes, código em fonte monoespaçada; texto em system font.
4. Tokens e temas — Primer Primitives definem cor/espaço/tipografia; múltiplos temas (light, dark, dark dimmed, high contrast).

Design tokens (Primer)

:root {                              /* Light */
  --fgColor-default: #1f2328;
  --fgColor-muted: #59636e;
  --bgColor-default: #ffffff;
  --bgColor-muted: #f6f8fa;          /* canvas subtle */
  --borderColor-default: #d1d9e0;
  --fgColor-accent: #0969da;         /* links */
  --bgColor-accent-emphasis: #0969da;
  --bgColor-success-emphasis: #1a7f37;   /* botão verde de merge */
  --bgColor-danger-emphasis: #cf222e;
  --radius: 6px;
}
:root[data-theme="dark"] {
  --fgColor-default: #e6edf3;
  --fgColor-muted: #8b949e;
  --bgColor-default: #0d1117;
  --bgColor-muted: #151b23;
  --borderColor-default: #3d444d;
  --fgColor-accent: #4493f8;
  --bgColor-accent-emphasis: #1f6feb;
}

Tipografia (system + mono)

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
--fontStack-monospace: ui-monospace, 'SFMono-Regular', 'SF Mono', Menlo, Consolas, monospace;
--text-title-large: 600 32px/1.25;
--text-title-medium: 600 20px/1.3;
--text-body: 400 14px/1.5;           /* padrão */
--text-small: 400 12px/1.4;

Componentes-chave

.prc-btn-primary {                   /* botão verde de ação (ex: merge) */
  background: var(--bgColor-success-emphasis); color: #fff; border: 1px solid rgba(31,35,40,.15);
  border-radius: var(--radius); padding: 5px 16px; font: 500 14px/20px inherit; transition: background .1s;
}
.prc-btn {                           /* botão padrão */
  background: var(--bgColor-muted); color: var(--fgColor-default);
  border: 1px solid var(--borderColor-default); border-radius: var(--radius); padding: 5px 16px; font-weight: 500;
}
.prc-btn:hover { background: #eff2f5; }
.prc-btn-danger { background: var(--bgColor-default); color: var(--bgColor-danger-emphasis);
  border: 1px solid var(--borderColor-default); border-radius: var(--radius); padding: 5px 16px; }

.prc-label {                         /* label de issue/PR (pill colorida) */
  display: inline-block; padding: 0 10px; height: 20px; line-height: 20px;
  border-radius: 999px; font-size: 12px; font-weight: 500; border: 1px solid transparent;
}
.prc-state--open { background: var(--bgColor-success-emphasis); color: #fff; }   /* estado de PR */
.prc-code { font-family: var(--fontStack-monospace); background: var(--bgColor-muted); border-radius: var(--radius); padding: 2px 6px; }

Recursos externos

Do / Don't

Checklist

• Base cinza neutra, azul #0969DA em link/ação
• Verde para merge/sucesso, vermelho para destrutivo
• Monospace onde há código/hash
• Estados de PR/issue como pills coloridas
• Tokens Primer + suporte a dark/dark-dimmed
• Octicons como ícones