bg#fcf4e4
The page ground, every page
Contrast on ink 14.0:1
The rules we draw by.
Every colour, size and rule used across the site, written down so a new page looks like it belongs without anyone guessing.
Plate 01 The canvas and its rhythm 2560 × auto · 60 px margins
Sixty out, ninety down.
Two numbers hold every page together: sixty pixels of air at the sides and ninety between one plate and the next. Nothing else is negotiable.
060128025002560
90 px above the plate
Content column — 2440 px
90 px below, then the next rule
Canvas width2560 px
Side padding60 px
Content column2440 px
Section rhythm90 px
Head grid1400 | 1fr
Card gaps34 — 40 px
The one rule people break
There are no spacer elements. A plate carries its own ninety pixels of top padding and its own hairline; adding a gap between sections doubles the rhythm and it shows immediately.
The spacing scale
6101418222634404652607090120
Every plate: 90 px padding, one hairline, one margin label No spacers, no fixed heights on text
Plate 02 Nine tokens, no more Cream ground · one red · one gold
Nine colours, and a rule about one.
The palette is small on purpose: a warm ground, an ink, two greys, one red for emphasis and one gold that exists only on dark ground.
card#fbf1de
Cards, notices, slips
Contrast on ink 13.7:1
ink#2a2420
Body text, rules, primary buttons
Contrast on bg 14.0:1
muted#6b5f52
Body copy and secondary prose
Contrast on bg 5.7:1
faint#a89c8a
Mono micro-labels, 10 — 13 px only
Contrast on bg 2.5:1
accent#a8321f
Plate numbers, figures, seals, italics
Contrast on bg 6.1:1
gold#c9a96e
Accents and buttons on dark ground
Contrast on dark 7.7:1
dark#1f1a16
Dark plates, featured cards, overlays
Contrast on dark 14.7:1
on-dark#f4ecdc
Text and glyphs on a dark plate
Contrast on dark 14.7:1
Rules by weight — always ink at low alpha, never a grey
0.10Rows inside a register
0.14Between plates, inside cards
0.18Under a label, inside a slip
0.22Closing strip of a plate
0.34Border of a notice or slip
2 px solidHead of a register, a total
Faint is a label colour, not a text colour
The faint token is legible at ten to thirteen pixels in mono with wide tracking and nowhere else. At twenty pixels it measures 2.5:1 and fails. Prose that needs to sit back uses muted, italic if it needs to sit back further.
RightElsewhere this list runs to about €4 800.
WrongElsewhere this list runs to about €4 800.
Gold never appears on the cream ground · red never fills a large area
Two grounds maximum per page: cream and one dark plate Row hover is always rgba(168,50,31,.05 — .09)
Plate 03 Three typefaces, eight sizes Playfair Display · DM Sans · IBM Plex Mono
Three faces, each with one job.
Playfair carries every headline and every number that matters. DM Sans carries the reading. Plex Mono carries the labels a draughtsman would letter by hand.
Display and figuresAa 400 · 400 italic
Aa
Playfair Display
Headlines, card titles, every price and count. Italic in the accent red is the one emphasis this system allows.
ReadingAa 300 · 400 · 500
Aa
DM Sans
All prose, from the twenty-one pixel plate intro down to an eighteen pixel table cell. Weight 300 by default.
Labels and dataAa 400 · 500
Aa
IBM Plex Mono
Kickers, plate numbers, register heads, seals, footnotes and any figure that sits inside a table rather than a headline.
RoleFaceSize / leading / trackingSpecimen
H1Page title, once per page Playfair Display 400 116 / .98 / −.025em The rules we draw by.
Plate H3The heading of every plate Playfair Display 400 80 / 1.03 / −.024em Sixty out, ninety down.
Card H4Card and column titles Playfair Display 400 38 — 52 / 1.05 / −.02em Training, paid for
FigurePrices, counts, percentages Playfair Display 400 40 — 126 / .92 €3 261
Body LPlate intro paragraph DM Sans 300 21 / 1.7 Two numbers hold every page together.
BodyCard copy, table cells DM Sans 300 18 — 19 / 1.65 A budget per person per year, spent on your own judgement.
Mono labelKickers, table heads, notes IBM Plex Mono 400 11 — 13 / .20 — .28em Plate 03 · Typography
Mono microFoot notes inside a card IBM Plex Mono 400 10 / .18em €214 000 across the firm last year
Numbers are spelled out in headlines
RightSeventy-five people, one span.
Wrong75 people, one span.
A digit inside an eighty pixel Playfair headline reads as a placeholder. Spell it; keep digits for figures, tables and mono labels.
One italic per headline, in red
RightFour desks are open.
WrongFour desks are open.
The red italic lands on the last clause and nowhere else. Two of them in one line cancel each other out.
Figures never wrap
Right€2 900
Wrong€2 900
Every price and day count carries white-space: nowrap. Yearly figures are the ones that break first.
Body copy always text-wrap: pretty · headlines text-wrap: balance Never a fourth typeface, never Playfair below 30 px
Plate 04 The drafting language Nine marks · the thing that makes it ours
The marks that make it a drawing.
Strip these out and the site becomes another cream-and-serif template. They are the vocabulary: plate numbers, ticks, dimension lines, seals and slips.
Mark 01Plate 04 · 90 px rule · subject
Plate 04Subject
Plate number
Every plate opens with one. Number in accent red, a ninety pixel hairline, the subject in muted, a note in faint on the right.
Mark 0226 px arms, inset 30 px, 1 px
Corner tick
Four to a plate, on the outer frame only. They say “this is a drawn sheet”, so never put them on a card inside one.
Mark 0316 px end ticks, centred caption
Overall — 75 people
Dimension line
Above a bar, a rail or a photograph, to state the whole of something before it is broken into parts.
Mark 0411 px mono, vertical-rl, rotate 180°
Marks · Plate 04 · Avava
Margin label
Pinned at left −46 px, top 98 px. Reads bottom to top: subject, plate number, Avava.
Mark 05Playfair 120 — 230 px at .06 alpha
04Behind
Ghost numeral
Bleeds off the edge of a card and sits behind the content with pointer-events none. One per card.
Mark 06Rotate −8°, 2 px inset ring, mono .3em
Filed
Seal
For a state, not decoration: FILED, REFUSED, SPECIMEN, HIRING. Always in the flow of a row, never floated over one.
Mark 0710 px dashes, 36 px pin at top −18
Ref. AV-000
Perforated slip
The surface for anything that behaves like a form: an application, an invoice, a notice.
Mark 0845°, 2 px on, 14 — 18 px off
Hatch
Ink at .10 on cream for a photograph that has not arrived; cream at .045 on a dark plate as a texture.
Mark 09Five bordered cells, mono 12 px
DrawnDesignSheet04 / 10DateSep 2026
Title block
Closes a technical plate the way a drawing sheet closes: drawn by, checked by, sheet, scale, date.
The mistake we made three timesA seal positioned over a row hides whatever sits at the end of it.
Keep seals inline, in the kicker row
One ghost numeral per card · one seal per card · four ticks per plate Never a mark without a reason to be there
Plate 05 Buttons, pills and fields Radius 999 · mono labels · 200 ms ease
Every control is a pill.
One shape, three treatments, and a label in mono with wide tracking. Hover always moves the background, never the text.
Ink on cream ground92 px · ink → red
Outlined, same metrics92 px · 1 px inset → .07 fill
Secondary
Talk to an advisorThe alternative, always second and always quieter. Same height, so they sit in a row.
Gold on a dark plate92 px · gold → cream
On dark
Apply as an agentGold exists for this. On the cream ground it has no contrast and must not be used.
Tabs and segment pills — 64 px, ink fill when chosen
MonthlyYearlyBoth
Chips — 44 — 52 px, for values and filters
NowLaterRollingParis
Slider — 12 px track, 44 px thumb with a cream halo
Field — 96 px pill, 26 px caret bar, mono placeholder
Typed field — 110 px, red baseline, Playfair value
890 000Euro
Labels are mono, uppercase, .18 — .2em · never sentence case Hover moves the ground, not the type
Plate 06 Cards, plates, slips and tickets Four surfaces · radius 12 — 14 · inset borders
Four surfaces, and no shadows.
Depth comes from an inset hairline, not a drop shadow. The only shadow in the system is under the navigation dropdown.
Surface 01card · inset 1 px .26 · radius 14
Card
The default. Slightly warmer than the page so it reads as laid on top. Hover lifts eight pixels and darkens the border to .55 — hover this one to see it.
Used on every plate that lists things
Surface 02dark · 45° hatch at .045
Dark plate
One per page at most, for the thing you want read first: a result, a featured option, a trade section. Gold becomes available; red stops working.
Corner ticks in cream at .34
Surface 031 px border .34 · 10 px perforation
Slip
A real border rather than an inset one, a torn top edge and a pin. Anything that behaves like paperwork: an application, a completion statement, a posted notice.
Always carries a reference number
Surface 04radius 4 4 14 14 · 28 px punches
Ticket
For one purchasable thing with a price: an extra listing, a re-shoot, a priority publication. Square top corners and two punch holes read as detachable.
Ends in a price and one action
Depth is an inset hairline · no drop shadows except the nav dropdown Hover lifts 6 — 8 px, 240 ms ease
Plate 07 Registers, bars and scales Where most of the site actually lives
Most of this site is a register.
A ruled table with a two pixel head, faint zebra and a red hover — plus the four graphics we allow: split bars, span bars, columns and dimension scales.
Register — head 2 px, rows .10, zebra .03, hover red .05
No.ItemBasisAmount
01Notary fees and transfer tax7.0 % of price€62 300
02Lender arrangement fee1.0 % of loan€7 120
03ValuationFlat€350
04Registration and searchesFlat€900
Total8.2 % of price€70 670
Split bar — two parts of one whole, 16 — 26 px
Capital 38 %Interest 62 %
Span bar — segments sized by share, with person ticks
411297603075
Columns — stacked, 3 px top radius, red is the good part
Year 1Year 25
Dimension scale — 12 px ruler, labels beneath
02 m4 m6 m8 m11.4
One graphic per idea · a bar that carries no number is decoration Registers are always ruled, never boxed cells
Plate 08 Placeholders and the boxes they name Six sizes · always supplied at 2×
A placeholder that states its size.
Until a photograph exists, its box is hatched and captioned with the exact pixels it needs. The caption is the brief — nobody has to ask.
The anatomy of a slot
Photograph — 1240 × 860
Detail A — 420 × 300
Camera 24 mm · f/8
Daylight, no fill
Daylight, no fill
Hatch 45° · 2 px on, 16 px off · ink at .10Rule of thirds at 33.33 and 66.66 %
Hatch45° at .10, the sign of a box with nothing in it yet
ThirdsHairlines at 33.33 and 66.66 % — the horizon sits on one
TicksFour corners, 26 px arms, so the box reads as a frame
CaptionThe pixel box, in mono, centred — it is the brief
Two rules for the shoot
Supply every image at twice the box so it holds on a retina screen. And nothing is retouched — the survey is published, so the photograph has nothing to hide.
The same portrait sitting appears on Team, Agents and Career — shoot once
SlotBoxSupplied at 2×Where it is used
Hero buildingInterior or façade, daylight1240 × 8602480 × 1720Services · path 01
Home on the shelfStreet elevation, the whole building580 × 4001160 × 800Compare · plate 01
Staff portraitStanding, at the desk, no studio786 × 6401572 × 1280Career · voices
Role portraitLandscape crop of the same shoot461 × 300922 × 600Loan process · who is involved
Advisor portraitHead and shoulders, the same sitting565 × 7201130 × 1440Agents · the roster
LeadershipThree heights, descending646 × 11201292 × 2240Team · plate 01
Process sheetOne frame per step, documentary461 × 260922 × 520Team · plate 03
Archive roomFull bleed, 24 mm, no fill light2350 × 9804700 × 1960Team · plate 05
A slot without a stated size will be filled with the wrong crop Hatch on dark ground: cream at .12 — .14
Plate 09 How the switch behaves One toggle · every page · no second stylesheet
The same page, read at night.
Nothing is redesigned in the dark: the grounds go down two steps, ink goes to cream, and the accent lifts to a warmer red so it still carries on the darker ground.
LightGround #fcf4e4
Four desks are open.
ApplyPositionsOpen
Median tenure9 yearsAnswer within14 days
DarkGround #191612
Four desks are open.
ApplyPositionsOpen
Median tenure9 yearsAnswer within14 days
ElementLightDark
Page ground#fcf4e4#191612
Card#fbf1de#241f1a
Body text#2a2420#f4ecdc
Secondary prose#6b5f52#a89c8a
Mono labels#a89c8a#6b5f52
Accent#a8321f#d24a33
Dark platedark #1f1a16the same, it is a fixed surface
Hairlineink at .14cream at .14, the token carries it
Node ringink 2 pxcream 2 px, the token carries it
Tint fillred at .07red at .07 on the warmer accent
Three rules that break the theme if you loosen them
Rule 01 — Never a colour outside the token blocksEvery value on the site is a variable. A literal hex written into a component is a component that does not switch, and it is invisible until somebody opens the page at night.
Rule 02 — Rings and rails take the ink token, not a literalA 2 px ink ring disappears on the dark ground. Written as var(--ink) it flips with everything else and the rail keeps its nodes.
Rule 03 — Fixed surfaces keep their colour on purposeThe footer, the dark plate and the modal are the same in both themes. They are declared from the fixed palette, so a theme change must not touch them.
The toggle sits in the navigation, and the choice is remembered No page is dark-only and none is light-only
Plate 10 How to build a new page Ref. AV-SYS-26 · Sheet 10 of 10 Method
Six parts, always in this order.
Duplicate the template, rename it, change three things in the header, then add plates. A page that follows this order will look like it belongs before anyone chooses a single colour.
PartElementWhat it is
01HeaderUtility strip 48 px + nav 84 pxShared, unchanged on every page. The active item is the only thing that differs.
02BreadcrumbsHome / this page, mono 13 pxLeft; three live statistics on the right, separated by pipes, first with a gold dot.
03Page headerH1 116 px + watermark 187 pxWatermark top-right at .16 alpha, pointer-events none. Right-aligned kicker paragraph. Closes on a hairline.
04PlatesSix to nine, numbered in orderEach with its margin label, kicker, head grid, content and a closing strip.
05Closing plateA slip with one actionAlways last. A field, a primary button, a quieter alternative and what happens next.
06FooterShared footerImported from the same helper on every page, never re-drawn.
Before a page is done
A plate number, in order, with no gaps
A margin label reading subject · plate · Avava
Four corner ticks on the plate frame only
A head grid of 1400 | 1fr, paragraph right-aligned
One dark surface on the page, at most
A closing strip: a fact on the left, a caveat on the right
Numbers spelled out in the headline, digits in the data
Every figure carrying white-space: nowrap
One primary action, one quieter alternative
The dark theme checked before the page is called done
Pages built on this systemSeventy
Plates across the site117
Colours in the paletteNine
TypefacesThree
✎ Revised September 2026 · version 2.4
DrawnDesign & MediaCheckedO. CharrierSheet10 of 10ScaleFull sizeDateSeptember 2026
