Space Grotesk
Nav, labels, controls, tables
Design
Most personal websites (and, to be fair, websites in general nowadays) lack soul. I don't aim to repeat that. Below are the main design components used across this personal website.
Layout
Pages open with a borderless hero section, then use panel cards to structure the content. The card that this very text is inside of, as well as all of the cards on this page, are examples of this.
Typography
IBM Plex Serif
Titles, ledes, notes, articles
Color
Page
--bg · #050b17
Panel
--bg-2 · #0c1629
Surface
--surface · #13203a
Brand
--brand · #4c86e8
Brand light
--brand-light · #a9c7ff
Text
--text · #e6efff
Components
Info card
Grid / archive card inside a panel.
Link card
Info card with circular arrow.
Eyebrow
Label
Hairline + uppercase mark.
Total: 12
Latest: Jun 2026
Modules
Modular floating windows for performing different functions on the website (i.e. searching the website, changing the website's theme, etc.). Very obviously inspired by Microsoft Windows window behavior.
Motifs
Adding more soul to the website, in the form of smaller details.
Seigaiha 青海波
Blue ocean waves
Blue sea and waves. Symbolizes a peaceful life, continuous good fortune, and quiet resilience. Layer: .seigaiha inside a host. Used on affiliation tiles, primary buttons, modules chrome, selected nav, note cards/headers, and the footer panel.
Auric compute matrix logo
Starfield
Background
Used in the website's body background.
Cherry Blossom Rain 桜雨
Nyan Cat, the internet's favorite cat
Running cat
Petey Panda
Mickey Mouse from Steamboat Willie
He's used in the bottom right corner of the website as an informational assistant when you hover over a clickable button or link on the website.
