Skip to main content

Yogananda Design Languages

Two organizational expressions — SRF #1a2744 and YSS #bb4f27 — sharing common foundations. Built for AI-first authorship. Every token is self-documenting. Every constraint is machine-readable.

3
Layers
2
Orgs
10
Themes
5
Registers
11
Glyphs
3
Voices
7
Principles

Theme Gallery

Six SRF themes across two voices. Five contemplative themes for reading surfaces plus one communal gathering theme for events. Every theme provides all seven token values.

Contemplative Voice
“Be as simple as you can be; you will be astonished to see how uncomplicated and happy your life can become.”
— Paramahansa Yogananda, Autobiography of a Yogi
Light
“Be as simple as you can be; you will be astonished to see how uncomplicated and happy your life can become.”
— Paramahansa Yogananda, Autobiography of a Yogi
Sepia
“Be as simple as you can be; you will be astonished to see how uncomplicated and happy your life can become.”
— Paramahansa Yogananda, Autobiography of a Yogi
Earth
“Be as simple as you can be; you will be astonished to see how uncomplicated and happy your life can become.”
— Paramahansa Yogananda, Autobiography of a Yogi
Dark
“Be as simple as you can be; you will be astonished to see how uncomplicated and happy your life can become.”
— Paramahansa Yogananda, Autobiography of a Yogi
Meditate
Communal Voice
Experience the joy of the soul
Join us for a transformative weeklong program on the Kriya Yoga teachings of Paramahansa Yogananda.
August 2–8, 2026 · Los Angeles
Gathering
Category Colors
Ochre
Community, kirtan
Teal
Meditation, quiet
Indigo
Classes, study
Amber
Keynotes, featured
The Communal Voice

From gendā (गेंडा) — the marigold garland tradition. Event surfaces, gathering spaces, the temple courtyard. Where gold says ‘contemplate,’ ochre says ‘welcome.’

Interactive
1.0
Decorative
0.4
Ambient
0.2
Subliminal
0.06
The Kāṣāya Spectrum

From kāṣāya (काषाय) — the ochre of renunciation. Gold is the fresh robe’s yellow; ochre is the sun-worn cloth’s orange; terracotta is the earth underfoot. One pigment family, three expressions. The oldest continuous color tradition in human art — gairika (गैरिक), from Bhimbetka cave paintings to the monastic robe.

Gold
#DCBD23
Gold Dark
#C39314
Ochre
#DC6A10
Ochre Hover
#BE5706
Terracotta
#BB4F27
Ochre across themes
Light
#DC6A10
Sepia
#C85E20
Earth
#BB4F27
Dark
#E8914A
Gathering
#DC6A10
Publication Overlay
Chapter 12
Years in My Master’s Hermitage
“Master, I will be your disciple and will serve you faithfully.”
— Paramahansa Yogananda, Autobiography of a Yogi
Light
Chapter 12
Years in My Master’s Hermitage
“Master, I will be your disciple and will serve you faithfully.”
— Paramahansa Yogananda, Autobiography of a Yogi
Sepia
Chapter 12
Years in My Master’s Hermitage
“Master, I will be your disciple and will serve you faithfully.”
— Paramahansa Yogananda, Autobiography of a Yogi
Earth
Crimson across themes
Light
#9B2335
Sepia
#8A1F2E
Earth
#9B2335
Dark
#E04A5E
Meditate
#E04A5E99

From Sanskrit kṛmi-ja (कृमिज) — the rubrication tradition. Chapter titles, section dividers, drop capitals.

Motif Gallery

The lotus alphabet. Sixteen botanical forms × five devotional color voices — a rich ornamental type system for section dividers, chapter ornaments, and breathing pauses. CSS mask-image technique: the SVG provides shape; background-color provides fill. Theme-responsive without JavaScript.

BannerWide horizontal forms (2:1 to 3:1). Natural section dividers.
lotus-05
lotus-06
lotus-08
LandscapeModerate horizontal forms (1.3:1 to 1.6:1). Dividers or ornaments.
lotus-02
lotus-04
lotus-07
lotus-14
lotus-15
lotus-16
SquareBalanced forms (1:1 to 1.2:1). Ornaments, endings, focal points.
lotus-01
lotus-03
lotus-09
lotus-11
lotus-12
PortraitTaller than wide. Unique vertical presence.
lotus-10
lotus-13
Five VoicesOne devotional palette — from tejas through prakṛti to kumkum
Sacred
Tejas — Spiritual radiance
Growth
Prakṛti — Living nature
Devotion
Nīla — Meditative depth
Ochre
Kāṣāya — Renunciant warmth
Crimson
Kumkum — Auspicious power
Semantic RolesPre-composed sizing, centering, and opacity
Divider.motif-divider
Section boundary. Decorative opacity (0.4), spacious vertical padding.
Breath.motif-breath
Reading pause. Ambient opacity (0.3), generous padding. The visual kumbhaka.
Close.motif-close
Chapter ending. Decorative opacity (0.4), asymmetric padding — more above than below.
Publication Context
The divider shifts to crimson under data-publication — the book claiming its ornaments.
The breath stays gold — reading rhythm is a portal feature, not a book structure.

Typography Specimen

Two voices, five type roles. The contemplative voice serves reading and meditation — warm serifs that recede. The communal voice serves events and gathering — structured serifs that welcome.

