· / design system
Aizome
Named for 藍染 — the Japanese indigo dye used on paper and cloth for centuries. The design system that powers this site: the same palette, the same cadence, the same care as the kind of book you’d keep. Every page on kohjunhao.com is typeset in it.
01 /Manifesto5 rules
- 01 /Restraint is the material.間 (ma) carries meaning. Let it. One accent per view.
- 02 /Serif carries ideas; mono carries metadata.Never reverse the hierarchy. No sans-serif.
- 03 /Hairlines, not containers.1px rules do the work of cards. Shadows are a last resort.
- 04 /Every page is a ledger.Indexed rows, thin rules. Books to investments to articles share the same vocabulary.
- 05 /Motion is an index finger, not a dance.Animation points; it doesn't perform. The totem is the only sustained motion.
02 /Palette8 + 8 tokens
Two palettes, light and dark, each eight tokens. Canvas is never pure white. Neutrals carry a warm undertone.
LIGHT · day
canvas
paper
surface
inset
ink
body
muted
secondary
accent
aizome indigo
rule
hairline
hanko
seal red
totem
warm amber
DARK · night
canvas
sumi night
surface
inset
ink
moonlight
muted
stone
accent
washed aizome
rule
hairline
hanko
seal red
totem
warm amber
03 /Typography2 families
Serif · Source Serif 4
500 · displayA quiet interface.
500 · headingMechanisms and motivations.
400 · bodyCurve is an AMM that focuses on pools with similar asset types.
400 italic · captionoriginally published at Paragraph
Mono · JetBrains Mono
500 · label01 / INDEX
400 · numeralsBTC 67,412.08 +2.14%
400 · address0x4a2f…9f1b
04 /Spacing4pt scale
Every measurement is a multiple of 4. The scale is sparse on purpose — limited options force confident decisions.
2ptinline whitespace
4pttight stacking
8ptsmall gaps
12ptlist row padding
16ptparagraph rhythm
24ptcomponent to component
32ptsection breathing
48ptsection to section
64ptchapter breaks
96ptpage margins
128pthero whitespace · the 間
05 /Motifmono-numeric ledger
The signature: every section indexed like a ledger row. The footer renders a four-cell status ledger with a hanko seal. It’s the smallest idiomatic move that says “operator, not designer.”
01 / EXAMPLE SECTION
Section title here
LAST UPDATED 2026.04.22
LOCATION SINGAPORE
STATUS SHIPPING
LAST DISPATCH 8w AGO
06 /Components7 primitives
SectionHeaderMono index + serif title + right-aligned mono annotation. Section-level scaffolding.
Hairline1px rule at the `rule` token. 16–24px vertical rhythm. Never shadow, never box.
LedgerRowLeft index · title · trailing meta. The only list pattern. Spring physics on hover.
StatusFooterFour-cell site-wide sign-off. LAST UPDATED · LOCATION · STATUS · LAST DISPATCH + hanko.
ModalIntercepted overlay, 90%/fit. Close on backdrop / Esc / back button. Direct URL still renders full-page.
HankoSealSVG seal with feTurbulence grain, 印 character, 3.5° wobble. Site-wide personal mark.
TotemHand-authored ASCII spinning top. The Inception reference. Drag-to-knock, tap-to-reset.
07 /Anti-patternsdon't
- ×Drop shadows. Use hairlines or inset rules instead.
- ×Large radii. Nothing over 8pt. Flat is the rule.
- ×Sans-serif. Serif carries thought; mono carries facts. No exceptions.
- ×A second accent in a single view. If a page needs more emphasis, the page is doing too much.
- ×Pure white or pure black canvas. The canvas always has warmth.
- ×Autoplay / hover-only interactivity. Every motion asks for consent.
Aizome · v1.0 · 2026designed in the open.