Inside the Grail website design
Grail is built with custom code and Three.js. Its pages are built from navbar, hero, other, dashboard, features, process, gallery, stats, forms, and footer sections, shown here in full-page captures and a scroll recording. Typography: PP Pangaia (display text and headings) and Switzer (body text). Colours: background #000000, text #FFFFFF, main buttons #FFCDFF, surface #F6F6F6.
Grail pulls you out of autopilot with one real-world quest a day. Grow four stats: Strength, Intellect, Charisma, Wisdom. When you graduate, your subscription cancels itself. Its visual style is editorial, minimal, and playful, with navigation bar, hero, and product ui among its components.
Why we picked it
Quest cards tilted in 3D space against solid black give the opening screen the feel of a tarot spread, with oversized serif headlines doing the emotional heavy lifting instead of photos. Deep black, dusty rose and amber heraldic patterns carry through each chapter, so a long scrolling page still reads as one coherent world.
What to look for
- Navbar: a short menu: only the destinations visitors actually look for
- Hero: a specific headline instead of a generic slogan
- Dashboard: real interface rather than abstract illustration
- Features: benefits framed around what the user gets, not internal capability names
Questions designers ask
What fonts does Grail use?
Grail uses PP Pangaia for display text and headings, and Switzer for body text, measured from the captured page's CSS.
What is the Grail website built with?
The Grail website is built with custom code and Three.js, detected when the page was captured.
What colours does the Grail website use?
Measured from the captured page's CSS, the Grail website uses #000000 for the background, #FFFFFF for text, #FFCDFF for main buttons, and #F6F6F6 for surfaces.
What sections does the Grail website have?
The Grail website includes navbar, hero, other, dashboard, features, process, gallery, stats, forms, and footer sections. Each one opens on its own page, so you can compare it with the same section on other websites.
