Brand
Runtime, drawn. Take what you need.
The mark, the wordmark, the colours, the type and the motion. Every value on this page is read from the files the site is built from, so what you copy is what ships.
Mark
A ribbon folded into an R, in three graphite faces. It is always drawn in its own greys, and turns over for dark grounds.
Face colours
- Foot
- Top
- Body
- Clear space. Keep a quarter of the mark’s width empty on every side.
- Smallest size. 16 px on screen. Below that the faces merge.
- Its own greys. Never recolour a face, fill it with the blue, or put a gradient, shadow or outline on it.
- Upright. Never rotate, stretch or crop it.
Wordmark
The name is set, not drawn: Geist, tight, one weight heavier than a heading.
- Face
- Weight
- Tracking
- at 25px
- Case
- Capital R, the rest lower. Never all caps.
Colour
Every colour has a light and a dark value, and the page follows the device. Press a name or value to copy it.
Ground and ink
Almost everything is grey. The page, the sheets on it, and the words.
- Page
- Sheet
- Well
- Control
- Line
- Ink
- Copy
- Muted
Signal
The one blue, and the two colours that say something worked or did not.
- Blue
- Good
- Error
Products
One hue a product, for charts and marks. Checked for colour-blind separation in both themes.
- Sandbox
- Volume
- Image
- Yellow
- Magenta
- Green
- Violet
Type
Two faces from one family. Geist for everything read, Geist Mono for everything typed. Both are free under the SIL Open Font License.
Aa
Geist
Regular 400Medium 500Wordmark 580
{}
Geist Mono
runtime sandbox run13 px beside 14 px text
Motion
Quick off the mark, long at the end, so things land rather than snap. Nothing grows out of a point and nothing bounces.
- Site curve
- Product curve
- Quick
- Slow