デザイン指針
「藍と朱を軸にした、静かに機能する専門ツール」。 トークンは src/styles/tokens.css が単一ソースで、 Tailwind のテーマはそこを参照するだけです。右上の切替でライト/ダークを確認できます。
カラートークン
現在のテーマの実値を表示しています。テーマを切り替えると同じトークンが別の値を返します。
墨藍 --sumi-ai
基本文字色 / ダークの土台
L #161B2C / D #E9EAF0
藍 --ai
リンク・主要ボタン・フォーカス
L #28437D / D #8CA8E8
朱 --shu
検索一致・新着(唯一の鋭いアクセント)
L #C63C2C / D #E2604C
紙白 --kami-jiro
ページ背景(冷白)
L #F4F5F8 / D #10131F
銀鼠 --gin-nezu
補助テキスト・罫線
L #6B7286 / D #7C8299
青磁 --seiji
確定した良い状態
L #2E7D6B / D #5CBBA3
琥珀 --kohaku
致命的でない注意(朱と分離)
L #96661C / D #D2A24C
タイポグラフィ
Web フォントは見出し・クローム・データの3用途のみ。本文は OS 標準に委ねて初回表示を軽くします。
ビジュアルモチーフ
使うのは2つだけ。増やさないことでモチーフが意味を保ちます。
告示ウォッチ
① 隅付き括弧。ロゴタイプと主要ラベルに限定。.bracket
アーカイブ済み
② 検証印(角印の輪郭線のみ)。アーカイブ済みバッジのみ。朱肉のイラストは使いません。
チップ
適用中の検索条件。ラベルと値を分けて値だけを強調し、1つずつ外せます。
キーワード無線設備府省庁総務省期間2025-01-01 〜 2026-08-10固定条件告示のみ バッジ
すべてアイコンを併記し、色だけに依存しません。塗りの朱は「新着」だけに使います。
新着配信中効力発生済みアーカイブ済み無料枠 残り 12 件電波
ボタン
主要操作は藍。朱はボタンには使いません(朱は一致と新着だけ)。 link は補助テキストに混ざる操作用で、地の文と見分けがつくようリンクの姿にします。
セグメントコントロール
選択肢が3つ以下で相互比較したい設定に使います。実体はラジオボタンなので 矢印キーで移動できます。見本はこのサイトで実際に使っている並び順です (存在しない機能を題材にしない)。
検索結果カード
ゼブラ縞ではなく罫線と余白で行を分離。一致語は朱の淡色地に下線を重ねて示します。 右の操作アイコンはホバー・フォーカス時に濃くなる段階的開示です(タッチ環境では常時表示)。
改正
○総務省告示第三百五十九号 電波法(昭和二十五年法律第百三十一号)第七条第一項第二号及び第四号の規定を実施するため、令和六年総務省告示第四百四十六号(シングルキャリア周波数分割多元接続方式携帯移動衛星通信を行う携帯移動地球局等の審査に適用する受信設備の特性を定める件)の一部を次の…
改正
○総務省告示第三百六十号 無線局免許手続規則(昭和二十五年電波監理委員会規則第十五号)第三十条の二第二項第六号の規定に基づき、平成十五年総務省告示第三百四十四号(外国の無線局等の無線設備が電波法第三章に定める技術基準に相当する技術基準に適合する事実を定める件)の一部を次のように改…
改正
○総務省告示第三百六十一号 無線局免許手続規則(昭和二十五年電波監理委員会規則第十五号)を実施するため、平成三十年総務省告示第三百五十六号(無線局免許申請書等に添付する無線局事項書等の各欄の記載に用いるコード(無線局の目的コード及び通信事項コードを除く。)を定める件)の一部を次の…
AI要約カード
左辺の藍の罫で「一次情報ではない」ことを常に示し、原文への導線を必ず持たせます。
- 要約の生成機能は未実装です(今後追加予定)。
- ここは枠の見本で、生成された文はまだ入りません。
自動生成された要約です。法的な判断には必ず原文を参照してください。
原文PDFで確認
モーダル
ネイティブ <dialog> を使うため、フォーカストラップと Esc キーはブラウザ標準の挙動です。
状態表示とフォーカス
- 色だけに依存しない。すべての状態はアイコンまたは文字を併記します(バッジ、現在地の下線、選択中セグメントの太字)。
- フォーカスは両テーマで明示。
:focus-visible に藍の輪郭を出します。Tab キーで確認してください。 - 動きを減らす設定を尊重。
prefers-reduced-motion: reduce でトランジションとアニメーションを停止します。 - テーマは3層。
:root にライトの完全なパレット →@media (prefers-color-scheme: dark) を:not([data-theme="light"]) で守る →[data-theme="dark"] で明示上書き。