The editorial horizon
The first screen feels spacious and explains the product immediately.
- P01MUST
Two complementary planes
Use a left-aligned narrative column and an asymmetric atlas on wide screens. The horizon is a fine shared baseline linking headline, time and place. On compact screens, show the proposition, one CTA and a cropped but meaningful atlas in normal reading order. The hero uses content height, not forced 100vh.
AcceptanceAt 390×844, the product purpose and primary CTA appear without waiting for animation. At 320px and large text, the hero grows with content rather than clipping it.
- P02MUST
Product evidence over decoration
The atlas shows representative activity records, time labels and approximate places. Label illustrative data. Use contour lines and a few weighted nodes to show relationships; do not mimic a production map with fake live participants. Include one real product screenshot or an accessible product walkthrough below the hero.
AcceptanceEvery showcased interaction has an honest response or is a noninteractive figure. No fabricated member counts, testimonials, countdown urgency or unverifiable availability claims.
| Sequence | Composition | Decision answered |
|---|---|---|
| 01 Invitation | Narrative + atlas + primary CTA | What can I do here? |
| 02 Proof | One real experience with annotated outcome | Does the product deliver it? |
| 03 Path | Discover → inspect → participate as a connected spine | How does it work? |
| 04 Possibilities | Role/category rows with real examples | Is this relevant to me? |
| 05 Trust | Plain privacy and location explanation | What am I sharing? |
| 06 Questions | Native disclosure FAQ | What still stops me? |
| 07 Next step | A calm final CTA and legal/locale links | Where do I go next? |
Responsive composition
Keep the visual rhythm while changing the arrangement.
- P03MUST
Grid & navigation
Use a 1200px content maximum, 12 columns expanded, 6 medium and 4 compact. Gutters are 48px at ≥1200, 32px at 768–1199 and 20px below 768. Narrative blocks alternate open field, ruled rows and a single focused evidence panel. Header is 68px minimum with real anchor links; mobile menus are accessible disclosures.
AcceptanceAt 320, 390, 768, 1024 and 1440px no page overflow or collision. Header can grow at large text; anchor headings remain unobscured. At 400% zoom navigation stays reachable.
- P04MUST
Type & emphasis
Use display 48–88px expressed in fluid rem, maximum 12–16 words, line-height ≥1.05. Body is 18px at comfortable widths and ≥16px compact. Keep the headline solid Ink; Ember accents one meaningful phrase. Show primary action in a solid warm fill; allow a secondary text link with an explicit destination.
AcceptanceHeadline wraps naturally in French and Arabic. No critical information is gradient text or microsized metadata. Equal prominence is not given to every link.
An atlas that tells the truth
Give place and time an understandable structure.
- P05MUST
Narrative atlas behavior
Use a small inline SVG or pre-rendered image for the public hero, with a nearby text list of representative records. If interactive, use native buttons to select a record and show a labeled detail region; all records work by keyboard/touch. Map controls must have real meaning. Reuse the same selected record in text and visual representations.
AcceptanceThe page remains complete with JavaScript disabled and reduced motion. Selection is visible by label and shape. Decorative geography is marked schematic; exact private coordinates never enter the illustration.
- P06MUST
Timelines & categories
Use a horizon ribbon to order real dates or steps, with direct labels and connected milestones. Category color follows common meanings; category filters pair a label with count or selected state. Do not add an auto-scrolling marquee to communicate essential content.
AcceptanceAll milestone and category content is available as text. Horizontal overflow has an obvious scroll or navigation affordance without fading essential labels.
Confident, calm conversion
Make the destination and commitment clear.
- P07MUST
CTA contract
Primary CTA names the next action and its actual destination. Preserve direct hrefs, keyboard activation and expected new-tab behavior. Explain sign-in or install requirements beside the relevant action. Use no looping CTA pulse, hover-only action, modal interruption or surprise auto-navigation.
AcceptanceA CTA works without client JavaScript. Track only allowlisted coarse events; never block navigation on analytics. External destinations and download labels match what opens.
- P08MUST
Public content & localization
Use one H1, a meaningful H2 outline, semantic landmarks, purpose-based alt text and visible legal/contact links. Localized pages use correct lang/dir, self-canonical URLs and reciprocal hreflang. Dates and assertions have a source/owner; legal copy is maintained independently of promotional language.
AcceptanceAll key text is in the initial HTML, not canvas or image-only type. Arabic reading order and DOM order agree. Each locale has a complete primary journey and no mixed untranslated navigation.
Fast by construction
The atmosphere should be cheaper than the story.
- P09MUST
Delivery budgets
Target ≤30KiB gzip initial JavaScript, ≤35KiB gzip CSS, ≤120KiB initial font files and ≤250KiB initial hero media. Ship responsive AVIF/WebP with dimensions; load the actual LCP image eagerly and later media lazily. Load no full map engine, animation framework or video before it is requested.
AcceptanceCheck production compression and request waterfall on a cold load. No unused font preload. Measure Core Web Vitals with constrained mobile lab diagnostics and real field cohorts after launch.
- P10MUST
Enhancement lifecycle
At most one optional compositor-only ambient hero motion in Full; stop it when out of view or page hidden. Content never starts invisible awaiting an observer. Reduced and data-saving modes show final static compositions. Third-party tags are isolated from critical rendering and governed by the product consent policy.
AcceptanceNo animation-frame loop runs while scrolling the reference page. The first paint remains useful if script fails. Layout shift stays within the shared CLS budget.
Web page acceptance
Verify the narrative and the real path out of it.
- P11MUST
Public release matrix
Verify home, FAQ, legal, locale switch and each CTA at compact/medium/expanded widths; English, French and Arabic; keyboard, screen reader, no-JS, reduced motion and forced colors. Run focused Chromium/Firefox/WebKit checks for shared layout and browser APIs. Test real mobile Safari/Android at release.
AcceptanceEvidence includes first viewport and full page, link/status checks, metadata parity, accessibility findings and asset budgets. Do not advertise runtime or accessibility conformance based on screenshots alone.
CONFORMANCE RECORD
From specification to evidence.
Record the product build, applicable rule IDs, owner, fixtures, environment and results. Attach visual, accessibility and performance evidence before calling the implementation production-ready.
Download the release record template ↗