Designsystem

Zen + Kosmos

Zwei einander ergänzende visuelle Metaphern. Die Modi lassen sich über die Kopfzeile wechseln. Hell = warmes Papier, Sumi-Tusche, der Augenblick vor Ort. Dunkel = tiefes Indigo, Sternenfeld, das, was ihn trägt.

Typografie

Lebe mit Achtsamkeit.

Für dich, für andere, für das, was dich trägt.

Eine Karte verhält sich zur Weisheit wie ein Zettelkatalog zu einer Bibliothek.

Fließtext serifenlos. Inter / DM Sans. 16px Grundgröße, Zeilenhöhe 1.6.

Weicher Fließtext für Nebeninformationen.

Blasse Beschriftung, Großbuchstaben.

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

Gestaltung heiliger Texte — kursive Serife mit Akzentlinie am Zeilenanfang. hesed, anatta, wu wei erscheinen als Juwelen.

Traditionspalette

12 harmonische Farbtöne, einer je Tradition. Die Zen-Variante im hellen Modus, eine hellere Variante im Kosmos-Modus, damit sie auf dem tiefen Hintergrund lesbar bleibt.

Bahá'í

bahai

Buddhismus

buddhism

Christentum

christianity

Konfuzianismus

confucianism

Hinduismus

hinduism

Islam

islam

Jainismus

jainism

Judentum

judaism

Shinto

shinto

Sikhismus

sikhism

Taoismus

taoism

Zoroastrismus

zoroastrianism

Schaltflächen

Alle mit Touch-Ziel ≥44×44. Sichtbarer Fokusrahmen. Sicher bei reduzierter Bewegung.

Als Link

Badges

Für Traditions-Tags, Bezeugungsstufen, Themenmarker. Jedes trägt ein aria-label für Screenreader.

Universal Mehrheit Mäßig Schwach Standard

Karten

Im Kosmos-Modus schweben die Traditionskarten mit Glasmorphismus und beim Hover mit Lichthöfen in der Traditionsfarbe.

Standardkarte

Geduldiger Hover. Sanftes Anheben. Keine grellen Übergänge.

Traditionskarte

Hover im Kosmos-Modus → der Lichthof in der Traditionsfarbe leuchtet auf.

Eine andere Tradition

Gleiche Affordanz, andere Farbe.

Zitate

Anführungszeichen nach den Regeln der jeweiligen Sprache. Überlagerung in der Originalschrift, wo zutreffend.

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 / Mond-Hero

Ein einziges Element, das sich als Enso lesen lässt (bewusste Pinsellücke, Zen-Modus) und als Vollmond (radiale Leuchtkraft, Kosmos-Modus). Zum Ansehen die Modi wechseln.

Übersetzungsbanner

Design-Tokens

Flächen

--bg

--bg-soft

--text

--accent

Bewegung

--duration-fast: 150ms (Fokus, Mikro-Affordanz)
--duration-base: 250ms (Hover, Seitenübergang)
--duration-slow: 400ms (Neuausrichtung der Modus-Karte)
--duration-dusk: 600ms (Zen ↔ Kosmos, Überblendung)
--ease-zen: cubic-bezier(0.4, 0, 0.2, 1)

RTL-Parität

Arabisch und Hebräisch verwenden logische CSS-Eigenschaften (border-s, ps, ms). Beispielrichtung unten:

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

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

Quran 96:1

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

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

Lev 19:18