Mindful Men’s Guild
A global community of men practicing attention, honesty and care.
01 Brief
A community of men practicing attention, honesty and care. The site had to explain four different ways to take part: monthly letters, coaching, inner circles and retreats.
02 Build
Two colours, bone and ink, and a looping hero video that pauses when it scrolls out of view. The Guild’s ten principles open one at a time, and the next retreat stays behind a holding page until it’s ready to announce.
The system
From mindfulmensguild.com’s own stylesheet- Bone #e8e2d7
- Ink #1e1e1e
- Bone, raised #f2eee7
- Ink, secondary #4a4845
- Ink, soft #6b6863
Type
- Inter
- Everything, from 300 to 600, optical sizes 14 to 32
Details
- 01
The headline blurs into focus while the hero video unclips and settles from 1.14 times its size.
- 02
The video pauses off-screen and under reduced motion.
- 03
The ten principles sit in an accordion that keeps one open at a time.
- 04
Each practice has its own animated line icon: two circles leaning in, a ring of speakers, a sun and moon over mountains.
Under the hood
08- Pages
- 4
- Principles
- 10, one open at a time
- Dependencies
- 2
- 01Astro, static, on Netlify
- 02A custom Astro integration that fixes widows and orphans in the built pages
- 03A launch flag that swaps in a holding page
- 04A sitemap that skips unlaunched pages
- 05Two dependencies in total
- 06About 80 lines of plain JavaScript, no framework
- 07Parallax on a CSS scroll timeline
- 08Logo and icons from one SVG sprite