Style guide

Colour

• Ink --ink: #0E0E0E Body text and headlines
• Paper --paper: #F7F5F0 Page background
• Surface --surface: #FFFFFF Cards and form fields
• Accent --accent: #1F3FBF Hover, focus, small highlights
• Muted --muted: #8A8A85 Large meta text and marks
• Rule --rule: #E2DFD8 Hairline dividers
• Muted text --muted-text: #6B6B66 Small captions
• Accent soft --accent-soft: #D5DCF5 Image backgrounds only

Type scale

Headlines use Playfair Display. Everything else uses Inter. These six sizes are the only font sizes in the template.

--fs-display
3.5rem to 5rem, line-height 1.05

Brimvold

--fs-h1
2.5rem to 3.25rem, line-height 1.15

Page title

--fs-h2
1.75rem to 2.25rem, line-height 1.15

Section heading

--fs-h3
1.25rem to 1.5rem, line-height 1.15

Card or list heading

--fs-body
1rem (16px), line-height 1.65

Body text is Inter at 16 pixels. Lines stay under about 68 characters so they are easy to follow.

--fs-small
0.875rem (14px), line-height 1.65

Captions, labels, dates and buttons.

Buttons and links

Primary button Secondary button

Text link and Tag

Form elements

Grid and spacing

Twelve columns with a 24px gutter, up to 1320px wide. Side padding is 24px on phones and 48px from 1024px.

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

• --s1 8px
• --s2 16px
• --s3 24px
• --s4 40px
• --s5 64px
• --s6 96px
• --s7 144px

Components

Osk Ceramics

Identity2025

Accordion, open

Built with the details element, so it works with a keyboard and without JavaScript.

Accordion, closed

Add the open attribute to show a panel by default.