The visual identity of boost, packaged as a small, dependency-free design system you can drop into any static page.
It’s a neon-tech, glassmorphic look: a cyan → violet → pink triad on a
near-black ground, an ambient aurora that drifts slowly behind the page, and
glass cards that light up under the cursor. The goal is a page that feels
slightly alive but not distracting — every motion is slow, low-contrast, and
gated behind prefers-reduced-motion.
Open demo.html to see the whole system on one page.
style/
├── boost.css the design system — tokens, atmosphere, primitives, a11y
├── boost.js two progressive enhancements: cursor glow + reveal-on-scroll
├── demo.html self-contained showcase / living reference
└── README.md this file
<link rel="stylesheet" href="style/boost.css">
<!-- optional: cursor spotlight + reveal-on-scroll -->
<script src="style/boost.js" defer></script>
Everything is static — no build step, no dependencies, no webfont fetches. The JavaScript is pure enhancement: with it disabled, the page is still fully styled and legible (cards just don’t glow, and reveal elements start visible).
The entire identity lives in three custom properties. Recolor the system by changing their values — never the selectors.
| Token | Value | Role |
|---|---|---|
--cyan |
#22d3ee |
primary accent |
--violet |
#a855f7 |
secondary accent |
--pink |
#f472d0 |
tertiary accent |
--bg |
#07080f |
near-black page ground |
--text |
#e9ebf5 |
primary ink |
--grad |
cyan → violet → pink | the signature gradient |
Neutrals are intentionally cool (a slight blue bias), not pure grey, so they read as chosen rather than defaulted.
| Class | What it gives you |
|---|---|
.wrap |
centered max-width container that sits above the aurora |
.glass |
the reusable living-glass surface — blur, hover lift, cursor spotlight |
.cap |
a padded glass card with icon slot (--ic-bg/--ic-fg), title, tags |
.stat / .stats |
gradient stat figures in a responsive grid |
.badge |
a “live” pill with a breathing dot |
.btn .btn-grad .btn-ghost |
the two button treatments |
.eyebrow .sec-title .sec-sub |
section chrome (eyebrow is gradient-clipped) |
.grad-text |
gradient-clip any inline text |
.window |
a macOS-style terminal frame + .tp/.tv/.tc/.tok/.cm syntax tokens |
.reveal |
fades/slides in when scrolled into view (via boost.js) |
body::before (drifting aurora) and body::after (masked tech grid) are fixed
layers at z-index: 0. Keep your content inside .wrap (which sets
z-index: 1) so it sits above them.
boost.js writes the pointer’s element-local position into --mx / --my on
each .glass, .cap, .stat, and .window. The CSS reads those in a radial
gradient. No JS → the variables stay unset → the spotlight simply never shows,
and the hover lift still works.
prefers-reduced-motion disables the aurora drift, the breathing badge,
the reveal animation, and the hover lift — hover still recolors, just without
movement.:focus-visible uses the cyan accent).--text on --bg) at the default sizes.This is the aesthetic used across the boost documentation and jonnyeclectic’s portfolio, extracted here as a standalone, reusable system.