Migrate UI to GitHub Primer design system

[GustyCube]

Summary

• Replaces custom CSS with GitHub's Primer design system tokens and conventions
• Uses Primer's semantic color tokens, typography scale, spacing primitives, and responsive breakpoints
• Styles badges, buttons, panels, and tooltips to match Primer component patterns
• Removes Google Fonts in favor of Primer's system font stack
• Removes decorative grain texture for a cleaner look

Why Primer?

Since this site documents GitHub's own reliability data, using GitHub's visual language creates an implicit association that builds trust in the community, even with a clear "unofficial" label. When users land on the page, the familiar GitHub aesthetic signals credibility and care, rather than feeling like an unrelated third-party tool. Primer is open source (MIT) so there are no licensing concerns.

The site's existing color palette was already very close to Primer's tokens (#24292f, #0969da, #2da44e, #cf222e, etc.), so this is a natural alignment rather than a forced reskin.

What changed

• site/index.html: Added @primer/css v21 via CDN, removed Google Fonts preconnect/import, removed grain texture div
• site/styles.css: Full rewrite (~1500 lines removed, ~630 added) using Primer design tokens throughout:
  • Colors: --fgColor-*, --bgColor-*, --borderColor-* semantic tokens
  • Typography: --text-title-shorthand-*, --base-text-size-*, --base-text-weight-*
  • Spacing: --base-size-* (4px grid), --stack-gap-*, --stack-padding-*
  • Borders: --borderWidth-thin, --borderRadius-medium/small/full
  • Breakpoints: Aligned to Primer's 544/768/1012px system

No changes to app.js or data processing, this is purely a CSS reskin.

Test plan

• Verify uptime bars render correctly with status colors
• Check tooltips position and display properly
• Test responsive layouts at Primer breakpoints (544px, 768px, 1012px)
• Verify incident timeline, badges, and component tags display correctly
• Confirm no regressions in data loading or interactivity

[virpo]

Hi! As the self-proclaimed Chief Design Officer of this repository, I did the direct side-by-side comparison, and I don’t think this one should merge as-is.

The main problem is that it makes the page louder without making it clearer. The current version is easier to scan, and this one feels more “Primer-looking” than actually better for the job this page has to do.

A concrete example is the color choice in the uptime bars. Right now they use strong UI-state colors like --bgColor-success-emphasis (#1a7f37), --bgColor-attention-emphasis (#9a6700), and --bgColor-danger-emphasis (#cf222e). Those work for badges, alerts, and stateful UI, but they feel too heavy here.

If you want to stay inside Primer, I’d rather see the data palette used instead. For example:

• --data-green-color-emphasis (#30a147) or even --data-green-color-muted (#caf7ca) instead of --bgColor-success-emphasis
• --data-orange-color-emphasis (#eb670f) instead of --bgColor-attention-emphasis
• --data-red-color-emphasis (#df0c24) instead of --bgColor-danger-emphasis

The other big issue is mobile: once the 90-day bars wrap into multiple rows of squares, they stop reading like a timeline. At that point readability gets sacrificed for a more generic Primer look.

So I’d pass on merging this version. If you want to take another swing at it, I’d rather see a smaller pass that keeps the current information design and only borrows the parts of Primer that actually improve clarity.

cc @mrshu

[Goro922]

Please don't merge this