デザインシステム

禅+コスモス

補い合う二つの視覚的比喩。モードはヘッダーから切り替える。明=温かみのある紙、墨、いまここ。暗=深い藍、星野、それを支えるもの。

タイポグラフィ

心を込めて生きる。

自分のために、他者のために、あなたを支えるもののために。

地図と智慧の関係は、カード目録と図書館の関係に等しい。

本文サンセリフ。Inter / DM Sans。16px 基準、行間 1.6。

補助テキスト向けの柔らかな本文。

淡いラベル、すべて大文字。

Dhp 5 · Quran 2:62 · BG 2.47 · Tao Te Ching 11 · Analects 4.16

聖典テキストの体裁——起点側の罫線を添えたイタリック体セリフ。hesedanattawu 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.
— Dhp 5
We work with being, but non-being is what we use.
— Tao Te Ching 11
The superior man understands what is right; the inferior man understands what will sell.
— Analects 4.16

円相/月のヒーロー

円相(意図的な筆の途切れ、禅モード)としても、満月(放射状の輝き、コスモスモード)としても読める単一の要素。モードを切り替えて確かめる。

翻訳バナー

デザイントークン

サーフェス

--bg
--bg-soft
--text
--accent

モーション

  • --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