Hartwell & Kessler — Template system
Style Guide

Bricolage Grotesque, 200–800

Stone, ink and one blue
Every value is a variable
Edit once, update everywhere
[01]
Colour
Brand
Stone 100
#EDEBE6
Stone 300
#D6D3CC
Concrete 600
#67645E

Concrete 400

#9C988F

Ink 900
#141414

Ink 700

#33322F

Blue 500
#4E69C9
Blue 700
#273C8B

Blue 300

#8FA2E6

White
#FFFFFF
Semantic
Text
Ink 900
Text Muted
Concrete 600
Text Inverse
Stone 100
Text On Accent
White
Background
Stone 100
Background Inverse
Ink 900
Border
Stone 300
Accent
Blue 500
Accent Hover
Blue 700

Semantic — Inverse mode

Text

Stone 100

Text Muted

Concrete 400

Text Inverse

Ink 900

Text On Accent

Ink 900

Background

Ink 900

Background Inverse

Stone 100

Border

Ink 700

Accent

Blue 300

Accent Hover

White

[02]
Typography
Display — 9rem / Black
Hartwell
H1 — 5.5rem / Extra Bold

Quiet rooms, open light

H2 — 4rem / Bold

Houses made to last

H3 — 3rem / Semibold

Architecture and interiors

H4 — 2.25rem / Medium

A studio for considered spaces

H5 — 1.75rem / Medium
Material, proportion and light
H6 — 1.375rem / Medium
Residential, hospitality, retail
Body Large — 1.25rem

We design homes and interiors that feel calm on the first day and better after ten years.

Paragraph — 1.125rem

Every project starts with the site: how the light moves, where the wind comes from, what the neighbours built. From there we draw slowly, test materials by hand and keep the number of ideas small. Read about our process.

Small — 1rem
Lime plaster, oak, honed travertine and blackened steel.
Caption — 0.875rem
Project 04 — Residence, 2025
Blockquote
A good room does not ask to be looked at. It asks to be lived in.
Unordered list
  • Architecture
  • Interior design
  • Renovation and restoration
Ordered list
  1. Site study and brief
  2. Concept and design
  3. Delivery and handover
[03]
Rich text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

A house on a quiet slope

The brief was simple: one floor, long views, and rooms that stay cool through August. We set the house low into the hill so the roof reads as a line of stone from the road.

Materials

Lime plaster inside and out, oak floors, travertine in the wet rooms. Nothing is painted that does not need to be.

We wanted a house that would look better with every winter.

Project facts

Residence, 240 m², completed 2025. Architecture and interiors by the studio.

[04]
Spacing
Triple Extra Small — 0.25rem
Double Extra Small — 0.5rem
Extra Small — 0.75rem
Small — 1rem
Medium — 1.5rem
Large — 2.5rem
Extra Large — 4rem
Double Extra Large — 6rem
Section — 9rem
[05]
Layout
Site max — 100rem
Maximum width of the page content on large screens.
Text max — 42rem
Comfortable line length for long text and journal posts.
Page gutter — 2.5rem
Side padding of every page. Steps down to 2rem, 1.5rem and 1.25rem on smaller screens.
Border — 1px
One hairline, in the Border colour, draws every line of the grid.
Radius — 0px
Sharp corners everywhere, like the edge of a wall.
[06]
Forms

Thank you. Your enquiry has reached the studio and we will reply within two working days.

Something went wrong. Please check the fields and try again.

[07]
Buttons