TOMBO — WADAKATU DESIGN SYSTEM / FIG. 00

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

単一ファイル · 依存ゼロ · タグから vendoring

wadakatu が作るすべて — ドキュメント、アプリ、LP、ポートフォリオ — をひとつのスタイルシートで。6 つの署名要素を例外なく反復し、文脈に合わせて「音量」だけを変える: ドキュメントでは静かに、LP では最大音量で。

スタイルシートを入手 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

憲法 — 三原則 / 例外なし

三原則

R-01

すべてを測る

要素は寸法線・目盛・通し番号の隣に置かれる。「置く前に測った」という気配が、ページの空気を作る。

DIMENSION LINES · TICKS · RUNNING NUMBERS

R-02

銘は等幅

数字・ラベル・インデックス・単位は必ず等幅。本文は静かなサンセリフに保ち、計器だけが等幅で光る。

VOICE: MARTIAN MONO — LABELS · NUMBERS · CODE

R-03

朱は現在地

赤は「ここ」を指す 1–2px の線にだけ使う。現在のタブ、現在の目次、現在の値。面を塗った瞬間、それは朱ではなくただの赤になる。

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

6 つの署名要素

コンポーネントライブラリではなく、指紋。以下のタイルはすべて絵ではなく実物。

S-01 — REGISTRATION CORNERS

「合っている」ことを示す 12px のブラケット。いままさに見えている — このタイルは四隅すべてを着けている。

S-02 — DIMENSION LINE

測る hr — 両端の罫 · 中央のティック · 等幅の銘

S-03 — TICKS & RULER

箇条書きは green のティックになる
ルーラーは現在値を朱で読む

S-04 — RUNNING NUMBERS

このページの見出しは自ら番号を刻み(01 —、02 —)、すべての図版が上のような等幅の銘を持つ。

S-05 — SHU CURRENT POSITION

S-06 — GRAPH PAPER

ヒーローの背後にある製図の方眼 — LP ではフルブリード、ドキュメントでは余白のみ、アプリではオフ。夜は .tombo-glow が灯す。

2 つのテーマ

傘はひとつ、data-theme は 2 つ: 昼の図面 tombo と、計器が発光する夜の図面 hotaru(蛍)。既定では OS に追従し、トップバーのトグルで固定・記憶できる — その部分が tombo.js(設計上オプション)。このページは JS なしでも完全に読める。

PAPER

SURFACE

INK

INK-SUB

GREEN

SHU

スウォッチは var(--tombo-*) を直接塗っている — テーマを切り替えれば追従する。28 のトークンペアを WCAG 2.1 の下限値で CI ゲートしている。

クイックスタート

npm も CDN もなし — リリースタグからファイルを vendoring し、タグと sha256 を自分の 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">

詳細リファレンス: docs/ · README。