Schatten

陰影Schatten · Brand Concept

陰影とは、光の不在ではなく、
紙と墨のあいだに生まれる階調である。

Schatten はドイツ語で「影」。ポートフォリオサイトのブランドコンセプト『陰翳礼讃』(谷崎潤一郎)を、ページ単位ではなくボタンや文字などのコンポーネント単位のデザイントークンとして実装したものである。

色

四つの色は、和の語彙でできている

Schatten の primitive は色名からして和語である。数値は v1.0.0 の実トークン(src/core/tokens/primitives.css)。

朱vermillion
ブランドの主色。鳥居・印章・漆の朱。
墨sumi
前景・文字。寒色へ倒れた無彩。
和紙alabaster
面・背景。暖色へ倒れた無彩。
藍indigo
第二のブランド色。彩度を持った墨。

墨は寒く、紙は暖かい ― 彩度は同じ

sumi と alabaster は明度も彩度も同一で、色相だけが 250 と 70 で正反対。ほぼ無彩に見えて、墨は青へ、紙は黄へ倒れている。

梯子は 11 段すべてが鏡像

これは -500 だけの話ではない。全 11 段で明度と彩度が一致し、分かれるのは色相だけ。墨と和紙は同じ階調構造を共有する一対である。

有彩の二色も、同じ梯子に乗る

すべて OKLCH で定義されている。知覚的に均等な色空間なので、「同じ明度」は数値の上だけでなく、見た目にもそのまま現れる。

季節

八つの季節、ひとつの明度

季節(Special テーマ)は --color-theme-* のランプだけを替える。500 段はすべて L 64%、700 段はすべて L 46% に固定されていて、動くのは色相と彩度だけだ。区切りの日付は、古典的な八節(四立と二至二分)と一致する。

巡る季節と、動かない可読性。八節は色だけを運び、明度の梯子には触れない。

書体

二つの言語を、同時に話す

構造は西洋の工学語彙 ― shadcn / Radix / OKLCH / BEM / CVA。表層は和の美学語彙 ― 朱・墨・和紙・藍・八節。どちらも他方の装飾ではない。

この二重性は、名前や色名だけにとどまらない。組版そのものに実装されている。sans も serif も、欧文フェイスと和文フェイスを明示的に対にしてひとつのスタックを組む。バイリンガルであることが、既定の状態。

sans — UI・本文Shadow & Gradation陰影と階調
Hanken Grotesk
LINE Seed JP
serif — 見出し・長文Shadow & Gradation陰影と階調
EB Garamond
Noto Serif JP

尺度は 8 段、行送りは 6 段

サイズは --text-*、行送りは --leading-*。いずれも rem 基準の公開トークン。

4xl · 2.25陰影 Schatten
3xl · 1.875陰影 Schatten
2xl · 1.5陰影 Schatten
xl · 1.25陰影 Schatten
lg · 1.125陰影 Schatten
base · 1陰影 Schatten
sm · 0.875陰影 Schatten
xs · 0.75陰影 Schatten
none · 1

陰影 Schatten

tight · 1.25

陰影 Schatten

snug · 1.375

陰影 Schatten

normal · 1.5

陰影 Schatten

relaxed · 1.625

陰影 Schatten

loose · 2

陰影 Schatten

なお body / label / heading というロールは CSS 変数ではない。サイズ・行送り・ウェイトの 3 つを 1 つの var() では表せないため、.st-text--* のクラス規則に束ねられている。