Contemplative Voice
Reading
Merriweather
Be as simple as you can be; you will be astonished to see how uncomplicated and happy your life can become.
18px / 400 / 1.8 line-height
Light (300) — Epigraphs, citations
Regular (400) — Body text
Italic (400) — Emphasis, book titles
Bold (700) — Drop capitals
Display
Lora
Chapter One: My Parents
24px / 700 / 1.3 line-height
Regular (400) — Subtitles
Italic (400) — Display accents
Bold (700) — Chapter titles
UI
Open Sans
Search the teachings... | Chapter 12 of 49 | Settings
14px / 400 / 1.5 line-height
Regular (400) — Labels, navigation
Semibold (600) — Buttons, emphasis
Devotional Voice
Display Inspirational
Asar
“Be as simple as you can be; you will be astonished to see how uncomplicated and happy your life can become.”
— Paramahansa Yogananda
22px / 400 / 1.5 line-height · Self-hosted (OFL)
Ancient Indian stone-inscription aesthetic. Covers both Latin and Devanagari in a single devotional voice. Self-hosted under OFL. Falls back to Merienda for calligraphic warmth.
Communal Voice
Display Event
ArcherPro
Convocation 2026 — A Gathering of Seekers
28px / 500 / 1.25 line-height
Regular (400) — Event subtitles
Medium (500) — Event headings
Italic (400) — Speaker names
UI Event
Helvetica Neue
Register Now | View Schedule | Volunteer | Directions
15px / 375 / 1.5 line-height
Book (375) — Body, navigation
Semibold (600) — Buttons, CTAs

Typographic Features

Drop Capital
The characteristic features of Indian culture have long been a search for ultimate truth and the concomitant disciple-guru relationship.
Citation
“Live quietly in the moment and see the beauty of all before you.”
— Paramahansa Yogananda, Autobiography of a Yogi, Chapter 12, p. 142
Unicode Characters
Em-dash— U+2014
Ellipsis… U+2026
Thin space  U+2009
Asterism⁂ U+2042
Omॐ U+0950
Epigraph
“Kriya Yoga is an instrument through which human evolution can be quickened.”
— Sri Yukteswar

Multi-Script Typography

The same contemplative quality across five scripts. Each has its own font stack, line-height, and loading strategy — but the emotional register remains invariant. A passage in Devanagari carries the same sacred weight as its English original.

LatinMerriweather
line-height: 1.8
“Be as simple as you can be; you will be astonished to see how uncomplicated and happy your life can become.”
— Paramahansa Yogananda
DevanagariNoto Serif Devanagari
line-height: 2
“जितना सरल हो सकते हो उतना सरल हो जाओ; तुम्हें यह देखकर आश्चर्य होगा कि तुम्हारा जीवन कितना सरल और सुखी हो सकता है।”
— परमहंस योगानन्द
1.9–2.0 line-height — taller glyphs with hanging characters
BengaliNoto Serif Bengali
line-height: 2
“যতটা সরল হও ততেই ভালো; তোমার জীবন কত সহজ ও সুখী হতে পারে দেখে অবাক হবে।”
— পরমহংস যোগানন্দ
Additional Scripts
Japanese (CJK)
Reading: Noto Serif JP
UI: Noto Sans JP
Conditional on /ja/ locale
Thai
Reading: Noto Serif Thai
UI: Noto Sans Thai
Conditional on /th/ locale
Non-Latin fonts load only when needed. unicode-range gating prevents unnecessary downloads. System font fallbacks with size-adjust provide instant rendering while web fonts load.
English Fallback Marking
When content appears in a different language, it’s marked honestly. The tone is a librarian saying “we have that on the other shelf.”
Be as simple as you can be… [EN]

Emotional Registers

Two orthogonal axes. Registers (sacred → ambient) govern content reverence. Voices (contemplative → communal) govern surface purpose. Toggle both to see how the same passage transforms.

Voice
“
Be as simple as you can be; you will be astonished to see how uncomplicated and happy your life can become.
— Paramahansa Yogananda

Sacred

Contemplative

Full reverence — the passage receives highest design treatment

Content types
Guru quotes, scriptural passages, prayer text
Whitespace
Maximum — the content breathes in vast silence
Typography
Display font, generous size, light weight
Accent level
Decorative — accent at 0.4, present but not calling
Motion
Contemplative (800ms) or arrival (1200ms)
Distractions
Zero — all chrome hidden, no links, no actions

Media Registers

The emotional register system extends beyond text to video, audio, and photography. Each media type maps to the five-register spectrum with medium-specific treatment — because hearing Yogananda’s recorded voice is a sacred experience, not a podcast episode.

Video carrying Yogananda’s voice, monastic teachings, or devotional chanting. Each type has a register assignment governing player chrome, autoplay policy, and surrounding whitespace.
Monastic talksReverential
Minimal player chrome. No autoplay. Generous whitespace.
The speaker's words receive near-sacred treatment. The video player recedes.
Guided meditationsSacred
Audio-primary. Visual is secondary or absent. Contemplative pacing.
The seeker's eyes may be closed. Design for the ear, not the eye.
ConvocationCommunal + reverential
Warmer chrome. Gathering context. Ochre accents.
The communal voice — events, kirtans, group practice. Warmth over solemnity.
CommemorativeSacred
Sacred register despite communal surface. Additional whitespace.
Mahasamadhi, founder's day. The sacred register overrides the communal surface.

