creativity is everywhere design systemcreativity is everywhere デザインシステム

My studio’s design language — tokens, motion, scroll and interaction sound — as one small system my tools share.スタジオのデザインの言葉を、トークン・動き・スクロール・操作音の小さな仕組みにまとめ、自分のツールで共有している。

See it on creativityiseverywhere.comcreativityiseverywhere.com で見る

Challenge課題

creativityiseverywhere.com has a strict look — black ground, paper blocks, Outfit, expands that land fast — but it lived inside one site’s stylesheet. Every new small tool I built started from scratch and drifted: a stray accent colour, a slow ease, a chunky scrollbar. And AI agents styling those tools had nothing to read, so they guessed.creativityiseverywhere.com の見た目には決まりがある。黒い地に紙の色のブロック、Outfit、すばやく着地する展開。でもそれは、一つのサイトのスタイルシートの中にしかなかった。新しい小さなツールを作るたびにゼロから始まり、少しずつずれる。余計な差し色、遅い動き、太いスクロールバー。ツールの見た目を整える AI エージェントにも読むものがなく、推測で作っていた。

Solution解決

I pulled the system out of the site into a package of plain CSS files and one vanilla JS file, in layers you can take one at a time: tokens, base, scrollbar, motion, scroll, interactions, and the script. The same tokens ship as JSON, and a one-page DESIGN.md tells an agent the rules before it writes a line. The decisive move was writing the rules down as hard constraints — two inks only, no shadow, no gradient, expands in 280–420ms, sound off until a section is switched on — so a tool built by a person or an agent comes out looking like the studio.仕組みをサイトから取り出し、素の CSS ファイル群と JS ファイル 1 本にまとめた。トークン、土台、スクロールバー、動き、スクロール、操作、スクリプトと、層ごとに 1 つずつ取り込める。同じトークンを JSON でも出し、1 ページの DESIGN.md で、AI エージェントが書き始める前に決まりを読めるようにした。決め手は、決まりを守るべき制約として書いたこと。色は 2 色だけ、影もグラデーションも使わない、展開は 280〜420ms、音はセクションを入れるまで鳴らない。人が作っても AI が作っても、スタジオの見た目になる。

Two inks, and the rules that keep it that way 色は 2 つ。それを守るための決まり

The token layer is small on purpose. Colour is ink #0b0b0b and paper #f3f2ee, each with one muted step, a stroke and a button fill — and nothing else: hierarchy comes from size and the weight of Outfit, never a third hue. Type is Outfit 100–900 for Latin, DM Mono for registers and indices, Zen Kaku Gothic New for Japanese (tracking 0, leading 1.8, palt on). Space runs on a 4px base, radius on two sizes — block and page — that scale with the viewport. The same values ship as CSS custom properties and as tokens.json, so a tool and an agent read one source. トークンの層は、わざと小さくしてある。色は墨 #0b0b0b と紙 #f3f2ee。それぞれに一段沈んだ色と、線とボタンの色があるだけ。強弱は大きさと Outfit の太さでつけ、3 つ目の色は使わない。書体は、欧文が Outfit 100〜900、番号や記録には DM Mono、日本語は Zen Kaku Gothic New（字間 0、行間 1.8、palt）。余白は 4px 単位、角丸はブロックとページの 2 種類で、画面の大きさに合わせて変わる。同じ値を CSS の変数と tokens.json の両方で出しているので、ツールも AI エージェントも同じものを読む。

Demo page: the four colour swatches — ink, paper, ink mute, paper mute — then the type specimens: the Outfit 300 mark, a title, a row and 16px body copy — Colour and type, and the Japanese setting, on the system’s demo page. デモページの色と書体、そして日本語の組み方。

Demo page: a section with its own Sound toggle and Click, Confirm and Cycle controls, and the Japanese specimen set in Zen Kaku Gothic New — Colour and type, and the Japanese setting, on the system’s demo page. デモページの色と書体、そして日本語の組み方。

Motion with names: fast, decisive, never floaty 動きに名前をつける。速く、迷わず、ふわふわさせない

The motion layer is a vocabulary, not a library of effects: three easings — expo for a decisive settle, out for a soft landing, snap for an optional small overshoot — and seven durations, from a 120ms snap to a 400ms rise, with a 24ms stagger. Ten site behaviours are built from them: a cell that morphs into a panel in 360ms, a weight “breath” on hover, rise, press, arrow nudge, the cells that step away, tap, lift, ink inversion and the sheet. The scroll layer adds reveal variants (rise, fade, slide, slide-right, pop) observed once by IntersectionObserver, and parallax capped at 48px. Under prefers-reduced-motion everything collapses in CSS and in the script: reveals appear at once, parallax stops. 動きの層は、効果の寄せ集めではなく語彙だ。イージングは 3 つ。きっぱり止まる expo、やわらかく降りる out、少しだけ行き過ぎる snap（使うかは任意）。時間は 7 つで、120ms の snap から 400ms の rise まで、ずらしは 24ms。そこからサイトの 10 の動きを組む。セルが 360ms でパネルに変わる展開、ホバーで太さが息をするように変わる動き、せり上がり、押し込み、矢印のずれ、退くセル、タップ、浮き上がり、墨と紙の反転、シート。スクロールの層には、IntersectionObserver で一度だけ見る現れ方（rise、fade、slide、slide-right、pop）と、48px までに抑えた視差。動きを減らす設定では、CSS でもスクリプトでもすべて止まる。すぐに表示され、視差も動かない。

Demo page: micro-interaction cards — lift and tap, arrow and underline, invert, panel buttons — above the timing list: expand 360ms expo, rise stagger 400ms ease-out, cell settle 320ms expo, sheet 300ms, snap tick 120ms — Micro-interactions with their timings, and the five scroll-reveal variants. 小さな操作の動きとその時間、そして 5 種類のスクロールの現れ方。

Demo page: the scroll-reveal list, one row per variant — rise, fade, slide, slide right, pop — Micro-interactions with their timings, and the five scroll-reveal variants. 小さな操作の動きとその時間、そして 5 種類のスクロールの現れ方。

Sound you switch on, one section at a time 音は、セクションごとに自分で入れる

The last layer is interaction sound, and its rules matter more than its tones. There is no global mute, because there is no global sound: a section carries its own toggle, and only after it is pressed do the controls inside play — hover, click, confirm, cycle, toggle. The tones are synthesized with the Web Audio API from oscillators and a short burst of noise, so there are no audio files and nothing to license. The audio context unlocks only after a gesture, as browsers require, and under reduced motion the sounds stay silent. One script, interaction.js, carries the observers, the expand / morph, the sheet and the audio, and exposes a small API for tools that add content later. 最後の層は操作の音。大事なのは音色より決まりのほうだ。サイト全体の消音ボタンはない。そもそも全体で鳴る音がないから。セクションごとにスイッチがあり、押したあとだけ、その中の操作が鳴る。ホバー、クリック、決定、切り替え、トグル。音は Web Audio API で、発振器と短いノイズから合成する。音声ファイルはなく、権利の心配もない。ブラウザの決まりどおり、ユーザーが操作してから音が使えるようになり、動きを減らす設定では鳴らない。見張り、展開、シート、音はすべて interaction.js の 1 本に入っていて、あとから中身を足すツールのための小さな API もある。