Lacquer · the front-door style
Lacquer.
A glossy, atmospheric surface where drifting aurora gradients sit behind a periwinkle accent and serif italics carry the warmth in the lede.
Used as the “front door” across this site — the landing page and the projects, research, and resume hubs — and on the Yantra, QueryKey, and Alignment subdomains, which all derive their CSS from the same template.
Representative components
A card
Cards in Lacquer use a soft elevated panel (
--bg-card) with a thin --border hairline that brightens on hover. No drop-shadow — the elevation reads from the contrast of card surface against the near-black body and the haze of the aurora behind.Another card
The vertical rhythm is generous: 16–28 px internal padding on cards, 110 px page padding-top on the live site. Headings use Instrument Serif for italic display moments; everything else is Inter with
letter-spacing: -0.005em and font-feature settings cv11 ss01 ss03.// Mono uses JetBrains Mono with the periwinkle accent for keywords const palette = { bg: '#07070c', // near-black, blue-tinted accent: '#8b9bff', // periwinkle sutra: '#d4a76a', // warm gold (Sutra accent) };
Style breakdown
Concrete tokens and signature motifs that make Lacquer look like Lacquer.
Palette
#07070c bg
#0c0c14 soft
#11111b card
#1d1d2c border
#d4d4e0 text
#f0f0f6 strong
#8b9bff accent
#d4a76a sutra
Typography
Body / UI:
Display italics:
Mono:
Body has
Inter 400–800, Google Fonts.Display italics:
Instrument Serif.Mono:
JetBrains Mono 400/500.Body has
letter-spacing: -0.005em, antialiased, with font-feature cv11 ss01 ss03.
Headlines
Fluid
clamp(2.6rem, 6vw, 3.8rem), weight 700, letter-spacing -1.2px, line-height 1.02. Filled with a linear-gradient(120deg, #fff 0%, #b0bcff 50%, #d4a76a 100%) via -webkit-background-clip: text.
Components
Eyebrow pill — mono caps,
Card —
Button — mono label, 8 px radius, hairline border,
letter-spacing: 1.6px, periwinkle text on 6% periwinkle fill, 999px radius, a 6×6 px pulsing dot prefix.Card —
border-radius: 14px, --bg-card fill, --border hairline, no shadow.Button — mono label, 8 px radius, hairline border,
translateY(-1px) on hover.
Spacing
Page padding-top 110 px (live), 80 px (this page). Container max-width 760 px. Section gaps 56–88 px. Card padding 28×30 px. Button padding 10×18 px.
Signature motif
The aurora: three blurred radial-gradient blobs (periwinkle, gold, cyan) drifting on 22 s / 26 s / 30 s loops, blurred 90 px, screen-blended at 55% opacity. Plus a grain overlay (1 px white dots on 32 px grid, masked to fade out toward the bottom). Both respect
prefers-reduced-motion.
Links
Mono labels even for primary nav. Hover lifts 1 px and brightens accent. No underlines except on plain in-prose links.