The visual language behind the work.

States

Rest, hover (lift 1px), and disabled (60% opacity). No color change on hover, no drop shadow — the lift is the entire feedback.

Background treatment

Light: ink #0F140F bg + lime #DCED66 text (~13:1, AAA). Dark: muted lime #BDCD6A bg + ink #0F140F text (~11:1, AAA). Padding 0.85rem × 1.5rem. Radius 999px. Font weight 500.

On cream surface

Transparent fill, 1px line at --color-line-strong (32% ink), text inherits page ink. Always paired with a primary .pill nearby.

On lime surface

The same component on the lime accent surface. Line uses lime-tinted line-strong in dark mode so the ghost reads identically against either accent.

Size · 48px (lg)

Default size for the Work index row arrows. Translates +4px on row hover so the arrow physically leans into the click target.

Size · 44px (md)

Used inside cards and inline next to primary CTAs. Same colors, same rules — just a smaller hit target where the page doesn't need a large arrow.

Background — always fixed

Cream chip + ink icon in both themes (--color-action2-*). The only chip that does NOT flip with theme — it has to be findable against any page surface.

A custom button shape

36×36 circle with a 1px border at --color-line-strong, no fill. Hover adds a 6% ink wash. Icon swaps between a moon (light mode) and a sun (dark mode). Lives in the header rail only.

Dark mode equivalent

Same shape and border, but the icon is now a sun. The button itself does NOT flip background — it stays a hairline-bordered circle, because the action it represents (changing theme) is symmetric.

On lime · light mode

9% ink fill (a soft tint of the surface text color) + ink text. The chip belongs to the lime panel underneath; it's never used on cream.

On forest · dark mode

Re-tinted in CSS: muted-lime fill (18% transparent #BDCD6A) + cream text. Same readable hierarchy on a dark lime accent.

Frosted-glass treatment

The only chip with a frosted background. 50% cream fill + backdrop-filter: blur(14px) saturate(140%), an inset 1px white highlight, a 1px ink-8% border, and a 28px soft drop shadow. Renders the whatever's-behind effect over the portrait image.

Size + motion variation

Font size, padding and float path are randomized per pill so the cloud reads as alive rather than synchronized. Sizes go through the inline font-size (not transform-scale), so text stays sharp at every size.

Disabled / upcoming

Used on the Work index where a row is intentionally not yet linked. Hairline border at --color-line-strong, no fill, ink-3 text, uppercase 0.18em tracking. Smaller than any other chip on the site so it never competes with active actions.

Specs at a glance

Padding 4×12 · text 10.5px · tracking 0.18em · uppercase · weight 500. Border 1px line-strong. Never clickable. Always paired with a project row that's otherwise complete in layout.

Eyebrow

11.5px, uppercase, 0.18em tracking, --color-ink-3. The site's quiet wayfinder above every section heading.

Rule

1px hairline at --color-line (14% ink light / 16% cream dark). Separates major content beats without competing for attention.

Inline link

Inherits text color. Underline ONLY on hover (and on rest in footer links). An always-underline default would compete with the eyebrow rhythm.

Lime → forest green

Lime accent surfaces would glow uncomfortably on a dark page. In dark mode .bg-lime swaps to #1F3014, and ink tokens inside .bg-lime are rebound to bright lime variants so text inside the panel keeps the same visual pop the light theme has.

Device chrome inverts

The page surface goes dark, but device chrome goes light (cream). Phones and tablets still read as physical objects against the page — not as black rectangles disappearing into the canvas.

Scene tones blend, don't dim

Each project on the Work index has a per-project pastel scene tone. In dark mode that tone is mixed at 30% into a near-neutral #0D0D0C base, so cool tones stay cool and warm tones pull warmer naturally instead of all becoming the same dimmed brown.

No flash on first load

(function(){
  var s = localStorage.getItem('theme');
  if (!s) {
    s = matchMedia('(prefers-color-scheme: dark)')
          .matches ? 'dark' : 'light';
  }
  if (s === 'dark') {
    document.documentElement.classList.add('dark');
  }
})();

An inline script in <head> reads the stored theme (or the OS preference if unset) and applies the .dark class to <html> before React hydrates. The page paints in the correct theme on first frame.

Skill chips re-tune

In light mode skill chips use 9% ink fill on lime. In dark mode the lime surface is forest green, so chips re-tint to a muted-lime fill with cream text for the same readable contrast — handled in CSS, not per-component.

Always-fixed tokens

A small set of tokens never flip. The scrim behind the lightbox is always near-black; the secondary action-circle stays cream-on-ink in both themes. These exist for UI that has to behave the same regardless of page surface.