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.
RuntimeOn light
RuntimeOn dark
The mark.A ribbon folded into an R.
On light
On dark
- Mark, adapts to themeSVG
- Mark for light groundsSVG
- Mark for dark groundsSVG
- App icon, rounded groundSVG
- Mark, drawing itselfSVG
- App icon, 1024 pxPNG
- App icon, 512 pxPNG
- App icon, 256 pxPNG
- App icon, 128 pxPNG
- App icon, 64 pxPNG
- App icon, 48 pxPNG
- App icon, 32 pxPNG
- App icon, 24 pxPNG
- App icon, 16 pxPNG
Its faces
- Top
- Body
- Foot
- 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, or put a gradient, shadow or outline on it.
- Upright. Never rotate, stretch or crop it.
The wordmark.Set, not drawn.
RuntimeWordmark
RuntimeLockup
- Face
- Weight
- Tracking
- Case
- Capital R, the rest lower. Never all caps.
Colour.Warm paper, ink, and meaning.
Every colour has a light and a dark value, and the page follows the device. Press a name or a value to copy it.
Paper and inkAlmost everything is warm grey: the page, the panels on it, and the words.
- Page
- Panel
- Raised
- Ink
- Copy
- Muted
- Line
- Strong line
SignalColour where it means something: done, running, failed.
- Done
- Running
- Failed
- Git
SeriesOne hue a machine or a series, in a chart or a picture.
- Blue
- Violet
- Pink
- Orange
- Teal
- Yellow
- Green
Type.Geist, and Geist Mono.
Aa
GeistEverything read. Regular for words, Medium for names.{}
Geist MonoEverything typed: commands, code, ids.- ShowcaseCheaper, faster, better.
- HeroCheaper, faster, better.
- TitleCheaper, faster, better.
- LedeCheaper, faster, better.
Download Geist from Vercel. Both faces are free under the SIL Open Font License.
Motion.Quick off the mark, long at the end.
- Short. Nothing enters in more than 300 ms, and exits take about 150. Never ease-in.
- From near, not from nothing. A thing arrives from 96% of its size, transparent, with a 2 px blur.
- Pressed. A control answers on pointer-down, to 97% of its size.
- Only transform and opacity move, so nothing makes the page reflow.