SmartHR Design System
  • さがす
  • コンセプト
  • 基本原則
  • 基本要素
  • アクセシビリティ
  • プロダクト
  • コミュニケーション

プロダクト

  • デザイン原則
  • デザイントークン
    • 色
    • タイポグラフィ
    • 余白
    • 不透明度
    • 角丸
    • レイヤー順序
    • 影
    • メディアクエリ
    • 行送り
  • コンポーネント
    • AccordionPanel
    • AppNavi
    • BackgroundJobsPanel
    • Base
    • BottomFixedArea
    • Button
    • Calendar
    • CheckBox
    • ComboBox
    • CompactInformationPanel
    • DatePicker
    • DefinitionList
    • Dialog
    • DropZone
    • Dropdown
    • DropdownButton
    • FieldSet
    • FilterDropdown
    • FlashMessage
    • FloatArea
    • FormGroup
    • Header
    • Heading
    • HeadlineArea
    • Icon
    • Image
    • IndexNav
    • InformationPanel
    • Input
    • InputFile
    • Layout/Cluster
    • Layout/LineUp
    • Layout/Reel
    • Layout/Sidebar
    • Layout/Stack
    • LineClamp
    • Loader
    • MessageScreen
    • NotificationBar
    • Pagination
    • RadioButton
    • RightFixedNote
    • SegmentedControl
    • Select
    • SideNav
    • SmartHRLogo
    • StatusLabel
    • TabBar
    • Table
    • Text
    • TextLink
    • Textarea
    • Tooltip
  • コンテンツ
    • ライティングガイドライン
    • ライティングスタイル
    • 用字用語
      • 用字用語:一覧
      • 用字用語:理由
    • UIテキスト
    • エラーメッセージ
    • リリースノート
    • ヘルプセンター
      • ヘルプページの構成
      • 操作手順の書き方
      • よくある質問の書き方
      • ヘルプページレビューの手引
  • デザインパターン(共通)
    • 権限による表示制御
    • 余白の取り方
    • ヘッダー
    • 上に戻るリンク
    • 値がない項目の表示
    • 「よくあるテーブル」
    • ドロップダウンボタン
    • 削除ダイアログ
    • 企業アカウント選択
    • ヘルプページへの動線
  • デザインパターン(基本機能)
    • 共通設定
    • 共通設定の操作権限項目
  • デザインの進め方
    • デザインデータ(Figma)の作り方
    • デザインレビューの手引
    • ユーザビリティテストの手引
      • ユーザビリティテストの被験者になったら
  • リソース
    • コンポーネント
  • セマンティクストークン
    • [WIP]コード

      行送り

      行送りトークンは、行ボックスの高さを定義します。

      CSSではline-heightを指しています。

      セマンティクストークン

      トークン名値使用例
      NONE1ラベルテキスト、Heading
      TIGHT1.25
      NORMAL1.5段落テキスト
      RELAXED1.75

      [WIP]コード

      • 前へ

        メディアクエリ
      • 次へ

        コンポーネント

      SmartHR Design System

      • さがす
      • ダウンロード一覧
      • 利用規約
      • お問い合わせ・フィードバック
      • 運用ガイドライン
      • 更新情報(Twitter)
      • 運営会社

      コンセプト

      • 利用方法
      • コンテンツ構成
      • 運営理念

      基本原則

      基本要素

      • ロゴ
      • 色
      • タイポグラフィ
      • アイコン
      • イラストレーション

      プロダクト

      • デザイン原則
      • デザイントークン
      • コンポーネント
      • コンテンツ
      • デザインパターン(共通)
      • デザインパターン(基本機能)
      • デザインの進め方
      • リソース

      コミュニケーション

      • 写真・動画
      • スライド・資料
      • 画面キャプチャ

      SmartHR© 2022, SmartHR, Inc.