部品

押すと、ほんの少し縮んですぐに応えます。目で追うより先に、手で感じる反応です。矢印はホバーで少し前に出ます。無効なボタンはどちらもしません。

応えるショートカットを末尾に添えた、控えめなボタンです。押したときの反応はボタンと同じで、ショートカットは Kbd 部品で表します。

システムで唯一の丸い部品で、選べる候補を表します。選ぶと spark の淡い色に変わります。無効なチップは動きません。

選んだ項目へ、背景がすべるように移ります。パッと切り替わらないので、どこからどこへ移ったかが目で追えます。

リンクは、ひとりでに引かれる線です。ホバーやフォーカスで左から右へ引かれ、離れるまで残ります。リンクのほかの部分は動きません。

浮き上がりも影もありません。枠が濃くなり、四隅にトンボが現れます。

角の立った入力欄です。フォーカスすると枠とリングが spark の赤になります。ヒントは何を書けばよいかを、エラーは次に何をすればよいかを、赤い枠だけでなく言葉でも伝えます。

複数行の入力は、文章を書く場所なので本文の書体を使います。セレクトはブラウザ標準のものに見た目だけ整えたもので、キーボードやタッチの操作はそのまま使えます。

角のあるスイッチです。つまみはスプリングの曲線で動きます。システムの中でオーバーシュートするのはここだけで、背景の色は直線的に変わります。

1pxの罫線の四角です。spark の色のチェックか塗りつぶしが選択を示し、ラベルまで含めて押せます。

文中に置くお知らせです。バナーは spark の罫線から始まり、コールアウトは情報・注意・完了のいずれかの調子で、言葉で伝えます。

ページの上に浮かぶ短いお知らせです。浮かぶので、影を持てる唯一の面です。サイトのカードに影はありません。デザインシステムのページでは出入りの動きをつけています。部品そのものは動きません。

破線の枠と斜線の枠、そして次の一歩をひとつ。何が足りないのかを伝え、埋める方法を示します。

ホバーするとトリガーの上に浮かぶ、控えめなラベルです。ホバーでしか出ないので、キーボードやタッチの人に必要な情報は入れないでください。

中央にパネルを置く、重ね表示です。ここで開くと、このページの上に重なります。背景、×、フッターのボタンのどれでも閉じられます。

ラベル書体の、角のある状態タグです。spark は見てほしいひとつだけに使い、アウトラインとニュートラルは控えめにとどめます。

文章の強さは、本文・リード・引用の3つ。引用は人の言葉の書体に、spark の罫線を添えます。

節のはじめに置く小さなラベルです。アイブロウが節の名前を、レール番号が全体の中での位置を示します。

これから届く文章の代わりに置く、きらめく線です。形を示すだけで意味は持たないので、支援技術には読み上げさせません。

細い罫線の行と、ラベルの見出し。数字は右に揃えて、列に沿って比べられるようにします。

数字ブロックは、spark の罫線を添えたひとつの根拠となる数字です。メトリクスは、同じ考え方を枠つきのタイルに入れ、説明を添えたものです。

まだ届いていない図のための、斜線の16:9の場所取りです。キャプションで、そこに何が入るかを伝えます。