Radius

Spice Factory Design System

角丸の方針を定めるページ。SF ロゴと公式タイポグラフィは「直線と完全円」の二項性で構成されており、中間的な角丸(R=2〜8)は存在しない。これを UI に反映し、面(カード・モーダル・入力フィールド)は直角、ボタンとピル要素は完全円(full)の 2 状態に縮小。中間値を持たないことで、ブランドの幾何学的な性格を一貫させる。

SF ロゴ / Original Typography は「直線と完全円」の二項性で構成され、中間的な角丸(R=2〜8)は存在しない。それを UI に反映し、面は直角、ボタンとピル要素は完全円(full)の 2 状態に縮小。

Primitive

TokenValuePreview
radius.none0
radius.full9999px

Semantic

Token参照用途
ds.radius.surfaceradius.noneカード・モーダル・ヒーロー
ds.radius.inputradius.none入力フィールド・セレクト
ds.radius.buttonradius.fullボタン = pill
ds.radius.pillradius.fullバッジ・タグ・アバター

UI 適用例

SURFACE / 直角

カード(surface.raised)

PILL タグ AM