Psygaia
A Canadian nonprofit advancing an ecological approach to psychedelic practice.
01 Brief
Psygaia was moving off Squarespace and shutting down a second domain, psygaia.com. The new site had to hold the research behind the Psygaia Hypothesis, a membership, a self-paced program, one-to-one guidance and a journal.
02 Build
An editorial site in navy and warm white, with serif headings. Journal posts are written and edited in Decap CMS. Switching between dark and light spreads the new theme out in a circle, and every old Squarespace and psygaia.com link redirects to the closest page on the new site.
The system
From psygaia.org’s own stylesheet- Navy ground #070d15
- Warm white #edeae3
- Teal accent #45c4b0
- Gradient, green #157a5e
- Gradient, ocean #17607c
Type
- Nocturno Display Pro
- Headings
- DM Sans
- Body and interface
Details
- 01
Switching between dark and light spreads the new theme outward as a circle from the nav, through the View Transitions API.
- 02
A journal card’s photo grows into the article’s header as the page changes.
- 03
Sections animate in on a CSS scroll timeline, with a JavaScript fallback for browsers that don’t support one.
- 04
The flagship section shows How to Use Psychedelics in a browser window that tilts toward the cursor. The windows on this site’s homepage started from that effect.
Under the hood
08- Pages
- 28
- Journal posts
- 16, in Decap CMS
- Themes
- Dark and light
- 01Astro, static, on Netlify
- 02Decap CMS at /admin, with an editorial workflow
- 03A Netlify function for newsletter signups
- 04Cloudflare Turnstile on forms, loaded on first interaction
- 05Responsive WebP images generated at build
- 06Cross-page view transitions and hover prerendering
- 07An RSS feed and a sitemap
- 08A redirect map for every old Squarespace and psygaia.com address