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.
Site Icons
Custom icons used on this site. Hanko is the logo mark and excluded from general icon use.
Do / Don’t
| ✓ Do | ✗ Don’t |
|---|---|
| Use muted, desaturated photography | Use high-saturation, heavily filtered images |
| Show cover images on hover / individual pages | Display cover images in card grids |
| Use Phosphor Regular icons at consistent sizes | Mix icon sets or icon weights |
| Let whitespace surround imagery | Fill every available space with visual content |