96
大きな間Generous rhythm
セクションの間は 80〜128px。画面幅に合わせて伸び縮みします。
Sections sit 80–128px apart, scaling smoothly with the viewport.
Editorial mode
静かな紙の上で、読むためのリズムを。 A quiet page, built for reading.
同じ2色のまま、紙の地・細い罫線・ゆったりした間で組むモード。data-cie-mode="editorial" を付けた範囲だけが切り替わります。
The same two inks, set on a paper ground with hairlines and generous space. Add data-cie-mode="editorial" and only that scope changes.
01 · 特徴01 · Features
使い方ガイドRead the guide
面はひとつ深く、線は細く。 One step deeper. One hairline thinner.
影も第3の色も使いません。地の色に墨を数%混ぜた面だけで、奥行きを作ります。
No shadows, no third colour. Depth comes only from a few percent of ink mixed into the ground.
ささやく見出しWhisper headlines
ウェイト 300、詰めた字間。太字の見出しは使いません。
Weight 300 with tight tracking. Headlines are never bold.
平らな面Flat surfaces
枠線も影もないカード。帯の上では一段深い面に上がります。
Cards with no border or shadow. On a band they step up to plate.
02 · リズム02 · Rhythm
CSS 版の見本CSS kit demo
ひとつのセクションに、主役はひとつ。 One section, one focal point.
本文は 16px、行送り 1.6、字間 0.01em。日本語は行送り 1.8、字間 0 で、約物を詰めて組みます。1行は 62 字までに収めます。
Body copy is 16px on a 1.6 line with 0.01em tracking. Japanese opens up to 1.8 with zero tracking and proportional punctuation. Lines stop at about 62 characters.
大きな図はページの端まで伸ばし、文章のブロックは静かに左に置きます。
The large visual runs off the edge of the page while the text block stays calm on the left.
Fig. 1 — ink on plate
03 · 仕様03 · Specs
tokens.css
すべてトークンで測る。 Everything measured in tokens.
- セクションの間Section gap
- --cie-section · 80–128px
- 外側の余白Gutter
- --cie-gutter · 20–64px
- 最大幅Container
- --cie-container · 1280px
- カードの内側Card padding
- --cie-card-pad · 24–32px
- カードの角Card radius
- --cie-r-card · 20px
- 画像の角Media radius
- --cie-r-media · 28px
- 特大見出しDisplay
- 40–72 / 1.06 / 300
- 見出しHeading
- 28–40 / 1.13 / 300
- リード文Lead
- 18–20 / 1.45
- 本文Body
- 16 / 1.6 · ja 1.8
cie-ds · Editorial
1行足すだけで、読むページに。 One attribute. A page made for reading.
いつもの tokens.css の後に editorial.css を読み込みます。
Load editorial.css after the usual tokens.css.