Radius
Spice Factory Design System
角丸の方針を定めるページ。SF ロゴと公式タイポグラフィは「直線と完全円」の二項性で構成されており、中間的な角丸(R=2〜8)は存在しない。これを UI に反映し、面(カード・モーダル・入力フィールド)は直角、ボタンとピル要素は完全円(full)の 2 状態に縮小。中間値を持たないことで、ブランドの幾何学的な性格を一貫させる。
SF ロゴ / Original Typography は「直線と完全円」の二項性で構成され、中間的な角丸(R=2〜8)は存在しない。それを UI に反映し、面は直角、ボタンとピル要素は完全円(full)の 2 状態に縮小。
Primitive
| Token | Value | Preview |
|---|---|---|
| radius.none | 0 | |
| radius.full | 9999px |
Semantic
| Token | 参照 | 用途 |
|---|---|---|
| ds.radius.surface | radius.none | カード・モーダル・ヒーロー |
| ds.radius.input | radius.none | 入力フィールド・セレクト |
| ds.radius.button | radius.full | ボタン = pill |
| ds.radius.pill | radius.full | バッジ・タグ・アバター |
UI 適用例
SURFACE / 直角
カード(surface.raised)