007Gridline
A white page drawn as a spreadsheet: hairline cells, medium-weight Inter, one black button, and statements that start in ink and fade to grey.
Use it: tell your agent
make my web app in 007
The signature
Structure is a visible grid of 1px cool-grey cells, and the grid itself is the design, as in a spreadsheet. Nearly all type is one weight (Inter 500) on white. Emphasis comes from ink versus slate grey, never from bold. Big sentences begin in near-black and continue in grey. The only solid dark object is the primary button.
Credit
After Attio (attio.com), the light, crisp CRM. Our own re-making on fictional content, not affiliated. Visit attio.com
The preview is our own re-making in free fonts, with our own sample content. Nothing from the source is shown here.
Palette
- paper#FFFFFF
- tint#FAFAFB
- fill#F3F4F6
- ink#1C1D1F
- text#242629
- sub#505967
- muted#666F7D
- faint#8F99A8
- cell#EEEFF1
- edge#E4E7EC
- black#101010
- state chips#EDFCF4 / #CBF7E1 / #0D6B43
Fonts
- DisplayInter500, 600
- TextInter500, 600
- MonoJetBrains Mono400
Sign in to see the full guide
The guide is the whole recipe for Gridline: type sizes, colour roles, spacing, layout, components, and the rules your agent must never break. It is free with a DevThrottle account.