Voice Crossfade

Two voices serve two modes of seeking. The contemplative voice — gold, quiet, scholarly — for the seeker alone with the text. The communal voice — ochre, warm, welcoming — for seekers gathered together. Sacred content receives the same typographic reverence in both voices. Watch the chrome transform while the teaching holds steady.

Yogananda Teachings
Chapter 43

The Resurrection of Sri Yukteswar

“There is a magnet in your heart that will attract true friends. That magnet is unselfishness, thinking of others first. When you learn to live for others, they will live for you.”
— Paramahansa Yogananda
Contemplative Voice
Accent
Gold #DCBD23
Mood
quiet, deep, scholarly, intimate
Metaphor
The library — a lamp illuminating a single page
Surfaces
Reading portals, meditation interfaces, teaching archives
Voice × Register Interaction
Sacred and reverential registers always use reading typography regardless of voice. The voice colors the chrome; the register protects the text. Yogananda’s words receive the same typographic reverence whether on a quiet reading surface or a joyful convocation page.

Attention Gradient

Three accent voices at calibrated opacity levels. Gold (contemplative) uses six levels from interactive to texture. Crimson (publication) uses five — structure, not atmosphere. Ochre (communal) uses four — energy, not contemplation. The asymmetry is the design.

1
Interactive.gold-interactive
Demands attention — the seeker is engaging
Focus rings, active links, call-to-action accents
0.4
Decorative.gold-decorative
Present but not calling — background beauty
Epigraph marks, chapter ornaments, scene-break dividers
0.3
Ambient.gold-ambient
Peripheral awareness — orientation without distraction
Scroll indicator, meditate-theme gold, progress
0.2
Highlight.gold-highlight
Guiding the reader, not grabbing them
Keyboard-navigated paragraph outline, current section
0.06
Subliminal.gold-subliminal
Registers as warmth, not color
Paragraph hover background, dwell mode highlight
0.03
Textureopacity: 0.03
The ghost of physical pages
Paper texture noise overlay, background warmth
Gold · Contemplative · 6 levels0.03
Ochre · Communal · 4 levels0.06
Crimson · Publication · 5 levels0.06

Gradient Borders

Where opacity asks how much attention, gradient borders ask where attention gathers. Gold mediates every gradient — the bindu color at the center. The ochre gradient is the kāṣāya spectrum made visible: one pigment family at different stages of its journey.

Gold — ContemplativeThe reading lamp's glow. accent → darkened → accent.
.gradient-border-goldgold → gold-dark → gold
Ochre — CommunalThe kāṣāya spectrum. Renunciant cloth warming through gold.
.gradient-border-ochreochre → gold → ochre
Crimson — PublicationRubrication meets the reading lamp.
.gradient-border-crimsoncrimson → gold → crimson
Focus Ring

.gradient-focus replaces the flat gold outline on :focus-visible with a directional gradient ring. Voice follows context automatically.

Reading Experience

The composed reading surface — where every layer converges. Click a paragraph for dwell contemplation. Switch reading modes, voice (contemplative vs communal), and rasa to see how the surface adapts. All five content types demonstrated: prose, verse, epigraph, dialogue, and caption.

Mode
Size
Spacing
Rasa
Voice
Chapter 12

Years in My Master’s Hermitage

Ibeheld a transformed Sri Yukteswar. No longer the familiar figure in an ascetic’s garb — my guru was now resplendent in robes of dazzling light. His countenance was bright with the ineffable glory of cosmic consciousness.
“Master, I will be your disciple and will serve you faithfully,” I vowed. “Let me stay at your hermitage.” He gazed at me in the benign manner that always quieted my turbulent emotions.
If you want to be sad, no one in the world can make you happy. But if you make up your mind to be happy, no one and nothing on earth can take that happiness from you.
God is simple. Everything else is complex. Do not seek absolute values in the relative world of nature.
Paramahansa Yogananda

“When will I find God?” I whispered urgently.

“You have found Him.”

“O no, sir, I don’t think so!”

My guru was smiling. “I am sure you aren’t aware of it, but you have. His seed is planted in you, and some day you will realize.”

Sri Yukteswar with a group of disciples at the Serampore hermitage, circa 1935. Yogananda is seated at his guru’s right.
Be as simple as you can be; you will be astonished to see how uncomplicated and happy your life can become.1 Live quietly in the moment and see the beauty of all before you. The future will take care of itself.
↑ From a talk given at Self-Realization Fellowship international headquarters, Los Angeles, 1949. See also Journey to Self-Realization, Chapter 7.
Dwell
Click paragraph to focus. Others dim to 0.15 opacity.
Golden Thread
Inset gold margin. Dwell on it to open the thread panel.
Keyboard Nav
j/k paragraphs, d dwell, f focus, Esc reset. Try it.
Scene Break
Swelled rule. Crimson in publication context.
Paper Texture
SVG fractalNoise at texture opacity (0.03).
Drop Cap
Crimson at decorative opacity in publication.
Verse
Centered, italic, pre-line. The guru’s poetry.
Focus Mode
Suppresses chrome. Only the reading column remains.
Immerse Mode
Chrome disappears. Text scales to viewport. Focus + present unified.
Present Mode
Group reading. Text scales 24px → 36px across breakpoints.
Quiet Mode
Article fades to a whisper. Space for contemplation.
Thread Panel
Cross-chapter connections slide in when dwelling on a threaded passage.
Epigraph
Decorative gold quotation mark. Centered italic at light weight.
Voice
Contemplative (gold) or communal (ochre). Sacred text preserves typographic reverence in both.
Rasa
Experiential atmosphere — whitespace, motion, motif color shift subtly per rasa.
Dialogue
Tighter vertical rhythm. Drop cap suppressed. Pace of speech.
Caption
Italic, secondary color, constrained width. Book figure labeling.
Sahṛdaya Warmth
Dwell accumulates gold warmth. The prepared reader receives comfort.

