Design teardown
GitHub
A dense utilitarian system. Blue means action, gray borders mean structure, color means status.
github.com
Design character
A tool that expects you to stay a while
GitHub’s interface is utilitarian and dense in the Primer sense. Fourteen pixels is a normal size. Blue is for links and primary actions. One-pixel gray borders hold lists, boxes, and tables together. Success green, danger red, and attention yellow are semantic. They are not a brand wash. The feeling is: you are here to do something, and the chrome will not perform.
Typography
Marketing can use Mona Sans at a larger size. The product voice, which is the one people recognize, is a system sans at 14px with a clear weight step from 400 to 600. Mono appears for code, paths, and commits. Hierarchy is weight, color, and the occasional 20px title. It is not a display-type system.
Color system
White canvas, near-black text, a blue accent for links and primary buttons, and a gray border that outlines almost everything. Green, red, and yellow report state. Purple and pink are not part of the chrome.
Spacing and geometry
A 4px base used in an 8px rhythm. Controls are compact. Lists breathe just enough to scan. The density is a feature: you can see a lot of repository without scrolling past decoration.
Layout
The product is a left nav or top tab bar, then a wide content column of lists and boxes. Marketing uses a similar restraint at a larger size. Alignment is left. Tables and definition lists are first-class, not a fallback.
Motion
Motion is almost entirely state change. Hover fills a row or a button. Menus appear quickly. Nothing eases around for its own sake.
UI fingerprint
- Blue means a link or a primary action. It is not decoration. If a word is blue, you can probably activate it. Using blue as a heading color or a background wash would break a rule the whole interface depends on.
- 1px gray borders are the skeleton. Almost nothing floats. The border color is consistent and visible. Regions are boxes. Shadows are for overlays only. A card with a soft shadow and no border is a different design system.
- Type stays at product size. Drama is not the goal. 14px body and 14px semibold buttons make the page feel like software. A huge hero size inside the product frame would fight the reason the site feels useful.
- Spacing follows a tight 4 and 8px rhythm, which is why it feels dense. Opening the padding “to let it breathe” removes the character. Density here is care, not neglect. Add space in 8px steps, not in handfuls.
- Green, red, and yellow are semantic. They never become the brand. Success green on a button means a positive action. Danger red means destruction. They should not theme an illustration or a marketing gradient.