设计系统

禅意 + 星辰

两个互补的视觉隐喻。通过页首切换模式。浅色 = 温暖的纸、墨,此时此地。深色 = 深靛蓝、星野,承载这一切者。

字体排印

用心生活。

为自己,为他人,为承载你的一切。

地图之于智慧,犹如卡片目录之于图书馆。

正文无衬线。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 的触控目标。具备 focus-visible 轮廓。兼容减少动效的设置。

链接样式

徽章

用于传统标签、见证层级、主题标记。每一个都带有供屏幕阅读器使用的 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