Rasa Experience

Five rasas from Indian aesthetic theory transform the same passage. Each rasa reshapes whitespace, typography, accent intensity, and motion — the content is identical, but the experience changes completely. Watch the passage breathe differently as you switch between aesthetic flavors.

“The season of failure is the best time for sowing the seeds of success. The bud of a rose does not become beautiful through some outer force; its beauty blossoms from within.”
— Paramahansa Yogananda
Treatment: Shanta
WhitespaceMaximum — 64px all around. The room is completely still.
TypographyReading font at 22px, line-height 2.2. Centered. Breath between every line.
AccentGold at ambient opacity (0.3) — warmth, not color.
Motion800ms transitions. The slowest pace. Nothing hurries.
MoodThe room is completely still. Breath settles. Attention rests.

Commentary Hierarchy

Four levels of textual authority from the Indian scholarly tradition — mapped to the design system’s emotional registers. Each level has its own typographic treatment, whitespace, and accent intensity. The root text is the mandala’s center; everything else orbits.

Mūla (मूल) · Sacred Register · Center
“You do not have to struggle to reach God, but you do have to struggle to tear away the self-created veil that hides Him from you.”
— Paramahansa Yogananda
Bhāshya (भाष्य) · Reverential Register · Near Orbit

Sri Daya Mata reflects on this teaching: ‘The Master’s words remind us that the divine presence is not distant. The veil is our own restlessness, our own preoccupation with the surface of life. The struggle he speaks of is not effort toward something far away, but the gentle, persistent turning inward.’

Tīkā (टीका) · Instructional Register · Middle Orbit
Vārttika (वार्त्तिक) · Functional Register · Far Orbit

Source: Autobiography of a Yogi, Chapter 14. First published 1946, Philosophical Library. This passage appears in the context of Yogananda’s description of his early experiences at Sri Yukteswar’s ashram. Cross-reference: God Talks with Arjuna, commentary on Bhagavad Gita IV:38.

Nested Cascade · How registers compose in a real reading surface

“You do not have to struggle to reach God, but you do have to struggle to tear away the self-created veil that hides Him from you.”

Sri Daya Mata reflects on this teaching: ‘The Master’s words remind us that the divine presence is not distant. The veil is our own restlessness, our own preoccupation with the surface of life. The struggle he speaks of is not effort toward something far away, but the gentle, persistent turning inward.’

Veil (māyā): In Vedantic philosophy, the cosmic delusion that obscures the perception of ultimate reality. Yogananda often used this term to describe both the cosmic illusion and the individual’s mental restlessness that prevents direct perception of the Divine.

Aesthetic Theory

Seven governing principles from the Indian literary tradition — the same tradition that produced the teachings this design system serves. Not metaphor: precision instruments for design reasoning. Each principle maps to specific design mechanisms and provides AI designers a framework for decisions beyond enumerated rules.

Structural IsomorphismsArchitecture mirrors tradition — emerged, not imposed
Three Layers ↔ Three Meaning Levels
The three-layer architecture (foundations → semantics → patterns) mirrors dhvani's three meaning levels (vācya → lakṣyārtha → vyañjanā). Foundations state values. Semantics indicate meaning. Patterns suggest experience.
When building a new component, move through all three layers: choose tokens (vācya), apply semantic rules (lakṣyārtha), compose according to patterns (vyañjanā). If the result feels like assembled parts rather than an integrated surface, the vyañjanā layer is missing — ask: 'What experience should arise from this composition that no individual element states?'
Three Voices ↔ Three Guṇas
The design voices correspond to the literary guṇas (style qualities) from Vāmana's Kāvyālaṅkārasūtra. Contemplative = mādhurya (sweetness, flowing grace). Communal = ojas (energy, vital force). Publication — not a standalone voice but an activation overlay (see emotional-registers.language.json) — nevertheless has its own guṇa character: prasāda (clarity, luminous precision).
Mādhurya flows — the contemplative voice draws in, never pushes. Ojas radiates — the communal voice opens outward with warmth. Prasāda clarifies — the publication overlay makes the book's structure visible. When extending a voice, maintain its guṇa character: a new contemplative theme should flow; a new communal component should radiate; a new publication element should clarify.
Five Registers ↔ Commentary Hierarchy
The emotional register hierarchy (sacred → reverential → instructional → functional → ambient) mirrors the Indian commentary tradition's textual hierarchy: mūla (root text, the guru's words) → bhāṣya (commentary, interpretive authority) → ṭīkā (sub-commentary, annotation) → vārttika (critical supplement, what the text assumes you know).
When nesting content levels on a reading surface (teaching + editorial commentary + glossary notes), use the register hierarchy to determine visual treatment. The mūla (sacred) is the bindu. The bhāṣya (reverential/instructional) orbits it. The ṭīkā (instructional/functional) is available on demand but doesn't compete. See reading-surface.pattern.json commentary-hierarchy for composition guidance.

