Marketing screens in the 2026 direction: one accent, one dark object, hairlines, and a dark mode that takes the shell with it

[Apolloccrypt]

What this is

Group marketing of the "Paramant moet een droom zijn" round. Five screens
rebuilt against docs/brand/design-direction.md (PR #373): /pricing,
/parasign, /parasend, /about, /security. Not one word of copy changes.
Every pinned text, every head element and every ?v= is where it was.

The homepage is a special case. #377 landed on main while this branch was in
flight and rebuilt / in the same direction, with a finished page-local design
of its own. That design is left exactly as merged: not one rule of its layout is
touched here. What it did not have is dark, and dark is the one thing that
cannot be half done, because the shell around it goes dark with the other five
either way. So / gets a token set, the shared nav treatment, and two
accessibility repairs. Nothing else.

The one file

frontend/marketing-2026.css, linked last on those six pages and nowhere else.

1. Tokens plus an alias layer. The 2026 values from the direction, mapped
   onto the v4 names design-system.css, nav.css and the pages already speak.
   That is what lets the buildbar, the navigation and the footer follow these
   pages into dark instead of staying light behind them, with no edit to any
   file another screen shares.
2. The craft. Hairlines instead of boxes, one filled cobalt action per
   screen, one dark object per screen, mono labels with a lime rule, the radius
   scale (0 for what carries the brand, 3 for controls, 10 for cards, 16 for
   panels), tabular figures on every amount, and motion that only ever confirms
   something.

One rule decides every call to action: lime is the gift, cobalt is the
purchase. The Community action sits inside the one inverted plane on its
screen and uses the single legal lime plane in the system, #0A1626 on
#B2FF3F at 14.94:1. Everything that used to be filled elsewhere is an accent
outline, so the one cobalt plane on a screen is that screen's own action. That
includes the bar's Create account, which was a filled lime plane on every
page and therefore a second primary, louder than the hero's own, and which in
dark put light ink on lime at 1.07:1.

Scope and the dark-mode question

Only these six pages link the file. Nothing here can reach /dashboard,
/sign, /account, /parashare or the auth screens: those belong to another
builder in the same round. A page either links this file and is dark complete,
shell included, or it does not link it and is byte for byte what it was.

That does mean the site is split until the systeem rollout lands: these six go
dark with the reader's system, the rest stay light. Section 5 of the direction
calls a half-lit page the trap, and there are none here. Whoever takes
design-system.css to v5 deletes section 1 of this file and the rest stands.

Defects found and fixed, all measured

What	Was
Featured tier card translucent over a hairline grid, composited to rgb(209,214,224)	price note 3.79:1
Community block on /parasign kept navy text and cobalt links on its dark plane	1.05:1 and 2.72:1
Lime as a plane behind cobalt and navy text on three tier cards	3.4:1 and 2.6:1
Nav Create account: lime plane, light ink in dark	1.07:1
Two inline links on / distinguished by colour alone	2.01:1 and 1.76:1 against their sentence
Four pages had no main landmark	axe landmark-one-main
Inline links across all six distinguished by colour alone	axe link-in-text-block
Footer hung three columns in a two column grid	Legal wrapped under the address, page ended in 300px of nothing
Empty third cell of the /parasend business grid	painted the grid's own hairline colour as a grey panel

Measured, not asserted

Lighthouse, against a local server that gzips and sets immutable cache
headers the way nginx does, because anything else measures the harness:

page	perf	a11y (main)	a11y (this)	best practices	SEO
/	100	92	100	96	100
/pricing	100	87	100	96	100
/parasign	100	89	100	96	100
/parasend	100	89	100	96	100
/about	100	88	100	96	100
/security	100	90	100	96	100

Best practices is 96 on both branches, from the test server answering 404 to
/api/user/session/verify. Performance is 100 on both.

Contrast. 4150 text pairs over 24 combinations (six pages, two themes, two
widths), each flattened against its first opaque ancestor background with
element opacity folded in: nothing under AA, lowest 4.62. Folding opacity in
is not decoration: it is what caught a homepage label at 50 percent opacity
sitting at 3.35:1 while its colour token said otherwise.

Tap targets. Everything operable is 44px on a coarse pointer or a 640px
viewport. Ten inline links inside running prose stay at their line height, which
is the documented exception in section 2.8 of the direction: they are held to
the reading rule (an underline) rather than the button rule.

Reduced motion. pricing-1440x900-light-reduced-motion.png is byte
identical to pricing-1440x900-light.png. All movement off, no state lost.

Fold headroom on /parasign. The first push failed CI on the one sentence
that has to be readable before a buyer signs: CI renders these pages in a DejaVu
Sans that wraps a line earlier than the one here, and the sentence landed 33px
past the fold there while sitting exactly on it locally. Measured at 390px
against origin/main, the SES sentence now ends at y=795 where main puts it at
y=815, so there is 20px more room than the branch this replaces and 49px inside
the fold. The room came out of the gaps, not out of the words.

Both reproduce: node scripts/audit-marketing-a11y.mjs and
node scripts/shoot-marketing.mjs.

Two tests move, neither loses its guard

tests/navigation-shell.test.mjs pinned the mobile bar to the literal
rgb(248, 250, 252). That is one palette's page colour, not the property the
check is about, and no dark theme could ever satisfy it. It now requires the bar
to be fully opaque, unblurred, and the same colour as the page it sits on, which
is the guarantee the rule in nav.css was written for (iOS Safari renders a
backdrop-filter over a dark hero see-through) and which now holds in both
themes.

tests/site-claims.test.mjs used an h3 tag to split the two product blocks on
/pricing. Those headings are h2 now, because an h1 running straight into an
h3 is a level skipped for a screen reader and was the last point /pricing was
losing. The regex matches either and keeps doing what it is there for.

Gates

tests/static-sanity.sh all eleven, scripts/check-csp-inline.sh,
scripts/check-cache-bust.sh (346 links, one consistent ?v=), eslint@9
clean, root integration suites 150 pass / 2 skipped, browser suites 31 pass
including first-screen, pricing-fold, navigation-shell, site-claims,
ui-truthfulness, seo-contract and links.

One pre-existing failure on this machine: tests/heartbeat-lib.test.mjs cannot
resolve @noble/post-quantum locally. It fails identically on origin/main
with these changes stashed, and it runs green in CI, which installs the root
dependencies.

Evidence

docs/brand/assets/droom-marketing/, 37 images: every changed screen at 390x844
and 1440x900 in light and dark, a full page pass at 1440 in both themes, and the
reduced motion proof.

Left open

• Not the whole site yet. Five pages plus the homepage's tokens. /docs,
  /help, /trust, /download and the rest keep the v4 look until the systeem
  rollout.
• No theme switch. The tokens are written three ways so an explicit choice
  wins the moment a control exists, but the control belongs in the nav, which is
  shell.
• The nav CTA change is scoped. It is an accent outline on these six pages
  and still a lime plane everywhere else. It should be one or the other
  site-wide, and that is a shell decision.
• The footer fix is scoped for the same reason.

[Apolloccrypt]

Closed as superseded. The marketing screens took a different route after the buyer and truth reviews: #377 and #382 (homepage: the founder on the first screen, the letter, the receipt, five checkable facts), #380 (design system v4.1 light, no dark layer on marketing), #386 (technical strip removed), #392 (navigation bar). The measured light gains of this branch landed through #380; the dark layer was withdrawn because it sat behind a gate no switch reached. Nothing from this branch is lost that the reviews did not reject.