How to Use Psychedelics
Free, evidence-informed psychedelic education and harm reduction.
01 Brief
Free harm-reduction education. People read it before taking something, so the information has to be right, easy to find and consistent from page to page.
02 Build
Guides to twelve substances and to preparing for, navigating and integrating an experience, plus four interactive tools. The build generates its own search index and share images, and stops the deploy if a link is broken or two pages list different risks for the same pair of substances.
The system
From howtousepsychedelics.com’s own stylesheet- Ground #0a0a0a
- Card #1a1a1a
- Teal accent #40d9cc
- Brand green #6dd456
- Light-theme cream #faf8f4
Type
- Space Grotesk
- Headings
- DM Sans
- Body
Details
- 01
The hero’s accent word rotates every three seconds in a green-to-blue gradient.
- 02
Cmd-K opens a command-palette search over an index built at deploy.
- 03
Glossary terms link themselves inside articles and open a card on hover.
- 04
Topic cards lift and take a tint of their colour on hover.
Under the hood
08- Pages
- 50
- Substance guides
- 12
- Interactive tools
- 4
- 01Astro, static, on Netlify, with view transitions and hover prefetch
- 02Decap CMS for the articles
- 03A Netlify function for newsletter signups, behind Cloudflare Turnstile
- 04A share image for every substance and article, rendered at build
- 05Search index, glossary and FAQ data generated from the pages at build
- 06A build that fails on broken links, over-long meta, breadcrumb drift or a mismatched interaction risk
- 07Structured data across the site: organization, course, FAQ, breadcrumbs
- 08A Content-Security-Policy