Transition Theater

Every transition serves one of three purposes: responsive feedback, content revelation, or spiritual pacing. Decorative transitions are forbidden. Click Play to see each duration in real time.

Instant0ms
No transition. Toggle, dismiss.
Interaction150ms
Hover, focus, click response.
Content300ms
Content appearing or disappearing.
Contemplative800ms
Sacred pacing. Chapter transitions.
Arrival1200ms
Portal entry. The Opening Moment.

Easing Curves

Standard
cubic-bezier(0.4, 0, 0.2, 1)
Most UI transitions
Decelerate
cubic-bezier(0.0, 0, 0.2, 1)
Elements entering
Accelerate
cubic-bezier(0.4, 0, 1.0, 1)
Elements leaving
Contemplative
cubic-bezier(0.25, 0, 0.1, 1)
Sacred content

Asymmetric Timing

Appear: 300ms — Disappear: 150ms. Arrivals are celebrated; departures are swift. This asymmetry is intentional — the portal welcomes slowly and releases quickly.

Stagger Pattern

100ms delay between items, max 5 staggered. Like books being placed on a shelf one at a time.

Search result 1
Search result 2
Search result 3
Search result 4
Search result 5

Prāṇa — Breath Rhythm

The interface breathes. Approach is quick, the held state is sacrosanct, release is gentle.
Rest
The space between breaths
300ms1200ms800ms

Responsive Strategy

Four named viewport tiers, three interaction modalities, and orientation-aware layout. Viewport width alone is an unreliable proxy — interaction capability and orientation matter too.

Mobile≤ 639px
Single column, full-width, touch-first
Reader: Single column, full-width text. Landscape: line length capped.
Tablet640 – 1023pxfirst-class
First-class reading surface — not an interpolation
Reader: Wider margins than mobile, narrower than desktop. Landscape: two-column opt-in.
Desktop≥ 1024px
Full layout. Side panels visible. Hover affordances.
Reader: Generous margins. Related Teachings side panel visible.
Wide≥ 1280px
Reader centered at max-content width
Reader: Reader centered, side panel always visible.
“Tablets are arguably the ideal form factor for sustained book reading — larger than a phone, more portable than a laptop, usable in bed, in a garden, or at a study group. The portal treats tablet as a distinct experience tier.”

Calm Technology Audit

PRI-08: The portal waits; it does not interrupt. Machine-readable lists of forbidden and required patterns. An AI designer loads these constraints before generating any component.

✕Forbidden (17)

