Back
Exhibits

Style Guide

A reference for the colors, gradients, and fonts used across most of the site.

Dark Mode

  • --pagebg #000000 (Black)
  • --color / --headers / --link #C3CDE6 (Periwinkle)
  • --linkhover #9DE093 (Granny Smith Apple)
  • --button #191934 (Black)
  • --menuborder #100e25 (Black)

Light Mode

  • --pagebg #eeeef6 (White)
  • --color / --headers / --link / --linkhover #100e25 (Black)
  • --button #ddddee (White)
  • --panelbg #ffffff (White)

Light/dark mode isn't a toggle — it follows the browser/OS setting automatically via the prefers-color-scheme media query.

:root {
  --pagebg: #000000;
  --color: #C3CDE6;
  --button: #191934;
}
@media (prefers-color-scheme: light) {
  :root {
    --pagebg: #eeeef6;
    --color: #100e25;
    --button: #ddddee;
  }
}
Close Book

Gradients

The site rainbow

The one gradient used everywhere — planet borders, back-buttons, footer rule, sitemap columns, table.identity-table borders, book cover edges. Every stop is an exact 90s-era Crayola crayon color per Wikipedia's list of Crayola crayon colors.

background: linear-gradient(to bottom,
  #FF3399, #FF355E, #FF9980, #FED85D,
  #9DE093, #02A4D3, #4F69C6, #6B3FA0);
  • Wild Strawberry #FF3399
  • Radical Red #FF355E
  • Vivid Tangerine #FF9980
  • Dandelion #FED85D
  • Granny Smith Apple #9DE093
  • Cerulean #02A4D3
  • Indigo #4F69C6
  • Royal Purple #6B3FA0
Next

Fonts

--bodyfont: 'Roboto', sans-serif

Roboto

--headerfont: 'Space Grotesk', monospace

Space Grotesk

--titlefont: 'Zen Dots', monospace

Sphinx of black quartz, judge my vow.

Headings, Text & Links

Subsection heading (h3)

Minor heading (h4)

This is a body paragraph. It contains a regular link and some inline code, plus italic and bold text.

Back

Tables

A quick reference for a few classic magic mushroom species. On the live site, the first column of a table is normally prefixed with the /assets/buttons/yinyang.gif icon.

SpeciesCommon NamePrimary Compound
Psilocybe cubensisGolden TeacherPsilocybin
Psilocybe semilanceataLiberty CapPsilocybin
Psilocybe azurescensFlying SaucerPsilocybin
Amanita muscariaFly AgaricMuscimol
Panaeolus cyanescensBlue MeaniePsilocybin
 
<table>
  <thead>
    <tr><th>Species</th><th>Common Name</th><th>Primary Compound</th></tr>
  </thead>
  <tbody>
    <tr><td>Psilocybe cubensis</td><td>Golden Teacher</td><td>Psilocybin</td></tr>
    ...
  </tbody>
</table>
Next

Two Column Layout

Two evenly split columns, used for pairing related content side by side. On the live site this is .row > .twocol.

First column content goes here.

Second column content goes here.

<div class="row">
  <div class="twocol">First column content goes here.</div>
  <div class="twocol">Second column content goes here.</div>
</div>

Three Column Layout

Three even columns, used for grouping shorter blocks of content. On the live site this is .row > .threecolumn.

First column content goes here.

Second column content goes here.

Third column content goes here.

<div class="row">
  <div class="threecolumn">First column content goes here.</div>
  <div class="threecolumn">Second column content goes here.</div>
  <div class="threecolumn">Third column content goes here.</div>
</div>
Back

List Styles

Unordered

  • First item
  • Second item
  • Third item

Ordered (Roman)

  1. First item
  2. Second item
  3. Third item

Yin-yang (.taijitu)

  • First item
  • Second item
  • Third item

Tick & trash lists (from Terms of Service)

I will draw:

  • Furries
  • Animals
  • Original characters

I won't draw:

  • Hate speech and discriminatory content
  • Sexualized animals

Sitemap rainbow list (.raincol)

  • First item
  • Second item
  • Third item
Back to Start