Simple type.
A little texture.

01 / Palette

Neutrals do most of the work. Light uses blue for interaction; Dark uses soft white. Purple is a secondary accent, reserved for an occasional detail—not a separate theme or a competing link color.

Swatches follow the theme toggle above. Both themes use the same layout, imagery, and interaction rules. Text selection uses blue (#285BDD) with white text in both themes.

02 / Typography

The name is 32px (28px on mobile), navigation is 14px, and terminal text is 13px monospace. These are interface roles, not additional prose sizes.

03 / Links & navigation

Links rest in gray. Hover and keyboard focus use the interaction color: blue in Light, soft white in Dark. Underlines are 1px, offset by 4px. Focus also has an outline.

The name keeps the main text color with no underline at rest. Top navigation and all footer links are underlined at rest, following the body-link treatment. The light/dark switch supports click, tap, Enter, and Space, and remembers the choice between pages.

04 / Lists & spacing

One shared reading column. The name, terminal, section headings, article text, and this guide follow the same edges. Headings have a compact 14px gap before their lists; larger gaps separate sections.

Thin rules frame writing rows. Dates sit to the right on desktop and beneath titles on mobile. No cards, badges, or decorative thumbnails are needed.

05 / Terminal & portrait

The introduction uses a rounded terminal frame with a fine border, a soft drop shadow, and a compact tinted title bar, compact label/value rows with a generous column gap, and a theme-colored prompt. The title bar becomes slightly darker gray on hover. The block cursor blinks; reduced-motion preferences keep it still.

The supplied monochrome portrait adds the small playful interaction. Mouse movement changes the pose; click, tap, or keyboard activation shows the reaction. Touch and reduced motion disable automatic following.

Open the portrait study

06 / Image direction

Black-and-white bitmap texture, manga ink, halftones, and lived-in city detail. Let the image supply the character while the interface stays quiet. No ethereal gradients or soft abstract photography.

Use the supplied monochrome portrait and manga storefront as the references. Preserve their texture and contrast across both themes. Keep the original black-and-white artwork unchanged in both themes. No color reveal, tinting, or animation. Article images are optional; text-only posts should feel complete.

The site footer uses the original black-and-white manga image, capped at 400px on wide screens. It is static, with no click interaction or animation. This guide deliberately leaves out that graphic.

07 / Archive formatting

puts "hello, world"