Deux North - Design Rationale
> For the client. Three directions for the look and feel of the site, and why each one exists.
> The brand itself is already agreed and does not change between them: the Sage guide with an
> Explorer accent, Cabinet Grotesk and Switzer, and the palette of white, ink black and one
> forest green. What you are choosing here is the room the brand lives in.
---
Executive summary
You said you are a jeweller of AI, a boutique that has to impress with cleanliness and technology
from the first second. So we stopped designing a website and started designing a shop. Every
direction below is built from three moves: type at the scale of the architecture rather than the
scale of a headline, whole screens of one solid colour that change like walking from room to room,
and almost nothing else on the screen. There is no photography in any of the three, because a
boutique does not hang a picture of a watch on the wall when it can show you the watch.
---
What the name means, and what the design does about it
Deux North evolves Deus ex machina. Not the machine that saves you: the alliance that gets you
there. Two parties working as one - your people and the machine, you and us - and the Second Brain
that comes out of both. AI amplifies people here, it never replaces them. North is the Pole Star:
the fixed point of strategic direction a business steers by.
That reading now governs the design, and it replaced an earlier one. An earlier note in the naming
material read the name as *two norths*, a fixed geographic north and a shifting magnetic one. That
idea has been removed from every mockup and from every document. Where it left visible marks - a
strapline across the top of two heroes, two labels engraved on the dial - those are gone.
The consequence you can see: in direction A the instrument is no longer a watch dial, it is a
compass. A star is struck at north, and two needles hunt for a moment and then settle
together on it. The star is the direction that does not move. The two needles are the alliance
finding it. That is the whole brand in one drawn object, with no words spent explaining it.
---
What changed in this round
You were specific, and all three of these are direct answers.
| What you said | What we did |
|---|---|
| The tone-on-tone text is unreadable. | Every quiet line has been lifted until it genuinely reads on screen. The language stays - big type set one step off its own ground - but "one step" is now a step you can actually see. We checked each one against its own background and then checked it again in a screenshot rather than in code. |
| Too much small writing. Maximum cleanliness. | The straplines, the repeated sub-lines, the "scroll" cues and the little labels that only described the animation are all gone. Each hero is now: the wordmark, the question, one button, and its one instrument. What we removed is not lost - it belongs in the sections below the fold, where we can give it room, and in the copy round. |
| The watch is good, a compass would be better. | Direction A is now a compass. See above. |
| Direction B is out. | Replaced entirely by a new one. See below. |
---
The language, in plain terms
Tone on tone, but readable. The most expensive thing a designer can do is use one colour and
make it look like three. Across all three directions the big type is often set in the same family as
the background, one step lighter or darker, so it recedes rather than shouts. The rule we broke last
round and have now fixed: recede is not the same as disappear. Every line has to be legible to
someone glancing at a phone in daylight, including the ones that are meant to be quiet.
Solid fields. No page-within-a-page. When a section changes, the entire screen changes colour.
Walking down the page should feel like walking through rooms.
Space. Very few elements, all of them correct, with a lot of nothing around them.
One green. Forest green is never decoration. It appears on the button, on a live state, and on
the instrument. If a green thing on the page is not something you can act on or something that is
happening right now, it is a mistake.
---
The three directions
A - Hallmark
*The white room, where the green is the only jewel.*
Pure white from edge to edge. The question is set enormous in ink, the last line stepped back a tone
so the sentence lands rather than ends. Behind the type we engrave a compass the way a watchmaker
would engrave a dial: a hairline degree ring, a wind rose cut in two tones, a star struck at north,
and two needles - one forest green, one its shadow - hunting a few degrees either side before they
settle together on the star. The dial runs off the right edge of the screen, half inside the room
and half outside it.
The technology you see in the first second is the compass: it is live from load, and on the built
site it turns with your scroll, so it doubles as your position in the page and lands on north at the
close.
Best if you want the most crafted of the three, and a first impression that says the name out
loud without a word of explanation.
B - Essential
*Radical chic, radical essential.*
Almost nothing. A hairline drops from the top edge of the page like a plumb line and ends on a single
point of forest green, breathing. Under it, alone in a white field, your question, large enough that
it is the only thing you can look at. Under that, one pill. No labels, no sub-line, no scroll cue, no
second button, no image, no decoration at all. The luxury is the emptiness.
The green point is the Pole Star, and it is the one thing that never moves. Scroll and the ground
changes from white to ink and back to white, the words change with it, and the point stays at exactly
the same height on exactly the same axis. The rooms travel past a fixed direction rather than the
other way round. Your entire brand argument, made with one dot and one line.
Best if you want to be the calmest thing your buyer has seen all week. It is the direction that
most obviously costs money, because there is nothing on the screen to hide behind.
C - Rooms
*Solid fields, where colour is the set.*
The site opens on a full screen of forest green, which is not what anyone expects from an AI firm.
The question is built across it in four lines that step from left to right down the page, the first
line spoken quietly in a lighter green on green, the last words running past the right edge. Beneath
it, a single hairline rail carries a lit marker travelling between three stops: get found in AI, put
AI to work, stay in control of it. That is your own clarifier line turned into an instrument, and it
does the home page's real job - routing people to the right place - without spending a sentence on it.
Scroll and the green leaves the screen completely. An ink room takes it, and the free check runs
there as an instrument panel: four engines, four hairlines drawing left to right, states reading
live. Then a white room to close.
Best if you want the direction least like anything else in your category. Full-screen colour is
a commitment: it will look magnificent, and it will demand the same discipline on every page after
this one.
---
What we deliberately did not do
| Not done | Why |
|---|---|
| Stock or AI-generated photography | You have no photography yet. Rather than fake warmth with borrowed pictures, we built directions that look finished on day one and get better, not worse, when your real photography arrives. |
| Purple gradients, neon, chrome, circuit patterns | The visual clichés of the AI category. Avoiding them is most of the reason you will not look like everyone else. |
| Card grids | The default way to show two or three things, and the reason most B2B sites blur together. Where you have two ways of helping, we give each one a full monumental row instead. |
| Scrolling word marquees | Buzzwords on a conveyor belt. The opposite of a voice that says "not yet" when that is the honest answer. |
| Testimonials, logos, numbers | You have no verified proof yet. We will not invent it. Credibility comes from "Run by an expert. Powered by a system.", which claims only what is true. |
| Explanatory microcopy in the hero | Small print that tells the reader what they are about to see is a confession that the design is not doing its job. Removed from all three. |
| Any headline smaller than the screen | The single biggest reason the first round felt ordinary. |
---
The words
Every word in the three mockups is lifted directly from your own site content document. Nothing has
been invented, nothing has been improved, no em-dashes have crept in, no competitor is named, and no
claim is made that you cannot back.
---
How the scroll works, in all three
The home is a scroll-choreographed page, not a long document. That means the hero is scene one, not
a picture at the top. In each direction the fold holds while its one instrument runs, then the entire
field leaves the screen and the next colour takes it. Nothing fades in politely; rooms replace rooms.
The mockups show a frozen frame of that choreography, which is why in each of them something is
caught halfway - two needles a few degrees apart, a marker halfway between two stops, a line half
drawn.
---
What we need from you
1. Pick a room. A, B or C. If you want, say what you would take from another one.
2. The logo. It is still in review, so nothing in these mockups draws the N mark. Once it is
final we set the wordmark properly and cut the favicon from it.
3. Photography. None of these need it, but all three get warmer with three or four real
portraits later. Worth planning, not worth waiting for.
---
Synthesis after your feedback - direction D, "Fixed Point"
You did not pick a room. You picked three pieces, and you were right about all three, so we have
built the one page that holds them.
> "I like the above the fold section but the headline needs work and CTA is weak." (B, Essential)
> "I like the free check section." (C, Rooms)
> "I like the bottom section." (A, Hallmark)
Rooms is the frame. It was the direction with the most conviction and the least resemblance to
anything else in your category, so it sets the architecture: full screens of solid colour that swap
like scenery, the question built at the scale of the building rather than at the scale of a
headline, and the routing rail carried as a working instrument. Everything else is fitted into that.
What came from where
| From | What we took | Where it is now |
|---|---|---|
| B, Essential | The discipline, not a graphic: almost nothing on screen, very few objects per room, generous margins, a third of every field left empty | The spacing of the whole page - all three rooms, not only the fold |
| C, Rooms | The whole structure, the stepped question, the routing rail, and the free-check panel | The frame of the page, and the second room untouched in spirit |
| A, Hallmark | The closing rows: Get found and Put AI to work at enormous scale, oversized numerals in their own column, the workshop kept smaller underneath | The last room |
The space is the design
The reason your eye liked Essential is not one clever mark, it is how little was on the screen.
So that is what we inherited, and we applied it to every room rather than only to the fold. The
question sits in the upper half with a whole empty quadrant beside it. The routing rail is a single
hairline. The button stands alone with nothing near it. In the check panel the four engines are set
far apart instead of stacked as a list, and in the closing room the two rows are given room to be
read one at a time. Each room is a full screen with four or five objects in it and nothing more.
This costs us something and it is worth saying: a page like this cannot absorb extra copy later. If
a paragraph needs to be added, it needs a room of its own. That is the discipline the direction
buys you, and it is also the discipline it demands.
The headline
Now: a whisper, "You know AI matters.", and then the question alone, at nearly double the size:
> Where does AI actually fit your business?
The old line was two sentences and the second one, "Do you know where it actually fits your
business?", quietly tested the reader. Cutting "do you know" leaves the question they walked in
with, and asking it directly is the more confident move: it is the question we answer, not a quiz
we set. It is also five words shorter, which is what lets it be set this large - and the jump in
scale between the whisper and the question is now the entire hierarchy of the fold. Nothing sits in
between the two sizes, which is why the page reads as calm rather than as busy.
We kept "You know AI matters." because it is the sentence that says we understand the position you
are in before we ask anything of you. It is just no longer competing for the same attention.
Two alternatives we considered and did not choose
- *"You know AI matters. Do you know where it actually fits?"* - trims the tail only. Tighter than
the original, but it keeps the quiz.
- *"AI matters. Where does it fit your business?"* - two short beats, more clipped. Rejected because
"AI matters" as a flat statement sounds like we are telling you something you already told us,
and the empathy of "you know" is worth keeping.
The button
Weak in two ways, and we fixed both.
Verbally. It now says "Show me where AI fits" - the visitor's own words, answering the
question directly above it. A button in the first person consistently outperforms one in ours,
and here it closes a loop: we ask the question, they ask for the answer. "Find your bottleneck" was
the outcome written in our language, and "bottleneck" is a word we brought to the conversation, not
one they arrived with. It is not lost: it stays as the label inside North and on the sticky bar
that follows the visitor through the rest of the site, where the question is no longer on screen.
*The alternative we considered:* "Find what to fix first". Concrete, plain, and it is literally
what North does. We would switch to it without argument if you prefer an outcome to an invitation.
It reads slightly more transactional, which is why it came second.
Visually. The pill is considerably bigger, solid white against the forest field, and it is the
only rounded shape on the entire page. Its weight comes from scale and from isolation: it stands by
itself on an empty stretch of colour with nothing competing anywhere near it, which is a stronger
kind of emphasis than decoration would be. No countdown, no "limited spots", no manufactured hurry:
the pull is the answer, not the pressure.
Green is used in exactly three places on this page and nowhere else - the action, the routing rail,
and the live states in the check panel. It is never an ornament and never floats free of something
you can use.
The free check, refined not rebuilt
The panel you liked is intact: four engines, four hairlines drawing left to right, the states
reading live. Four small things improved. The rows are set much further apart, so the panel reads
as an instrument rather than as a list. A lamp now lights beside whichever engine is running. The
names are set a little larger. And one quiet link closes the section, "Run your free check", so the
part of the page you responded to can convert on its own instead of handing the visitor back to the
top.
It says *Checking*, and it will never display a result we have not actually run. That honesty is
the point of the section.
What has not changed
Everything you already approved. Sage and Explorer, the alliance and the Pole Star, Cabinet Grotesk
and Switzer, white and ink and one forest green. No photography, no cards, no gradients used as
decoration, no invented numbers.
The one trade to be aware of
Full-screen colour plus this much empty space is a commitment. It is the most distinctive thing you
could put in front of a buyer in your category, and it only stays distinctive if every page after
the home page keeps the same discipline: one idea per screen, one instrument per screen, and copy
short enough to be set large. That is a constraint on writing, not just on design, and it is worth
saying out loud now rather than discovering it at page nine.
---
Revision log
| Version | Date | What changed and why |
|---|---|---|
| v1 | 2026-08-13 | First three directions: Hangar Light, Field Notes, The Instrument. |
| v2 | 2026-08-13 | Rejected at internal review as too conventional and not premium enough, with a specific instruction: jeweller of AI, boutique cleanliness, technology from the first instant, big tone-on-tone type, solid backgrounds, no vintage photography. Rebuilt from zero as Hallmark, Lantern and Rooms. |
| v4 | 2026-08-13 | Synthesis after client feedback. Olivia kept three pieces rather than one direction: B's fold, C's free check, A's closing rows, with the instruction to combine them using C as the frame. Built as a single direction D, "Fixed Point": Rooms architecture, Essential's spatial discipline, A's two-ways closing. Headline rewritten to one assertive question, "Where does AI actually fit your business?", with "You know AI matters." demoted to a whisper - the client found the old two-sentence version weak. CTA rebuilt verbally and visually: "Show me where AI fits" in the visitor's own voice, on a much larger solid pill isolated on an empty field; "Find your bottleneck" retained for North and the sticky bar. Free-check panel refined, not redesigned: rows spaced apart, per-engine lamp, larger names, one quiet closing link. PM correction applied in the same round: the breathing green point and the meridian motif are removed entirely - not in the fold, not as connective tissue, not inside the CTA. From Essential we inherit only the compositional essentialism and the spacing; forest green survives strictly as the colour of action and instrument. Second PM correction: Essential's negative space is applied to all three rooms, not only the fold - room 1 fits exactly 100vh at 1440x900, 1920x1080 and 390x844 with roughly 40 percent of the fold intentionally empty. A, B and C stay on disk as history; the gate deliverable is D alone. |
| v3 | 2026-08-13 | Brand correction, applied everywhere. Deux North evolves Deus ex machina: Deux is the alliance of human and machine, not a supreme machine, and North is the Pole Star. The "two norths, one fixed one moving" reading is withdrawn and every trace of it removed from the mockups and the documents. A's watch dial becomes a compass with a star struck at north and two needles that settle on it together. Legibility fixed: every tone-on-tone line lifted until it reads, verified in the rendered screenshots rather than in code. Microcopy stripped: straplines, repeated sub-lines, scroll cues and animation labels removed from all heroes. B replaced: Lantern is out; the new B is Essential, radical essentialism built on one plumb line, one green point and the question. |
Selected option: approved