FGFC Markets Global Ltd
2026
FGFC Markets
Private-bank restraint rendered in markup: a guilloché seal built from twenty-four ellipses, and a canvas that freezes rather than stops.
Delivered to
Corporate disclosure
FGFC Markets Global Ltd
Framework
Astro 5, static, no client framework
Type: Four families, self-hosted
Techniques
3
7 constants, formulas and guards
A single-page corporate site for a licensed brokerage — the kind of site that exists because a regulator expects one, and which is therefore almost always dull. The design concept treats it as an engraved instrument instead: deep navy canvas, antique-gold hairlines, an ivory paper band, a clause-numbered oversight list, and a rotating security-print seal. It is the most typographically committed thing in this section, running four families at once where the rest of the section runs two.
Offline
A corporate disclosure site built to an approved copy deck. Not publicly reachable from this page, so every claim below is made against the source rather than against a running site.
A disclosure site drawn as an engraved instrument, seal and all, in markup.
What was built, and for whom.
FGFC Markets Global Ltd
Corporate disclosure
en
Single page plus four legal routes, built to an approved copy deck — so the design had to absorb fixed wording rather than the wording bending to the layout.
The mechanic, rebuilt and running.
Rebuilt from the constants quoted below, on this page, in your browser. It is not the client’s board — none of their artwork, copy or offer is here. What is reproduced is the part that was mine to reproduce.
The rosette is one ellipse drawn 24 times about a shared centre — the interference is emergent, which is why the count is worth having as a parameter rather than a pixel. The inscription is neutral text on the shipped path: the real ring carries the client’s registered name and licence status, and that is a claim rather than an ornament.
The same 300×300 field, the same engraved radii and dash patterns, and the same rosette of ellipses at rx 92 / ry 34 — three groups turning against each other rather than as one piece.
The petal count is a control because in the original it is a parameter. The moiré is emergent rather than painted, and it reorganises completely depending on whether the count divides evenly into 360.
The inscription is neutral. The shipped ring carries the client's registered name and licence status, which is regulatory copy rather than ornament.
Each one starts with something that was broken.
- 01
The seal is geometry, not an image
The failure
A security-print rosette is the kind of ornament that arrives as a 400 KB PNG, goes soft on a retina screen, cannot take the brand colour without being re-exported, and cannot rotate in more than one piece.
The decision
Draw it in markup instead. Twenty-four ellipses rotated in fifteen-degree increments about a common centre produce the moiré rosette; concentric dashed rings supply the engraved furniture; the inscription rides a circular text path. Three separate groups counter-rotate, so the rings, the rosette and the lettering turn against each other rather than as one sticker. It inherits `currentColor`, so the gold is the brand token and not a baked pixel.
- constantsrc/components/Seal.astro
Array.from({ length: 24 }, (_, i) => i * 15) — the rosette's petal angles - constantsrc/components/Seal.astro
ellipse rx=92 ry=34 about (150,150) in a 300×300 viewBox - constantsrc/components/Seal.astro
engraved rings — r146 dash 2/6, r138 plain, r134 dash 16/9, r102 plain, r58 dash 1.5/4
What it cost
Twenty-four ellipses plus a text path is more DOM than an image would be. It is still a fraction of the bytes, and it is the only version that can be recoloured by changing one token.
- 02
Decorative means decorative, all the way down
The failure
An ornament carrying the company's registered name and licence status reads, to a screen reader, as a claim — and a rotating one reads as a claim delivered twice, since the inscription is repeated around the ring to close the circle.
The decision
Mark the whole seal as presentational and hide it from assistive technology, and carry the licensing statement as real copy in the document beside it. The ornament decorates a fact; it is not the fact.
- guardsrc/components/Seal.astro
aria-hidden="true" role="presentation" on the root svg
- 03
Reduced motion freezes the canvas at a composed frame
The failure
The usual reduced-motion branch for a decorative canvas is to skip drawing it. That leaves a hole in the layout — the hero was designed with a drifting line through its lower third, and removing the line is not a calmer version of the design, it is an unfinished one.
The decision
Keep drawing, stop advancing. The animation clock is seeded at a chosen non-zero phase rather than at zero, so a reduced-motion visitor gets a still frame of the wave at a composition that was picked to look right, not the flat line that phase zero would have produced.
- constantsrc/scripts/main.js
let t = reducedMotion ? 2.6 : 0 - formulasrc/scripts/main.js
wave = sin(x·0.8 + t·0.9)·0.46 + sin(x·1.9 − t·0.55)·0.28 + sin(x·0.33 + t·0.32)·0.26 - guardsrc/scripts/main.js
dpr = Math.min(window.devicePixelRatio || 1, 2)
Every animation, with what it does when asked for less.
The last column is the one worth reading. “Respects reduced motion” is easy to assert and easy to skip, so where it is not true here, it says so.
Seal rotation
Three groups, counter-turning — rings and rosette one way, inscription the other
Linear, continuous
CSS-driven, so it stops with the stylesheet's reduced-motion rule. The seal remains fully drawn.
Market pulse
Continuous while the hero is on screen; three summed sines
None — it is a waveform, not a transition
Still drawn, frozen at phase 2.6 rather than removed or left flat.
Rising motes
26 particles, per-particle speed 0.08–0.30
Linear drift with an individual phase offset
Static — positioned but not advanced.
Scroll reveals
On intersection, once
Ease-out
Content renders in its settled state; the reveal never runs.
What it was built on, what is claimed, and what is not.
Framework
Astro 5, static, no client framework
The interactive surface is a scrollspy, a mobile menu, a form and one canvas. None of that needs a runtime, and a disclosure site is the last place to ship one.
Type
Four families, self-hosted
Cormorant Garamond to display, Lora to read, Marcellus for caps and labels, mono for data tokens. Self-hosted rather than requested from a font CDN — a third-party request on a regulated financial page is a dependency and a privacy question at once.
Script
One vanilla file, around 6 KB bundled
Scroll reveals, scrollspy, the canvas, parallax, the menu, form validation and hero-video gating. All of it costs less than a framework's runtime before that framework has rendered anything.
Imagery
Generated, then optimised
Hero imagery and video were generated rather than licensed, then compressed to modern formats at build. A brokerage with no photographable premises has no stock library worth buying into.
Claimed — and how to check it
The rosette is twenty-four ellipses at fifteen-degree increments
The petal array and the ellipse geometry are both in Seal.astro.
The seal is hidden from assistive technology
aria-hidden and role=presentation on the root svg element.
The hero canvas keeps drawing under reduced motion
The clock is seeded at 2.6 rather than the draw call being skipped.
No font CDN request
Fonts are bundled from Fontsource rather than linked.
Not claimed
- No traffic, conversion or engagement figure. It is a disclosure site; nobody instrumented it and no number was ever shared.
- No claim over the copy. The wording came from an approved deck and was designed around, not written here.
- No regulatory claim of any kind. The licensing statements on the shipped site are the client's own and are not reproduced on this page, including inside the rebuilt seal.
- No Lighthouse or performance score. The bundle size quoted is the script's own, not a measured page metric.
- The seal on this page is a faithful rebuild of the geometry, not the shipped component — same construction, neutral text.
Every constant is read from the repository at the file named beside it. The seal on this page is rebuilt from those constants with neutral inscription text — the shipped ring carries the client's regulatory copy, which is not reproduced.