push-notificationsPRI-08
The portal does not interrupt. The seeker comes to the teachings; the teachings do not chase the seeker.
autoplay-mediaPRI-08
The seeker initiates; the portal responds. No video, audio, or animation begins without explicit user action.
engagement-trackingPRI-09
No behavioral profiling, no session tracking, no user identification. Amplitude event allowlist only.
gamificationPRI-08
Reading streaks, points, badges, levels, achievements — all commodify contemplation. The teachings are not a game to be won.
time-pressure-uiPRI-08
No countdown timers, flash sales, urgency language, 'limited time' indicators. The teachings are eternal; urgency is antithetical.
decorative-animationPRI-08
All motion is functional. Parallax scrolling, particle effects, animated backgrounds, loading spinners beyond simple indicators — all forbidden. Maximum 0.3s for standard transitions.
pure-white-backgroundADR-065
Contemplative reading surfaces use warm cream (#FAF8F5 minimum) — a library, not a hospital. Pure white is too clinical for sustained reading in the contemplative voice. However, the communal voice (gathering theme, #FFFFFF) and YSS modern expression (ashram theme, #FFFFFF) deliberately use white where openness, modernity, and welcoming clarity are the intent. This is a voice-dependent constraint, not a universal prohibition. The design system has three voices, and each has its own relationship to white: contemplative avoids it, communal embraces it, publication inherits the reading surface's background.
infinite-scrollPRI-08
Content has natural endings. Chapters end. Books end. Search results are paginated. Infinite scroll erases boundaries that give structure to reading.
social-sharing-buttonsPRI-08, PRI-09
The portal is not a marketing channel. No 'Share on Twitter/Facebook' buttons. The seeker's reading experience is private.
ai-generated-contentPRI-01
The AI is a librarian, not an oracle. It finds and ranks verbatim published words — it NEVER generates, paraphrases, or synthesizes content in any medium.
behavior-based-algorithmsPRI-09
Curation derives intelligence from the corpus, never from user behavior patterns — even anonymized. No 'readers also liked' based on usage.
skeleton-loadersPRI-08
Content is either present or honestly absent. Skeleton screens create false expectation. Use a simple, calm loading state instead — or better, serve from cache/CDN.
tooltip-on-sacred-textPRI-01, PRI-03
Yogananda's own words (sacred register) receive no hover tooltips, inline annotations, or overlay UI. The text stands alone.
ai-generated-imageryPRI-01
AI generation, synthesis, or cloning of any media representing Yogananda or the lineage gurus is prohibited. All photographs are copyrighted SRF property.
time-trackingPRI-08
No minutes spent, no reading time, no session duration. Time tracking implicitly values quantity of attention over quality of presence. A seeker who reads one paragraph with depth has done more than one who speed-reads ten chapters.
reading-streaksPRI-08
No daily streaks, no consecutive-day counters, no 'you've read 7 days in a row' celebrations. Streaks create anxiety about breaking them — the opposite of contemplative technology. The teachings are available when the seeker is ready, without a scoreboard.
progress-percentagesPRI-08
No '73% complete' progress bars for books. Chapter count shown (not percentage — which implies a race to completion). Reading is not a task to finish; it is a practice to return to.

✓Required (10)

reduced-motion-respectPRI-07
prefers-reduced-motion: reduce → all transitions instant (0.01ms). No exceptions.
high-contrast-supportPRI-07
prefers-contrast: more → pure black/white text, solid borders. No opacity-based text.
keyboard-navigationPRI-07
Every interactive element reachable via Tab. :focus-visible indicators on all interactive elements (2px solid gold, 2px offset).
screen-reader-semanticsPRI-07
ARIA landmarks on all major regions. role='doc-noteref' for footnotes. Proper heading hierarchy (h1 → h2 → h3, never skip). Live regions for dynamic content.
full-attributionPRI-02
Every displayed passage carries: author, book, chapter, page. No orphaned quotes. Full author name always displayed.
honest-absencePRI-02, PRI-06
When content doesn't exist in a language, say so clearly and guide constructively. Never substitute machine translation. Honest absence as invitation, never a dead end.
logical-propertiesPRI-06
Use CSS logical properties (inline-start, block-end) instead of physical (left, top). Enables RTL support without code changes.
touch-targetsPRI-07
Minimum 44x44px for all interactive elements. 48px preferred for primary actions.
auto-add-on-visitPRI-08
Books appear in a seeker's personal library automatically when they visit any chapter — no explicit 'add to library' action required. The act of reading IS the act of adding. Silent, frictionless. No confirmation toast, no 'Added to library' notification.
relative-timestampsPRI-08
Personal library shows 'today', 'yesterday', '3 days ago' — calm, not precise. Never ISO dates, never exact times. Time is approximate and human.

?Guidelines (4)

“Is this worthy of presenting Yogananda's words?”
Before shipping any component, ask this. Not just typography that renders text, but typography that honors its rhythm. Not just search that returns results, but search that feels curated. Restraint as excellence.
“Does this require the smallest possible amount of attention?”
Every UI element should justify its attentional cost. If removing it wouldn't harm the experience, remove it. The best technology is invisible.
“Does this lead toward practice, or does it substitute for it?”
The portal leads seekers toward SRF/YSS practice. It never interprets meditation techniques. Practice queries route to SRF Lessons information.
“Is this motif serving the content or decorating the surface?”
Motifs are decorative (aria-hidden='true') and must never carry semantic meaning. Maximum one motif per content section — density beyond that competes with the teachings. Never animated (PRI-08). The five color voices exist for editorial choice, not variety for its own sake: sacred (gold) is the default; use others only when a specific voice serves the content's emotional register. On publication surfaces, crimson activates automatically for structural motifs — do not manually override.

Accessibility & Calm Technology

Non-negotiable accessibility features baked into the design language. Focus indicators, reduced motion, high contrast, screen reader support, and text-only mode are not add-ons — they are the foundation.

Text-Only Mode

Strips all images, decorative SVGs, and background images. Forces Georgia serif on all text. For maximum accessibility or bandwidth-constrained environments.

“Be as simple as you can be; you will be astonished to see how uncomplicated and happy your life can become.”

— Paramahansa Yogananda

Decorative placeholderToggle text-only to hide images and decorations
.text-only img, .text-only svg:not([role="img"]), .text-only [data-decorative] { display: none }
Reduced Motion

When prefers-reduced-motion: reduce is active, ALL transitions and animations are eliminated to 0.01ms. Not reduced — eliminated.

Normal (300ms transition)
300ms ease
Reduced motion (0.01ms)
0.01ms instant
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important } }
High Contrast

When prefers-contrast: more is active, text colors push to maximum contrast. Light themes use pure black. Dark themes use pure white.

Normal

Primary text

Secondary text

Current theme values

High contrast

Primary text

Secondary text

Same as normal

@media (prefers-contrast: more) { :root { --color-text: #000 } [data-theme="dark"] { --color-text: #fff } }
Focus Indicators

Gold :focus-visible ring on all interactive elements. 2px solid, 2px offset. Non-negotiable accessibility.

Link
2px solid var(--color-gold)
·outline-offset: 2px
:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px }
Touch Targets

Minimum 44px touch targets (WCAG), comfortable 48px for primary actions. Enforced via design tokens.

44px — Minimum
var(--touch-target-min) · WCAG 2.5.8
48px — Comfortable
var(--touch-target-comfortable) · Primary actions
--touch-target-min: 44px; --touch-target-comfortable: 48px;
Screen Reader Only

The .sr-only class hides content visually while keeping it accessible to screen readers. Essential for conveying context that sighted users get from layout.

Screen reader hears: "Save changes to your reading preferences"
aria-label adds context per element
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0) }
RTL Readiness

