Reference · the tokens & components that power this site

Design System

A living style guide rendered from the real CSS. Everything here is defined in src/styles/global.css — tokens live in the :root block, components are the classes below. Change a value there and it changes everywhere.

Color tokens

--var · :root
--bg #0a0a0f Page background
--ink #f4f4f0 Primary text
--muted #8a8a99 Secondary text, meta, labels
--acid #d4ff00 Primary accent · links on hover · selection
--hot #ff2d6b Accent · big cursor · gradients
--electric #5b5bff Accent · gradients · glow
--cyan #00e5ff Accent · prose links · feed rows
--line rgba(255,255,255,.10) Borders, dividers, hairlines

Project gradients

.proj.p1 – .p4
.p1 linear-gradient(135deg,#5b5bff,#00e5ff)
.p2 linear-gradient(135deg,#ff2d6b,#ff8a00)
.p3 linear-gradient(135deg,#0a0a0f,#2a2a55)
.p4 linear-gradient(135deg,#d4ff00,#00e5ff)

Typography

--font · --mono
Ag
--font Display & body "Space Grotesk", system-ui, …
Ag
--mono Labels, meta, code, nav "JetBrains Mono", ui-monospace, …
h1.display

Display

.sec-head h2

Section heading

.tag

A lead paragraph with an emphasized gradient phrase woven in.

.prose p

Body copy in prose. Designed for reading — 720px max, 1.7 line-height, with cyan links and inline code.

.kicker / .ey (mono)
Monospace label · meta text

Buttons & pills

.btn · .pill
.pillz / .pill
React Astro Design Systems TypeScript

Cards

.card · .now
Currently
A standard hover card with a label and a headline.
pill pill
Feed
09:24pushcommit message text…
11:02mergeanother row in the feed list

Project tiles

.work · .proj

Project 1

Role · Year · accent p1

Project 2

Role · Year · accent p2

Project 3

Role · Year · accent p3

Project 4

Role · Year · accent p4

Posts list

.posts · .post

Teaser block

.hhmm

A feature teaser

Radial-gradient panel pairing a headline + blurb with a call-to-action button.

Explore →

Effects & motion

global.css + Base.astro
  • .glow — fixed radial-gradient backdrop, drifts on an 18s loop (@keyframes drift).
  • .cursor / #cur — custom acid dot that follows the pointer and swells to a hot circle (.big) over interactive elements. Hidden on touch.
  • .dot — pulsing acid status dot (@keyframes pulse).
  • .reveal.reveal.in — scroll-triggered fade/slide via IntersectionObserver in Base.astro.
  • ::selection — acid background, black text.
  • Hover transitions live on .card, .proj, .post, .btn, nav links.

To change anything here, edit src/styles/global.css. Tokens are in the :root block at the top; each component above maps to the class shown in its index label.