This looks like none of them because the page runs on a journey
contract: the bands follow the chronological stages of a relocation, sideways navigation
jumps between stages, and every stage must answer the same three questions in the same
order: what happens, which paper proves it, who is already there. A band that cannot
answer all three is cut.
Rhythm · one band, one screen, one idea
navsticky · 64px · invisible at top, materialises with the corner brand on scroll
mastheadthe full lock-up opens the page
the manuscript planecouplet fragments in textured sand ink flow BEHIND the whole page at 0.45x scroll, cropped by the edges, submerged under opaque bands, resurfacing in open ones
hero~84vh · copy | Dylan's film in the arch
journey intro96px top / 56px bottom padding
Decide
Visa
Arrive
Residency
Settle
Belong
journey520vh of scroll → six stages sideways, butted at 0px
beyond96px padding · three cards, 32px gaps
enquire96px padding · tan ground · one decision
footer56px padding
Vertical space does three jobs, one per reference:
padding inside information bands (56–96px, Mercury), a long quiet gap
between registers (the 96px intro, NOMOS), and no gap at all inside the
journey, where stages butt at 0px and the hairline is the divider (Aman). Text stacks sit
at 9px everywhere.
Typography · two faces, one job each
display · h1Fraunces 430 · 56px / 1.1 carries the story
The move to Oman, handled.
display · h2Fraunces 430 · 44px / 1.1
Six stages. In order.
stage name · h3Fraunces 430 · 52px / 1.1
Secure residency
kickerInter 600 · 12px · +1.6px · uppercase · gold-ink carries the process
Hijrah to Oman
ledeInter 400 · 18px / 1.45 · ink-2
Visa, home, school, bank, community. One company walks you through all of it.
bodyInter 400 · 16px / 1.45
Scroll sideways and walk the six stages in the order they happen.
Display-to-body ratio 56/16 = 3.5 on the hero, 2.75
in bands. The references run 2.0–2.5, ours leans display-heavy because there is no
photography yet to carry weight. No italics are loaded and none are used.
font-weight stays inside each file's real axis (Fraunces 300–500,
Inter 400–600), so nothing is synthesised.
Buttons
Begin the journeyprimary · green ground, paper text · hover darkens to green-lip
Ask us anythingghost · 1.5px inset ring · hover: 5% ink wash
Flat, 4px radius, uppercase Inter 600 at 14px. Focus draws a 3px green
outline offset 3px. Try tabbing to them. The primary is the only place the brand green
fills a surface. That is what keeps it loud at under 2% of the page.
Components · states are the system
rail · rest02Visa
rail · current02Visa
arrow · rest / disabled
→→
field · restYour name
field · focusYour name
journey progress · scroll-driven
toastPreview build. Connected before launch.
The current-stage marker is a 2px red bar. Red never fills a surface.
It marks. The progress hairline is green and moves only with scroll.
Palette · click any swatch to copy its hex. Ratios are measured, not eyeballed
Resampled 29 Aug 2026 from
logo-khanjar-gate.svg, Dylan's decision, when the logo changed. The logo
gives four colours; every tone marked derived is computed from one of them
purely to pass a measured contrast floor, and exists for no other reason. On the
sand-wash band only the darkest tones speak: ink at 6.62:1, sage-lip at 5.14:1.
Ink-2 and sage-deep fail there and are overridden. Do not "simplify" the derived
tones away.
The rules
Colour marks. It never paints.
A terracotta or sage band background to "add brand".
Neutral surfaces · a 2px terracotta marker, a sage button, sand ticks. Accent stays under 2% of nodes. The three references measure 1.81%, 0.00%, 0.14%.
Scroll is the only clock, with one owner's exception.
Idle float loops, decorative animation, anything that moves for no reason while the visitor is still.
The stage track and progress bar map 1:1 to scroll position. Reveals fire once, on entry. The single exception: the hero film, Dylan's own Muttrah footage, autoplays muted on loop, by his decision (29 Aug 2026). Reduced-motion visitors get a still.
No invented people, numbers, or stars.
"500 families relocated ★★★★★": the company has not earned it.
The one real fact, told plainly: the site's builder came as a client and holds lifetime residency.
Every journey stage answers the same three questions, in order.
A stage that lists features, or skips "which paper proves it".
What happens → which paper proves it → who is already there. A band that cannot answer all three is cut.
Oman is home, not scenery.
Turquoise-water hero photography · "discover the jewel of Arabia".
Place appears as evidence (where you will live, bank, school) and never as a holiday. Desert and wadi come after the paperwork, and the page says so.
Headings sit 9px from what they own.
A 40px gap between a kicker and its heading, so they read as strangers.
kicker → 9px → heading → 9px-topped rows. The tightness is the Aman steal, and it is measured.
Graphics
The logo is the cast.
Every scene on the website is built from the element library below,
generated against the cast sheet, in the logo's own sampled palette.
The cast · who exists in this world
Fourteen elements in contemporary Arabic poster
style, generated against the khanjar-gate logo as image reference (Nano Banana Pro, 2K),
regenerated 29 Aug 2026 when the logo and its palette changed. Every scene is generated
against this sheet. That is what keeps one fort looking like one fort. The mihrab arch
is the framing device: each journey stage is a scene inside it. No people appear in this
world: the audience imagines their own family here, and no invented person can overclaim.
Construction rules
Contemporary Arabic poster style: flat 2D vector, solid fills, at most
two tones per object, no outlines, no gradients, no drop shadows. Scenes live inside
a mihrab arch frame. Outside the arch is plain ground so pieces cut to alpha cleanly.
Palette in art is the new logo's four plus off-white: sage #5e7d68, terracotta #c1685c,
sand #c3b09b, charcoal #4f4f4f. Paper is the only ground.
Forbidden: national emblems, coats of arms, crossed swords, flags, or
any government insignia, decided 29 Aug 2026, after the first generation put the state
emblem on a residency card. The card carries a neutral eight-pointed star instead.
Also forbidden: photography, and any composition that reads as a holiday advert.
Model sheet · scale and colour discipline
The three anchor objects at three sizes (silhouettes must survive shrinking) and the five permitted swatches.
Asset inventory · every file the website ships
logo-mark.svgnav · the khanjar-gate mark, cropped from Dylan's logo-khanjar-gate.svg (29 Aug 2026)
logo-khanjar-gate.svgfull lock-up · current logo · opens the page as the masthead and closes it in the footer
hero-film.mp4hero · Dylan's Muttrah footage, first 30s of the 90s master, clean · autoplays muted on loop (his call) · framed in the arch · 6.0 MB
hero-poster.webphero poster + reduced-motion still · the master's opening frame
beyond-learn.webpbeyond 03 · sage arch · book on stand, lantern, crescent
beyond-explore.webpbeyond 04 · terracotta arch · wadi pool, palm, dunes, star
cal-line1a.webpmanuscript plane · couplet line 1, first half · flanks the masthead on the right
cal-line1b.webpmanuscript plane · couplet line 1, second half · flanks the masthead on the left
cal-line2.webpmanuscript plane · couplet line 2 · faint, under the film's lower half into the white space above the journey
cal-seek.webpmanuscript plane · "and seek" · behind the early stages
cal-strive.webpmanuscript plane · "striving" · behind the late stages
cast-sheet.webpthis tab only · 4:3 · the reference for every scene
construction-sheet.webpthis tab only · 4:3 · scale + swatch discipline
Stage art and the hero are cut to alpha
(flood-fill from the border, never a global colour match) and shipped as WebP with the
alpha kept. Nothing is split into layers yet. Each scene moves as one piece, so the
zero-pixels-lost split gate does not apply. Full-resolution 2K sources live in
site/art/.
Motion · scroll is the only clock
rise
waiting
One verb: rise: 24px up, 600ms,
fires once when the element enters the viewport, never loops. The journey track, the
progress hairline, the hero arch's drift and the manuscript plane all map 1:1 to
scroll position. The plane moves at 0.45x, one translate3d per scroll
event, no layout shifts. The one exception to the scroll clock is the hero film,
which autoplays muted on loop, Dylan's decision for his own footage.
prefers-reduced-motion stills the film and pins the plane to the
document.
Art palette · the subset the illustrations use
No blues, no purples, no photographic colour.
If a scene needs a colour not on this row, the scene is wrong.
The type set
Aa
Fraunces (variable, 300–500)Undercase Type · Phaedra Charles, Flavia Zimbardi · Google Fonts · SIL OFL 1.1 ·
self-hosted at fonts/fraunces-var.woff2 · verified at source 29 Aug 2026 ·
licence shipped at fonts/OFL-fraunces.txt, fetched from
github.com/undercasetype/Fraunces/blob/master/OFL.txt
Aa
Inter (variable, 400–600)Rasmus Andersson · Google Fonts · SIL OFL 1.1 ·
self-hosted at fonts/inter-var.woff2 · verified at source 29 Aug 2026 ·
licence shipped at fonts/OFL-inter.txt, fetched from
github.com/rsms/inter/blob/master/LICENSE.txt
Gulzar (regular, Arabic subset)Borna Izadpanah, Fiona Ross, Alice Savoie, Simon Cozens · Google Fonts ·
SIL OFL 1.1 · verified at source 29 Aug 2026 · licence at
build/fonts/OFL-gulzar.txt, fetched from
github.com/googlefonts/gulzar/blob/main/OFL.txt.
Not loaded as a web font: Gulzar typesets the manuscript-plane rasters
offline (chosen over Amiri for its handwritten nastaliq flow, 29 Aug 2026), which then
pass through the archaeological ink pipeline: elastic hand-wobble, reed pressure,
stroke-following erosion, per-mark diacritic fading. The Arabic stays letter-perfect.
The page ships only images, and this specimen is itself a raster of Gulzar, so it
renders the same on every machine. The Arabic source fonts live in the project's
build/fonts/ folder, which does not ship.
offline only
Amiri · Scheherazade New · Aref Ruqaa (audition faces, never shipped)All SIL OFL 1.1, kept in build/fonts/ with their licences ·
Amiri: Khaled Hosny, licence fetched from github.com/aliftype/amiri/blob/main/OFL.txt ·
Scheherazade New: SIL Global, licence fetched from github.com/silnrsi/font-scheherazade/blob/master/OFL.txt ·
Aref Ruqaa: Abdullah Aref, Khaled Hosny, licence fetched from github.com/aliftype/aref-ruqaa/blob/main/OFL.txt
FYI: check the licence before you ship.
A typeface is software, and it is licensed, not bought. A face that is free
for personal use can cost real money the moment it appears on a commercial
site, and web embedding is almost always a separate grant from
desktop use. Before a font ships:
Confirm the licence covers web embedding, not just desktop.
Check whether it is capped by monthly pageviews.
Check whether self-hosting is allowed, or CDN-only.
Keep the licence file or receipt with the project.
If a client owns the site, the licence must be in their name.
Open-source families (SIL Open Font License) are the safe default: free to
use commercially, free to self-host, free to embed. The catch is that you
may not sell the font itself, and some require you keep the licence file.
When in doubt, read the licence at the foundry, not a blog summary of it.
Copy
Every line is a recorded fact.
The words on the Website tab, where they came from, what was cut,
and a toggle that rewrites the page in front of you.
Where it comes from
Three sources, nothing else. Hassan's own service list: he supplied it,
and every service on it is real. The builder's own move: the person who
made this site relocated to Oman as a client and holds lifetime residency. That
is the only proof used, because it is the only proof held. The journey
contract: every stage answers what happens, which paper proves it, and who
is already there. A line that cannot be traced to one of the three is not
written. No fictional customers, no composite stories, no numbers the company
has not earned.
Signs of machine writing
The tells this page is audited against, loudest first.
"not just X, it's Y": the loudest tell in English right now
the rule-of-three reflex: "faster, smarter, better"
hedging stacks: "can help you to potentially"
invented proof: counts, ratings, testimonials that never happened
The cleanse
How each draft got clean.
Draft → run the tell-linter (deslop.py, scores the visible words
/5) → rewrite what fails → lint again. The linter is the second reader here,
and it caught this page once. The intro above the stages shipped wearing
the loudest tell in the book: "not a leap, it is a sequence."
The toggle below shows the repair. One word stays flagged on purpose:
journey. Here it is not metaphor. It is the name of the six-stage
section and the contract the whole page is built on. Final score: 4/5,
with that as the only deduction.
Five principles · each with a real pair from this page
Principle
Before
After
Why
Real proof or none
a dark "proof" band of claims
one true sentence: the builder of this site made the move and holds lifetime residency
the band was cut on sight (Dylan, 29 Aug). One verifiable person beats any claim wall
Say who does it
"One company walks you through all of it"
"People who live in Oman take you through each one"
a company is nobody. The reader is buying a person on the ground
The paper is the promise
"we handle residency"
"Which paper proves it: your residency card."
every stage names its document, a promise you can hold
Kill the tell, keep the point
"A relocation is not a leap, it is a sequence."
"Scroll sideways and walk the six stages in the order they happen."
same meaning, no machine cadence
One ask per page
"Contact us"
"Book a call now."
the site's whole job is one enquiry. The button asks for exactly that
Every headline, before → after
Where
Before
After
Reason
hero h1
The move to Oman, handled.
Your hijrah to Oman, in experienced hands.
Dylan's call, 30 Aug
hero lede
…One company walks you through all of it, run from Oman, by people already on the ground.
…People who live in Oman take you through each one, in order.
who, not what
stages intro lede
A relocation is not a leap, it is a sequence.
Scroll sideways and walk the six stages in the order they happen.
tell removed
stages h2
Six stages. In order.
kept
the contract itself
Settle · what happens
…we help you set up each one, in order.
…set up with you, one at a time.
hedge removed
Learn card
Quran and Arabic education, at your pace.
Quran and Arabic education.
cliché cut
beyond h2
Beyond the move.
kept
named by Dylan
enquire h2
Ask the question you are sitting on.
Book a call now.
Dylan's call, 30 Aug
hero proof
This website was built by a former client…
removed
Dylan's call, 30 Aug
The live rewrite
The site already wears its final copy. Press this, switch to
the Website tab, and see the first draft come back, tells and all. Press
again to re-ship. No layout jump either way.
logo-mark.svg
hero-film.mp4
stage-decide.webp
stage-visa.webp
stage-arrive.webp
stage-residency.webp
stage-settle.webp
stage-belong.webp
door.webp
cal-line1a.webp
cal-line1b.webp
cal-line2.webp
cal-seek.webp
cal-strive.webp