The Purlin design system, on one page.

Style guide

The Purlin system.

The core colors, type styles, buttons, form fields and cards used across the template — your quick reference while customizing it.

Color palette

Cream

#F4F1EA

Page background

Forest

#283730

Primary dark

Orange

#CE4318

CTA accent; also the current-page nav underline, headline caret and focus states

Ink

#1F2823

Body text

Card

#FBFAF6

Surfaces

Bronze

#8B653A · eyebrows

Sand

#D9B483 · on dark

Typography & headings

/* Modular scale · 1.25 ratio · 16px base */
Display  61   61px / 48px / 36px  (desktop / tablet / mobile)
H1       49   49px / 40px / 32px
H2       39   39px / 32px / 26px
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 — available for quotes and callouts.”

Buttons & states

Primary

Get a free quote

Hover lifts & darkens

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 (primary button)

Form fields

Thanks — we'll call you shortly.

Something went wrong. Please call us or try again.

Radius & spacing tokens

Border radius

6px

most buttons

8px

cards / bento

12px

contact form

pill

chips / badges

Spacing scale

a few of the Spacing variables

8pxSpacing/200 (0.5rem)

16pxSpacing/16px

32pxSpacing/32px

56pxSpacing/56px

80pxSpacing/80px

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.