Design system
Style guide
Every colour, text style and component in TERRA. Build new pages from these - never from raw values.
01 - Colour
Colour
Always use a colour style. Alpha scales cover text and lines on photos and dark bands.
Base/Chalk
Page background.
Base/Stone
Soft bands and image plates.
Base/White
Cards, fields, text on photos.
Brand/Aubergine
Dark bands and primary buttons.
Brand/Pale Lilac
Soft accent bands and chips.
Brand/Mauve
Accent text on Aubergine.
Brand/Aubergine Clear
Hidden underline state (transparent).
Text/Graphite
Headings and primary text.
Text/Slate
Body copy and meta.
UI/Mist
Hairlines and dividers.
UI/Mist Alpha 50
Soft dividers.
UI/Border Grey
Field and swatch borders.
Graphite Alpha/15
Header border.
Graphite Alpha/20
Light borders.
Graphite Alpha/40
Link underlines.
White Alpha/8
Surfaces on dark.
White Alpha/12
Lines on dark.
White Alpha/55
Faint text on dark.
White Alpha/70
Lines and drawings on photos.
White Alpha/75
Footer text on Aubergine.
White Alpha/80
Body text on photos.
White Alpha/85
Strong text on photos.
White Alpha/90
Header links on photos.
Overlay/Chalk Glass
Tags on images.
Overlay/Night 35
Dark overlays.
02 - Typography
Typography
Instrument Serif for display, Inter for reading and UI, IBM Plex Mono for data. Colour can change on the layer; font, size and weight never.
Display/Hero
130 / 104 / 76 / 50 - hero, once per page
Objects for quiet rooms
Display/Statement
96 / 72 / 52 / 38 - statements
Made to be lived with.
Display/Wordmark
230 / 170 / 120 / 64 - footer wordmark only
TERRA
Heading/H2
72 / 56 / 44 / 34 - section headings
Selected pieces
Heading/H3
60 / 48 / 40 / 34
Materials and making
Heading/H4
48 / 40 / 36 / 30
Visit and trade
Heading/H5
36 / 32 / 30 / 26 - card headings
The studio
Title/Product
30 / 26 / 24 - product names
Arc Lounge Chair
Title/Price
42 - product page price
$2,849
Title/PDP
34 Inter - product page title
Arc Lounge Chair
Title/Accordion
24 Inter - accordion titles
Materials and care
Title/Small
20 - small titles
Oak, bouclé
Body/Lead
18 light - intros
Furniture and objects shaped by hand, in small runs.
Body/Regular
16 light - paragraphs
Each piece is made to order and finished by one maker.
Body/Small
14 - captions
Lead time 8-10 weeks.
Label/Eyebrow
12 caps wide - eyebrows
Collection 04
Label/Nav
14 caps - navigation
Collection
Label/Meta
12 caps - meta
Oak · Bouclé
Label/Meta Strong
12 caps medium
In stock
Mono/Caption
12 mono caps - captions
Fig. 02 - Joint detail
Mono/Price
16 mono - card prices
$2,849
Mono/Note
12 mono - notes
Ships in 6 weeks
UI/Button
16 medium - buttons
Add to cart
UI/Link
16 medium - links
View the collection
UI/Link Small
14 medium - small links, quantity
Read more
Wordmark
24 caps - header logo
TERRA
03 - Components
Components
Reuse these instead of rebuilding. Set label, link and content controls every time.
Button
Light on photos and dark, Dark on light, Ghost secondary.
Submit Button
Form submit on light (Default / Pending / Success / Error). Use Submit Button Dark on Aubergine.
Cart Button
Product page add to cart (Default / Loading / Added / Error / Sold Out).
Finish Swatch
Finish picker (Selected / Available / Unavailable).
Natural oak
Oatmeal wool bouclé
Available
Smoked oak
Oatmeal wool bouclé
Available
Product Card
Product grids - set image, name, material, price, tag and link.
Accordion
Product details and FAQs (Open / Closed).
Solid oak with a hard-wax oil finish. Wipe with a dry cloth.
Contact Form
Enquiries (General / Product enquiry / Trade).
04 - Layout
Layout and spacing
Every page uses the Main layout template (header and footer). Never add a header or footer to a page.
Desktop 1920, Laptop 1200, Tablet 810, Phone 390
Max width 1792px inside each section
64px Desktop, 48px Laptop, 40px Tablet, 24px Phone
144 / 112px Desktop, 128 / 96 Laptop, 112 / 80 Tablet, 96 / 64 Phone (top / bottom)
Chalk page, Stone and Pale Lilac soft bands, Aubergine dark bands with white text
Square corners, thin Mist hairlines, full-bleed photos under Graphite scrims, no shadows