Design
The system behind this site, in the colors and sizes it actually ships with. Toggle the theme button in the header and the swatches below follow along, since they are rendered with the same CSS variables as the rest of the site.
Color tokens
Nine custom properties, defined once in theme.css for :root and :root[data-theme='dark'], and used everywhere else on the site. Dark mode's neutrals are the same near-black as the brand assets below, not a separate blue-tinted dark theme.
Type
Exactly two self-hosted font families, no third-party font CDN, nothing else used anywhere on the site. Headings and interface text lean sans (Geist Sans), body copy leans serif (Lora), and a small italic accent marks a single word in the hero.
Heading · Geist Sans, Inter, -apple-system, Segoe UI, sans-serif · weight 700
Aa Design system
Body · Lora Variable · line-height 1.45
The quick brown fox jumps over the lazy dog. Body copy stays small and readable, and every paragraph inherits var(--muted) for its color unless overridden.
Accent · Lora Variable italic · weight 400 · hero only
in
Spacing and layout
Content stays centered under a fixed max width, and vertical rhythm comes from one repeated section gap, not a full spacing scale.
1024px
Max content width (.site-main), with 24px side padding, dropping to 16px under 720px.
56px / 38px
Space above each .section: 56px desktop, 38px under 720px.
Shape
Radius is not one fixed token, it scales with what it's wrapping: small for controls, larger for cards and heroes, a full pill or circle for anything round.
Components
The reusable primitives: a bordered card on a grid, a divider, and the pill used for tags and badges across the site.
Card
Border in var(--line), background in var(--surface). Hovers with an accent-tinted border and a 1px lift.
Card grid
Three columns desktop, two at 920px, one at 720px. The same grid backs Skills, Featured reads, and Tools.
Divider
A 1px var(--line) rule with 22px of margin, used to separate sections inline rather than with more whitespace.
Motion
Mostly short and functional, one deliberately expressive touch on the cursor. Everything here turns off under prefers-reduced-motion or on touch devices, not just slows down.
120 to 180ms
Hover and focus transitions across cards, tiles, and links, all ease timing.
180ms
The theme switch itself: background and text color crossfade, plus a circular reveal from the toggle button.
Frosted cursor
A borderless, translucent, accent-tinted dot replaces the system cursor and tracks the pointer exactly, site-wide. It condenses to a small, fully solid orange dot over anything interactive. Over a link worth naming, a separate chip also appears offset above or below the dot with a short label, "Read this," "Start an email," "Visit this," in Geist Sans, so the label never sits on top of the link itself. Fine-pointer, motion-ok visitors only; touch and reduced-motion get the native cursor untouched.
Portrait hover
On the homepage, hovering the profile portrait colors "Human" and "Tech" to match the always-accent "in" in the hero, via a :has() selector reaching back across the hero from a shared ancestor.
Marks and banners
Downloadable assets built from the AG monogram: the mark alone, a lockup with the Abhiigatty wordmark, a muted grey pair for embedding elsewhere, a desktop wallpaper, and a LinkedIn cover banner. Click any tile to download.
