--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--backdropComputed 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--green-highlightComputed by the browser--green-shadeComputed by the browser--on-greenComputed by the browser--button-shadowComputed by the browser--goldComputed by the browser--gold-highlightComputed by the browser--ornamentComputed by the browserTypography
Quest headings
Pixelify Sans · 700Readable notes, metadata, and longer stories.
VT323 · 400Long-form posts and reviews read in a book face.
Alegreya · 400 / 700Type scale
--text-2xs1rem · 16pxQuest log--text-xs1.125rem · 18pxQuest log--text-sm1.25rem · 20pxQuest log--text-md1.5rem · 24pxQuest log--text-lg1.75rem · 28pxQuest log--text-xl2rem · 32pxQuest log--text-2xl2.5rem · 40pxQuest log--text-3xl3rem · 48pxQuest log--text-4xl3.75rem · 60pxQuest log--text-5xl4.5rem · 72pxQuest log
Components 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.
CV download button
Download CV (PDF)The CV page's primary action: the same native download as the icon, labelled as an RPG button.
Site navigation
Production dimensions and selected state. This static specimen does not navigate; actual page menus are links.
Home dialogue
Welcome, traveler!
Static specimen text in its resting state, with no typing.
Where would you like to go?
First choiceProjectsSecond choiceBlogThird choiceBooksFourth choiceAbout
The Home greeting: name plate, bobbing portrait, and four choices with a pixel cursor on the hovered, focused, or first option. On Home the text types in; this static specimen has no links or typing.
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. Both show the default image used when a project has no added or og:image. The linked card's image opens its main destination and takes a gold frame on hover; the read-only image is not a link.
Chapter bar
Closed strip halfway through the second of three sections. On posts it sticks above the prose and tracks scrolling; this static preview does not.
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.
Notice note
Kicker label
Static specimen content: any preview text or list goes in the default slot.
One parchment note from the Home board: decorative nail, pixel kicker, content, and bottom actions. On the board each note is slightly rotated and lifts on hover.
CV job entry
Example Company
Example role · Part-time
2020 — 2022
Example City
Static specimen data with the monogram fallback tile.
- Plain highlight text.
- A highlight with a bold metric.
One role on the CV page: company tile, role and dates, italic description, diamond highlights with bold metrics, and soft tech chips.
Tags and status
Finished
Collection metadata uses the same concise labels across project, post, and reading routes. The soft variant marks secondary lists, such as the tech used in a role.
Site footer
The shared author credit follows the main content on every page.
Topic filters
The active filter uses a gold fill and pressed state; filtering always leaves content readable without JavaScript.