Measured from griffin.com's live styles. Warm stone on near-black, a literary serif for headlines, mono for everything that is a label, a button or a number. Structure comes from 1px lines, not boxes, shadows or tints.
01Principles
Six rules, all taken from the site.
Flat surfacesCards share the page fill (#0c0c0b) and differ only by a 1px #363533 border. No gradients, glass, shadows or tinted fills.
Ruled structureLayouts are grids divided by hairlines, edge to edge. A vertical rule splits two-column sections.
Three voicesSerif 300 for headlines, one italic word for emphasis. Sans for prose. Mono for labels, buttons, status and every figure.
Colour is dataNeutral by default. Green, teal, orange and red appear only as a state dot plus a text label, never alone.
Numbered sectionsMono "01 / 02 / 03" prefixes order content, as in the site's own section list.
One textureA dotted grid, used once per view, stands in for the site's line-art illustrations.
02Colour
Stone ramp for surface and text; the single hairline is stone-900. Signals are text-on-dark tints so contrast holds.
Text on #0c0c0b: fg 16.5:1 · muted (stone-600) 6.3:1 · positive #85eda5 13:1 · negative #f85156 5.6:1
03Typography
Cambon, Söhne and Söhne Mono are licensed, so system fallbacks stand in. Sizes and tracking are the site's own.
Display · serif 300 · 72/72 · −2%The bank you can build on
H2 · serif 300 · 40/44 · −4%Designed to help you build
H3 · serif 300 · 24/28Hitless upgrade in progress
Body · sans 400 · 14/21Replica lag is within budget across all three sites. Last drill passed nine days ago.