The brand loves the client a little more than the client loves the brand, and Marrenne is the system that makes that true. The hero is being-known: memory and anticipation, not service.
Take it with you
The page you are reading is the brand kit. The files below are the same values in the exact forms a developer needs. They live at fixed web addresses, so a build reads the current version and nobody re-sends anything.
Fonts are licensed (Canela via Commercial Type, Söhne via Klim) and self-hosted here. They must not be loaded from a public CDN. The licensed web font files are served from this site's /fonts/ folder.
01 · Wordmark and seal
MARRENNE in caps, set in Canela, on the central axis, tracked at 0.34em. One tracking value everywhere; the optical cut changes by size, not the tracking: Canela Display for small interface sizes, Canela Text for the large masthead. Use the supplied asset files. Never re-space, recolor, or apply letter-spacing on top of a supplied wordmark.
A dot held in a ring. No rays, orbit, or gloss, nothing celestial. The dot color is set by ground and is not optional.
Never place the aged-red dot on a dark ground; it fails contrast and disappears. The seal replaces the star everywhere.
02 · Typography
Canela is the serif spine, in three optical cuts. Söhne is the grotesk for every interface surface. They are never substituted for one another, and never replaced by a system font.
| Role | Face / weight | Size | Tracking |
|---|---|---|---|
| Masthead wordmark | Canela Display (asset) | 18 / 15px | 0.34em |
| Hero / brand display | Canela Display 400 | 36–48px | — |
| Page title / H1 | Canela Deck Regular 400 | 30px | — |
| Section head / H2 | Canela Deck Light 300 | 22px | — |
| Nested card / list title | Canela Text Light 300 | 16–17px | — |
| Editorial / house-voice body | Canela Text Light 300 | 16–17px | — |
| Ledger figure | Canela Display 400 | 34 / 17px | — |
| Editorial eyebrow | Söhne Halbfett 600 | 11px | 0.30em |
| Functional body | Söhne Buch 400 | 14px | — |
| Field / control label | Söhne 500–600 | 11–13px | 0.03–0.16em |
| Any typed input | Söhne 400 | inherit | — |
The rule that keeps breaking: Canela Deck is only the one true screen title (H1, Regular) and a structural section head (H2, Light). Anything nested inside a screen, a card, a row, a list, is Canela Text Light, never Deck, never Display. When unsure, use Canela Text Light or Söhne, and ask.
03 · Color
The ground is warm paper, never stark white. Structural grey is slate, never pure grey or black. Two accents only, both punctuation, both low frequency.
Most of every screen is three colors: vellum ground, ink text, slate for anything secondary. Everything else is used sparingly and for a reason. Reach for an accent only to punctuate a single thing.
| Where / what | Use | Rule |
|---|---|---|
| Page background, every screen | Vellum #F5F2E8 | The default ground everywhere. Never #FFFFFF. |
| Recessed areas: input fields, image wells, sidebar panels | Vellum 2 #EEEADC / Panel #F1EEE1 | One quiet step down from the page. |
| Primary text, headings, icons, structural rules and borders | Ink #201D19 | All body text and all structural lines. |
| Secondary or supporting text, captions, metadata | Slate #5A626C | Present but subordinate. Passes contrast for text. |
| Disabled text, placeholder text, decorative marks only | Slate-soft #8A9099 | Never for text that must be read; it fails contrast as body text. |
| One accent moment per screen: the seal dot, a single key figure | Aged red #7D332C | Light grounds only. Max one per view. Never a fill, never on dark, never a block of text. |
| Image glow and large marks on dark grounds | Bronze #9C7B3D | Imagery and dark grounds only. Never on small text. |
| Dark mode, image wells, inverted panels | Dark ground #26221C, text #EFEBDD | Secondary text on dark is warm ash #C4BBA9. No aged red on dark. |
| Interior dividers and table rows | Hairline #DCD7C7 / #E4DFCF | The quiet lines. Full structural lines use ink. |
Do not introduce a color that is not in the tokens. If a screen seems to need one, that is a question to raise, not a value to invent.
Warmth guard: any white or pure-grey ground, blue focus ring, grey spinner, candy status color, bounce motion, or filled/celestial icon fails it. Full contrast data and tokens are in tokens.json.
04 · Imagery
The plate: a full-strength 1px ink rule enclosing the image, a mandatory vellum mat between the rule and the image (12px consumer, 8px admin), the image on a dark well, and a two-line caption beneath the rule. Square corners, no drop shadow. Edit and clear controls live in the caption, never on the image.
The empty state: no box, no border, no button. The seal, the vellum ground, and one line of house voice in Canela Text Light, centered. Nothing else.
Banned: a soft-bordered placeholder rectangle with a centered call-to-action button inside it. It reads as generic software and is the exact look this brand refuses. Runway is one held look, never a grid. Inventory is the kept object against depth, never a cutout on white.
05 · Voice and copy
House voice by default: a quiet "we," or no pronoun. The name behaves as a place and never takes a feeling ("Marrenne loves this" is wrong). Every line faces her, not the room: a specific true fact reads as care; a generic feeling reads as performance.
Nav: Home, Inquiries, Wardrobe, Recommendations, Trips. Controls: Add to bag, Bag, Checkout, Search, Settings, Sign in, Create account, View all, Packing list. All sentence case. "Recommendations" is plural. Season and brand names keep correct title case ("New York Fashion Week 2028"). No em dashes, US spelling, no exclamation points in brand-voice copy, no urgency copy ("Only 2 left," "Don't miss out").
06 · The stop-list