Carlos Arias
43ae1e2015
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
79 lines
3.4 KiB
Markdown
79 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.
|