Get a Quote
Design System

Property Plus — Style Guide

Every visual decision on the site is a token defined once in css/styles.css. Change a token here and it updates everywhere — and each maps cleanly to a Webflow Variable.

01 — Colour

Colour tokens

Sampled from the Property Plus logo (the gold gradient) and the current brand's espresso dark.

Brand gold

Gold 100
#F7EAB8
--gold-100
Gold 200
#EFDA8F
--gold-200
Gold 300
#E3C566
--gold-300
Gold 400
#D4AF37
--gold-400
Gold 500 · core
#C79A3E
--gold-500 / --color-accent
Gold 600
#A9762E
--gold-600
Gold 700
#855A21
--gold-700

Metallic gradient

--gradient-gold   ·   used on the logo, buttons, icons and headline accents

Espresso & ink

Ink 900 · espresso
#150B0A
--ink-900 / --color-heading
Ink 800
#241614
--ink-800
Ink 700
#3A2A25
--ink-700
Ink 600 · body
#4A423C
--ink-600 / --color-text
Ink 400 · muted
#857B71
--ink-400 / --color-text-muted
Ink 200
#C9BFB1
--ink-200

Paper & surfaces

Paper · page bg
#FBF7EE
--paper / --color-bg
Paper 2 · tan
#F4ECDC
--paper-2 / --color-surface-alt
Surface · white
#FFFFFF
--surface
Line · border
#EADFCB
--line / --color-border
02 — Typography

Type system

Fraunces for headings (warm, editorial), Inter for body and UI, Cinzel for the logo wordmark.

Aa
Fraunces · --font-display
Headings, display, quotes
Aa
Inter · --font-body
Body, UI, labels
Aa
Cinzel · --font-logo
Logo wordmark only
Display · --text-h1Outdoor living, built to last
H2 · --text-h2Outdoor living, built to last
H3 · --text-h3Outdoor living, built to last
H4 · --text-xlOutdoor living, built to last
Lead · text-size-largeDecks, pergolas and pool surrounds crafted for the way you live outside.
Body · text-size-mediumDecks, pergolas and pool surrounds crafted for the way you live outside on the Sunshine Coast, finished properly and built to last.
Small · text-size-smallDecks, pergolas and pool surrounds crafted for the way you live outside.
Eyebrow · .eyebrowSunshine Coast Builder
03 — Spacing

Spacing scale

A single rem-based scale drives every gap, padding and margin — so rhythm stays consistent across the site.

--space-3xs · 0.25rem
--space-2xs · 0.5rem
--space-xs · 0.75rem
--space-sm · 1rem
--space-md · 1.5rem
--space-lg · 2rem
--space-xl · 3rem
--space-2xl · 4rem
--space-3xl · 6rem
--space-4xl · 8rem
04 — Radius & elevation

Corners & shadows

Radius

sm · 8px
md · 14px
lg · 22px
xl · 32px

Shadow

shadow-sm
shadow-md
shadow-lg
shadow-gold
05 — Buttons

Buttons & links

Primary Secondary Ghost Large primary Small Text link
Tag / pill   Noosa   Composite
06 — Forms

Form elements

Send enquiry
07 — Components

Building blocks

Service card & value card

Decking

Decking

Hardwood and composite decks built for the Queensland climate.

Explore

Compact card

Icon-led card with no media, used in dense grids.

Value card

Gold gradient icon tile with a heading and short supporting line.

Process step, check list & stat

01

Consultation

An on-site visit to understand your space.

  • Engineered subframes
  • Concealed fixings
15+
Years building on the Coast

Accordion

The answer opens with a smooth height transition and the plus rotates into a cross.

Each item is independent. Built with a tiny bit of JavaScript in main.js.