Zahlon Travel · Icon System · Private A/B
No top travel app derives its navigation from a place — that is the honest, category-unique claim here (not a literal multiplier). Both are bespoke hand-drawn SVG on your real 24-grid — no icon library, no animation library, ~4 KB, both live across all three themes. They share one engine, so the choice is purely aesthetic: where does colour live? A spends its entire colour budget on the one tab you're on. B turns every tab a warm lac tone and blooms the active one on a lathe. Drive the controls; tell me which ships.
Calm at rest. One ink line, no motion — the photography leads. On the active tab the glyph fills to a Ceylon sea-gem and a banded half-moon stone settles beneath it in temple gold (outer band, then inner) as the line draws on — felt, not labelled. The whole budget detonates on a single tab.
Warm on every tab. A unified aged-lacquer tone reads as one set — never a rainbow. The active tab blooms a three-band lathe roundel (red · gold · black/ivory) that spins into being, the glyph floods like wet lac, and a warm glow settles. One disciplined family, earned on the tab you're on.
Both docks stay in sync so you compare the same tab. Default active = Routes. Tap any tab on either phone, or hit Play the motion. The device-width buttons size the dock to the nominal width; the phone frame adds its bezel on top, so the dock at 320 is a true 320 device dock. B over Aurora (a cool theme) keeps text on gold and the warm rings at lower saturation — and A is the recommended spine over cool grounds.
Every ratio below is computed in-page right now, over the flattened dock surface — the opaque scrim plate composited over both a white and a black photo (the worse is shown), judged at the strict scrim-only floor (the glass blur only adds headroom on top). Text floor 4.5:1, non-text floor 3.0:1. Toggle Scrim plate off and watch Aurora collapse over a bright photo — that single fix is the only thing that ever actually broke AA.
colour only on the active glyph + a non-text arc
every rest tone & every band pre-verified per theme
The complete proof, all three themes at once, computed live below from the same WCAG math — judged at the strict scrim-only floor (the scrim plate composites to 95% effective alpha by itself, with zero help from the dock's translucent glass, over the worse of a white or black photo). In the real render the glass lifts it higher still. If this reads 0 fails, the 0-AA-fails claim survives even the adversarial ship-path where the parallel session's dock background is removed.
The same 24-grid, 2px round-cap line drives the entire app, not just five tabs. Fillable glyphs (tinted) gain an outline→fill companion layer with evenodd knockouts — hover any tile to see the morph that becomes the active read. Line-only glyphs keep draw-on + colour, no invented fill.
Left = today's quiet outline. Right = the active read in each treatment: the gem-fill + moonstone arc (A) and the lac-fill + roundel (B). route has no counter to fill, so its draw-on wicks along the path and pools its two node discs — the hardest glyph becomes the most expressive.
No top travel app derives its navigation from a place: Airbnb tints Rausch red, Apple & Google converge on a generic outline→fill, Hopper leans on a mascot, Komoot reserves colour for route data. Both Zahlon treatments are Sri Lankan by construction, and they share concentric-band DNA — so whichever you pick is one coherent system.
the moonstone threshold-stone
At the foot of a Sri Lankan temple stair lies a carved half-moon of concentric bands — the literal stone you cross from the worldly into the sacred. A bottom nav is a threshold, so the metaphor is exact, not decorative.
Because the moonstone is sacred — even its animal band was edited at Polonnaruwa out of deference — we borrow only the abstract concentric rhythm. No flame-figure, four-animals, hamsa goose, lotus, makara or Kirtimukha is ever carved into a glyph. The active arc inscribes outer→inward, exactly as the symbolism runs and as a carver lays the stone.
lac turned on the Angulmaduwa lathe (beralu veda)
On a spinning lathe — the southern beralu veda craft of Angulmaduwa — sticks of coloured lac are pressed to seasoned wood so friction lays down clean concentric bands. Traditional Sri Lankan lac actually runs deep reds, blacks, greens and ochres; we deliberately curate three of them — vermilion, ochre-gold, lac-black — into one disciplined family, never a rainbow. (We borrow the lathe motion; Matale's signature is nail-work niyapoten veda, a different regional craft — so we don't claim both.)
It is a secular court craft, zero sacred-misuse risk, so it can carry bold colour honestly. The signature is a literal depiction of the making: rings settle into being, then the glyph floods like wet lac. The third band inverts with the ground — lac-black on pale paper, ivory-sheen on the dark themes — exactly how real turned lacquer is lit.
The outline→fill axis the whole industry converged on — Apple's .fill, Material's FILL 0→1, Airbnb's morph — is, physically, a Sri Lankan craft process. In A it's the carver laying the threshold stone; in B it's wet lac flooding to the rim. We don't copy the Silicon-Valley convention — we reveal the centuries-old craft it unknowingly reinvented. Original by being from somewhere, not by being weird: we keep the proven, legible industry mechanic verbatim, then add the one thing the giants structurally cannot — a culturally-loaded moment of arrival.
One gold ties it together. The masthead Pearl, A's temple-gold arc and B's ochre-gold mid-band are the same warm family — the explicit through-line — so the logo, the nav, and the large-surface crafts (batik, makara-torana, Dumbara weave, reserved for heroes) read as one disciplined system, not a craft sampler. Pick A or B; the gold keeps the brand singular.
Icon.tsx (filled + FILLS)→
ResponsiveShell.tsx (arc/rings + scrim + FLIP pill, new scoped files)→
re-run the flattened AA audit at 320/360/768 in the longest locales→
commit
Engineering note. One primitive change either way: add a filled?: boolean prop + a FILLS map of evenodd companion geometry to Icon.tsx (more already proves the primitive renders fill). The dock injects the arc/ring/scrim/FLIP-pill spans via a new scoped stylesheet at higher specificity. tourism.css and TourismApp.tsx are never touched. Scrim contract: paint the scrim plate at the full per-theme surface at opacity:0.95 so it composites to ≥ every floor by itself (independent of the dock's translucent bg) — assert at port time that it renders ABOVE the blurred backdrop and BELOW glyph/label, and have the re-audit flatten the actually-rendered composite over white AND black, never assume tourism.css supplies surface×dock-alpha. Motion is compositor-only (transform/opacity + tiny one-shot stroke-dashoffset), CSS linear() springs with a cubic-bezier fallback first, blur tier-gated on data-lite. Haptics (@capacitor/haptics selectionChanged) are native-only on the AAB/iOS and won't fire in this web preview. Private preview · noindex · self-contained · deployable to Cloudflare Pages as-is.