Design
On this page 5
The palette and the type scale, so the marketing page and the application agree about what this product looks like. The colours below are read out of the stylesheets that declare them, which is the only way a page like this stays true: a written-down palette is a palette that describes last month.
Declared in resources/views/index.stx, resources/views/layouts/app.stx, resources/views/layouts/marketing.stx.
Generated from the stylesheets that declare it.
The rule
A token more than one surface declares must have the same value in all of them, in both themes.
tests/unit/design-tokens.test.ts fails when it does not, which is the part that keeps this
page honest: two copies of a palette agree right up until somebody is in a hurry.
A token only one surface declares is not a disagreement. The diff viewer's added and removed line colours have no business on a marketing page, and a marketing gradient has none in a code review.
Colour, light
| Token | Value | Declared in |
|---|---|---|
--accent | #0f6d72 | 3 |
--accent-quiet | #e2f0f0 | 3 |
--accent-text | #0b565a | 3 |
--bg | #fbfbfa | 3 |
--line | #e2e4e3 | 3 |
--line-strong | #cdd1d0 | 3 |
--mono | 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace | 2 |
--muted | #5d6b6e | 3 |
--ok | #14663c | 2 |
--ok-bg | #e4f3ea | 2 |
--on-accent | #ffffff | 3 |
--pill-text | #4c585b | 3 |
--r-control | 10px | 3 |
--r-panel | 14px | 3 |
--shadow | 0 1px 2px rgb(18 25 27 / 0.05) | 3 |
--surface | #ffffff | 3 |
--surface-tint | #f2f4f4 | 3 |
--text | #12191b | 3 |
Colour, dark
Not a filter over the light palette. Dark is designed rather than derived: the same hue at the same lightness reads heavier on a dark ground, so the accent lifts and the text drops short of white to keep a page from vibrating.
| Token | Value | Declared in |
|---|---|---|
--accent | #4ec5c9 | 2 |
--accent-quiet | #14292b | 2 |
--accent-text | #7fd8db | 2 |
--bg | #0c1113 | 2 |
--line | #222e31 | 2 |
--line-strong | #334247 | 2 |
--muted | #9aa9ac | 2 |
--on-accent | #08201f | 2 |
--pill-text | #a7b5b8 | 2 |
--shadow | none | 2 |
--surface | #121a1c | 2 |
--surface-tint | #162023 | 2 |
--text | #eef2f2 | 2 |
Type
Geist for interface and copy, Geist Mono for code, diffs, shas and anything a reader might need to compare character by character.
- Display, the landing hero:
clamp(2.6rem, 6.4vw, 4.4rem), tight tracking. It is the only place on the site that shouts. - Section heading:
clamp(1.9rem, 3.6vw, 2.6rem). Fluid rather than stepped, so a phone gets a proportional heading rather than the desktop one squeezed. - Body: 16px on the marketing pages, 15px in the application. The application is denser on purpose - it is read for hours, at a screen's distance, next to code.
- Code and diff rows: 12.5px to 13.5px monospace, with the gutter a size smaller than the line it numbers so the numbers recede.
- Labels and pills: 12px to 13px, medium weight, never uppercase in the application. Small capitals are a marketing device; in a list of pull requests they slow reading down.
Shape
Panels take the larger radius, controls the smaller, and status pills are the only fully round thing on the page. Shadows are one hairline in light and none in dark, because a shadow on a dark ground is a smudge.