タイポグラフィ
--unitone--measure
テキストの1行の長さ（カラム幅）。デフォルトは 46rem です。
--unitone--font-size
文字サイズのレベル。-2〜7まで設定できます。デフォルトは 0。少し大きくしたい場合は下記のように指定できます。
.foo {
--font-size: 1;
}あるいは、CSS を書かなくてもコアブロックであればタイポグラフィパネルから設定できますし、unitone 的にはデコレーターブロックのタイポグラフィパネルからも設定できるので、デコレーターブロックで対象をラップしてデコレーターブロックで文字サイズを設定することもできます。
--unitone--harmonic-sequence-base
unitone の文字サイズは下記の計算式で算出されます。デフォルトは 8 です。
var(--unitone--harmonic-sequence-base) / (var(--unitone--harmonic-sequence-base) - var(--unitone--font-size))調和数列に --unitone--harmonic-sequence-base を掛けたものです。--unitone--harmonic-sequence-base が小さいほどスケールは大雑把になり、大きいほど細かくなります。
--unitone--min-harmonic-sequence-base,
--unitone--max-harmonic-sequence-base
デコレーターブロックのタイポグラフィパネルには「流体タイポグラフィ」の設定があります。「流体タイポグラフィ」にチェックすると、画面サイズに応じて文字サイズが拡大縮小します。文字サイズが「6XL」だとすると、スマホでは大きすぎてまともに読むことができないので、そのようなときは「流体タイポグラフィ」を使うと良いです。
流体タイポグラフィの場合、文字サイズの計算式が下記のようになります。
最大： var(--unitone--max-harmonic-sequence-base) / (var(--unitone--max-harmonic-sequence-base) - var(--unitone--font-size))
最小： var(--unitone--min-harmonic-sequence-base) / (var(--unitone--min-harmonic-sequence-base) - var(--unitone--font-size))--unitone--min-harmonic-sequence-base のデフォルト値は 9、--unitone--max-harmonic-sequence-base のデフォルト値は --unitone--harmonic-sequence-base です。
--unitone--half-leading
文字の上下に追加される余白の大きさです。デフォルト値は 0.4 です。
1行の大きさ（line-height）は下記の計算式で算出されます。
1 * var(--unitone--half-leading) * 2サイト全体の line-height については自分で CSS を書かなくてもサイトエディターのグローバルスタイルから設定できます。
--unitone--font-family
基本の書体。デフォルトは sans-serif。
余白・サイズ
基本（単位なし）
--unitone--ms{レベル} という形式でフィボナッチ数列に基づいたサイズを返します。全ての余白・サイズ用の CSS カスタムプロパティの基本になります。具体的には下記の数式で算出されます。
line-height * {フィボナッチ数}--unitone--_space-reference-value は行間のサイズを基準にした値を保持している CSS カスタムプロパティです。フィボナッチ数 3 のときに基本の line-height と同じ大きさを返すようになっています。--unitone--_space-reference-value は一応プライベート変数扱いで、上書きすることは非推奨です。
--unitone--ms-2
line-height * 1--unitone--ms-1
line-height * 2--unitone--ms0
デフォルトでは0。
--unitone--ms1
line-height * 3--unitone--ms2
line-height * 5--unitone--ms3
line-height * 8--unitone--ms4
line-height * 13--unitone--ms5
line-height * 21--unitone--ms6
line-height * 34--unitone--ms7
line-height * 55標準
各ブロックで設定可能な余白（gap や padding 等）は --unitone--s{レベル} という形式の CSS カスタムプロパティが使用されます。
em ベースのサイズがベースとなりますが、レベルが2以上のものについては小さな画面のときに余白が大きくなりすぎないように clamp で調整されます。
var(--unitone--ms1) + var(--unitone--ms{レベル}) * 22.5em / 80em 〜 var(--unitone--ms{レベル})--unitone--s-2
デフォルトでは約0.53em。
var(--unitone--em-2)--unitone--s-1
デフォルトでは約1.07em。
var(--unitone--em-1)--unitone--s0
デフォルトでは0em。
--unitone--s1
デフォルトでは1.8em。
var(--unitone--em1)--unitone--s2
デフォルトでは3em〜約2.65em。
var(--unitone--ms1) + var(--unitone--ms2) * 22.5em / 80em 〜 var(--unitone--ms2)--unitone--s3
デフォルトでは4.8em〜約3.18em。
var(--unitone--ms1) + var(--unitone--ms3) * 22.5em / 80em 〜 var(--unitone--ms3)--unitone--s4
デフォルトでは7.8em〜約4.06em。
var(--unitone--ms1) + var(--unitone--ms4) * 22.5em / 80em 〜 var(--unitone--ms4)--unitone--s5
デフォルトでは12.6em〜約5.46em。
var(--unitone--ms1) + var(--unitone--ms5) * 22.5em / 80em 〜 var(--unitone--ms5)--unitone--s6
デフォルトでは20.4em〜約7.75em。
var(--unitone--ms1) + var(--unitone--ms6) * 22.5em / 80em 〜 var(--unitone--ms6)--unitone--s7
デフォルトでは33em〜約11.44em。
var(--unitone--ms1) + var(--unitone--ms7) * 22.5em / 80em 〜 var(--unitone--ms7)パディング用
各ブロックで設定可能な padding は --unitone--p{レベル} という形式の CSS カスタムプロパティが使用されます。
em ベースのサイズがベースとなりますが、レベルが2以上のものについては小さな画面のときに余白が大きくなりすぎないように clamp で調整されます（--unitone--s{レベル} も調整されますが、それよりも縮小幅が大きくなります）。
--unitone--p-2
デフォルトでは約0.53em。
var(--unitone--em-2)--unitone--p-1
デフォルトでは約1.07em。
var(--unitone--em-1)--unitone--p0
デフォルトでは0em。
--unitone--p1
デフォルトでは1.8em。
var(--unitone--em1)--unitone--p2
デフォルトでは3em〜約1.99em。
var(--unitone--ms1) + var(--unitone--ms2) * (22.5em / 80em) * 0.2 〜 var(--unitone--ms2)--unitone--p3
デフォルトでは4.8em〜約2.11em。
var(--unitone--ms1) + var(--unitone--ms3) * (22.5em / 80em) * 0.2 〜 var(--unitone--ms3)--unitone--p4
デフォルトでは7.8em〜約2.33em。
var(--unitone--ms1) + var(--unitone--ms4) * (22.5em / 80em) * 0.2 〜 var(--unitone--ms4)--unitone--p5
デフォルトでは12.6em〜約2.67em。
var(--unitone--ms1) + var(--unitone--ms5) * (22.5em / 80em) * 0.2 〜 var(--unitone--ms5)--unitone--p6
デフォルトでは20.4em〜約3.23em。
var(--unitone--ms1) + var(--unitone--ms6) * (22.5em / 80em) * 0.2 〜 var(--unitone--ms6)--unitone--p7
デフォルトでは33em〜約4.13em。
var(--unitone--ms1) + var(--unitone--ms7) * (22.5em / 80em) * 0.2 〜 var(--unitone--ms7)em ベース
--unitone--em{レベル} という形式でフィボナッチ数列に基づいたサイズを返します。具体的には下記の数式で算出されます。
1em * var(--unitone--ms{レベル})--unitone--em-2
デフォルトでは約0.53em。
1em * var(--unitone--ms-2)--unitone--em-1
デフォルトでは約1.07em。
1em * var(--unitone--ms-1)--unitone--em0
デフォルトでは0em。
--unitone--em1
デフォルトでは1.8em。
1em * var(--unitone--ms1)--unitone--em2
デフォルトでは3em。
1em * var(--unitone--ms2)--unitone--em3
デフォルトでは4.8em。
1em * var(--unitone--ms3)--unitone--em4
デフォルトでは7.8em。
1em * var(--unitone--ms4)--unitone--em5
デフォルトでは12.6em。
1em * var(--unitone--ms5)--unitone--em6
デフォルトでは20.4em。
1em * var(--unitone--ms6)--unitone--em7
デフォルトでは33em。
1em * var(--unitone--ms7)rem ベース
--unitone--rem{レベル} という形式でフィボナッチ数列に基づいたサイズを返します。具体的には下記の数式で算出されます。
1rem * var(--unitone--ms{レベル})--unitone--rem-2
デフォルトでは約0.53rem。
1rem * var(--unitone--ms-2)--unitone--rem-1
デフォルトでは約1.07rem。
1rem * var(--unitone--ms-1)--unitone--rem0
デフォルトでは0rem。
--unitone--rem1
デフォルトでは1.8rem。
1rem * var(--unitone--ms1)--unitone--rem2
デフォルトでは3rem。
1rem * var(--unitone--ms2)--unitone--rem3
デフォルトでは4.8rem。
1rem * var(--unitone--ms3)--unitone--rem4
デフォルトでは7.8rem。
1rem * var(--unitone--ms4)--unitone--rem5
デフォルトでは12.6rem。
1rem * var(--unitone--ms5)--unitone--rem6
デフォルトでは20.4rem。
1rem * var(--unitone--ms6)--unitone--rem7
デフォルトでは33rem。
1rem * var(--unitone--ms7)グリッド（%）ベース
--unitone--pg{グリッド数} という形式で、親要素を分割しそれに任意のグリッド数を掛け合わせたサイズを返します。分割数は var(--unitone--grid-columns)、各グリッド間の余白は var(--unitone--grid-gap) で定義されています。具体的には下記の数式で算出されます。
(100% - var(--unitone--grid-gap) * (var(--unitone--grid-columns) - 1)) / var(--unitone--grid-columns) * {グリッド数} + var(--unitone--grid-gap) * {グリッド数} - 1グリッド（コンテナー）ベース
--unitone--cg{グリッド数} という形式で、コンテナーのサイズ（--unitone--container-max-width）を分割しそれに任意のグリッド数を掛け合わせたサイズを返します。分割数は var(--unitone--grid-columns)、各グリッド間の余白は var(--unitone--grid-gap) で定義されています。具体的には下記の数式で算出されます。
(var(--unitone--container-max-width) - var(--unitone--grid-gap) * (var(--unitone--grid-columns) - 1)) / var(--unitone--grid-columns) * {グリッド数} + var(--unitone--grid-gap) * {グリッド数} - 1gap
--unitone--global--gap
主にブロックを左右、あるいはグリッド上に並べるようなブロックの gap に指定されています。
var(--unitone--s2)--unitone--global--text-gap
主にテキストを上下、あるいは左右にならべるようなブロックの gap に指定されています。
var(--unitone--s1)コンテナーの左右余白
--unitone--global--gutters
clamp(var(--unitone--rem1), 4vw, var(--unitone--rem2))その他
--unitone--container-max-width
コンテナーの横幅。デフォルトは 1334px。
--unitone--global--box-shadow
box-shadow の値。デフォルトは 0 5px 20px -5px rgba(0, 0, 0, .2)。