Sea-green silk satin · bias cut
Brand guide · Glenda
Occasion wear for a wedding you are a guest at, a day at the races, and the evenings in between. Navy and warm light hold the site; the dresses carry all the colour.
Who it's for
She is being photographed and she knows it. Wants to look the best in the room without looking like she tried hardest, and will spend once rather than three times.
The idea
Deep navy against a warm apricot ground is the classic expensive pairing. It is quiet enough that a vivid emerald or fuchsia dress reads at full strength, which is the entire job of the site furniture.
The discipline
The site never competes with the clothes. One accent, enormous space, nothing decorative. The moment the furniture gets colourful the dresses stop shouting.
01
The wordmark
Drawn from Petrona Light, then modified twice. It ships as real SVG paths, not as webfont text, so it renders identically everywhere and needs no font to load. Regenerate it with assets/brand/build-wordmark.py.
Primary
Stacked, with the country line
Reversed — inherits colour, so evening mode needs no second file
The G — favicon and small marks
What was modified
- Optical spacing. Mechanical tracking spaces caps badly — the gap after an L reads far wider than the gap after an N, because the L is open at its foot. Each of the five pairs is corrected individually: G L 0.285em, L E 0.240em, E N 0.300em, N D 0.290em, D A 0.250em.
- The extended E. Petrona's E has three arms of unequal reach — bottom 532, top 501, middle 451 font units. The middle arm is moved out to meet the top, which evens the letter and gives the mark its one deliberate incident. It is intrinsic to the glyph, so it can never read as punctuation the way an added rule does.
Rules
- Clear space on all sides is the cap height of the G. Nothing enters it.
- Minimum width 110px. Below that, use the G alone.
- One colour only — navy on warm light, or warm light on navy. Never a gradient, never an outline, never a drop shadow.
- Never re-set it in a font. The spacing and the E will be wrong, and both are the mark.
- Never stretch, condense, rotate or arc it.
02
Colour
Two modes on one contract. Light is the default; the negative mode is a scoped override used for the hero and anything after dark. All ratios are measured live in your browser.
Light
Warm lightThe canvas.
NavyAll text, the horizon, the wordmark.
Navy, softSecondary copy.
Deep navyPrimary action and focus.
RustSold out, errors.
LineBorders and rules.
Negative
Deep navyThe hero and every dark section.
SaltAll text.
MutedSecondary copy.
Warm amberPrimary action on navy, and the tint on photography.
Evening is applied by adding class="evening" to any section or to the whole page. Every component inside re-skins, including the wordmark, because nothing hard-codes a colour.
03
Typography
Petrona for display, Familjen Grotesk for everything read. Petrona is a low-contrast serif, chosen deliberately: it holds its weight against strong colour where a hairline didone would look thin and anxious. The italic does real work — it carries the turn in a headline.
Aa Gg 24
DM Serif Display 400
Display. One weight only — size carries the hierarchy, never font-weight.
Aa Gg 24
DM Serif Display Italic
One clause per headline. Never a whole line.
Aa Gg 24
Familjen Grotesk
Body. 1.7 leading, 62ch measure.
Aa Gg 24
Familjen Medium
Interface. Uppercase, 0.16em.
You will be photographed. Dress accordingly.
Evening is the one where the cloth does the work
New this season
You sit down for six hours at a wedding, you stand on grass in wind at the races, and you are indoors under low light in the evening. The cloth, the cut and the shoe are different in each case.
Add to bag · Free delivery over €250
04
Grid & spacing
Twelve columns, 1360px maximum, and the widest gutters and tallest sections of any system we would normally build. The empty space is doing the work — compress it and the brand stops looking expensive immediately.
Container
1360px, 680px narrow
Gutter
clamp(1.5rem, 5vw, 4.5rem)
Section rhythm
clamp(5.5rem, 13vw, 11rem)
Spacing scale — measured live
05
Components
Radii of 3, 6 and 10px, plus a pill on controls. Soft enough to feel expensive rather than technical. Everything below is built from tokens alone.
Filters
Size chips — sold out struck through
810121416
Field
Four letters a year, no more.
Product card
The horizon
One rule, full bleed, recurring down every page. Content sits above it or below it — never across it.
06
Motion
One governing idea: weather crossing a view. Everything is long and overlapping — the shortest tween is 0.32s and display type takes two full seconds. There is no snap anywhere, and nothing overshoots.
The haar
A fixed veil of sea fog drifting on a 26-second cycle, thinning as you descend. Daylight only — it is hidden in evening mode.
drift 26s, yoyoburn-off scrub 1.4
Swell
Display lines rise from behind a mask with a blur that clears — arriving out of fog rather than sliding in.
duration 2sstagger 0.14sblur 12→0px
Clearing
Images open from an inset and unblur, rather than being uncovered by a hard edge.
duration 1.9sinset 14%→0
Horizon
The rule draws the full width of the viewport over two seconds. Slower than any other line in the system.
duration 2sease tide
Reduced motion is a hard requirement, not a courtesy: CSS prefers-reduced-motion does not affect GSAP, so every primitive checks it and calls GM.settle() to put the page in its finished state instead of animating. Without it a reduced-motion visitor gets a page of invisible headings.
07
Imagery
Two registers, one rule: the dress is the brightest thing in the frame. Day for weddings, races and ready-to-wear; evening for anything after dark. Both are shot to camera, figure-hugging, with black patent stilettos in frame.
Day — locked suffix
bright but cool overcast daylight, crisp and clear, the dress vivid against a muted setting, figure-hugging silhouette, black patent pointed-toe stiletto court shoes, confident glamorous posture looking to camera, fine grain, editorial fashion photography, no text, no logos, no watermark
Evening — locked suffix
cool low directional light, sculpted shadow, rich sheen across the fabric, deep shadow, figure-hugging silhouette, glamorous confident posture, full length with heels visible, fine grain, editorial fashion photography, no text, no logos, no watermark
The cast — a fixed description carries consistency, not a reference image
A a strikingly beautiful woman in her late twenties with sun-tanned skin and shoulder-length blonde hair worn in soft waves, glamorous and confident B a glamorous woman in her early thirties with warm tanned skin and shoulder-length light golden-brown hair, striking features C a beautiful woman in her thirties with lightly tanned skin and shoulder-length honey-blonde hair worn loose, poised and glamorous
Passing a reference image to soul_2 silently rewrites the prompt from that image, which reproduces the reference instead of transferring the model. Consistency therefore comes from repeating one of these three descriptions verbatim. References are used only for product galleries, where near-duplication is the point.
08
Voice
Dry, specific and quietly confident. The house never flatters the reader and never oversells — it states what it does and lets the price make its own argument.
Headline
You will be photographed. Dress accordingly.
Section
Order two sizes. Send one back. We pay either way.
Product
Emerald silk satin, cut on the true bias so it follows the body exactly and hangs straight when you stand still. Lined in silk habotai. Made in a run of forty.
Call to action
Add to bag · Free delivery over €250 · Thirty days to change your mind
09
Do & don't
This system fails by warming up or filling up. Watch for both in the photography first.
Do
- Keep the site furniture quiet. Navy and warm light only — the dress supplies the colour.
- Shoot to camera, figure-hugging, with black patent stilettos in frame and the cloth catching light.
- Open on the negative hero, then resolve into warm light below it.
- Give sections their full height. The space is the luxury.
- Use the italic for the turn in a sentence, and nowhere else.
Don't
- Put a bright colour into the interface. Buttons, rules and type stay navy.
- Let two vivid dresses fight in one row. Space them with a still life or a detail.
- Re-set the wordmark in a font. The spacing and the E are the mark.
- Let anything bounce or overshoot. Nothing in this brand snaps.
- Sell bridal, or mention a shop, a fitting or an appointment. Glenda is online only, and dresses the guest, not the bride.
Glenda
See it working
The site runs this system end to end — twelve pieces, two lighting registers and one wordmark.
Open the site