00 — Concept
Logical Composition
&& は論理AND演算子。両方の条件が真でなければ、全体は真にならない。
このサイトのデザインはその思想を視覚言語にしたものだ。コンテンツもクラフトも真。精密さと温かさの両立。構造と余白の共存。どちらか一方では成立しない。
Composed
要素は意図的に配置される
Precise
8pxグリッドに厳密。色は限定的
Quiet
叫ばない。コンテンツに語らせる
Structured
階層は明確。迷子にならない
Trustworthy
一貫性が信頼を生む
01 — Color
3 + 1
3つの無彩色と1つのアクセント。signal は1ビューポートあたり最大3要素。全てがオレンジなら、何もオレンジでない。
#FAFAF8
温かみのあるペーパーホワイト。背景
#1A1A1A
テキスト。純黒より温かい
#C8C8C0
グリッドライン、ボーダー、メタ情報
#D4764A
インタラクション要素と && モチーフ専用
02 — Typography
3 Typefaces
日本語には Noto Sans JP。欧文には Inter。コードとメタデータには JetBrains Mono。それぞれの領域で最も誠実なフォントを選んだ。
code && craft
テクノロジーの実践知を
const truth = a && b;
日本語テキストには font-feature-settings: "palt" を適用。プロポーショナル詰めで、文字間の呼吸を整えている。本文の行間は 1.85。日本語の可読性を守る最低ラインだ。
03 — Spacing
8px Grid
全てのスペーシングは 8px の倍数。ベースライングリッドが背景にうっすら走っているのは偶然ではない。「全てが整列し、計測され、意図的である」ことを伝えるためだ。
04 — Shape & Interaction
Sharp Edges
border-radius: 0。角を丸めない。シャドウも使わない。シャドウは曖昧だが、ボーダーは論理的だ。唯一の例外はアバターの円形。人は四角くない。
Card
ボーダーのみ。シャドウなし。
hover → border-color: signal
Code Block
左に signal ライン。
Hover Effect
ホバーしてみて。
inset 4px signal border
05 — Texture
Paper && Grid
背景には2つのレイヤーが重なっている。
- 01
ベースライングリッド — 8px間隔の水平線。opacity 0.06。全てが整列していることを無意識に伝える。
- 02
ペーパーノイズ — SVG feTurbulence による微細なテクスチャ。opacity 0.012。画面に紙の手触りを与える。
どちらもこのページを読んでいる今、目の前に存在している。気づかない程度に。それが正しい。
06 — Principles
What We Don't Do
シャドウを使わない
シャドウは曖昧。ボーダーは論理的。
グラデーションを使わない
トレンドに依存する装飾はノイズになる。
装飾アニメーションを入れない
Snap, Don't Drift. 操作完了の感覚だけ。
コントラスト比を妥協しない
ink on surface = 14.5:1。WCAG AAA超。
角を丸めない
Sharp edges = "近道なし"。
外部画像を使わない
CSS と SVG のみ。依存を減らす。
07 — Stack
