80 lines
3.4 KiB
Markdown
80 lines
3.4 KiB
Markdown
|
# The Hanko Seal — concept note
|
|||
|
|
|
|||
|
|
**Status:** Concept, partially implemented · **Date:** 2026-07-22
|
|||
|
|
**Related:** [brand/BRAND.md](../brand/BRAND.md) · [brand/tokens.css](../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 **1–2% 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.
|