面ごとの保証
面が深くなると、文字もアクセントも自動で1段深い段を指します。カードの上でも 4.5:1 を割りません。
<div data-sg-surface="surface">Design tokens
1色から、
全部が決まる。
primary を1色選ぶだけで、面・文字・状態・グラフの色が規則から生成されます。 コントラストは検査して直すものではなく、そうなっているものです。
全360色相で保証
360保証済みの色相
4.50文字の最小コントラスト
1根本定数（16px）
0手で決めた色
特徴
規則が解いているもの
密度は文脈
骨格の余白だけが密度で動きます。data-sg-density で固定でき、既定は画面幅に従います。
padding: var(--sg-space-page)書体は差し込み口
書体名はブランドの選択なので、システムは構造だけを持ちます。欧文 → 和文 → generic の順序は保証されます。
--sg-font-brand-display-latinデータ
識別と連続は別の役割
系列を見分ける
段をずらして配るので、二色覚のもとでも潰れません。
系列1
系列2
系列3
系列4
系列5
大小を読む
面に近い側から遠い側へ並べます。面と同じ段は帯に入りません。
05001,000
今月の生成回数（上限比）
読み込み中の骨組み。周期はループスケールから来ています。
情報
暗色モードは反転ではなく、参照する段の入れ替えです。
成功
360色相すべてで文字 4.5:1 / 印 3:1 を満たしています。
警告
彩度の高い色を選ぶと、規則が届く範囲まで彩度を落とします。
危険
プリミティブをコンポーネントから参照すると検査が落ちます。
同じ状態色を「文字」ではなく「塗り」として使うと、上に載せる文字が要ります。
記録
生成された段
| 役割 | 参照する段 | 明色 | 暗色 |
|---|---|---|---|
| 本文 | neutral | 900 | 100 |
| 補助 | neutral | 600 | 300 |
| アクセント | primary | 500 | 400 |
| 印 | primary | 400 | 300 |
数字は等幅で揃えています。
料金
導入の深さで選ぶ
tokens
¥0 / 月
- CSS 変数のみ
- React 非依存
- SCSS / Tailwind アダプタ
component
おすすめ¥0 / 月
- コンポーネント単体
- コードが手元に落ちる
- 改変は自由
base
¥0 / 月
- 全部
- registry:base
- 更新は取り込み直し
FAQ
読ませる長さの文章
この段落だけ行高が違います。UI の中に置く文字と、続けて読ませる文章とでは 読みやすい行間が違うためです。サイズは同じ段で、行高だけが別の族から来ています。 サイズと行高は必ず対で提供されます。対応が崩れないように、 サイズだけを取り出して使う道は用意していません。
トークンだけでも動きます
このページが読み込んでいるのは、生成された CSS 1枚だけです。