コンテンツにスキップ
Lism UI

Design Tokens

COLOR

セマンティックトークン

トークン名変数
base--c--base
base-2--c--base-2
text--c--text
text-2--c--text-2
divider--c--divider
main--c--main
accent--c--accent

パレットトークン

パレットトークン変数
red--red
orange--orange
yellow--yellow
green--green
blue--blue
purple--purple
pink--pink
gray--gray
black--black
white--white

SPACE トークン

トークン値変数デフォルト値
5--s50.25rem
10--s100.375rem
20--s200.625rem
30--s301rem
40--s401.625rem
50--s502.625rem
60--s604.25rem
70--s706.875rem
80--s8011.125rem
90--s9018rem
↓
Preview

5

10

20

30

40

50

60

70

80

90

リサイズ可能

フィボナッチ数列 ((0, 1,) 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, …) に基づいたスケーリングを採用しています。
デフォルトでは1 = 0.125rem, 2 = 0.25rem として計算し、0.25remから順にトークン化しています。

TYPO

TYPO.FZ

font-size 用のトークンです。

トークン変数クラス初期値
2xs--fz--2xs.-fz:2xscalc(1em * 8 / 11)
xs--fz--xs.-fz:xscalc(1em * 8 / 10)
s--fz--s.-fz:scalc(1em * 8 / 9)
m--fz--m.-fz:m1em
l--fz--l.-fz:lcalc(1em * 8 / 7)
xl--fz--xl.-fz:xlcalc(1em * 8 / 6)
2xl--fz--2xl.-fz:2xlcalc(1em * 8 / 5)
3xl--fz--3xl.-fz:3xlcalc(1em * 8 / 4)
4xl--fz--4xl.-fz:4xlcalc(1em * 8 / 3)
↓
Preview

2xs

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

xs

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

s

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

m

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

l

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

xl

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

2xl

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

3xl

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

4xl

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

<p class='-fz:2xs'>Lorem ipsum ...</p>
<p class='-fz:xs'>Lorem ipsum ...</p>
<p class='-fz:s'>Lorem ipsum ...</p>
<p class='-fz:m'>Lorem ipsum ...</p>
<p class='-fz:l'>Lorem ipsum ...</p>
<p class='-fz:xl'>Lorem ipsum ...</p>
<p class='-fz:2xl'>Lorem ipsum ...</p>
<p class='-fz:3xl'>Lorem ipsum ...</p>
<p class='-fz:4xl'>Lorem ipsum ...</p>

スケーリングについて

Lism では、フォントサイズのスケーリングには数学的に美しいとされるスケーリング理論に基づいて定義することを推奨しています。

参考: 音楽、数学、タイポグラフィ

デフォルトでは、分子8の調和数列ベースに設定しています。

:root{
  --fz-mol: 8;
  --fz--4xl: calc(1em * var(--fz-mol) / (var(--fz-mol) - 5));
  --fz--3xl: calc(1em * var(--fz-mol) / (var(--fz-mol) - 4));
  --fz--2xl: calc(1em * var(--fz-mol) / (var(--fz-mol) - 3));
  --fz--xl: calc(1em * var(--fz-mol) / (var(--fz-mol) - 2));
  --fz--l: calc(1em * var(--fz-mol) / (var(--fz-mol) - 1));
  --fz--m: 1em;
  --fz--s: calc(1em * var(--fz-mol) / (var(--fz-mol) + 1));
  --fz--xs: calc(1em * var(--fz-mol) / (var(--fz-mol) + 2));
  --fz--2xs: calc(1em * var(--fz-mol) / (var(--fz-mol) + 3));
}

:rootで指定している --fz-mol を上書きすることで、スケーリングの基準（分子）を変更できます。

分子は 7~9 あたりで選ぶのがおすすめです。

↓
--fz-molの違い

2xs

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

xs

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

s

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

m

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

l

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

xl

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

2xl

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

3xl

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

4xl

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

:root{--fz-mol:7}

TYPO.FF

font-family 用のトークンです。

トークン変数クラス
base--ff--base-ff:base
accent--ff--accent-ff:accent
mono--ff--mono-ff:mono
emoji--ff--emoji-
↓
Preview

base: English text, 漢字ひらがな

accent: English text, 漢字ひらがな

mono: English text, 漢字ひらがな

emoji: 💡 ✔️ ✅ 👍 ✍️ ⚡ 🚫 

<p class="-ff:base -fz:xl">Lorem ipsum ...</p>
<p class="-ff:accent -fz:xl">Lorem ipsum ...</p>
<p class="-ff:mono -fz:xl">Lorem ipsum ...</p>
<p style="font-family:var(--ff--emoji)">💡 ✔️ ✅ 👍 ✍️ ⚡ 🚫</p>

TYPO.FW

font-weight 用のトークンです。

