SmartHR Design System

タイポグラフィ

最小限に整理したフォントスタイルは可読性を高め、読み手の体験を妨げません。

このドキュメントは現状の値を書き出したものであり、今後変更される可能性があります。

書体

ユーザーが慣れ親しんでいる環境を尊重し、以下の書体を指定します。

font-family: system-ui, sans-serif;

フォントサイズ

基準値は16pxです。

トークン名値(rem)値(px)
SHORT0.687511
TALL0.87514
GRANDE1.12518
VENTI1.524

行送り

基本的に行の高さ(line-height)は、フォントサイズの1.5倍です。 コンポーネントによって、指定なし(line-height: normal;)の場合があります。(例:Buttonのラベル)

テキストスタイル

見出し

Headingコンポーネントを参照してください。

段落

段落テキストに使用します。強調やリンクのスタイルを取ることがあります。

サイズ小

積極的な使用は避け、レイアウトの都合上、どうしようもない場合に使います。

タイプトークンサンプル
標準TALL

社会の非合理を、ハックする。

標準

タイプトークンサンプル
標準TALL

社会の非合理を、ハックする。

ラベルテキスト

段落ではないボタン等のラベルテキストに使用します。行の高さ(line-height)は指定なしです。

サイズ小

積極的な使用は避け、レイアウトの都合上、どうしようもない場合に使います。

タイプトークンサンプル
サイズ小SHORT

社会の非合理を、ハックする。

標準

タイプトークンサンプル
標準TALL

社会の非合理を、ハックする。

表中のテキストは、基本的に「段落」と同じスタイルを使用します。表で固有のスタイルは以下のとおりです。

  • 表の見出し(th)の文字揃えは、データ(td)の文字揃えに合わせます。
  • 表のデータに数字を表示する場合は、列を縦に読んだときに桁数を比較できるように右揃えにします。

[WIP]強調

リンク

テキストリンクは、以下の場合に使用します。リンク以外の操作を表す場合は、Buttonコンポーネントを使用してください。

  • 他の画面やヘルプページに遷移させるために、画面の説明文や補助テキストにリンクを設置する場合
  • 一覧コレクションからシングルに遷移させるために、そのインスタンス名にリンクを設置する場合
  • テキストリンクの色はTEXT_LINKを使用し、マウスオーバー時を除いて下線は表示しません。

別ウィンドウを開くリンクや、ヘルプセンターのモーダルダイアログを表示するリンクでは、遷移先を事前に認知できるように、Iconコンポーネントを組み合わせて利用します。

参考

© 2021, SmartHR, Inc.