Design system

Style Guide

Typography
HeadingsText stylesRich text
Brand
Colors
UI
FormsComponents

Headings

H1 is set in Newsreader; H2 to H6 are Space Mono. Every level is bound to its own Size token, all derived from Size/Font Size, so the whole scale moves together when that one value changes.

All H1 Headings

Style via the tag selector
Size/H1 · Line Height/Display · Letter Spacing/Tight

Heading 1

All H2 Headings

Style via the tag selector
Size/H2 · Line Height/Display · Letter Spacing/Tight

Heading 2

All H3 Headings

Style via the tag selector
Size/H3 · Line Height/Display · Letter Spacing/Wide

Heading 3

All H4 Headings

Style via the tag selector
Size/H4 · Line Height/Large · Letter Spacing/Subtle

Heading 4

All H5 Headings

Style via the tag selector
Size/H5 · Line Height/Large · Letter Spacing/Subtle

Heading 5

All H6 Headings

Style via the tag selector
Size/H6 · Line Height/Large · Letter Spacing/Tight · uppercase

Heading 6

Text styles

Named paragraph and number styles included with the template. Each is a single class, so content pasted in by an editor stays on-system.

All Paragraphs

Style via the tag selector
16px · line-height 163% · tracking 0.8px

The land falls away on three sides and the valley opens beneath you. Mornings arrive slowly here; evenings stretch long across the western sky.

All Paragraphs

.u_body

16px · line-height 163% · tracking 0.8px

The land falls away on three sides and the valley opens beneath you. Mornings arrive slowly here; evenings stretch long across the western sky.

All Links

Style via the tag selector · underline · accent on hover

Explore the homesites

All Unordered Lists

Style via the tag selector

  • Protected open-space frontage
  • Architect-ready building envelopes
  • Trail access from the parcel

All Ordered Lists

Style via the tag selector

  1. Reserve your homesite

  2. Begin your home design

  3. Break ground with your builder

All Blockquotes

Style via the tag selector

The land sets the pace, and the architecture follows it.

Rich text

CMS Body fields render as Rich Text. Headings, paragraphs, lists, quotes, and links inside a Body field inherit the template's styles.

.u_rich_text

CMS Body content

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Body copy pasted or written into a CMS Rich Text field lands here and picks up the template's type styles automatically. Headings, paragraphs, lists, quotes, and links all inherit, so an editor can work in the CMS without touching the Designer and the page stays on-system.

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

Colors

Warm and near-monochrome. Ink and Sand carry the work; Coral appears only on interaction, on link and hover states, focus rings, and the price line. Muted olive and ink tones handle secondary text and hairlines. Shadowless by design.

Ink

#191713

Sand

#EFE7D7

Coral

#E0532A

Cream

#F0ECE2

Olive Muted

#8A8674

Ink Muted

#5A564C

Black

#000000

White

#FFFFFF

Grey 400

#999999

Grey 500

#666666

Grey 600

#333333

Forms

The form pattern used on the Contact page. Field labels, focus states, success and error messages are all styled here; rename the form and its fields in the form settings panel so submissions are readable in your inbox.

Contact Form

Email input with a visible label, submit button, and the success and error states below it.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Components

The three components in this template. Set content and variant per instance from the props panel; edits to the component itself update every page at once.

Pre Loader

No props - the full-screen intro overlay that covers the page on load. Used on Home and Homesites.

Navbar

Variant (Base / White) · Title · Menu links - the global fixed header. The White variant is used on the dark utility and legal pages. Shown live at the top of this page.

Footer

No props - the global site footer, carrying the navigation columns, the Licenses link and the Powered by Webflow credit. Present on every page and shown live at the bottom of this one.