100% CSS logical properties. Zero physical directions. The entire reading surface flips automatically with dir="rtl". PRI-06 compliance.

“Be as simple as you can be; you will be astonished to see how uncomplicated and happy your life can become.”

— Paramahansa Yogananda

T

he simple truth is that happiness comes from within. No external circumstance can give you lasting peace.

Footnotes align to inline-start1

float: inline-start; padding-inline-start; margin-inline; border-inline-start; inset-inline-start
Forced Colors (WHCM)

Windows High Contrast Mode. The OS controls all colors. Gold, ochre, and crimson yield to system tokens. Interactive elements stay visible. Nothing is lost except decorative beauty.

Link elementMuted text

“The soul is ever free; it is deathless, birthless...”

Lotus decoration visible in normal mode
@media (forced-colors: active) { :focus-visible { outline: 2px solid Highlight } }
Skip Navigation

First focusable element on every page. Hidden until Tab-focused, then slides down as a banner. Keyboard users skip directly to <main id="main">. FTR-043 requirement.

Skip to main content
Site Header & Nav
HomeBooksSearch
<main id="main">

Main content area. Keyboard users Tab through nav first.

<a href="#main" class="skip-nav">Skip to main content</a>

Print Preview

The design system includes a print stylesheet that transforms the reading surface for paper. Chrome disappears, decorations are stripped, typography resets to serif, and external links reveal their URLs.

Screen
Teachings
HomeReadSearch
Chapter 26
The Heart’s Magnet

There is a magnet in your heart that will attract true friends. That magnet is unselfishness, thinking of others first. When you learn to live for others, they will live for you.1

Kindness is the light that dissolves all walls between souls.

Learn more at the Self-Realization Fellowship website.

— Paramahansa Yogananda
↑1 From Where There Is Light, Chapter 3. Published by Self-Realization Fellowship.
Self-Realization Fellowship
Print
Chapter 26
The Heart’s Magnet

There is a magnet in your heart that will attract true friends. That magnet is unselfishness, thinking of others first. When you learn to live for others, they will live for you.1

Kindness is the light that dissolves all walls between souls.

