Design System

Zen + Cosmos

Two complementary visual metaphors. Toggle modes via the header. Light = warm paper, sumi ink, the local moment. Dark = deep indigo, starfield, what holds it.

Typography

Live with care.

For yourself, for others, for what holds you.

A map is to wisdom what a card catalog is to a library.

Body sans-serif. Inter / DM Sans. 16px base, 1.6 line-height.

Soft body for secondary text.

Faint label, all-caps.

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

Sacred text styling — italic serif with start-border accent. hesed, anatta, wu wei appear as jewels.

Tradition palette

12 harmonious hues, one per tradition. Zen variant in light mode, brighter variant in cosmos for legibility on deep background.

Bahá'í

bahai

Buddhism

buddhism

Christianity

christianity

Confucianism

confucianism

Hinduism

hinduism

Islam

islam

Jainism

jainism

Judaism

judaism

Shinto

shinto

Sikhism

sikhism

Taoism

taoism

Zoroastrianism

zoroastrianism

Buttons

All ≥44×44 touch target. Focus-visible outline. Motion-reduce safe.

As link

Badges

For tradition tags, attestation tiers, theme markers. Each has aria-label for screen readers.

Universal Majority Moderate Weak Default

Cards

In cosmos mode, tradition cards float with glass morphism and tradition-color halos on hover.

Default card

Patient hover. Subtle lift. No garish transitions.

Tradition card

Hover in cosmos mode → tradition-color halo glows.

Another tradition

Same affordance, different color.

Quotes

Locale-appropriate quotation marks. Native script overlay where applicable.

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

Enso / Moon hero

A single element that reads as enso (intentional brush gap, zen mode) and as full moon (radial luminance, cosmos mode). Toggle modes to see.

Translation banners

Design tokens

Surfaces

--bg

--bg-soft

--text

--accent

Motion

--duration-fast: 150ms (focus, micro-affordance)
--duration-base: 250ms (hover, page transition)
--duration-slow: 400ms (mode-card refit)
--duration-dusk: 600ms (zen ↔ cosmos crossfade)
--ease-zen: cubic-bezier(0.4, 0, 0.2, 1)

RTL parity

Arabic and Hebrew use CSS logical properties (border-s, ps, ms). Sample direction below:

حكمة من اثنتي عشرة تقليداً

«اقرأ باسم ربك الذي خلق»

Quran 96:1

חכמה משתים עשרה מסורות

"ואהבת לרעך כמוך"

Lev 19:18