トークン変数クラス初期値
light--fw--light.-fw:light300
normal--fw--normal.-fw:normal400
medium--fw--medium.-fw:medium500
bold--fw--bold.-fw:bold700
↓
Preview

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. 

<p class="-fw:light">Lorem ipsum ...</p>
<p class="-fw:normal">Lorem ipsum ...</p>
<p class="-fw:medium">Lorem ipsum ...</p>
<p class="-fw:bold">Lorem ipsum ...</p>

TYPO.LH

line-height 用のトークンです。

トークン変数クラス初期値
base--lh--base.-lh:base1.75
xs--lh--xs.-lh:xscalc({base} - 0.25)
s--lh--s.-lh:scalc({base} - 0.125)
l--lh--l.-lh:lcalc({base} + 0.125)
xl--lh--xl.-lh:xlcalc({base} + 0.25)

base値は 日本語では 1.625, 1.75, 1.875 あたりがおすすめです。（英語なら 1.5, 1.625 あたりがおすすめ）

↓
Preview

xs: Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.

s: Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.

base: Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.

l: Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.

xl: Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi. 

<p class="-lh:xs">Lorem ipsum ...</p>
<p class="-lh:s">Lorem ipsum ...</p>
<p class="-lh:base">Lorem ipsum ...</p>
<p class="-lh:l">Lorem ipsum ...</p>
<p class="-lh:xl">Lorem ipsum ...</p>

TYPO.LTS

letter-spacing 用のトークンです。

トークン変数クラス初期値
base--lts--base-lts:basenormal
s--lts--s-lts:s-0.025em
l--lts--l-lts:l0.025em
xl--lts--xl-lts:xl0.05em
↓
Preview

s: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

base: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

l: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

xl: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. 

<p class="-lts:s">Lorem ipsum ...</p>
<p class="-lts:base">Lorem ipsum ...</p>
<p class="-lts:l">Lorem ipsum ...</p>
<p class="-lts:xl">Lorem ipsum ...</p>

OPACITY トークン

トークン値変数クラス初期値
low--op--low.-op:low0.25
mid--op--mid.-op:mid0.5
high--op--high.-op:high0.75
↓
Preview

Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.

Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.

Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi. 

<p class="-op:low">Lorem ipsum ...</p>
<p class="-op:mid">Lorem ipsum ...</p>
<p class="-op:high">Lorem ipsum ...</p>

RADIUS トークン

トークン値変数クラス初期値
1--bdrs--1.-bdrs:10.125rem
2--bdrs--2.-bdrs:20.25rem
3--bdrs--3.-bdrs:30.5rem
4--bdrs--4.-bdrs:41rem
5--bdrs--5.-bdrs:52rem
99--bdrs--99.-bdrs:9999rem
↓
Preview
1
2
3
4
5
99 
<div class="-bdrs:1">...</div>
<div class="-bdrs:2">...</div>
<div class="-bdrs:3">...</div>
<div class="-bdrs:4">...</div>
<div class="-bdrs:5">...</div>
<div class="-bdrs:99">...</div>

SHADOW トークン

トークン値変数クラス
1--bxsh--1-bxsh:1
2--bxsh--2-bxsh:2
3--bxsh--3-bxsh:3
4--bxsh--4-bxsh:4
5--bxsh--5-bxsh:5
-1--bxsh--i1-bxsh:-1
-2--bxsh--i2-bxsh:-2

--bxsh--{token}の値の中身は、次の変数で構成されます。

構成変数初期値
--sh-hsl210 20% 20%
--sh-a10%
--sh-sz--0~5
:root{
  --sh-color: hsl(var(--sh-hsl) / var(--sh-a));
  --bxsh--1: var(--sh-sz--0) var(--sh-color), var(--sh-sz--1) var(--sh-color);
  --bxsh--2: var(--sh-sz--1) var(--sh-color), var(--sh-sz--2) var(--sh-color);
  --bxsh--3: var(--sh-sz--2) var(--sh-color), var(--sh-sz--3) var(--sh-color);
  --bxsh--4: var(--sh-sz--3) var(--sh-color), var(--sh-sz--4) var(--sh-color);
  --bxsh--5: var(--sh-sz--4) var(--sh-color), var(--sh-sz--5) var(--sh-color);


  --bxsh--i1: inset var(--sh-sz--0) var(--sh-color), inset var(--sh-sz--1) var(--sh-color);
  --bxsh--i2: inset var(--sh-sz--1) var(--sh-color), inset var(--sh-sz--2) var(--sh-color);
}
↓
Preview
1
2
3
4
5
<div class="-bxsh:1">...</div>
<div class="-bxsh:2">...</div>
<div class="-bxsh:3">...</div>
<div class="-bxsh:4">...</div>
<div class="-bxsh:5">...</div>
↓
Preview(inset)
-1
-2
<div class="-bxsh:-1">...</div>
<div class="-bxsh:-2">...</div>

SIZE トークン

コンテンツサイズ用のトークンです。

トークン値変数
s--size--s
m--size--m
l--size--l