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 Loka, QueryKey, and Alignment subdomains, which all derive their CSS from the same template.

View breakdown See it live

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: 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, 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.

In use: emmaleonhart.com landing · /projects/ · /research/ · topaz os · querykey · alignment.