ページ

ヘッダー

横組みロゴと必要なナビゲーションだけを置く。

ページタイトル

短い名詞句と2pxのBrand Cyan罫線を置く。

本文

一段落で内容を示し、仕様や比較は横罫線の行で分ける。

関連ページ

本文の後に、次に読むページや問い合わせ先を置く。

モバイル

行を一列にし、44px以上の操作範囲と16px以上の本文を保つ。

良い例・悪い例

良い例
Cross Medicine

ページタイトル

このページで扱う内容を一段落で示す。

項目必要な情報
出典参照する資料
悪い例
Cross Medicine
お知らせ
重要情報
サービス
問い合わせ
実績
関連情報

実装

文字

--cm-font-uiと文字サイズトークンを使用する。

余白

--cm-space-*の4px単位を使用する。

フォーカス

--cm-color-primary-700の3pxアウトラインを使用する。

操作

Brand Cyanに白文字を載せず、白文字背景には濃い操作色を使用する。