Design System
Style Guide
Every colour, text style and component used across SOLUM. Build new pages from these - never from raw values.
01 - Colour
Colour
Always apply a colour style. Tints for lines, overlays and text on dark live in their own folders.
Base / Paper
Page background; text on dark bands.
Base / Concrete
Light section bands.
Base / Ivory
Warm cards and the header glass.
Base / Linen
Soft alternate band.
Base / Mist
Outline wordmark, subtle fills.
Dark / Charcoal
Primary text and dark bands.
Dark / Graphite
Secondary dark surfaces.
Neutral / Stone
Muted text on dark.
Neutral / Ash
Labels, meta and numerals.
Accent / Moss
The single accent - use sparingly.
Text / Ash Muted
Faded words and hints.
Line / On Light
Hairlines on light bands.
Line / On Light Strong
Form and card borders.
Line / Blueprint
Drawing and blueprint lines.
Line / Stone
Scroll tracks.
Line / Charcoal
Arrow circles.
Line / Charcoal Soft
Link underlines.
Line / On Dark
Hairlines on dark bands.
On Dark / Line
Pills and borders on photos.
On Dark / Text Muted
Secondary text on dark.
Overlay / Charcoal Soft
Photo overlays.
Overlay / Charcoal Strong
Tags and badges on images.
Overlay / Ivory Glass
Sticky header background.
02 - Typography
Typography
Newsreader for display and reading, Geist for labels. Colour can change on the layer; font, size and weight never.
Display/XL
120 / 80 / 52 - page titles, once per page
Objects made slowly
Heading/H2
72 / 56 / 40 - section headings
Selected work
Heading/H3
40 / 32 / 26 - sub-sections
The studio
Heading/H4
24 / 22 / 20 - card titles
Oak bench, No. 04
Body/Lead
19 / 18 / 17 - intros
Furniture and objects built by hand in small numbers, from timber we know by name.
Body/Base
16 / 15 - paragraphs
Each piece is made to order in our workshop and finished with natural oils.
Body/Small
14 - captions, fine print
Lead time 10-12 weeks.
Label/Medium
13 / 12 caps - buttons, nav, eyebrows
View the collection
Label/Small
11 caps - meta and indices
01 - Studio
Display/Numeral
88 light - process step numbers
01
Display/Numeral S
56 light - step numbers (phone)
01
Brand/Logo
26 - SOLUM wordmark in header
SOLUM
Brand/Logo S
24 - compact header wordmark
SOLUM
Glyph/L
18 - arrow glyphs
→
Glyph/M
16 - arrow glyphs
→
Glyph/S
13 - arrow glyphs
→
03 - Components
Components
Reuse these instead of rebuilding. Set their text and link controls when you place them.
Submit Button
Every form submit (Default / Loading / Success / Error).
Piece Card
Collection items - inside a Pieces CMS list.
Journal Card
Journal posts - inside a Journal CMS list.
Journey Card
Timeline cards (Default / Highlight) - Charcoal bands only.
Phase 01
01 — Timber
Air-dried white oak boards, seasoned for two years in our yard.
Founder Card
Founder profile (Front / Phone).
Process Step
Numbered making steps (Default / Phone) - Charcoal bands only.
Index Row
Indexed list rows (Desktop / Phone).
Discipline Row
Expandable rows (Closed / Open).
FAQ Item
FAQ lists (Closed / Open).
How long does a commission take?
04 - Layout
Layout and spacing
Every page uses the Main Layout template (header + footer). Sections are full width with an inner container, max width 1824px.
144px top and bottom on Desktop, 96px Tablet, 80px Phone
48px sides on Desktop, 32px Tablet, 20px Phone
160px top, 72px bottom - Label/Small, Display/XL, Body/Lead (max 720px)
20-28px inside a heading, 48px to the content
Alternate Concrete and Charcoal; Paper for reading pages
Square corners, hairline borders, no shadows