Skip to content

Theme lab

Site system / live specimens

The interface, shown in its own language.

This is a working inventory of the portfolio’s visual decisions—not a detached mock library. Every specimen below uses the same tokens and styles as the site around it, and responds to the same theme and localization controls.

Source
Semantic CSS tokens
Modes
Light / dark / LTR / RTL
Coverage
Foundations through patterns

01Foundations

Foundations

Components consume semantic roles, never raw palette values. That keeps meaning stable while a theme remaps the color beneath it.

Surface

Primary paper

--surface

Raised

Elevated paper

--surface-raised

Sunken

Recessed fields

--surface-sunken

Ink

Highest contrast

--ink

Body

Reading text

--body

Muted

Supporting text

--muted

Accent

Action and emphasis

--accent

Cool

Secondary signal

--cool

02Typography

Typography

Display / Instrument Serif

Clarity under load.

Body / Instrument Sans

The body face carries interface copy and long-form reading with a practical, open rhythm. Weight does less work than spacing, contrast, and hierarchy.

Mono / system stack

--color-accent: var(--sienna);

03Components

Components

Core controls are quiet by default, explicit on hover and focus, and legible without relying on color alone.

Actions

Text action

Status

ReadyIn reviewUnavailable

Fields and choices

Fields and choices

Evidence block

2 tiers

Raw values feed semantic roles; components only consume the roles.

The same contract drives both color themes.

04Patterns

Patterns

Repeated arrangements carry the site’s hierarchy: numbered sections, evidence-led rows, small metadata, and hairline rules.

Numbered section

07Numbered section

A heading establishes the argument before the artifacts arrive.

Linked row

Web / PDF / Text

Resume as a shared-content view

One content source renders for the browser, print, PDF, and machine readers.

Open resume

05Behavior

Behavior

The system includes what happens around the pixels: input method, reading direction, motion preference, and output medium.

  1. 01

    Visible focus

    Keyboard focus uses the accent role and never depends on a hover state.

  2. 02

    Logical direction

    Spacing and borders use inline start and end, so RTL changes structure rather than merely aligning text.

  3. 03

    Reduced motion

    Motion is layered onto a complete base state and collapses when the reader requests less movement.

  4. 04

    Print as an output

    Navigation disappears, light roles return, and content keeps its document hierarchy on paper.

This viewer is part of the system it documents. Toggle the theme or open the localization lab to stress the same specimens in place.