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 Plum and Bronze. Cereal / Aesop / Belmond / Singita, not Awwwards.
Linen, Aubergine, Plum, Bronze: a fixed palette built for editorial print on screen. No tinted neutrals; no pure black. Every shadow and hairline is a tinted rgb(35, 25, 35, *).
Page background, card surfaces, light-pane fields.
Secondary surface, gradient ceiling, item-rail hover.
Bezel-out gradient floor, image placeholder fill.
Primary CTA fill, body text on Linen, dark panes, active filter.
Mockup bar, hero gradient floor, modal overlay tint.
Primary CTA :hover fill ("lift toward light").
Italic accents in display type, focus rings, link underlines. AAA on Linen; fails on Aubergine; twilight hero swaps to #E2B9CC.
Press / active "sink" state on accent-coloured controls.
Accents on Aubergine panes, eyebrows on dark, secondary CTA fill.
Sub-copy on Aubergine panes, hero trust row tint.
Default body text colour. Slightly darker than Aubergine for prose.
Sub-copy, descriptions, secondary text. Passes AA on Linen.
Eyebrows, micro-captions, count badges. Decorative use only.
Each palette below is a complete twelve-token system applied to a real UI snippet for in-context comparison. Modern Aubergine carries the production default: plum + aubergine + bronze on warm linen. The remaining palettes (including the Warm Archive) live as switchable themes in the mockup-bar at the top of the page; flip between them to compare against the live build.
Marquee, frame, and clear-span structures for weddings across the Lower Mainland and Fraser Valley. We deliver, set, light, and stay until the last toast.
Request a quote →Ink / Linen 15.10 : 1 AAA
Plum / Linen 8.26 : 1 AAA
Linen / Aubergine (CTA) 11.70 : 1 AAA
The production palette. Plum + aubergine on warm linen, with brushed bronze on dark panes. Aubergine carries CTA fills and dark surfaces; plum holds the italic emphasis phrase in display type; bronze handles accents on aubergine panes. The Knot's and BridalGuide's #1 wedding accent for 2026: moody, romantic, depth-rich. Sub-niche: indoor evening receptions, candle-heavy production, the moody-romantic Pinterest mood-board couple.
Marquee, frame, and clear-span structures for weddings across the Lower Mainland and Fraser Valley. We deliver, set, light, and stay until the last toast.
Request a quote →Ink / Cream 14.05 : 1 AAA
Clay / Cream 4.03 : 1 AA-Large
Cream / Clay (CTA) 4.03 : 1 AA-Large
Warm-natural editorial palette: terracotta clay on cream with espresso text. Switchable theme available for chrome-decision reference. The cream + terracotta pairing reads close to the Anthropic / Claude visual identity.
Marquee, frame, and clear-span structures for weddings across the Lower Mainland and Fraser Valley. We deliver, set, light, and stay until the last toast.
Request a quote →Ink / Oat ~13 : 1 AAA
Sage / Oat ~4.4 : 1 AA-Large
Oat / Cedar (CTA) ~9 : 1 AAA
Sage italic accent on oat, with cedar-green carrying headings and CTAs and tobacco-gold supplying warmth. Greens lead 2026 wedding forecasts (53 % of weddings include some form of green), and sage + tobacco-gold is a top garden-wedding combination. References: Cinzia Bruschini and Lucy Munoz colour-grading; Aman resort hospitality identity. Sub-niche: couples doing outdoor Fraser Valley vineyards, dried florals, pampas, candle clusters.
Marquee, frame, and clear-span structures for weddings across the Lower Mainland and Fraser Valley. We deliver, set, light, and stay until the last toast.
Request a quote →Ink / Mist ~13 : 1 AAA
Pacific / Mist ~6.0 : 1 AAA
Mist / Slate (CTA) ~9 : 1 AAA
Sea-glass blues + driftwood neutrals + foam-white: the Pacific Northwest coastal-heritage palette (Benjamin Moore PNW; The Knot's "coastal heritage" 2026 forecast). Slate carries headings and CTAs; pacific blue holds the italic accent; driftwood is the warm bridge that keeps the system from feeling cold. Every pairing AAA. Sub-niche: Fraser Valley estate weddings with stone, river-rock, water views, and engagement-photographers shooting at golden hour.
Marquee, frame, and clear-span structures for weddings across the Lower Mainland and Fraser Valley. We deliver, set, light, and stay until the last toast.
Request a quote →Ink / Ivory ~16 : 1 AAA
Emerald / Ivory ~9 : 1 AAA
Ivory / Emerald (CTA) ~9 : 1 AAA
Emerald + champagne: the identity language of Aman, Rosewood, and Harrods (Harrods emerald sits at #0D4C3C, used verbatim). Emerald carries the 2026 wedding forecast as the #1 jewel tone. Every pairing AAA. Sub-niche: black-tie evening receptions, Vancouver heritage venues, sit-down dinners under crystal. Risk: telegraphs "formal" early; may filter the boho-leaning couple. Pair with Source Serif italic and it lands close to Hardy Amies / Brora / Vacheron Constantin in tone.
Marquee, frame, and clear-span structures for weddings across the Lower Mainland and Fraser Valley. We deliver, set, light, and stay until the last toast.
Request a quote →Ink / Parchment ~13 : 1 AAA
Ochre / Parchment ~3.9 : 1 AA-Large
Parchment / Forest (CTA) ~10 : 1 AAA
Ochre italic accent on parchment, with deep forest carrying CTAs and headings and saffron supplying warmth. Ochre reads burnt-umber / Audubon-print / botanical-plate. Sub-niche: the boho-leaning couple, pressed-flower invitations, second-growth-cedar venues.
Source Serif 4 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 Source Serif 4 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.
Five candidates considered alongside Source Serif 4 as the display face. All restrained, no scripts, no wedding-cliché curls. Each shown twice with the same sample line: large roman for the main comparison, smaller italic in clay so you can also see how the accent treatment reads.
Five more for direct comparison: higher contrast, more dramatic shapes, dressier overall. Still no scripts or wedding-cliché curls. Useful as the "this is what fancier feels like" anchor against the restrained set above.
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 |
| --brand | #3A2818 | Color / Espresso |
| --brand-deep | #23180F | Color / Espresso Deep |
| --brand-soft | #4E3828 | Color / Espresso Soft |
| --accent | #B85A3B | Color / Clay |
| --accent-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 | Source Serif 4, 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 |