/* ============================================================================
HOLDING (codename) . the parent company site.
Rewritten 2026-09-08 against design/DIFFERENTIATION.md, which recorded the
founder's verdict that the eight homepages read as clones. This one was the
worst case: it ran Inter at display AND at body, so it had no typographic
identity at all, and its ground sat inside the same #F0F0EC to #FCFCFB band
as four of its siblings. Everything visible here is new. Everything
invisible is untouched.
THE POSITION.
Seven of the eight sites in this house sell something to somebody. This one
sells nothing. It is an invisible parent (decisions D3) that nevertheless
publishes a real corporate site (D3a), on the Inditex model. The register
for that is not a product brand. It is a law firm, an old investment house,
an annual report: austere, high contrast, generously spaced, and set in big
confident display type that is used four or five times on the whole page.
WHY THE MARK HAS NO COLOUR, AND THE INTERFACE HAS ONE.
Revised 2026-09-14 with design/COLOUR.md. The original argument here was
that the parent takes no hue at all, because the other seven differentiate
with hue and a parent that joins that argument loses it. Half of that
survives and it is the important half: THE MARK IS INK. A holding company
that owns five loud brands should not compete with them, and "vivid" now
describes the work rather than the wardrobe.
What changed is the interface. A page with buttons and links still needs one
colour to say which thing is the action, and doing that with weight alone
left the two calls to action on the order page indistinguishable from the
prose around them. So there is one violet, at three values, and it appears
on a button and in a link and nowhere else. Rules, weight, scale and white
space still carry the hierarchy; the violet only marks the exits.
WHY TRUE WHITE.
#FFFFFF is the only near-pure white in the eight. Five grounds previously sat
between #F0F0EC and #FCFCFB and were indistinguishable from each other. Paper
white with a 18:1 ink on it, next to a warm cream and a grey plaster and two
near-blacks, is legible as a different company from a thumbnail. There is one
inverted band on the page and it is the only dark thing here.
NEUTRALS. One hue, 265, chroma held near zero, so the greys read as one
family rather than as five picks from a slider. Cool rather than warm because
warm paper is already spoken for by plant-pots, ceramics and lights.
CONTRAST, measured against #FFFFFF unless noted. Floors: body 7.0,
secondary and tertiary 4.5.
ink #15161B 18.06:1
ink-2 #4A4C53 8.57:1 (7.87:1 on surface-2) . clears the body floor
ink-3 #62646C 5.90:1 (5.42:1 on surface-2)
ink-4 #9A9CA3 2.74:1 non-text marks only, never running text
rule #E1E1E5 1.30:1 hairlines, exempt
on surface-inv: ink 16.87:1, ink-2 9.62:1, ink-3 5.77:1
Never #000 and never #FFF for text, in either direction.
TYPEFACES.
display Instrument Serif, 400 and nothing else. A high contrast display
serif with real presence above about 60px and visible modulation
in the stroke, which is exactly what a wordmark-free institutional
page needs. It is deployed sparingly: the headline, the section
heads, the four ledger numerals, the lead statements, the seven
register names, the wordmark, the clause numerals and the two
addresses. It never sets running text, and below 20px it does
not appear at all.
body Libre Franklin, 400 and 500. A workhorse American grotesque with
a taller, squarer, more opinionated skeleton than Inter, and,
crucially, it is not Inter, which six of the eight sites were
running. It carries every word of body copy, every label and all
the UI.
mono none loaded. Six siblings set their micro-labels in Geist Mono.
Monospace reads as software and as a spec sheet, and this company
ships neither. The labels here are Libre Franklin caps at 0.18em,
which is the letterhead convention, not the terminal one. The
token stays defined as a system stack so nothing can break, and
the page never invokes it.
Two weights plus one display cut, which is the house maximum.
TYPE SCALE. Only the top rung moves. --t-display becomes fluid and roughly
1.5x the house value, because an austere page with four headlines on it needs
those headlines to be an event. The whole-pixel line-height rule still holds
for every fixed reading rung; it cannot hold for a fluid display size and
that is the accepted trade. Everything from --t-h1 down is the house ramp
unchanged.
RADIUS. System A, sharp. --r-0: 0 everywhere. A rounded corner is an opinion,
and this entity is deliberately not offering one.
Overridden here: palette, both typefaces, the display rung and the radius
tier. Not overridden, and not overridable: the spacing scale, the grid, the
breakpoints, the motion durations and curves, the reduced-motion handling.
Those five are the house, and they are why this page and a bright toy
catalogue are recognisably built by the same shop.
========================================================================= */
/* ---------------------------------------------------------------------------
THE PALETTE. FOUR VALUES, AND IT IS NOT SETTLED.
The founder is still choosing between four palettes, so all four values live
here and nowhere else. Swapping a palette on this site means editing these
four lines. Every rule below, and every page-level style block, reaches them
by name; if a swap ever needs a second edit somewhere, that somewhere is the
bug.
--logo the mark, and only the mark
--primary primary button fill, active states
--deep secondary button, hover, and any reversed ground
--safe links, and every piece of text under 24px
Why there are four and not one, per design/COLOUR.md. The parent is
achromatic in the logo, because a holding company that owns five loud brands
should not compete with them; the interface still needs a colour it can put
on a button, and --safe exists because five of the eight primaries in the
house fail 4.5:1 on white. This brand's --safe happens to equal its
--primary, which clears 7.10:1, but the token is still spelled out so that a
palette change cannot quietly take a link below the floor.
CONTRAST, RE-MEASURED 2026-09-14 on the repainted grounds. These numbers
supersede any table further up this file that still names an old ground.
Floors: body 7.0, secondary and tertiary 4.5.
on #FFFFFF on --surface-2 #F5F5F7
ink #15161B 18.06 16.59
ink-2 #4A4C53 8.57 7.87
ink-3 #62646C 5.90 5.42
ink-4 #9A9CA3 2.74 2.52 non-text marks only
rule #E1E1E5 1.30 1.20 hairlines, exempt
--safe #6D28D9 7.10 6.53
--deep #5B21B6 8.98 8.25
--on-fill on --primary 6.61, on --deep 8.34, on --ink 15.91
------------------------------------------------------------------------ */
@layer tokens {
:root {
--logo: #15161B; /* ink. The mark wears black; the objects are vivid. */
--primary: #6D28D9;
--deep: #5B21B6;
--safe: #6D28D9; /* 7.10:1 on white */
/* Three values derived from the four above, in the same block so that a
palette swap is still one edit. They exist because a button label is
text under 24px sitting on a COLOURED ground, which is a different
measurement from text on white and the only one the four cannot answer
by themselves. Measured: --on-fill on --primary is 6.61:1 and on --deep
is 8.34:1, so this brand's button can take the vivid value directly. */
--fill: var(--primary);
--fill-h: var(--deep);
--on-fill: #F2F2F5; /* the same near-white as --ink-on-inv. Never #fff. */
/* The mark as typographic furniture, for brandmark.css. Copied from
design/logos/mark-masks.css, which is generated. */
--mark-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%2211 6 14 16%22 role=%22img%22 aria-label=%22a hexagon%22%3E %3Cg fill=%22%23000%22%3E %3Cpolygon points=%2224,14.5 21,20 15,20 12,14.5 15,9 21,9%22/%3E %3C/g%3E %3C/svg%3E");
}
}
@layer tokens {
:root {
--surface: #FFFFFF; /* true white. The only one in the eight. */
--surface-2: #F5F5F7; /* row hover and the base of every media box */
--surface-inv: #101116; /* one band on the page, and nothing else */
--rule: #E1E1E5; /* hairlines. Earned, not drawn. */
--ink: #15161B; /* body and display. Never #000. */
--ink-2: #4A4C53; /* secondary copy. Clears 7:1, so it can run. */
--ink-3: #62646C; /* labels, metadata, captions */
--ink-4: #9A9CA3; /* marks and disabled. Never running text. */
--ink-on-inv: #F2F2F5; /* on surface-inv. Never pure white. */
--ink-2-on-inv: #B7B9C0;
--ink-3-on-inv: #8C8E96;
--rule-on-inv: #2C2D33;
/* The accent slot used to be spent on nothing. It now carries the one
hue the palette gives this brand, and it carries it by reference: the
text cut is --safe because most accented things here are captions and
link text, and the fill cut is --primary, which lives on buttons. The
mark stays ink, so "vivid" still describes the work and not the
wardrobe. */
--accent: var(--safe);
--accent-h: var(--deep);
--focus: var(--safe);
--font-display: "Instrument Serif", "Times New Roman", Times, serif;
--font-body: "Libre Franklin", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-mono: ui-monospace, "SF Mono", Menlo, monospace; /* never used */
--w-display: 400; /* Instrument Serif ships one weight */
/* the only rung of the house ramp this brand moves */
--t-display: clamp(3rem, 0.9rem + 8.4vw, 6.75rem);
--lh-display: 0.94;
--tr-display: -0.022em;
--r-0: 0; --r-pill: 999px;
}
@media (min-width: 768px) {
:root { --t-display: clamp(4rem, 0.9rem + 8.4vw, 6.75rem) }
}
}
@layer components {
/* The masthead lockup: mark left, name right, sitting on one line. The mark
is inline SVG rather than an ![]()
so it takes --logo and --deep straight
off this file, and there is no second asset for a reversed ground. Sized
in em so it tracks whatever the masthead sets the wordmark at. */
.wordmark { display: inline-flex; align-items: center; gap: 0.44em }
.wordmark .wm-mark { width: 1.3em; height: 1.3em; flex: none }
.wordmark .wm-name { font: inherit }
}
/* ============================================================================
THE SHOP. Added 2026-09-20 with the products rebuild.
Everything below is site chrome and commerce furniture, and it lives HERE
rather than in a page's own