Style guide
For the template owner
Everything the template is made of.
Change a colour or text style and it updates on every page.
Colors
Brand colors
Paper
#F5F1E8
Shade
#E9E3D4
Contrast
#FBF9F3
Ink
#14251F
Accent
#8C2F2B
Rule
Ink at 25%
Product colors
Nettle & Lime
#C9D8A8
Rhubarb & Rose
#F0C4C0
Elderflower & Sea Salt
#C3D4DC
Spruce Tip & Lemon
#93B8A8
Blackcurrant Leaf
#C9B8D4
Chamomile & Pear
#F2DDA0
Product line colors
Nettle & Lime
#7FA03C
Rhubarb & Rose
#D4756C
Elderflower & Sea Salt
#5F93B5
Spruce Tip & Lemon
#3F8468
Blackcurrant Leaf
#8A62A8
Chamomile & Pear
#D2A21F
Type
H1 · Display
Picked slowly.
Fraunces Regular · 96 px desktop, 72 tablet, 48 phone · Line height 0.95 · Letter spacing −0.03 em
H2 · Heading
Short list, long walks
Fraunces Italic · 60 px desktop, 48 tablet, 38 phone · Line height 1.02 · Letter spacing −0.025 em
H3 · Title
Nettle & Lime
Fraunces Regular · 28 px desktop, 26 tablet, 22 phone · Line height 1.15 · Letter spacing −0.01 em
H4 · Heading 4
Cold-steeped for eighteen hours
Fraunces Regular · 22 px desktop, 21 tablet, 20 phone · Line height 1.2 · Letter spacing −0.01 em
H5 · Heading 5
Picked on the first dry morning
Fraunces Regular · 19 px desktop, 18 tablet and phone · Line height 1.25 · Letter spacing −0.005 em
H6 · Heading 6
One batch a year, then it is gone
Fraunces Regular · 17 px on every screen · Line height 1.3 · Letter spacing 0
Code
The script sprig-page-colour reads the PRODUCT list and the field takes amount | unit | description.
JetBrains Mono Regular · 0.86 em of the text around it · On Shade, sharp corners · An inline code style, used for the names of scripts, components and fields on the owner pages only · SIL Open Font License
Body
A plant or two, cold water and bubbles. Nothing you need a dictionary for.
Inter Regular · 16 px desktop and tablet, 15 phone · Line height 1.5 · Letter spacing −0.02 em
Label
Sparkling botanical water
Inter Medium · 12 px on every screen · Uppercase · Line height 1.3 · Letter spacing 0.1 em
Links
Text link
Used inside running text, like this link to the components page. A hairline under the words, darker on hover.
Nav link
Spacing
Page
The content is 1200 px wide at most. Side padding is 60 px on desktop, 40 on tablet and 20 on phone.
Between sections
120 px on desktop, 80 on tablet and 64 on phone. Set as bottom padding on each section, so sections can be reordered freely.
Heading to content
48 px from a section heading to what follows on desktop and tablet, 32 on phone.
Grids
32 px between columns of cards, 48 where a grid has two wide columns. Rows in a grid sit 60 px apart.
Inside a card
20 px from a photo to its text. Text in a group sits 8 or 12 px apart.
The scale
Every gap and padding comes from one scale: 4, 8, 12, 16, 20, 24, 32, 48, 60, 80 and 120 px. Pick the nearest step instead of a new number.