--inkComputed by the browserDesign System
Color tokens
--ink-softComputed by the browser--parchmentComputed by the browser--parchment-lightComputed by the browser--parchment-edgeComputed by the browser--wood-darkComputed by the browser--woodComputed by the browser--wood-lightComputed by the browser--green-darkComputed by the browser--greenComputed by the browser--green-lightComputed by the browser--goldComputed by the browser--ornamentComputed by the browserTypography
Quest headings
Pixelify Sans · 700Readable notes, metadata, and longer stories.
VT323 · 400Components and states
Primary action
Hover, focus, active, and reduced-motion states belong to the same primitive.
Wood frame
Timber surround
The same structural frame used for primary RPG windows.
Ornaments
Decorative shapes are hidden from assistive technology.
Pixel icons
Tool marks keep their distinct colors. Section artwork shares walnut outlines, bronze shading, and gold highlights. Links retain accessible names.
CTA icons
LinkedIn, GitHub, and CV download share the profile-link styles. Tab to inspect focus; hover and press to inspect interaction states.
Site navigation
Production dimensions and selected state. This static specimen does not navigate; actual page menus are links.
Project cards
Portfolio source
A project can expose several verified public destinations.
Repository unavailable
Projects without a verified public repository remain readable without a fabricated link.
Multi-link and read-only states share the same hierarchy with explicit destinations.
Book tiles
White NightsWhite NightsDefault and selected shelf tiles, using the real production component.
Book ratings
Full, fractional, zero, and unrated values use the production star component with an exact screen-reader label.
Tags and status
Finished
Collection metadata uses the same concise labels across project, post, and reading routes.
Topic filters
The active filter uses a gold fill and pressed state; filtering always leaves content readable without JavaScript.