seedproject-web/.memory/hanko-seal.md
Carlos Arias 43ae1e2015 Baseline: full site build (brand, pages, DB, agent-editable)
Establishes the deploy baseline on main so the admin agent's publish/rollback
has a clean starting point. Everything built to date: sumi-e brand system,
homepage, projects (DB-driven case studies), resume, about, services +
website-design detail, contact form + DB, changelog, favicon + share card.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DoFYZY9gkGPNDqZ7NuEa9a
2026-07-23 20:21:28 +00:00

3.4 KiB
Raw Blame History

The Hanko Seal — concept note

Status: Concept, partially implemented · Date: 2026-07-22 Related: brand/BRAND.md · brand/tokens.css


What it is

The small vermillion square beside the wordmark is a hanko (判子) — a Japanese seal, also called an inkan (印鑑). The character on it, , is read in and literally means "seal, stamp, mark."

When a seal appears on artwork next to the artist's signature, the signature and seal together are a rakkan (落款) — the traditional finishing gesture on ink paintings and calligraphy. You sign the work, then press your seal in red.

The red is not decorative. Seal ink is a vermillion paste called shuniku (朱肉), which is where the brand red comes from — #D0342C is named Shuniku in the brand guide for exactly this reason.

Why it fits this brand

The logo is a handwritten signature: a brush stroke. A seal is what completes a brush stroke. The rakkan pairing already existed in the identity before the sumi-e direction was chosen — the seal only made it explicit.

It is also the origin of the 12% coverage rule in the brand guide. A seal is small, pressed once, and means this is finished, and it is mine. Spread the same red across a page and it stops reading as a seal and starts reading as a generic accent colour. The restraint is not stylistic caution; it is what makes the mark mean something.

Where it currently appears

  • Beside the signature wordmark in the site header
  • Top-left of the full-page mobile menu
  • Previously bottom-right of the hero portrait (removed with the photo)

Open — the thing to do later

印 is a placeholder. A traditional hanko carries its owner's name, not a generic character. Using 印 is close to signing a painting with the word "signature." It reads well, but it is not yet personal.

Replacing it solves a second, unrelated problem already logged in the brand guide: the signature wordmark is roughly 4:1, so it cannot serve as a favicon, social avatar, or app icon — it becomes an illegible smear at 32px. A seal is square and legible at any size.

Directions worth exploring when this is picked up:

  1. Initials in seal script (篆書, tensho) — the archaic script style traditionally used on hanko. Most authentic; needs care to stay legible to a Western audience.
  2. A stylised C carved in negative space, in the manner of a hakubun (white-character) seal, where the character is cut away and the ground prints red.
  3. カルロス (Karurosu) — the name in katakana, which is how a non-Japanese name is conventionally rendered on a personal seal.
  4. A mark rather than a character — abstract, derived from the signature's own stroke geometry.

Whichever is chosen becomes the favicon, the avatar, and the small-size lockup across every surface. It is a brand-defining decision, not a detail — worth doing deliberately rather than as a quick swap.

Implementation notes

The seal is rendered as a token-driven element, not an image:

  • .ca-header-seal and .ca-menu-seal in app/src/styles.css
  • Colour comes from --ca-seal, which shifts to --ca-ink-surface-seal (#E8564A) on ink grounds — #D0342C muddies against near-black
  • Square by design: --radius is 2px, near-square rather than rounded

Swapping the placeholder for a real mark means replacing the character with an SVG, keeping the same token-driven colour behaviour.