Superneon

superneon is near-black violet with hairline edges and light that comes from inside. A solid button is a dark pill, lit along its inner edges and ringed in a gradient that glows past its outline; the big headings fade from bright to lavender, and anything chosen or switched on picks up a halo. The glow is only ever decoration, so every label still sits on a flat colour that clears WCAG AA. Dark mode is the original look; light mode keeps the dark pills and the glow and puts them on a pale lavender page.

Using it

import { styles } from 'sitelo/ui'

head(
  title('My site'),
  styles({ preset: 'superneon' }),
)
// <link rel="stylesheet" href="/su/ui-c9428b65.css">
// <link rel="stylesheet" href="/su/superneon-5b0e7d21.css">

Paint the page with var(--su-sn-backdrop) for the preset’s ground with a violet light falling on it from the top, or with plain var(--su-bg). The headings use Geist when the page loads it, and the system face otherwise — the preset downloads nothing.

body {
  background: var(--su-sn-backdrop);
}

Your own colours

theme() still works on top, so a preset is a starting point rather than a fork. This one gives every palette two more slots, glow and glowEnd: the two ends of the gradient its rim and halo are drawn in. Nothing is read against a glow, so they can be as bright as you like.

head(
  styles({ preset: 'superneon' }),
  theme({
    primary: { glow: '#00e5ff', glowEnd: '#7f6bff' },
  }),
)