An audit of all twelve draft files against the build turned up a set of
mismatches, most of them in the tier-2 token layer rather than in any one
component. Tier 1 is untouched throughout - only the meanings moved.
SHAPE. The drafts draw three corners, not five: 2px for a tag, thumbnail,
flag or checkbox, 4px for anything with a box, and fully round for a filter
chip or status pill. Nothing in any draft is 8px or 12px. --radius-card and
--radius-surface therefore come down to radius/sm, a --radius-chip is added
for the 2px tier, and --radius-control-lg - a quirk of the Figma Button
frame's ghost cells - is retired along with its four consumers.
ELEVATION. A shadow is a fraction of the ground it falls on, and the ramp
was tuned for a white page: on the drafts' near-black ground a 12-28% black
is invisible. Tier 1 gains the two deep steps the drafts actually draw
(--shadow-dark-lg/xl), and --elevation-card/-popover/-modal move into the
per-surface blocks so the dark surface can take them while the light one
keeps the soft ramp. A resting card now has no shadow at all - the drafts
separate with a hairline - and the black is spent on what floats.
CARDS. The hover was a white-24% hairline and a faint glow; the drafts turn
the hairline accent green, lift the card 6px and land a deep black under it.
The lift is pointer-only and is dropped under prefers-reduced-motion.
GHOST IS A TEXT LINK. The drafts never fill a ghost control - every
"All updates ->" is plain text that turns green while the label-to-arrow gap
opens. The tokens carry no fill in any state and the variant opts out of the
3px lift, which also retires the WCAG workaround the old Figma hover forced
(green label on a green fill, 1.40:1).
NAVIGATION. A nav label rests in text/secondary and brightens to primary;
the current section stays primary and is marked by the accent rule, not by
green text.
HERO STRIPE. The middle block was painted near-black against a comment
claiming the redesign had dropped white; the drafts paint it #F8F9FA. Back
to background/inverse, and to the drafts' 390 : 495 : 363 split.
styles/README.md is updated to match, including a contrast table that still
described --surface-raised as the retired #2e2e2c.
Not changed, because each is a decision rather than a defect: the drafts set
every eyebrow, tag and meta line in IBM Plex Mono at 10-11px with 1.2-1.4px
tracking (a third typeface, and no Arabic counterpart); draft headings are
weight 800, which needs a font file we do not have; and the EU badge
statement stays at --text-primary, since the visibility lockup is
contractual.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Carries the 11 page drafts plus the shared SiteNav and SiteFooter onto the
project's own design system: tier-2 tokens, the published type roles, logical
properties throughout, and both locales.
Surfaces
- The page stands on #0B0B0A with #1D1D1B bands lifted off it, as the drafts
do; the body previously painted the band colour, so every band was a step
too light.
- A card is drawn one step off whatever it stands on (#1D1D1B on the ground,
#141413 inside a band). Components paint --surface-card and a band re-points
it for its subtree, so a card can never come out the same colour as its band.
Shell
- Nav: translucent ground with a blur, chevrons on group triggers, an accent
rule under the current section, the drafts' compact dropdown card, and an
EN | AR toggle in place of the globe menu.
- Footer: the drafts' four-column grid, one-line brand text, Facebook as a
bordered button, the EU lockup, the implemented-by row and the funding
disclaimer.
Pages
- Home: hero with counting figures, launch band, three areas of change,
newsroom, FAQ accordion and the consortium band.
- The nine interior pages rebuilt and then audited section by section against
their drafts.
- Applications: the three-step application form now posts real submissions to
the Strapi `application` type, validated server-side and working without
JavaScript.
Motion
- Every animation in the drafts, as classes in _page-kit/motion.css: staggered
entrances, scroll-driven reveals, the drifting washes (each page carries its
own geometry), the sheen, the counting figures and the accordion. The
drafts' coloured hover glow is deliberately not shipped.
CMS
- New `faq` collection type behind the home page's accordion.
- `role` added to the consortium member component so an editor can supply the
chip and the deliverable separately.
Content
- No invented figure, date, name or commitment ships: the five-working-day
reply, the placeholder email and Facebook handle, the sample news, events,
publications and FAQs, the invented application rules and the TBD counters
are all withheld pending real content. Figures that survived (3 consortium
partners, 4 areas of work, 16 human security sub-projects, Dec 2025 - Dec
2027) are verified against docs/ and the bundled draft copy.
Verified: pnpm typecheck (web + CMS) and pnpm --filter web build pass; all 20
page/locale URLs render 200 through the built SSR handler, including with the
CMS unreachable; no raw hex or physical-direction utility in components or
routes.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
teledrisi
Illusion