TOMBO — WADAKATU DESIGN SYSTEM / FIG. 00

The mark that
measures.測ってから、置く。

single file · zero dependencies · vendored from a tag

One stylesheet for everything wadakatu ships — docs sites, web apps, LPs, portfolios. Six signature marks, repeated without exception, at a volume tuned to context: quiet in docs, loud on an LP.

Get the stylesheet View on GitHub MIT · CSS 11.8 KB GZIP

FIG. 01 — SIZE BUDGET

TOMBO.CSS GZIPPED

11.8KB

tombo.css · gzip11,808 B

ceiling12,288 B

tombo.js · gzip · optional1,264 B

ceiling2,048 B

MEASURED BY SCRIPTS/CHECK_SIZE.PY — CI GATE

constitution — three rules / no exceptions

The three rules

R-01

すべてを測る

Measure everything. Elements sit beside dimension lines, tick marks, and running numbers — the sense that something was measured before it was placed is what gives the page its air.

DIMENSION LINES · TICKS · RUNNING NUMBERS

R-02

銘は等幅

Inscriptions are monospace. Numbers, labels, indices, and units are always set in mono; body copy stays in a quiet sans. Only the instrumentation gets to glow.

VOICE: MARTIAN MONO — LABELS · NUMBERS · CODE

R-03

朱は現在地

Shu marks the current position. Red is reserved for a 1–2px line that points at “here.” The moment it fills a shape, it stops being shu and becomes plain red.

SHU: CURRENT TAB · TOC · RULER VALUE — NEVER A FILL

Six signatures

Not a component library — a fingerprint. Each tile below is the real thing, not a picture of it.

S-01 — REGISTRATION CORNERS

12px brackets that say “aligned.” You are looking at them — this tile wears all four.

S-02 — DIMENSION LINE

the hr that measures — end rules · center tick · mono caption

S-03 — TICKS & RULER

bullets become green ticks
the ruler reads its current value in shu

S-04 — RUNNING NUMBERS

Headings on this page number themselves (01 —, 02 —), and every figure carries a mono inscription like the one above.

S-05 — SHU CURRENT POSITION

S-06 — GRAPH PAPER

The drafting grid behind the hero — full-bleed on an LP, margins only in docs, off in apps. At night, .tombo-glow lights it.

Two themes

One umbrella name, two data-theme values: tombo, the day drawing, and hotaru (蛍, firefly), the night drawing where the instruments glow. Pages follow the OS by default; the toggle in the topbar forces one and remembers it — that part is tombo.js, optional by design. This page reads fine without it.

PAPER

SURFACE

INK

INK-SUB

GREEN

SHU

Swatches are painted straight from var(--tombo-*) — flip the theme and they follow. 28 token pairs are gated against WCAG 2.1 floors in CI.

Quick start

No npm, no CDN — vendor the files out of a release tag, then pin the tag and the sha256 in your own CI.

SHELL — VENDOR FROM A TAG

git -C /path/to/tombo show v0.14.1:tombo.css > public/styles/tombo.css
git -C /path/to/tombo show v0.14.1:LICENSE   > public/styles/tombo.LICENSE
git -C /path/to/tombo show v0.14.1:tombo.js  > public/scripts/tombo.js

HTML — LINK YOUR COPY + THE THREE VOICES

<link rel="stylesheet" href="/styles/tombo.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@600;700&family=M+PLUS+2:wght@450;500;700&family=Martian+Mono:wdth,wght@75..112.5,400..600&display=swap" rel="stylesheet">

Full reference: docs/ · README.