Design system

The pieces this site is built from, each with its variants and the markup to use it.

Buttons

A glossy gel, like a 2001 desktop. Hot pink is the default. Blue and Bondi aqua are color variants, and flat is the sticker look the site had before.

<button class="button" type="button"><span class="mark" aria-hidden="true"></span> Hot pink</button>

<button class="button blue" type="button"><span class="mark" aria-hidden="true"></span> Blue</button>

<button class="button aqua" type="button"><span class="mark" aria-hidden="true"></span> Bondi aqua</button>

<button class="button flat" type="button"><span class="mark" aria-hidden="true"></span> Flat</button>

Mode switch

A letter bead at the end of the nav that overrides the system light or dark setting. The moon turns on black velour, the sun turns on holographic foil, and the pick is remembered on every page. It stays hidden until mode.js runs.

<button class="mode-switch" type="button" aria-label="Dark mode" aria-pressed="false" title="Dark mode" hidden></button>

Windows

A panel dressed as a pink instant-message window. The title bar is decoration and hidden from screen readers, so the heading above the window still names it.

<div class="panel window">
  <div class="titlebar" aria-hidden="true"><span class="titlebar-title">away_message.txt</span><span class="titlebar-buttons"><span>_</span><span>□</span><span>×</span></span></div>
  <div class="window-body">…</div>
</div>

Tickers

A crawl of taglines. The chyron runs on the home page; LED and ribbon are variants. Each pauses on hover, on focus, and with its own pause control, and stands still for visitors who ask for reduced motion. They start paused here.

<%= partial("ticker", items: TICKER, variant: "led", label: "Tagline ticker", paused: false) %>
<script src="/ticker.js" defer></script>

Background

Every page sits on a faint tile of sparkles and hearts in --dot, over a soft gradient. The tile is --tile, masked so it follows light and dark mode.