トークンをひとつ変えれば、全ページが変わる。
intentfirst.ai を支えるデザインシステムです。状況に合わせて変わるインターフェースのために作りました。色・文字・動きはひとつのファイルにトークンとしてまとめてあり、1か所の変更がすべてのページに届きます。
- 文字の役割
- 5
- 動きの長さ
- 5
- 合図の色
- 1
- 言語
- 2
app/globals.css
読む人への、4つの約束
どれも雰囲気ではなく、コードが守っているルールです。
- 01
やさしく、怖くない
温かみのある紙の色、ふつうの言葉、角のある形。丸いのは、押せるチップだけです。
- 02
シンプルで、迷わない
文字の役割は5つ、サイズは名前のついた10段階。人もエージェントも、同じ短いリストから選びます。
Aatext-body 17Aatext-lead 21Aatext-h2 41 - 03
読むのが楽しい
本文用のトークンは17pxで、行間はゆったり。人が話す場面には、読みやすい明朝体を使います。
「いつもので」 - 04
モダンで、未来を感じる
タップへの反応は100〜240ms。すばやく現れて、やわらかく止まります。
--dur-instant 100ms · --dur-base 240ms
人は太い筆で、仕組みは細い線で。
イラストは人の状況を描きます。太い墨と、赤をひとつだけ。図は仕組みを描きます。均一な1pxの線で。いま見ているのがどちらなのか、いつでも分かります。
- 01Intent
- 02Signals
- 03Dials
- 04Rule Engine
- 05Negotiation Gate
- 06AX Patterns
役割は5つ。スイッチはひとつ。
文字が指定するのは書体ではなく役割です。見出しの書体を切り替えると、このページの見出しがすべて変わります。いちばん上の見出しも。
- font-display見出し · M PLUS 2
- 状況が変われば、答えも変わる。
- font-body本文 · M PLUS 2
- よい店主は好みを覚えていて、それでも決める前にはひと言聞いてくれます。
- font-labelボタン・ナビ・ラベル · M PLUS 2
- font-voice人の言葉 · Noto Serif JP
- 「いつもので」
- font-data数字とコード · JetBrains Mono
明暗は入れ替わる。赤は、ひとつの合図のまま。
ダークモードはインクと紙を入れ替えるだけで、色を手で塗り直すことはありません。赤が示すのは1画面にひとつ。いまの決定か、主な操作か、見てほしい1点です。決定を選ぶと、赤い点が動きます。
ライト
今夜は何にしますか？
- --paper
- #F8F7F2
- --ink
- #15171C
- --spark
- #E1402F
いまの決定：いつもの
明るい地でも暗い地でも、点は同じ --spark の赤です。
すばやく現れ、やわらかく止まる。
画面の反応に使う動きの長さは、5つのトークン。100msの押下から、560msの登場まで。ページ単位の演出も600ms以内に収めます。動かすのは位置と透明度で、色はクロスフェード。例外は名前をつけた2つだけです。イラストはクリップパスのワイプで現れ、図の線はスクロールに合わせて描かれます。「動きを減らす」設定のときは、完成した状態をそのまま見せます。線は描き終えた姿で、絵ははじめから見える状態で。
5つの長さのトークン
- instant100ms押す・ホバーの色
- quick160msリンクの線・カードのトンボ・矢印
- base240msタブ・スイッチ・トースト
- move380msこのページの赤い点
- stage560ms初回の罫線・イラストの登場（上限）
文法を試す
160ms · linear
ホバーするか、Tab で移動してみてください
Intent の章を読む160ms · ease-out
100ms · scale 0.97
240ms · ease-in-out
その人が、何をしようとしているか。
< 400ms
本物の部品を、本物の状態で。
このシステムが用意している部品を、ここで試せるようにつなぎました。何も送信されません。
TextField
エラーは、次に何をすればいいかを言葉で伝えます。色だけには頼りません。
Toggle
スイッチはスプリングの曲線で動きます。この曲線を使うのはここだけです。
SegmentedControl
選んだ項目へ、背景がすべるように移ります。パッと切り替わりません。
Toast
トーストはページの上に浮かぶので、影を持てます。サイトのカードに影はありません。
値の出どころはひとつ。
トークンの値はすべて app/globals.css にあります。ほかはそこから読むか、写しを持つだけ。写しがずれたら、その場でテストが失敗します。
@theme → Tailwind のユーティリティ
サイトのページ
lib/design/tokens.ts
JavaScript の動き
public/design-system/v2/tokens.css
単体ページと映像