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.

An atlas 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.

Buddhism

buddhism

Islam

islam

Hinduism

hinduism

Judaism

judaism

Christianity

christianity

Sikhism

sikhism

Taoism

taoism

Confucianism

confucianism

Jainism

jainism

Bahá'í

bahai

Zoroastrianism

zoroastrianism

Shinto

shinto

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