Style Guide · Design Reference
Green-and-brass boutique warmth with a modern serif voice — the most feature-complete of the Lux family. Design style: Luxury (boutique · editorial-organic · earthy).
Warm off-white canvas dominates; deep estate-green (never black) carries high-contrast bands; brass is the single disciplined accent. Values are the exact tokens from styles.css.
Display: Fraunces (optical-size variable serif, weight ~380, opsz 40, italics for accents). Body / UI: Manrope. Headings use tight -0.01em tracking and 1.04 line-height.
Boutique estate
A design-forward practice
Featured listings
What we do (weight 500)
Section subheading
Minor label heading
Eyebrow label
Lede — a boutique practice founded in 2011, pairing editorial-organic warmth with an assured, modern serif voice.
Body copy set in Manrope at the base clamp size with a 1.65 line-height. Warm ink on canvas keeps long reads comfortable, while an italic serif accent lends editorial character to emphasis.
Small text — captions, meta, and fine print in muted warm grey.
Fluid clamp() scale for section rhythm and gutters, near-square radii for an architectural feel, and a single custom easing curve.
| Token | Value | Role |
|---|---|---|
--container | 1240px | Max content width |
--gutter | clamp(1.25rem, 0.6rem + 3vw, 3rem) | Inline padding / grid gap |
--space-section | clamp(4.5rem, 3rem + 7vw, 9rem) | Vertical section padding |
--radius | 2px | Buttons, inputs (near-square) |
--radius-lg | 4px | Cards, media, panels |
--ease | cubic-bezier(0.22, 0.61, 0.36, 1) | Standard easing |
--ease-out | cubic-bezier(0.16, 1, 0.3, 1) | Entrance / hover slides |
--t-fast / --t-mid / --t-slow | 0.25s / 0.5s / 0.9s | Transition durations |
Near-square (2px), uppercase, tracked labels. Primary is an ink fill; hover slides a brass fill up from the bottom while text turns to ink and the border becomes brass. Hover the samples to see the real state.
:hover — brass fill slides up (translateY(101%)→0), color → ink, border → brass. :focus-visible — 2px brass outline, 3px offset. Ghost variant starts transparent with a hairline --line border.Uppercase tracked labels (brass asterisk for required), canvas-filled fields with a 2px radius and hairline border. Focus draws a brass border plus a soft brass ring.
Signature reusable pieces rendered with real styles: frosted sticky nav, listing card with pill status badge and price-first serif, testimonial (estate ground), awards seal, pill/eyebrow tags, and footer.
Featured section
<i data-lucide> to inline SVG) with a refined stroke-width: 1.5. Icons appear in fact-rows, service tiles, award seals, and text links.Buttons, type, a card, and a form combined on the template's real grounds — warm canvas and deep estate-green.
Now showing
A modern serif voice on a warm canvas — the clear visual outlier of the Lux set.
Estate-green band
Counter bands, awards, and CTAs sit on estate-green — never pure black.