DigiSheet Design System
このページはコンポーネントと CSS 変数から動的に生成されています。テーマ・形状を切り替えると全ての値と見た目がリアルタイムに更新されます。
ブランド
huapp.co.jp のブランド要素を DigiSheet 向けに再構成
ロゴ
DigiSheet プロダクトロゴ
提供元: HuApp Technology（公式サイトのロゴ）
ブランドの考え方
- タグライン
- ITの力で、HRに変わる力を（HRDX）
- フォント
- Noto Sans JP（公式サイト準拠）
- アクセント
- 1色に固定（primary-500）。強調は彩度ではなく階層で表現
- 角丸ルール
- 3段階のトークンに集約し、形状モードで一括切替
- ベース比率
- ルート 112.5%（1rem = 18px）で業務画面の可読性を確保
- 数値表示
- 時刻・件数は必ず tabular-nums で桁を揃える
カラートークン
値は現在のテーマから getComputedStyle で取得しています
Primary (HuApp corporate blue)
--color-primary-50--color-primary-100--color-primary-200--color-primary-300--color-primary-400--color-primary-500--color-primary-600--color-primary-700--color-primary-800--color-primary-900Accent (HRDX cyan)
--color-accent-100--color-accent-300--color-accent-500--color-accent-600Ink (neutral / text)
--color-ink-50--color-ink-100--color-ink-300--color-ink-500--color-ink-700--color-ink-900Success (承認)
--color-success-100--color-success-500--color-success-700Warning (注意)
--color-warning-100--color-warning-500--color-warning-700Danger (否認・エラー)
--color-danger-100--color-danger-500--color-danger-700休日区分カラー（カレンダー表示）
--color-day-sat-bg--color-day-sat-text--color-day-sun-bg--color-day-sun-text--color-day-fumon-bg--color-day-fumon-textタイポグラフィ
Noto Sans JP / font-feature-settings: palt / ルート 1rem = 18px
| 名称 | サンプル | クラス | 用途 |
|---|---|---|---|
| Page title | 勤務報告 DigiSheet 0123 | text-xl font-bold tracking-tight | PageTitle - 画面名 |
| Section heading | 勤務報告 DigiSheet 0123 | text-lg font-bold | 大見出し |
| Card title | 勤務報告 DigiSheet 0123 | text-sm font-bold | Card header |
| Body | 勤務報告 DigiSheet 0123 | text-sm | 本文・テーブルセル |
| Small | 勤務報告 DigiSheet 0123 | text-xs | 補足・ボタン(sm) |
| Table header | 勤務報告 DigiSheet 0123 | text-[11px] font-bold | thCls |
| Group label | 勤務報告 DigiSheet 0123 | text-[10px] font-bold uppercase tracking-wider | サイドバーのグループ名 |
数値表示（tabular-nums）
勤務時間 168:45 / 残業 12:30 / 深夜 5:00
tabular-nums 無し: 168:45 / 12:30 / 5:00
時刻・件数など桁が揃うべき数値は必ず tabular-nums を付与します。
グラデーション文字のクリッピング対策
DigiSheet デジタル
背景クリップ文字は leading-none だと g・y などの下端が切れます。.gradient-textが line-height 1.25 と padding-bottom を確保します。
形状（角丸）モード
操作要素・面・チップの角丸を3トークンに集約。切り替えると全画面に即反映されます。
| モード | 説明 |
|---|---|
角丸（既定） | 操作要素 8px / 面 12px。現代的で親しみやすい |
直角 | 半径 0。従来の業務システムに近い硬質な印象 |
丸型 | 操作要素は全丸・面 20px。柔らかくカジュアル |
| ユーティリティ | CSS 変数 | 現在値 | 用途 |
|---|---|---|---|
.ds-control-radius | --radius-control | - | Button / Input / Select / DatePicker / TimePicker |
.ds-surface-radius | --radius-surface | - | Card / Popover / Modal / Accordion |
.ds-chip-radius | --radius-chip | - | Badge / Chip / Tooltip |
アイコン
Heroicons (outline 24px, MIT) をインライン SVG 化。絵文字は使用しません。
フォームコントロール
全て共通コンポーネント。ラベルは常に入力の上、プレースホルダーはラベル代わりに使いません。
ボタン
押下時に translate-y + scale で触覚的なフィードバックを返します。
テキスト・数値入力
選択系
日付・時刻
オーバーレイ・ナビゲーション
モーダル・トースト・アコーディオン・タブ・ツールチップ
モーダル・確認ダイアログ
トースト
画面内に残す通知は Alert、操作直後の一時通知は Toast を使います。
アコーディオン
契約CD・所属・派遣先・スタッフ・承認者などの基本項目。
タブ
1か月分の勤務データを一覧表示します。
データ表示
並べ替え・絞り込み・ページ送りを備えた共通テーブル
DataTable（並べ替え・列絞り込み・ページ送り）
| 0001 | 0001 | スタッフＡ | 開発部 | 確定 | 26:00 | 2:00 |
| 0002 | 0002 | スタッフＢ | 開発部 | 未承認 | 24:00 | 0:00 |
| 0003 | 0003 | スタッフＣ | 営業部 | 否認 | 16:00 | 0:45 |
| 0004 | 0004 | スタッフＤ | 営業部 | 承認 | 28:00 | 4:00 |
Pagination 単体
承認ステイタス
-○否認確未入力 = レコードなし（アイコンなし）。
テーブル密度（勤務表）
| 日 | 曜日 | 始業 | 終業 | 休憩 | 勤務 | 残業 |
|---|---|---|---|---|---|---|
| 3 | 月 | 09:00 | 18:00 | 01:00 | 08:00 | |
| 4 | 火 | 09:00 | 20:00 | 01:00 | 10:00 | 02:00 |
| 8 | 土 | |||||
| 9 | 日 |
フィードバック
成功・エラー・注意・情報の4種。アイコンと色の両方で意味を伝えます。
空状態
| 日付 | 届出 | 勤務時間 |
|---|---|---|
該当するデータがありません | ||
バッジ
余白・影
1ページ内でリズムを揃えるためのルール
余白
gap-1.5 / gap-2 | アイコンとラベル・ボタン群 |
gap-3 | フォーム項目間 |
space-y-4 | カード間の縦リズム |
px-4 py-3 | カードヘッダー・フォーム領域 |
px-2 py-1.5 | テーブルセル (tdCls) |
影・フォント
--