罫線

罫線を使うことでUI要素同士の境界や関係性を表現します。
ユーザーの情報把握や操作を妨げないよう主張の少ない線の太さや色を用途に応じて使い分けます。

Border Widths

Name

CSS

sm

border-width: 1px

md

border-width: 2px

lg

border-width: 4px

Border Color

Name

CSS

light

border-color: gray-200

medium

border-color: gray-300

deep

border-color: gray-400

Borders

Composite Token

よく使用される罫線の組み合わせを定義しています。

Name

CSS

light

border-width: sm
border-color: light
border-style: solid

medium

border-width: sm
border-color: medium
border-style: solid

deep

border-width: sm
border-color: deep
border-style: solid

要素を区切る場合は原則mediumを使用します。存在感を抑えたい場合はlightを使用することも可能です。
使用箇所：グローバルヘッダー、カレンダー

要素を囲む場合は原則deepを使用します。
使用箇所：チェックボックス、セレクトボックス