Skip to content

Portfolio lab / live system

Change the values. Inspect the system.

Apply a theme or stress the layout, then inspect the same foundations, components, and patterns the portfolio uses in production. The controls and the specimens now share one surface.

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

01Themes and localization

Choose an expression

Choose any family and appearance, then read the live system below it. Every expression remaps the same semantic roles; the components do not branch by theme.

Following your system: Light

Localization

Stress the layout in place.

Expand every interface label and mirror the page between LTR and RTL without leaving this viewer or maintaining a detached demo.

Open localization test

02Foundations

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

03Typography

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);

04Components

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.

05Patterns

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

06Behavior

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. Change the theme or enter the localization test above and every specimen responds in place.