Design system
Everything the template is made of.
Six colours, nine text styles, three link styles and four components. Change a style in Assets and every page follows.
Colours
Ink
#111111
Text, buttons, the logo.
Muted
#8A8A8A
Labels, captions, secondary text.
Line
#E6E6E6
Dividers and input borders.
Fill
#F2F2F2
Image placeholders and quiet surfaces.
Paper
#FFFFFF
Page background.
Selection
#2E7DF6
Selection boxes and focus.
Type
Everything is 13 pixels. Hierarchy comes from weight, colour and space, never size. Inter for words, Geist Mono for labels and data.
Heading. Say it beautifully.
Inter 500, 13/16, h2
Sans. Say it beautifully.
Inter 400, 13/16
Sans Muted. Say it beautifully.
Inter 400, 13/16, Muted
Mono. Say it beautifully.
Geist Mono 400, 13/16
Mono Muted. Say it beautifully.
Geist Mono 400, 13/16, Muted
Prose. Say it beautifully.
Inter 400, 13/20, for long text
Prose Heading. Say it beautifully.
Inter 500, 13/20, h3
Prose Heading 1. Say it beautifully.
Inter 500, 13/20, h1
Prose Heading 2. Say it beautifully.
Inter 500, 13/20, h2
Links
Underline. Calls to action in text.
Quiet. Navigation and footer. Turns grey on the current page.
On Photo. White, for links over images.
Components
Button. Default, hover, sending and sent states. Used in forms.
Can I change the colours?
−
Yes. Edit the six colour styles in Assets and the whole site updates.
Question. Open and closed, for FAQs on Pricing and Support.
Also in Assets: Navigation (desktop, phone and open menu), Feature Phone (scroll-driven screens), Post Preview (journal rows with a cursor image) and Flash Sequence, the code component that flashes through your screens in the hero.
Phone. Drop in any screen.
Spacing and shape
Page margin
32px, 20px on phone
Columns
Label on the left, 680px of content on the right
Section spacing
64px between sections, 96px after the page header
Radius
8px on images, cards and inputs
Borders
1px Line, on top of rows only
Images
Direct flash, hard shadow, one saturated colour behind
Motion
Appear
Fade up 8px, 0.5s, ease out, on scroll
Type on
Headlines type in letter by letter
Hover
Links fade to Muted in 0.2s
Reduced motion
Respected everywhere, including Flash Sequence