设计系统
禅意 + 星辰
两个互补的视觉隐喻。通过页首切换模式。浅色 = 温暖的纸、墨,此时此地。深色 = 深靛蓝、星野,承载这一切者。
字体排印
用心生活。
为自己,为他人,为承载你的一切。
地图之于智慧,犹如卡片目录之于图书馆。
正文无衬线。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 的触控目标。具备 focus-visible 轮廓。兼容减少动效的设置。
徽章
用于传统标签、见证层级、主题标记。每一个都带有供屏幕阅读器使用的 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