Components

Components are the repeating elements that a reader encounters across the site — the navigation that orients them, the prose styling that carries the writing, the media elements that present visual work. Each component was designed to disappear: good navigation doesn’t feel like navigation, good typography doesn’t feel like a “design system.”

Every component here follows the same test: would this element feel at home in a carefully typeset book? If it requires chrome, decoration, or explanation to make sense, it hasn’t earned its place yet. The result is a small set of components that rely on spacing, type hierarchy, and the single accent color to do their work.

The site borrows its navigation from books, not software. The header is a nameplate, not a nav bar. The breadcrumb reads like a table of contents. The side rail is a spine label. The footer is a colophon. Every navigation element uses typography alone to establish hierarchy — no backgrounds, no icons in the primary flow.

Content

All prose elements — headings, links, blockquotes, pull quotes, code blocks, footnotes, lists, tables — live within the reading column and share a consistent typographic baseline. The goal is an immersive reading experience where the styling never calls attention to itself.

Media

Images, figures, category pills, and content listings extend the paper metaphor to visual elements. Photography receives a subtle warmth filter. Media lists present films, TV, games, and books in structured formats that prioritize scannability while maintaining the site’s typographic voice.

Controls

Theme toggle, accent picker, and font size controls live in the footer and side rail, treated as colophon furniture rather than prominent UI. Ghost-button patterns let them recede until needed. The accent picker offers all eight Flexoki hues. The theme toggle respects system preference on first visit.

Atmosphere

Five non-content layers create the illusion of a physical surface: paper grain (an SVG noise filter), a radial vignette, registration crop marks at the viewport corners, and dual letterpress text-shadows on headings. All are fixed overlays with pointer-events: none. They exist outside the content flow to make the screen feel less like a screen.