デザイントークン（余白・角丸・影など）
Lism CSS のデザイントークン（決まった段階の値）とは何かと、角丸・影・余白・不透明さ・コンテンツの幅のトークンの一覧です。
デザイントークンは、余白・色・角の丸み・影などの値を、あらかじめ決めた段階のセットにしたものです。Lism では、よく使う CSS のプロパティごとにトークンが用意されていて、-p:20 や -bdrs:30 のように番号や名前で選んで使います。
トークンとは#
ページを作っていると、「この余白は 15px、あっちは 17px」のように、少しずつ違う値がまざりがちです。値がばらばらだと、見た目がそろわず、あとで直すのも大変です。
トークンは、使ってよい値を先に決めて、名前を付けておくしくみです。
- 見た目がそろう：同じトークンを使い回すので、余白や角の丸みが自然にそろいます
- 意図が読める：
--s20や--text-2のように名前があるので、何のための値かが分かります - まとめて直せる：トークンの値を1か所変えるだけで、サイト全体が変わります
Lism のトークンは CSS 変数（-- で始まる、値を入れておく入れ物）として :root に入っています。名前の付け方は 名前のルール にあります。
色と文字のトークン#
色と文字のトークンは、それぞれ別のページにまとめています。
| 種類 | 変数 | くわしくは |
|---|---|---|
| 色（意味の色） | --base・--base-2・--text・--text-2・--divider・--link・--brand・--accent・--neutral |
色のトークン |
| フォント（FF） | --ff--base・--ff--accent・--ff--mono |
文字のトークン |
| 文字の太さ（FW） | --fw--light・--fw--normal・--fw--bold |
文字のトークン |
| 文字の大きさ（FZ） | --fz--2xs から --fz--5xl |
文字のトークン |
| 行の上下の余白（HL） | --hl--xs・--hl--s・--hl--base・--hl--l・--hl--xl |
文字のトークン |
| 行の高さ（LH） | --lh--xs・--lh--s・--lh--m・--lh--l・--lh--xl |
文字のトークン |
| 字と字のあいだ（LTS） | --lts--xs・--lts--s・--lts--base・--lts--l・--lts--xl |
文字のトークン |
パレットの色（--red・--blue・--green など）も 色のトークン にあります。
RADIUS（角の丸み）#
border-radius（角の丸み）のトークンです。-bdrs は border-radius の略です。
| トークン | 変数 | クラス | 最初の値 |
|---|---|---|---|
10 |
--bdrs--10 |
-bdrs:10 |
0.25rem（約 4px） |
20 |
--bdrs--20 |
-bdrs:20 |
0.375rem（約 6px） |
30 |
--bdrs--30 |
-bdrs:30 |
0.625rem（約 10px） |
40 |
--bdrs--40 |
-bdrs:40 |
1rem（約 16px） |
50 |
--bdrs--50 |
-bdrs:50 |
1.5rem（約 24px） |
99 |
--bdrs--99 |
-bdrs:99 |
99rem（丸くなりきる） |
約何 px かは、1rem を 16px として計算した目安です。
段と段の差は、+0.125rem、+0.25rem、+0.375rem、+0.5rem のように、差そのものが少しずつ大きくなっていきます。小さいほうは細かく、大きいほうは大きく変わるので、使い分けやすくなっています。
表示例
<div class="l--grid -gtc -g:10" style="--gtc: repeat(3, 1fr)">
<div class="-bdrs:10 -p:15 -bgc:base-2">10</div>
<div class="-bdrs:20 -p:15 -bgc:base-2">20</div>
<div class="-bdrs:30 -p:15 -bgc:base-2">30</div>
<div class="-bdrs:40 -p:15 -bgc:base-2">40</div>
<div class="-bdrs:50 -p:15 -bgc:base-2">50</div>
<div class="-bdrs:99 -p:15 -bgc:base-2">99</div>
</div>
SHADOW（影）#
box-shadow（箱の影）のトークンです。-bxsh は box-shadow の略です。
| トークン | 変数 | クラス |
|---|---|---|
10 |
--bxsh--10 |
-bxsh:10 |
20 |
--bxsh--20 |
-bxsh:20 |
30 |
--bxsh--30 |
-bxsh:30 |
40 |
--bxsh--40 |
-bxsh:40 |
50 |
--bxsh--50 |
-bxsh:50 |
表示例
<div class="l--grid -gtc -g:20 -p:10" style="--gtc: repeat(3, 1fr)">
<div class="-bxsh:10 -p:15 -bgc:base">10</div>
<div class="-bxsh:20 -p:15 -bgc:base">20</div>
<div class="-bxsh:30 -p:15 -bgc:base">30</div>
<div class="-bxsh:40 -p:15 -bgc:base">40</div>
<div class="-bxsh:50 -p:15 -bgc:base">50</div>
</div>
影の作り#
1つの影は、2枚の影を重ねて作っています。
- 要素のすぐ近くに付く、うすい影：1段小さい大きさで、色は
--shcを半分の濃さにした--shc--near - 主になる影：その段の大きさで、色は
--shc
| 変数 | 値 |
|---|---|
--bxsh--10 |
var(--shsz--5) var(--shc--near), var(--shsz--10) var(--shc) |
--bxsh--20 |
var(--shsz--10) var(--shc--near), var(--shsz--20) var(--shc) |
--bxsh--30 |
var(--shsz--20) var(--shc--near), var(--shsz--30) var(--shc) |
--bxsh--40 |
var(--shsz--30) var(--shc--near), var(--shsz--40) var(--shc) |
--bxsh--50 |
var(--shsz--40) var(--shc--near), var(--shsz--50) var(--shc) |
影の部品になる変数の、最初の値は次のとおりです。
| 変数 | 最初の値 |
|---|---|
--shc |
var(--shadow)（hsl(220 2% 4% / 8%)） |
--shc--near |
color-mix(in srgb, var(--shc), transparent 50%) |
--shsz--5 |
0px 0px 1px |
--shsz--10 |
0px 1px 3px |
--shsz--20 |
0px 2px 6px |
--shsz--30 |
0px 4px 12px |
--shsz--40 |
0px 8px 24px |
--shsz--50 |
0px 16px 48px |
--shadow の値は公式ドキュメントのものです。CSS の実物では rgba(10,10,10,.08) と書かれています（同じ色を別の書き方にしたもの）。
影の大きさ（--shsz--）は、10 から先は1段ごとに、ずれる量（オフセット）とぼかしが2倍になります。ぼかしは、いつもずれる量の3倍です。5 だけはずれが無い小さなぼかしで、--bxsh--10 の近い影に使われます。
SPACE（余白）#
余白のトークンです。padding（内側の余白）・margin（外側の余白）・gap（要素と要素のすきま）の Property Class で使えます。
| トークン | 変数 | 約何 px か |
|---|---|---|
5 |
--s5 |
4px |
10 |
--s10 |
8px |
15 |
--s15 |
12px |
20 |
--s20 |
16px |
25 |
--s25 |
20px |
30 |
--s30 |
24px |
35 |
--s35 |
32px |
40 |
--s40 |
40px |
45 |
--s45 |
52px |
50 |
--s50 |
64px |
60 |
--s60 |
104px |
70 |
--s70 |
168px |
表示例
<div class="l--stack -g:10">
<div class="-p:10 -bgc:base-2">-p:10（約 8px）</div>
<div class="-p:20 -bgc:base-2">-p:20（約 16px）</div>
<div class="-p:30 -bgc:base-2">-p:30（約 24px）</div>
<div class="-p:40 -bgc:base-2">-p:40（約 40px）</div>
</div>
余白の決まり方#
余白は、もとになる長さ --s-unit（最初は 0.5rem、約 8px）に、決まった数をかけて作ります。
--s10から--s70の10ごとの段は、1・2・3・5・8・13・21 という並び（フィボナッチ数列：前の2つを足すと次の数になる並び）をかけます。文章を縦に並べたときのリズムを作るための段です- 横方向の
gapやpaddingは、縦のリズムにしばられなくてよいので、50までは5ごとの間の段もあります（--s5・--s15・--s25・--s35・--s45）
:root,
.set--s {
/* 余白のもと ≒ 8px */
--s-unit: 0.5rem;
/* 10 ごとの段（フィボナッチ数列） */
--s10: var(--s-unit); /* ≒ 8px */
--s20: calc(var(--s-unit) * 2); /* ≒ 16px */
--s30: calc(var(--s-unit) * 3); /* ≒ 24px */
--s40: calc(var(--s-unit) * 5); /* ≒ 40px */
--s50: calc(var(--s-unit) * 8); /* ≒ 64px */
--s60: calc(var(--s-unit) * 13); /* ≒ 104px */
--s70: calc(var(--s-unit) * 21); /* ≒ 168px */
/* 50 までの間の段（横方向の gap・padding 用） */
--s5: calc(var(--s-unit) * 0.5); /* ≒ 4px */
--s15: calc(var(--s-unit) * 1.5); /* ≒ 12px */
--s25: calc(var(--s-unit) * 2.5); /* ≒ 20px */
--s35: calc(var(--s-unit) * 4); /* ≒ 32px */
--s45: calc(var(--s-unit) * 6.5); /* ≒ 52px */
}
.set--s {
--s-unit: 0.5em;
}
使えるクラスの一覧は 余白（padding・margin・gap） にあります。
文字の大きさに合わせて余白を変える#
set--s を付けた要素では、--s-unit が 0.5em になります。em はその要素の文字の大きさなので、余白が文字の大きさに合わせて計算しなおされます（Set Class（set--*））。
表示例
<div class="set--s -fz:xl -p:20 -bgc:base-2">set--s と -fz:xl（余白も文字に合わせて広がる）</div>
--fz--base を clamp() などで画面の幅に合わせて伸び縮みさせているサイトで、余白も一緒に伸び縮みさせたいときは、:root で --s-unit を書きかえます。
:root {
--s-unit: calc(var(--fz--base) * 0.5);
}
OPACITY（不透明さ）#
opacity（不透明さ。小さいほど透ける）のトークンです。-o は opacity の略です。
| トークン | 変数 | クラス | 最初の値 |
|---|---|---|---|
mp |
--o--mp |
-o:mp |
0.9 |
p |
--o--p |
-o:p |
0.8 |
pp |
--o--pp |
-o:pp |
0.6 |
ppp |
--o--ppp |
-o:ppp |
0.4 |
名前は音楽の強弱記号からきています。mezzo-piano（mp、少し弱く）・piano（p、弱く）・pianissimo（pp、とても弱く）・pianississimo（ppp、もっと弱く）のように、p が多いほど薄くなります。
表示例
<div class="l--grid -gtc -g:10" style="--gtc: repeat(4, 1fr)">
<div class="l--stack -g:5"><div class="-bgc:brand -o:mp -p:30 -bdrs:10"></div><span class="-fz:s">mp</span></div>
<div class="l--stack -g:5"><div class="-bgc:brand -o:p -p:30 -bdrs:10"></div><span class="-fz:s">p</span></div>
<div class="l--stack -g:5"><div class="-bgc:brand -o:pp -p:30 -bdrs:10"></div><span class="-fz:s">pp</span></div>
<div class="l--stack -g:5"><div class="-bgc:brand -o:ppp -p:30 -bdrs:10"></div><span class="-fz:s">ppp</span></div>
</div>
React・Astro では o の Props で渡します。
<Text o="mp">mp: Lorem ipsum ...</Text>
<Text o="ppp">ppp: Lorem ipsum ...</Text>
SIZE（コンテンツの幅）#
コンテンツの幅に使うトークンです。最大幅を決める -max-sz（最大幅（-max-sz））や、is--wrapper などで使います。
| トークン | 変数 | 最初の値 |
|---|---|---|
xs |
--sz--xs |
400px |
s |
--sz--s |
640px |
m |
--sz--m |
880px |
l |
--sz--l |
1200px |
xl |
--sz--xl |
1600px |
最初の値は、lism-css 1.0.1 の main.css に書かれている値です。
関連するページ#
公式ドキュメント
2026年10月5日時点の内容（lism-css 1.0.1・@lism-css/ui 0.40.1）をもとに、やさしい日本語でまとめています。