01 · Overview
Subtraction as the whole method
For this concept, I imagined Arke as a brokerage representing a small number of design-led homes each year, sold with discretion and without spectacle. Every instinct a property website has — the gallery carousel, the mortgage calculator, the enquire-now bar — is spectacle. So this build is defined by what is not in it.
There are four colours: white, ink, a single warm grey, and a hairline. There are no cards, no filled surfaces, no shadows, no rounded corners and no icons. Sections are separated by a rule and roughly twice the vertical space of any other page in this set. It is the shortest stylesheet of the ten by a wide margin, and that is the design.
02 · The idea
The best homes wait to be understood
The brokerage's own line — the best homes do not announce themselves; they wait, precisely, to be understood — is a design brief disguised as copy. It rules out anything that announces: movement, contrast, colour, weight.
One typeface, three weights
Archivo at 100, 200 and 300 for display. Nothing on the page is bold. The hierarchy is size and space, never weight.
Opacity only
Reveals fade and never translate — a deliberate refusal. A brokerage selling stillness should not have things sliding around.
Photography in black and white
Nine images, all monochrome, so the only colour on the page is the price.
03 · Goals
What the page had to do
Present three houses properly
Named architect, location, price, one paragraph. Enough to qualify a buyer and nothing that pressures one.
Explain a private process
Four steps that make discretion sound like method rather than evasion.
Feature one house at length
The Kessler Pavilion gets a full section — the depth signal that a grid of thumbnails can never send.
Begin a conversation
A consultation form with three fields. Not an enquiry funnel; an introduction.
04 · Build order
How it was built
The four tokens
White, ink, grey, hairline. Written first and never added to — every later decision had to be expressible in those four.
A vertical scale, not a horizontal one
With no colour and no weight to work with, the only remaining variable is space. The spacing scale got more attention than anything else in the build.
The nav that removes the page
Opening the mobile menu marks every background landmark
inertand releases it above 900px — the panel is genuinely modal, not visually modal.Statistics without decoration
Count-ups set in the same three weights as everything else. No units in a different colour, no icons, no progress rings.
Deleting
The last pass removed a divider style, two hover states and a hero animation. The stylesheet ended smaller than it started that day.
05 · Architecture
Three files
├── index.html 19.9 KB — 5 sections, 9 photographs, 0 inline SVG
├── styles.css 20.7 KB — 11 custom properties, 5 media queries
└── script.js 12.2 KB — 352 lines: nav · inert · reveals · counters · form
The stack
- Semantic HTML
- CSS Grid
- inert
- IntersectionObserver
- Archivo 100–300
- Inter
Accessibility
- inert background
- aria-expanded
- aria-live
- Focus move on submit
- Reduced motion
06 · What fought back
Problems, and what beat them
Ultra-light type at display size is elegant on a retina laptop and close to unreadable on a low-density screen at 100% zoom, where the stems thin out to nothing.
Weight 100 is permitted only above a size threshold; body copy never goes below 400. The lightest weights exist purely as display, which is what they were drawn for.
Hiding a mobile menu visually still leaves its links in the tab order, so a keyboard user tabs through an invisible panel into nothing.
inert on the background landmarks while the panel is open, released above 900px where the panel no longer exists. One attribute replaces a manual tabindex sweep that would have needed maintaining forever.
With no shadows, no fills and no colour, a page can read as unfinished rather than restrained — the difference is entirely in the spacing.
The vertical scale was tuned before any content was final, so the rhythm is a system rather than a series of local adjustments. Sections sit at eleven rems; nothing is closer than that.
Opacity-only reveals give the eye nothing to track, so on a long page they can read as flicker rather than arrival.
The duration went up rather than the distance: 1.2 seconds, longer than any other page here. Slow enough to read as a fade-in, never as a flash.
07 · Worth keeping
The parts worth keeping
Three houses, chosen slowly
A listings section that lists three, in keeping with the brief's imagined scarcity. The layout refuses to pad it.
Said quietly, meant entirely
Fictional client words set at body size with no quote marks, no portraits and no star ratings.
The Kessler Pavilion
One featured house given a full section, proving the brokerage can talk about architecture rather than square footage.
Begin with a conversation
The contact section's heading is the entire sales strategy, and the form has three fields to match.
08 · Run it live
Run it here
The real build, embedded and running. It loads on demand — nothing is fetched until you ask for it.
Skip the live preview
The real build, running in the page. The live preview is an embedded page; press Escape to leave it.
Open full screen ↗
