Design System Preview
SmartHR — 日本語版

DESIGN.md から抽出したデザイントークンのカタログ。SmartHR Design System の公式トークンに基づくカラー、フォント、コンポーネント、スペーシングの全値を可視化。

トークン一覧を見る DESIGN.md を読む

01 / Colors

カラーパレット

Primary
SmartHR Blue
#00c4cc
ブランド・ロゴ・チャート用(UIには非推奨)
Product Main
#0077c7
UIプライマリ・ボタン・フォーカス
Semantic
Danger
#e01e5a
エラー・削除操作
Warning
#ffcc17
警告・注意喚起
Interactive
Text Link
#0071c1
テキストリンク
Orange Accent
#ff9900
アクセント・注目要素
Text
Text Black
#23221e
本文・見出し(#000000は使わない)
Text Grey
#706d65
補足テキスト・セカンダリラベル
Text Disabled
#c1bdb7
無効状態のテキスト
Stone Scale(ウォームグレー)
Stone 01 (COLUMN)
#f8f7f6
ページ背景
Stone 02 (HEAD)
#edebe8
テーブルヘッダー背景
Stone 03
#aaa69f
補助ボーダー・アイコン
Stone 04
#4e4c49
濃いグレーテキスト
Surface & Borders
White
#ffffff
コンポーネント背景
Border
#d6d3d0
区切り線・入力欄の枠
Over Background
#f2f1f0
グルーピング面
Action Background
#d6d3d0
テーブル一括操作エリア
Chart Colors
#00c4cc
#ffcd00
#ff9100
#e65537
#2d4b9b
#2d7df0
#69d7ff
#4bb47d
#05878c

02 / Typography

タイポグラフィ階層

ページタイトル — Display XXL
2rem (32px) / 700 / line-height: 1.25 / letter-spacing: 0Display
セクション見出し — Heading XL
1.5rem (24px) / 700 / line-height: 1.25 / letter-spacing: 0Heading 1
サブ見出し — Heading L
1.2rem (19.2px) / 700 / line-height: 1.5 / letter-spacing: 0Heading 2
本文テキスト — Body M。SmartHRは業務UIのため、情報密度を優先して line-height: 1.5 を標準としています。テキストカラーは #23221e を使い、純粋な #000000 は避けます。
1rem (16px) / 400 / line-height: 1.5 (NORMAL) / letter-spacing: 0Body
補足テキスト — Small S (13.7px)
0.857rem (13.7px) / 400 / line-height: 1.5 / color: Text GreySmall
キャプション・注釈 — Caption XS (12px)
0.75rem (12px) / 400 / line-height: 1.5Caption
バッジ・ラベル — Smallest XXS (10.7px)
0.667rem (10.7px) / 400 / line-height: 1.5Smallest
font-family: AdjustedYuGothic, "Yu Gothic", YuGothic, "Hiragino Sans", sans-serif
@font-face トリックで游ゴシック Medium を 400 にマッピング(Windows 表示品質対策)

従業員情報の表示

正社員 従業員番号: EMP-2024-0042 更新日: 2026-04-01

従業員詳細情報

従業員の基本情報、所属部署、雇用形態などを一覧で確認できます。各項目は人事管理者が編集可能です。変更履歴は自動的に記録されます。

所属・役職情報

部署異動や役職変更が発生した場合、申請ワークフローを通じて更新されます。過去の異動履歴も参照可能です。SmartHR では、従業員データの一元管理により、年末調整や社会保険手続きの効率化を実現しています。

長文の説明テキストには line-height: 1.75(RELAXED トークン)を適用します。業務マニュアルや手続きガイドなど、じっくり読むコンテンツに適しています。従業員が自身の情報を確認・更新する画面では、読みやすさを優先した行間を採用します。

従業員一覧テーブル

従業員番号 氏名 部署 役職 入社日
EMP-0042 山田 太郎 プロダクト開発部 シニアエンジニア 2021-04-01
EMP-0108 佐藤 花子 人事労務部 マネージャー 2019-10-01
EMP-0215 鈴木 一郎 カスタマーサクセス部 リーダー 2022-07-01
3件選択中 — 一括操作: 部署変更 / CSV出力 / 削除

04 / Buttons

ボタンバリエーション

保存する
Primary
#0077c7 / radius: 6px / 700
キャンセル
Secondary
border: 1px solid #0077c7
削除する
Danger
#e01e5a
無効
Disabled
bg: #edebe8 / text: #c1bdb7

05 / Cards

カードコンポーネント

年末調整の電子化

従業員への書類配付から回収・確認までをオンラインで完結。ペーパーレスで業務効率を大幅に向上させます。

詳細を見る

入社手続きの自動化

雇用契約書の締結、社会保険の届出、備品の手配まで。入社に必要な手続きをワンストップで管理できます。

詳細を見る

人事評価の運用

目標設定から評価シートの配布、フィードバック収集まで。評価プロセス全体を一元管理し、公平な評価制度を支援します。

詳細を見る

06 / Forms

フォーム要素

デフォルト — border: 1px solid #d6d3d0, radius: 6px
フォーカス — border: 2px solid #0077c7 (Product Main)
正しいメールアドレスを入力してください
エラー — border-color: #e01e5a (Danger)

07 / Elevation

Depth & Elevation

Level 0: Flat
none — フラットな要素
Level 1
0 2px 4px rgba(0,0,0,0.1)
カード・ドロップダウン
Level 2
0 4px 8px rgba(0,0,0,0.15)
モーダル・ダイアログ
Focus Ring
#0077c7 (Product Main)

08 / Layout — スペーシング & ブレークポイント

レイアウト

Spacing Scale(8px ベース)

XS
4px
S
8px
M
16px
L
24px
XL
32px
XXL
40px

Breakpoints

SP ≤ 599px
Tablet 600px - 959px
Desktop ≥ 960px

タッチターゲット

44px
最小タッチターゲット: 44px x 44px