§00 — Project showcase
The design reads as competent and structured before it reads as friendly — built for a regulated-services audience (funds, brokerages, FX). Navy carries the brand, cyan carries the action, and Manrope at weight 800 carries every headline with magazine-front-page confidence.
Three principles guide every decision: trustworthy clarity (crisp white surfaces, visible borders, no editorial flourishes); bold typographic hierarchy (extrabold display + tight tracking + cyan period accents); and honest jurisdictional structure (four practices presented as indexed editorial stripes, with the legal footnote treated as part of the design rather than hidden away).
§01 — Logo options
Each option is shown on white (primary nav context) and on navy-deep with a plain-white treatment (footer context). Both pair correctly with Manrope and the cyan accent.
On white · primary nav context
On navy-deep · footer context (white treatment)
On white · primary nav context
On navy-deep · footer context (white treatment)
Logo options for review — for selection & approval
§02 — Desktop mockup
Scroll inside the browser frame, or hit Full Screen for a 1440 px viewport.
Live embed · scroll inside the browser frame · switch the logo option above
§03 — Mobile mockup
Same source file at mobile viewport — sticky white nav collapses to the hamburger, utility bar hides, hero stats strip drops to two columns, jurisdiction stripes stack.
Live embed · 390 px viewport · switch the logo option above
§04 — Color system
14 named tokens. No invented tints — alpha values reuse navy & white at fixed steps. Hex values are exact from the prototype.
Navy family — primary brand
Cyan family — accent
Ink & text · contrast on white
Rules & surfaces
§05 — Typography
Manrope is the only family. Weight 800 carries every section headline; weight 300 lifts the editorial lead paragraph in the About dossier.
§06 — Motion system
Two easing curves do all the work. Every animation is JS-gated, so the page is fully visible without scripts and a 3-second safety net forces visibility on slow connections.
| Token | Value | Where it's used |
|---|---|---|
| ease-spring | cubic-bezier(.32,.72,0,1) | Every hover, CTA, underline-grow, hamburger |
| ease-reveal | cubic-bezier(.16,1,.3,1) | Scroll-triggered entrances |
| 300 ms | duration-300 | Hamburger line rotation |
| 400 ms | duration-400 | Logo grayscale, underline-grow |
| 700 ms | .anim-stagger child | Card grid staggered entrance |
| 800 ms | .anim-up | Section headline entrance |
| 90 ms | stagger step | Delay between staggered children (up to 6) |
JY Global coordinates incorporation, licensing, and ongoing compliance across the Cayman Islands, Mauritius, SVG, and Comoros (Mwali).
Stagger children · ease-reveal · 6 s loop
Loops every 5 s
Mauritius Investment Dealer and GBL applications. Comoros Mwali brokerage licensing.
↑ Hover the card
↑ Hover any link
grayscale(1) opacity 0.55 → grayscale(0) opacity 1 · 400 ms
§07 — Component primitives
Eyebrow pills, CTAs, cards, tags, stats. Labels lifted verbatim from the prototype — no English placeholders.
Eyebrow pills · §07.3
CTA variants · §07.4–§07.7
Tag / pill chips · §07.18
Service cards · §07.10–§07.11
Entity selection, registered office, beneficial-ownership filings, and ongoing statutory maintenance across our four jurisdictions.
Mauritius Investment Dealer and GBL applications. Comoros Mwali brokerage licensing. Documentation, substance, and compliance handover.
Ongoing regulatory posture, AML/KYC framework reviews, board changes, and economic substance maintenance for your operating entities.
Hero stats strip · §07.9
Utility bar · §07.1 (thin strip)
§08 — Icon inventory
Every icon below appears somewhere in the prototype. Bold weight is reserved for primary-CTA arrows.
Navigation & affordances
Contact & utility
Service / practice icons
Social (footer)