Primer-based developer platform system

Design surfaces that feel like shipped developer tools.

A GitHub preview built from black-and-white brand contrast, green commitment actions, blue repository links, flat bordered cards, code surfaces, diffs, Actions logs, alerts, and contribution-grid rhythm.

View product patterns Inspect tokens

github/design-system

octo-org/primer-preview

Public - TypeScript - updated 2 minutes ago

Checks passing

README.mdtokens.cssworkflow.yml

1export const theme = {
2  action: "#1f883d",
3  link: "#0969da",
4  surface: "bordered, flat"
5}; // deploy preview

38Colors

14Type levels

19Components

76Named tokens

01 / Colors

Functional color with repository memory.

primary#1f883d

Committed action green.

link / accent#0969da

Repository links and docs navigation.

ink#1f2328

Dense product text.

body#59636e

Metadata and descriptions.

surface#f6f8fa

Primer panels and table heads.

border#d1d9e0

Cards, inputs, tables.

darkCanvas#0d1117

Hero and code ground.

darkSurface#161b22

Dark product panels.

githubPurple#8250df

Copilot and AI accents.

githubPink#bf3989

Launch-story highlight.

diffAddBg#dafbe1

Added lines in review.

diffDeleteBg#ffebe9

Removed lines in review.

02 / Typography

Heavy brand headlines, compact product UI.

Build from the repository outward.

display - 80px / 800 / 1.0 / -0.04em / Mona Sans fallback

Code review, shipped faster.

hero - 64px / 800 / 1.0 / -0.035em / Mona Sans fallback

A system for code, issues, checks, and teams.

headline-lg - 48px / 800 / 1.08 / -0.03em / Mona Sans fallback

Repository overview

title-lg - 32px / 700 / 1.18 / -0.02em / Mona Sans

Pull request checks

title-md - 24px / 600 / 1.25 / -0.012em / Mona Sans

Required reviewers

title-sm - 20px / 600 / 1.3 / -0.006em / Mona Sans

Large body copy explains the workflow without leaving the product surface.

body-lg - 20px / 400 / 1.5 / -0.005em / Mona Sans

Default body copy stays quiet, readable, and close to native application typography.

body - 16px / 400 / 1.5 / 0em / Mona Sans

Labels, buttons, and dense navigation

label/button - 14px / 600 / 1.43 / 0em / Mona Sans

Last deployed by octocat 4 minutes ago

caption/legal - 12px / 400 / 1.33-1.5 / 0em / Mona Sans

git checkout -b preview/github-primer

code - 13px / 400 / 1.54 / 0em / SF Mono stack

03 / Buttons

Rectangular Primer controls with clear commitment.

button-primary

button-primary-active

button-secondary

button-secondary-on-dark

button-ghost

button-link

button-icon / Octicon label

04 / Cards & Surfaces

Flat cards, keylines, and product proof.

Feature card

White card, 1px border, modest radius, and a link that feels like repository navigation.

Explore Actions ->

Surface card

Primer gray panels organize settings, docs callouts, and tabular product contexts.

Dark feature card

Launch and hero cards use dark surfaces, quiet borders, and real UI fragments.

$ gh workflow run preview.yml

success checks completed in 48s

Copilot accent card

Purple and pink stay attached to AI storytelling, not base product chrome.

Generate tests ->

Team

per user / month, with protected branches and code owners.

05 / Brand-Specific Product Patterns

The product is the decoration.

Repository cardsPublic

primer/design-previewDesign tokens and examples

TypeScript128 stars24 forks

octo-org/actions-runnerReusable workflow helpers

GoChecks passingUpdated now

Pull request diff+24 -6

- background: #000;

+ background: var(--dark-canvas);

+ border: 1px solid var(--dark-border);

border-radius: var(--radius-md);

Actions workflowmain

Install dependencies12s

Run visual checks34s

Publish preview2m 04s

[preview] upload artifact -> github-pages
[success] deployment ready

Contribution grid52 weeks

Security alertReview

Dependency review found 1 vulnerable package.

Upgrade the package before merging into the protected branch.

Copilot code contextAI

suggestion: extract ButtonVariant type
context: tokens/button-primary
accepted: tests updated

06 / Forms

Compact, bordered, and focus-visible.

Repository name Focused search Visibility Pull request note

Require status checks Squash merge

Package versionVersion tag already exists.

07 / Spacing

A practical 4px-based rhythm.

4px

8px

16px

24px

40px

section

96px

08 / Radius

Small radii for application density.

sm4px - chips, cells

md6px - buttons, inputs

lg8px - code panels

xl12px - feature cards

pill9999px - labels

09 / Elevation

Depth mostly comes from borders.

Flat system note

GitHub uses flat surfaces. Depth comes from color contrast, 1px keylines, dark/light layering, and real product content before shadow.

Default card

border: 1px solid var(--border)

Inset surface

surface gray + border

Overlay only

0 8px 24px rgba(140,149,159,.20)

10 / Extracted Component Tokens

CSS custom properties from design.md.

:root {
  --brand-primary: #1f883d;
  --brand-accent: #0969da;
  --brand-accent-hover: #0860ca;
  --brand-accent-pressed: #0550ae;
  --brand-ink: #1f2328;
  --brand-body: #59636e;
  --brand-muted: #818b98;
  --brand-canvas: #ffffff;
  --brand-surface: #f6f8fa;
  --brand-surface-alt: #f0f3f6;
  --brand-border: #d1d9e0;
  --brand-dark-canvas: #0d1117;
  --brand-dark-surface: #161b22;
  --brand-dark-border: #30363d;
  --brand-success: #1a7f37;
  --brand-warning: #9a6700;
  --brand-error: #d1242f;
  --github-purple: #8250df;
  --github-pink: #bf3989;
  --contribution-none: #ebedf0;
  --contribution-low: #9be9a8;
  --contribution-medium: #40c463;
  --contribution-high: #30a14e;
  --contribution-max: #216e39;
  --font-sans: Mona Sans, Hubot Sans, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-section: 96px;
}