形状

形状のトークンは角丸の半径を定義します。段階の名前は馴染みのある none・extra-small・small・medium・large・extra-large・full のままに、値は意図して小さめにしてあります。Tanrei のレイアウトは密度が高く、罫線は細いからです。細い線の隣に大きな角丸があると柔らかく不正確に見え、小さな角丸は削り出したように見えます。

none 0px

extra-small 3px

small 6px

medium 8px

large 12px

large-increased 14px

extra-large 16px

extra-large-increased 20px

extra-extra-large 24px

full full

トークン	値	備考
--tanrei-sys-shape-corner-none	0px
--tanrei-sys-shape-corner-extra-small	3px
--tanrei-sys-shape-corner-small	6px	Default for controls: buttons, inputs, menu items, tooltips.
--tanrei-sys-shape-corner-medium	8px
--tanrei-sys-shape-corner-large	12px
--tanrei-sys-shape-corner-large-increased	14px
--tanrei-sys-shape-corner-extra-large	16px
--tanrei-sys-shape-corner-extra-large-increased	20px
--tanrei-sys-shape-corner-extra-extra-large	24px
--tanrei-sys-shape-corner-full	9999px	Opt-in only: avatars, badges, segmented controls, pill variants.

生成元 design/tokens/tanrei.light.tokens.json, tokens/sys/shape.tokens.json

形状の使い分け

link

• コントロールは small（6px）。 ボタン、テキストフィールド、メニュー項目、ツールチップ。
• コンテナはサイズとともに一段ずつ上げる。 カードやメニューは medium、ダイアログやシートは large 以上。
• full はオプトイン。 ピルと円は、もともと丸いものや際立たせたいもののために取っておきます。アバター、バッジ、セグメンテッドコントロール。
• -increased の段階は expressive のレイヤに属します。既定のスケールを変えずに角丸を大きくします。

入れ子の角丸

link

角丸の要素を角丸のコンテナの中に置くときは、内側の半径を「外側の半径 − 両者の間の余白」にします。同じ半径の同心の曲線は、平行に見えません。余白の分を引くと平行になります。結果が 0 以下なら none を使います。

角のスムージング

link

半径は角の大きさを表します。もう 1 つのトークン sys.shape.corner-smoothing は、角の曲線が直線部分へどうなめらかにつながるかを表します。0 から 1 の数値で、意味は Figma の corner smoothing のスライダーと同じです。0 では四分円。0.6 は Figma が「iOS の角」と呼ぶ値で、Apple があらゆる角丸長方形に描く連続曲率の角に近いものの、同じ曲線ではありません（後述）。1 では円弧がほぼ消え、長くなだらかな 2 本の曲線だけが残ります。半径は変わらず、曲線の質だけが変わります。違いは半径が大きいほど、またピルではっきり見えます。

デザインシステム	corner-smoothing
tanrei	0
cupertino	0.6
m3-expressive-like	0
m3-like	0

生成元 tokens/systems/*.system.json, design/tokens/<system>/tanrei.light.tokens.json

システム全体で 1 つの数値です。ブランドは角の大きさと同じくらい、角のつながり方にも宿るからです。ダイヤルで拡大縮小されることはありません。cupertino は 0.6、既定のシステムは 0 のままです。レイヤでは、他の固定値と同じように書きます。

"tokens": {
  "tanrei.sys.shape.corner-smoothing": { "$value": 0.6, "reason": "ネイティブアプリと同じ連続曲率の角で描く。" }
}

Theme Studio では「グループ → 形状」のスライダーです。Figma では同じ数値がすべてのノードの corner smoothing に適用されるので、ファイルにプリセットが描くとおりの角が現れます。

各プラットフォームが描くもの

link

プラットフォーム	0 のとき	0 より大きいとき
Jetpack Compose、Flutter	四分円	Figma の corner smoothing の作図です。この作図がスムージングの値の意味そのものです。角ごとに 3 本の 3 次ベジェを引き、値に応じて円弧が縮み、なだらかな部分が伸びます。デザイナーが Figma ファイルで見るものを、この 2 つのプラットフォームがそのまま描きます。Apple の連続曲率の角は別の曲線です。0.6 のとき、半径 20 の 180×80 の矩形で両者の差は 5.1 px²。面積の 0.035% で目には見えませんが、ラスタライザ同士の差の 3 倍あり、どの値でも一致することはありません。テストは Apple の角ではなく、この作図を固定します。
Web	四分円	ボックスに使える中で最も近いスーパー楕円です。corner-shape: superellipse(2 + s) に、半径を (1 + 0.4 s) 倍したもので、同じ矩形の 0.6 で Figma の作図から 9.5 px²、Apple の角から 5.7 px² 離れています。corner-shape のないブラウザーは円形の角を描きます。
SwiftUI	.circular	.continuous。0 より大きければ、値にかかわらず OS 自身の曲線です。値は OS のものに丸められ、パッケージの README にその旨を記載しています。0.6 では上記のとおり Figma の作図から約 5 px² 離れますが、パリティの許容範囲内です。
React Native	borderCurve: "circular"	iOS では borderCurve: "continuous"。同じく 0 より大きければ OS の曲線です。Android にはこの曲線がなく、円形のままです。

コンポーネントが角を丸めるすべての場所がこの値を読みます。コンテナ、フォーカスリング、エレベーションのリング、リップルの切り抜き。Button ではこれを要件 BTN-10 として定めています。

角のスムージングが circular や continuous のような種類の選択ではなく数値なのは、デザイナーが毎日これを設定する場所である Figma がスライダーだから、そして 1 つの名前の下に 3 つの異なる曲線があってはパリティにならないからです。