デザインシステム
禅+コスモス
補い合う二つの視覚的比喩。モードはヘッダーから切り替える。明=温かみのある紙、墨、いまここ。暗=深い藍、星野、それを支えるもの。
タイポグラフィ
心を込めて生きる。
自分のために、他者のために、あなたを支えるもののために。
地図と智慧の関係は、カード目録と図書館の関係に等しい。
本文サンセリフ。Inter / DM Sans。16px 基準、行間 1.6。
補助テキスト向けの柔らかな本文。
淡いラベル、すべて大文字。
Dhp 5 · Quran 2:62 · BG 2.47 · Tao Te Ching 11 · Analects 4.16
聖典テキストの体裁——起点側の罫線を添えたイタリック体セリフ。hesed、anatta、wu wei は珠玉として現れる。
伝統のパレット
調和する12の色相、伝統ごとに一つ。明モードでは禅の変種、コスモスでは深い背景での可読性のために明るい変種。
仏教
buddhism
イスラム教
islam
ヒンドゥー教
hinduism
ユダヤ教
judaism
キリスト教
christianity
シク教
sikhism
道教
taoism
儒教
confucianism
ジャイナ教
jainism
バハーイー教
bahai
ゾロアスター教
zoroastrianism
神道
shinto
ボタン
すべて ≥44×44 のタッチ領域。フォーカス可視のアウトライン。モーション低減に対応。
バッジ
伝統タグ、典拠の階層、テーマ標識のため。それぞれにスクリーンリーダー用の aria-label がある。
カード
コスモスモードでは、伝統カードがガラスモーフィズムで浮かび、ホバーで伝統色の光輪をまとう。
引用
ロケールに応じた引用符。該当する場合は原語表記を重ねて示す。
Hatred ceases not by hatred, but by love. We work with being, but non-being is what we use. The superior man understands what is right; the inferior man understands what will sell. 円相/月のヒーロー
円相(意図的な筆の途切れ、禅モード)としても、満月(放射状の輝き、コスモスモード)としても読める単一の要素。モードを切り替えて確かめる。
翻訳バナー
デザイントークン
サーフェス
モーション
- --duration-fast: 150ms (フォーカス、微細なアフォーダンス)
- --duration-base: 250ms (ホバー、ページ遷移)
- --duration-slow: 400ms (モードカードの再配置)
- --duration-dusk: 600ms (禅 ↔ コスモスのクロスフェード)
- --ease-zen: cubic-bezier(0.4, 0, 0.2, 1)
RTL の同等性
アラビア語とヘブライ語は CSS 論理プロパティ(border-s、ps、ms)を用いる。以下は方向のサンプル:
حكمة من اثنتي عشرة تقليداً
«اقرأ باسم ربك الذي خلق»
Quran 96:1
חכמה משתים עשרה מסורות
"ואהבת לרעך כמוך"
Lev 19:18