Learn more at the Self-Realization Fellowship (https://www.yogananda.org) website.

— Paramahansa Yogananda
From Where There Is Light. Self-Realization Fellowship, Los Angeles, California.
1 From Where There Is Light, Chapter 3. Published by Self-Realization Fellowship.
Chrome Removed
Header, footer, nav, scroll-indicator, and dwell-icon are hidden with display: none.
header, footer, nav, .scroll-indicator, .dwell-icon { display: none !important }
Print Typography
Body resets to Merriweather/Georgia/serif at 12pt with 1.6 line-height on white.
body { font-family: "Merriweather", Georgia, serif; font-size: 12pt; line-height: 1.6 }
Page Margins
2cm margins on all pages. First page gets 3cm top margin for breathing room.
@page { margin: 2cm } @page :first { margin-top: 3cm }
External Link URLs
External links display their full URL in parentheses after the link text, at 9pt in gray.
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #666 }
Blockquote Borders
Blockquotes receive a 2px left border in gray, replacing any colored or decorative styling.
blockquote { border-inline-start: 2px solid #999; padding-inline-start: 1em }
Page Break Control
Passage cards avoid breaking inside. H2 headings force a page break before.
.passage-card { break-inside: avoid } h2 { break-before: page }
Citations Visible
Reader citations always visible at 10pt italic. Print citations shown with top border.
.reader-citation { font-size: 10pt; font-style: italic }
Footnote Back-links Hidden
Back-links from footnotes to text are meaningless on paper and are removed.
.footnote-backlink { display: none }
Figures Protected
Figures avoid breaking inside. Images capped at 40vh. Captions in dark gray at 10pt.
.book-figure { break-inside: avoid } .book-figure-img { max-height: 40vh }
Decorations Removed
Paper texture background-image and golden thread box-shadow are stripped entirely.
.reader-texture { background-image: none } .golden-thread-passage { box-shadow: none }
Article Centered
Article constrained to 42em and auto-centered. Main gets full width with no padding.
article { max-width: 42em; margin: 0 auto }
Chapter Notes
Chapter notes section gets a top border and spacing, separating endnotes clearly.
.chapter-notes { border-top: 1px solid #ccc; margin-top: 1.5em; padding-top: 1em }

Book Composition

The design language restored to its native medium. Every principle — dhvani, aucitya, rasa, bindu, prāṇa — originates in manuscript and print tradition. Screen adapted them for scrolling; paper is where they come home.

Autobiography of a Yogi
142
recaka — the exhalation
Chapter 12
Years in My Master’s Hermitage
Ibeheld a transformed Sri Yukteswar. No longer the familiar figure in an ascetic’s garb — my guru was now resplendent in robes of dazzling light. His countenance was bright with the ineffable glory of cosmic consciousness. A deep ecstasy suffused my being as I realized that the form before me was not the teacher I had known.
143
Gutter
0.75"
The spine holds it
Head
0.875"
Above the text block
Fore-edge
1.0"
The reader's thumb
Foot
1.125"
Optical center above geometric
Puraka (Approach)
Chapters always begin on recto. The blank verso is recaka — the exhalation before the next breath. Text starts at 1/3 page height.
Kumbhaka (Held)
Justified text, hyphenated. First-line indent 1.5em. Orphans and widows controlled (min 2 lines). The body is unlimited.
Recaka (Release)
Gold lotus colophon ornament at chapter end. Remaining page left blank. The reader breathes before turning.

Photographic Atmosphere

Photographs as atmosphere: felt, not seen. An optional layer for surfaces where photographic warmth enhances the experience. Each photograph is viewed through a veil of the theme’s background color — automatic adaptation to every theme, including themes that don’t yet exist.

Arrival.atmosphere-arrivalveil 65% · Decorative (0.4)
Hero surfaces. The closest photographs get to the reader. Partially visible through theme color. Scroll-driven: fades as user enters content.
Ambient.atmosphere-ambientveil 93% · Subliminal (0.06)
Section backgrounds. Photograph not visible — only warmth. The reader feels presence without seeing detail.
Breath.atmosphere-breathveil 95% · Texture (0.03)
Movement breaks. Ghost of image at boundaries between movements. The photographic equivalent of the lotus.
Ground.atmosphere-groundveil 96% · Texture (0.03)
Pure warmth — the sensation of place without identifiable content.

Theme Veil Mechanism

Every photograph is viewed through color-mix(in srgb, var(--color-bg) <veil%>, transparent). Because the veil uses the theme’s own background color, all adaptation is automatic. Switch themes above to see the same photograph transform.
light — Warm cream — old paper over landscape
sepia — Deep cream — antique glass
earth — Dark earth — fire-lit warmth
dark — Deep navy — moonlit memory
meditate — Near-black — ghost of place
gathering — White — sunlit architecture

Progressive Enhancement

0
Gold gradientActive now
Pure CSS radial gradient, scroll-driven. No assets. The canonical expression.
1
Static photographopt-in
A photograph behind the gold gradient at texture-to-subliminal opacity. Adds warmth of place.
2
Scroll-drivenprogressive
Photograph presence modulates with scroll via animation-timeline. Same mechanism as gold gradient.
3
Ambient motionconditional
Very slow continuous Ken Burns on non-reading surfaces. Conditional: communal/arrival only.

Guru photographs are never used as atmosphere. Reading surfaces never receive photographic atmosphere. The gold gradient is the canonical expression — photographs are an enrichment, not a replacement.

Stewardship

The operator tends the digital garden that carries the teachings to seekers. System tone modulates the entire surface through gold-only escalation — the same attention gradient that governs reading surfaces, applied to operational awareness. The narrative briefing is the bindu; everything else orbits it.

The garden grows. Gold at subliminal (0.06) — barely there. Peace needs no announcement.

All systems aligned. The teachings portal is serving seekers from 14 countries today. Design system v1.1.0 deployed across all surfaces. Neon database healthy, Vercel edge warm, Cloudflare cache hit rate at 94%.

Projects3
Environments6
In Sync3/3
teachings
dev e4f2a912m ago
platform
in sync18m ago
design
in sync3h ago
Recent Deploys
9747117Add gold version of SRF logo2m ago
a3e8f21Update Neon branch config18m ago
2336181Add CSS classes for lotus-13-161h ago
b264d60Bump version to 1.1.03h ago
fbe5f4eInclude fonts/ in package files5h ago

Vocabulary

Data Attributes
data-tone="aligned | attention | concern | failure"data-density="compact | comfortable"data-age="recent | today | older"
CSS Classes
.status-indicator .status-label.tone-border.data-text .data-text-emphasis .data-label.stewardship-narrative

Token Explorer

Every token in the design language, searchable. Type a concept — gold, contemplative, spacing, 800ms — and see how it threads through foundations and SRF organization tokens. Switch organizations above to see the parallel vocabulary.

51Foundations
shared.tokens.json
Spacing, motion, opacity, reading parameters
93SRF
srf.tokens.json
Colors, themes, typography, attention hierarchies

Spacing Scale (8px base)

base
8px
tight
4px
compact
8px
default
16px
generous
24px
spacious
32px
expansive
48px
vast
64px

Opacity Scale

invisible
0
ghost
0.03
whisper
0.06
muted
0.12
subdued
0.15
secondary
0.3
primary
0.7
full
1

Border Radius

none
0px
small
2px
default
4px
pill
9999px

Shadow Tokens

Subtle
--shadow-subtle
Cards at rest, quiet elevation
Elevated
--shadow-elevated
Hover state, focused elements, dropdowns

Contemplative Palette

Gold
#dcbd23
Navy
#1a2744
Cream
#FAF8F5
Cream Dark
#f0ece4
Surface
#ffffff

Communal Palette

Ochre
#DC6A10
Ochre Hover
#BE5706
Ochre Light
#FCEFE9
Charcoal
#4C4C4C
Gold Dark
#C39314
Category Accents
Teal
#63A3A3
Indigo
#5D7BE3
Amber
#CC9900

Reading Surface Pattern

The characteristic features of Indian culture have long been a search for ultimate truths and the concomitant disciple-guru relationship, a universal seeking for a Goal beyond the material-Loss-of-Self-in- Cosmic-Consciousness.
Be as simple as you can be; you will be astonished to see how uncomplicated and happy your life can become. Live quietly in the moment and see the beauty of all before you.
— Paramahansa Yogananda, Autobiography of a Yogi, Chapter 1, p. 3