Editorial Luxury × Editorial Split. Production-ready tokens for the Webflow build of elitetents.ca.
A wedding-tent rental site is a trust transaction. The system is calibrated to look like a high-end print catalog brought into the web — confident hierarchy, restrained colour, lots of whitespace. Familiar patterns prospects already trust.
Plain-spoken with a steady hand. Never gushing, never filler. We describe what is happening and what comes next. Italic emphasis is rare and earned.
$50K+ wedding budgets and event managers booking annual gala marquees. They evaluate quickly on photography, perceived calm, and how easy the path-to-quote is.
Concentric radii. Hairline dividers. Tinted multi-layer shadows. Restrained italic accents in clay and champagne. Aesop / Cereal / & Other Stories — not Awwwards.
Cream, espresso, clay, champagne — a fixed palette borrowed from natural-fibre packaging. No tinted neutrals; no pure black. Every shadow and hairline is a tinted rgb(58, 40, 24, *).
Page background, card surfaces, light-pane fields.
Secondary surface, gradient ceiling, item-rail hover.
Bezel-out gradient floor, image placeholder fill.
Body text, dark CTA fill, espresso pane, active filter.
Mockup bar, hero gradient floor, mobile frame chrome.
Reserved alternate for dark surfaces — rarely needed.
Primary CTA fill, italic accents, eyebrows. Never body text on cream — fails AA.
Primary-CTA :hover fill only.
Accent on dark panes, eyebrows on espresso, dark-CTA fill.
Sub-copy on dark panes, hero trust row tint.
Default body text colour. Slightly cooler than Navy for prose.
Sub-copy, descriptions, secondary text. Passes AA on cream.
Eyebrows, micro-captions, count badges. Decorative use only.
Fraunces carries headings, italic accents, and editorial flourishes. Geist carries everything else. Both are variable fonts — no static weights, every size tunes opsz/wght live.
Designed for the long arc of a wedding day — first arrivals through last toast — every Elite Tents marquee is engineered for soft acoustics, warm sightlines, and a calm interior. Italic accents come from Fraunces in clay, never from punctuation.
A note on emphasis
Italic em-tags inside headings render in clay; on dark panes they render in champagne. Bold body weight is reserved for stat callouts and form labels — never inline.
An 8-pixel base unit and seven section-padding stops. Major sections breathe at 96–128px between them; intra-section rhythm at 24–56px. Macro-whitespace is a feature, not a bug.
Max content width: 1440px (mockup uses --max-w: 1440px; this doc uses 1200px for an editorial measure). Side padding inside sections: 36px minimum, 56px on the hero rail.
Every nested surface honours the Double-Bezel: an outer 22px shell, 6px of padding, and a 16px inner core. Inner radius equals outer minus padding — the math is non-negotiable.
The outer shell carries the gradient + ring + tinted shadow. The inner core carries the photo, content, and the inset 0 1px 0 rgba(255,255,255,0.5) top-edge highlight. They are always concentric — when you change one, you change the other.
Same rule applies to the filter sidebar (22 / 6 / 16), the help-panel header band (no padding so it shares the panel’s 22px radius), and any future nested card pattern.
Between sections, between rows in My Event, around tag chips. 1px solid rgba(58,40,24,0.1)
Footer social-icon ring, dashed “Add more” outline, weight-bearing dividers. rgba(58,40,24,0.2)
Top edge of the nav bar. Linear-gradient that fades in and out across the viewport. Editorial Luxury signature.
Inside .me-submit-pane and the help-panel header. rgba(245,239,230,0.12) — never the inverse of the light hairline.
Four shadow stacks. Each is a multi-layer composition tinted with rgb(58, 40, 24, *) — a deep brown — so light catches like sunset on cream linen, not like a black drop-shadow on a screen.
Resting state on every card. Always paired with --ring-hair in usage.
Hover state. Larger blur and more opacity on the bottom layer for a calm lift.
Modal panes, lightboxes, help panel. Two large layers — feels detached from the page.
Help bubble + toast. Sits on the dark espresso, paired with the inset-highlight-dark top edge.
Inner core of every Double-Bezel. inset 0 1px 0 rgba(255,255,255,0.5)
Top edge on espresso CTAs, active filter, mockup-bar floor. inset 0 1px 0 rgba(255,255,255,0.08)
Rule: always layered, always tinted with rgb(58, 40, 24, *). Never pure black. Never single-layer. The ring-hair (0 0 0 1px rgba(58,40,24,0.06)) prefixes every card box-shadow so the edge stays defined at low blur radii.
Every component is rendered live — hover them, press them. Press states scale to 0.96, never below. The trailing-circle “Button-in-Button” translates 2px right + 1px up on hover.
Engineered cathedral-pitch frame. Glassed walls optional. Best for receptions of 150 to 240, with a clear-span dance floor.
Soft-pole sailcloth with translucent canvas — glows beautifully at twilight. Romantic profile for vineyard and beach receptions.
Without callouts. The card is the production-target visual; the annotated twin documents what it’s made of.
An adaptable solution for outdoor weddings, corporate launches, and private estates — engineered, dressed, and lit on site by our crew.
The crew made our outdoor reception feel sheltered without losing the open sky. Calm, on-time, and quietly generous.
Safari note: backdrop-filter requires -webkit-backdrop-filter for iOS < 18. Fall-back: opaque rgba(245,239,230,0.18) when backdrop-filter isn’t supported.
Three CSS easings power state transitions, plus Motion One spring physics on scroll-triggered reveals. Specify properties — never transition: all. Reduce-motion disables every entrance.
inView reveals + spring on stagger. Not a CSS bezier.--ease-out.scale(1.04) on collection cards).~100ms delay between siblings.translateY(8px) on a fade-out.transition: opacity 0.25s var(--ease), never transition: all.@media (prefers-reduced-motion: reduce) disables every entrance and zoom.Vanilla IntersectionObserver, threshold 0.2, unobserve on first hit. Children rise on a 100ms cadence.
Single-column everywhere. Tabs become a hamburger overlay. The hero quote card is hidden entirely. Heights use 100dvh so iOS Safari toolbar shrink doesn’t hide content.
.app-main container becomes a horizontal swipe-snap surface — IntersectionObserver syncs location.hash to whichever view is centered.display: none on mobile. Reviews still rotate in the body section.100dvh + safe-area-inset-top/bottom padding — never 100vh.<input> — browser default min-content is ~150-200px and propagates up.The checklist for the Webflow build. Register these in Site Settings → Variables. The mockup’s CSS custom properties are 1:1 with the Variables column on the right.
| Design token | Value | Webflow Variable |
|---|---|---|
| Colour | ||
| --cream | #F5EFE6 | Color / Cream |
| --cream-2 | #EDE4D2 | Color / Cream 2 |
| --cream-3 | #E3D8C1 | Color / Cream 3 |
| --navy | #3A2818 | Color / Espresso |
| --navy-deep | #23180F | Color / Espresso Deep |
| --navy-soft | #4E3828 | Color / Espresso Soft |
| --clay | #B85A3B | Color / Clay |
| --clay-dark | #964730 | Color / Clay Dark |
| --champagne | #C9B08A | Color / Champagne |
| --champagne-light | #E0CFAF | Color / Champagne Light |
| --ink | #2A1F18 | Color / Ink |
| --muted | #6B5D52 | Color / Muted |
| --faint | #928574 | Color / Faint |
| Type | ||
| --serif | Fraunces, Georgia, serif | Type / Serif |
| --sans | Geist, ui-sans-serif, system-ui | Type / Sans |
| font-size · h1 | clamp(48px, 6.4vw, 92px) | Type / Size / H1 |
| font-size · h2 | clamp(32px, 3.6vw, 44px) | Type / Size / H2 |
| font-size · body | 16px / 1.6 | Type / Size / Body |
| font-size · eyebrow | 11px · 0.24em · UPPER | Type / Size / Eyebrow |
| font-size · micro | 9px · 0.22em · UPPER | Type / Size / Micro |
| Spacing | ||
| space / xs | 8px | Space / XS |
| space / sm | 16px | Space / SM |
| space / md | 32px | Space / MD |
| space / lg | 56px | Space / LG |
| space / xl | 96px | Space / XL |
| space / 2xl | 128px | Space / 2XL |
| --max-w | 1440px | Layout / Max |
| Radius | ||
| radius / sm | 8px | Radius / SM |
| radius / md | 12px | Radius / MD |
| radius / inner | 16px | Radius / Inner |
| radius / outer | 22px | Radius / Outer |
| radius / pill | 999px | Radius / Pill |
| Shadow | ||
| --ring-hair | 0 0 0 1px rgba(58,40,24,0.06) | Shadow / Ring Hair |
| --shadow-card | 3-layer · 0.04 / 0.04 / 0.06 | Shadow / Card |
| --shadow-card-hover | 3-layer · 0.05 / 0.08 / 0.10 | Shadow / Card Hover |
| --shadow-pop | 2-layer · 0.14 / 0.14 | Shadow / Pop |
| --shadow-bubble | 2-layer · 0.18 / 0.10 | Shadow / Bubble |
| --inset-highlight | inset 0 1px 0 rgba(255,255,255,0.5) | Shadow / Inset Highlight |
| --inset-highlight-dark | inset 0 1px 0 rgba(255,255,255,0.08) | Shadow / Inset Highlight Dark |
| Motion | ||
| --ease | cubic-bezier(0.32, 0.72, 0, 1) | Motion / Ease |
| --ease-out | cubic-bezier(0.16, 1, 0.3, 1) | Motion / Ease Out |
| --ease-in | cubic-bezier(0.4, 0, 1, 1) | Motion / Ease In |