Skip to main content
08

Imagery

Images on this site are treated like objects in a Japanese room.

Philosophy

Images on this site are treated like objects in a Japanese room—few, carefully chosen, and placed to honor the space around them. The design does not depend on imagery; it is complete without it. When an image appears, it earns its presence. This is Shizen—naturalness without staging.

Photography Style

  • Tone: Muted, desaturated, warm-neutral. Avoid high-saturation processing, HDR, or heavy filters. Photographs should feel as though they share the same light as the Washi (#E6E6E6) background.
  • Color treatment: Apply a subtle desaturation (−20–30%) and a warm grey overlay to unify disparate cover images into the palette. This prevents individual photographs from dominating the restrained color system.
  • Subject: When possible, images with generous negative space—landscapes, architecture, details, still life—that echo the ma of the layout itself are preferred.
  • The portrait: a single, consistent photograph in muted colors or black/white—Koko.

Cover Images for Essays

  • Cover images are not shown inline on list pages or card layouts. They appear only on hover as a floating preview—a Yūgen moment, suggesting rather than revealing.
  • On the individual essay page, the cover image appear as a full-bleed or wide element, breaking the reading column momentarily.
  • This approach preserves the typographic purity of lists and index pages while giving each essay a visual identity when sought.

Illustration Style

No illustration system is defined at this time. If illustration is introduced in the future, it should follow the same principles: monochrome or near-monochrome, line-based (echoing the seal mark’s linework), and never decorative without function.

Iconography — Phosphor Icons

Icons should be used sparingly. Phosphor Icons Regular is the standard set.

Phosphor Icons
phosphoricons.com · MIT
Weight
Regular only — 1.5 px stroke on 16 × 16 grid
Size
24 × 24 px UI · 16 × 16 px inline with text
Color
Sumi on light · Washi on dark · Beni for interactive states
Icons do not replace text labels — they accompany them. Kanso: clarity over cleverness.

Site Icons

Custom icons used on this site. Hanko is the logo mark and excluded from general icon use.

CaretDownIconBanner disclosure, SeriesStepper
CircleHalfIconTheme toggle
DownloadSimpleIconDownloadLink
GithubLogoIconFooter social
InstagramLogoIconFooter social
ListMagnifyingGlassIconSearch trigger
MinusIconTableOfContents collapse
PlusIconTableOfContents expand
XIconClose / clear filters
XLogoIconFooter social
10 icons · Phosphor Regular · 24 × 24 px

Do / Don’t

✓ Do✗ Don’t
Use muted, desaturated photographyUse high-saturation, heavily filtered images
Show cover images on hover / individual pagesDisplay cover images in card grids
Use Phosphor Regular icons at consistent sizesMix icon sets or icon weights
Let whitespace surround imageryFill every available space with visual content