メルビック電工 勤怠管理システム — デザインシステム

Storybook 相当の確認ページ。色・フォントの値はすべて tokens.css 由来。アプリ側での直書きは禁止。

カラートークン

--mv-blue#255685 primary
--mv-blue-dark#133C64
--mv-blue-mid#3C79B4
--mv-blue-tint#E8EEF5
--mv-ink#071523
--mv-paper#F6F6F6
--mv-rule#C7C7C7
--mv-yellow#F0C020 注意
--mv-green#00893E 安全
--mv-red#C8161D 禁止

primary はサイト実測値。状態色は JIS 安全色（BRAND-AUDIT.md §4 参照）。 #255685 on 白 = コントラスト比 7.63:1。

タイポグラフィ

見出し — Zen Kaku Gothic New 700

本文 — Noto Sans JP 400。図面注記の角ゴシックに近い字面を保つ。

8:30  17:00  41:15  115:30

時刻・時間数は必ず等幅（Roboto Mono / tabular-nums）。 [h]:mm を維持し、10進小数に変換して表示しない。

Button / Input / TimeInput / Select

タップ領域は最小 48px（手袋・汚れた手・屋外を前提）。 入力欄は 16px 以上で iOS の自動ズームを抑止。

Badge

承認済 承認待ち 未入力 規定超過 期限切れ 未消化

Table — 月次グリッド（行=社員 / 列=日）

社員 1234567 89101112 残1.25超0.25振未済
諸角　真輝 5:00—— ———休 5:00—— —8:00 20:0016:00 1
高渕　愛朗 2:00—2:00 —1:00—休 振休振休振休振休振休 20:008:000
山﨑凛太郎 ——— ———休 ——— —— 20:000:00 2

Excel の見え方を保つ。異常値のみ着色（未入力=黄 / 規定超過=赤 / 正常=無着色）。 セルは Tab / 矢印で移動でき、キーボードだけで確定まで到達できること。

ApprovalCircuit — signature element

承認経路を直列回路として描く。未承認は開放接点、 承認済は閉路。全員が承認して回路が閉じたときだけ「確定」が通電する。 紙とハンコの回覧を、電気工事会社の言語に翻訳した表現。

承認途中（本部長で開放 → 確定は消灯）

本人6/28 承認 上長6/29 承認 本部長未承認 管理本部未承認 確定

全員承認 → 回路が閉じて通電

本人6/28 承認 上長6/29 承認 本部長6/30 承認 管理本部7/1 承認 確定

通電アニメーションは prefers-reduced-motion で点灯のみに落ちる。 大胆さはここだけに使う。他の画面は一切装飾しない。
承認経路の並びは要確認 — 月報原紙の承認欄は 社長 / 管理本部長 / 本部長 / 事業部長 の4枠。

Toast / Dialog

6月分を承認しました。
諸角 真輝: 振休未済が4か月を経過しています（2/11 発生）。

給与用CSVを出力します

期限切れ買取 2 件 を 1.0 倍で含みます。

このツールは計算補助です。支給額の最終確定は人間が行ってください。

賃金の自動確定はしない。CSV 出力前に必ず人間の確認ゲートを置く。