Border
Spice Factory Design System
罫線の運用を定めるページ。Border は面を強く囲うためのものではなく、罫線・cell divider・フォーカスリングなど補助的な区切り線として用いる。面の階層表現は surface に任せ、border は太く濃くなりすぎない範囲で機能する。Hairline（0.5px）・thin（1px）・regular（2px）・thick（4px）の 4 段階で、色は Semantic Color の border.* を参照する。
罫線レベルで使う。面の囲いには強い border を使わず、階層は surface で表現。border は補助的な区切り線として機能する。
Border Width
| Token | Value | Preview | 用途 |
|---|---|---|---|
| border.width.0 | 0 | なし | |
| border.width.hairline | 0.5px | 細罫（テーブル divider・specimen 内区切り）。Retina で 1 物理 px | |
| border.width.thin | 1px | 標準（罫線・カード境界） | |
| border.width.regular | 2px | 強調・フォーカスリング | |
| border.width.thick | 4px | 装飾アクセント |
Border Style
| Token | Value | Preview |
|---|---|---|
| border.style.solid | solid | |
| border.style.dashed | dashed | |
| border.style.none | none |
Border Color（Semantic / Color §へ統合）
色は Semantic Color で定義（ds.color.border.subtle/default/strong/focus/inverse）。詳細は Color §を参照。