[detail — rings on linen]
Reference
Component sheet
Every token, type style and component used across the site. All values come from the :root block in brand.css — no hard-coded hex anywhere else.
Color tokens
--PageBgColor
Warm Ivory
--color5
Soft Cream
--color1
Charcoal
--color4
Warm Taupe
--color3
Sage Green
--color2
Olive Earth
--PrimaryButtonHoverColor
--DisabledColor
--reverse1
--colorGold
Antique Gold · interaction only
Typography
Display script · parlare 400 · 48–80px fluid · one per page
Grace and beautyH1 · bryant-web 300 · caps · 0.12em · 40–64px fluid
A venue that shinesH2 · bryant-web 700 · sentence case · 28–36px
Section headingH3 · bryant-web 700 · 18–22px
Card headingEyebrow · bryant-web 700 · caps · 0.18em · 13px · --color2
The ExperiencesBody · --font3Family (Avenir Next / Adobe: Brandon Text) 400 · 17–18px · line-height 1.7 · max 68ch
This is body copy. A neutral, timeless sans carries longer paragraphs and reads cleanly at 17 to 18 pixels, with a measure capped near sixty-eight characters so the line never outruns the eye. Bryant stays for headings, eyebrows, buttons and nav.
Pull quote · bryant-web 300 · Bryant is kept for display-weight quotes
The estate is yours for the whole of it.
Small / caption · bryant-web 400 · 14px · --color4
Photography credit, drive-time note, form hint.
Links + nav · gold runs left to right along the rule, 420ms
No italics licensed. Emphasis comes from weight, letterspacing or color.
Weight · letterspacing · color
Decided
Body font — Avenir Next
Bryant stays on headings, eyebrows, buttons and nav. Avenir Next carries every paragraph: geometric humanist, open circular bowls, generous x-height — warmer than a neutral grotesque and still unmistakably modern.
--font3Family · Avenir Next 400 · 17–18px · line-height 1.7
Morning fog lifts off the ridgeline. Coffee on the porch. Somewhere below, chairs are being set in the grass. Our family built this place for the hours that matter most, and we keep it quiet enough that you can hear them.
Port note
The stack runs Avenir Next → Avenir → Nunito Sans, which renders correctly on macOS and iOS but not Windows. For the Treepl build, add Brandon Text (or Museo Sans) to Adobe kit qzp4fkc and repoint --font3Family — one token, every page.
Buttons
Hover and keyboard focus run the same gesture. The box grows about 4% in every direction — quick, then easing into the final size. Only the box grows: the fill and border live on a layer behind the label, and that layer is what scales — the label itself never grows, moves or resamples. Because the growth is a transform the footprint never changes, so nothing else on the page can shift, and the layer's border width is counter-scaled so the hairline still renders as a clean 1px at rest and at full size, and the label is never resampled: its weight and brightness hold dead steady. The 1px border goes antique gold (--colorGold) over 300ms — one highlight color, interaction only, never used for type. Labels hold their color. No shadows, no glows, no second line. Under prefers-reduced-motion only the color change remains.
.btn.btn-primary
Plan Your Experience.btn.btn-primary — hover
Plan Your Experience.btn.btn-secondary
Explore the Estate.btn.btn-secondary — hover
Explore the Estate.btn.btn-ghost
Learn more ⟶.btn.btn-ghost — hover
Learn more ⟶.btn.btn-primary.btn-quiet.btn-sm — card CTA, soft cream
Learn more.btn-quiet — hover
Learn more.btn.disabled
.btn.btn-primary.on-dark
Dividers, stats, icons
.divider — 1px --BorderBrandColor
.ornament — 60px --color2
.ornament.ornament-center
.stat
70Acres
.ico in .ico-circle — thin line, 1px stroke, never filled
Mountain · diamond · heart · sparkle · check
Cards, quotes, fields
.card-ed — transparent
.card-ed.bordered
[CLIENT PHOTO — named subject goes here]
.quote / .field
Quotes are verified reviews only. Never written for the client.Google review
Underline field. Gold runs along the existing bottom rule on focus — no outline, no second line.
Photography placeholders
Two kinds only. Client photo is mandatory for anything that shows the place, the buildings, the grounds or real people — those may never be generated or approximated. Detail shot may be filled with tightly cropped, non-identifiable imagery in the brand's warm grade.
.ph.ph-req — client photography required
[GRAND HALL — chandeliers, reception set for 200]
.ph.ph-detail — permitted detail imagery
[detail — bouquet and ribbon, warm bokeh]
Spacing scale
--sp-xxs · 8
--sp-xs · 16
--sp-sm · 24
--sp-md · 40
--sp-lg · 64 · .sec-md padding
--sp-xl · 96 · .sec-lg padding
--sp-xxl · 128 · .sec-xl padding
Section wrappers: .sec.sec-sm · .sec.sec-md · .sec.sec-lg · .sec.sec-xl. Fills: .sec-cream · .sec-dark. Never inline padding on a section.