The Purlin design system, on one page.

Style guide

The Purlin system.

Every color, type style, component, and token in one place — your reference while customizing the template.

Color palette

Cream

#F4F1EA

Page background

Forest

#283730

Primary dark

Orange

#CE4318

CTA accent only

Ink

#1F2823

Body text

Card

#FBFAF6

Surfaces

Bronze

#B1814A · eyebrows

Sand

#D9B483 · on dark

Typography & headings

/* Modular scale · 1.25 ratio · 16px base */
Display  61   clamp(40px, 6vw, 61px)  // hero H1
H1       49   clamp(34px, 5vw, 49px)
H2       39   clamp(28px, 4vw, 39px)
H3       31   H4 25   H5 20
Body     16–19  Small 13–14

Roofs built to outlast Texas weather.

48 / 600

Heading 2

36 / 600

Heading 3

28 / 600

Heading 4

22 / 600

Heading 5

18 / 600

Heading 6

15 / 600

Body paragraph in Hanken Grotesk. The quick brown fox jumps over the lazy dog, and an inline link sits naturally inside the sentence.

Unordered

Tear-off & haul-away
Synthetic underlayment
Ridge-vent ventilation

Ordered

Inspect
Quote
Install

“A blockquote — used for testimonials and pull quotes throughout the template.”

Buttons & states

Primary

Get a free quote

Hover lifts & darkens · arrow slides

Secondary

View our work

Border-first · fills on hover

Ghost / link

Learn more

Inline content links

Focus-visible

Keyboard focus

3px forest ring, 3px offset

Form fields

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Radius & spacing tokens

Border radius

6px

buttons / inputs

8px

cards / bento

12px

form cards

pill

chips / badges

Spacing scale

all multiples of 8px

8pxtight inline gaps

16pxcard gaps

32pxcolumn gaps

56pxpage gutters

80pxsection padding

Components

Reusable components used across the template. Service cards, review cards and more are driven by the CMS — see the Instructions page for editable fields.