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
5
Themes
5
Registers
7
Attention Levels

Theme Gallery

Five complete color themes, each with an emotional purpose. Every theme provides all seven token values. Use the switcher above to experience each one live on this page.

“The season of failure is the best time for sowing the seeds of success.”
— Paramahansa Yogananda, Autobiography of a Yogi
Light
“The season of failure is the best time for sowing the seeds of success.”
— Paramahansa Yogananda, Autobiography of a Yogi
Sepia
“The season of failure is the best time for sowing the seeds of success.”
— Paramahansa Yogananda, Autobiography of a Yogi
Earth
“The season of failure is the best time for sowing the seeds of success.”
— Paramahansa Yogananda, Autobiography of a Yogi
Dark
“The season of failure is the best time for sowing the seeds of success.”
— Paramahansa Yogananda, Autobiography of a Yogi
Meditate

Circadian Rhythm

In Light theme, the background subtly shifts with time of day. The portal breathes with the seeker’s day. These changes are not transitioned — they’re too subtle to notice, and transitioning would draw attention to something that should be unconscious.

Morning
5:00–09:59
Midday
10:00–15:59
Evening
16:00–20:59
Night
21:00–04:59

Emotional Registers

Content type determines design treatment. The same passage rendered in five different registers — from full sacred reverence to ambient absence. Each register governs whitespace, typography, accent level, motion speed, and distraction tolerance.

“
The season of failure is the best time for sowing the seeds of success.
— Paramahansa Yogananda

Sacred

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
Subliminal — gold at 0.06 opacity, felt not seen
Motion
Contemplative (800ms) or arrival (1200ms)
Distractions
Zero — all chrome hidden, no links, no actions

Attention Gradient

Gold at six calibrated opacity levels. A deliberate hierarchy from interactive (demands attention) to texture (the ghost of physical pages). The same hue, six different roles.

1
Interactiveopacity: 1
Demands attention — the seeker is engaging
Focus rings, active links, call-to-action accents
0.4
Decorativeopacity: 0.4
Present but not calling — background beauty
Epigraph marks, chapter ornaments, lotus dividers
0.3
Ambientopacity: 0.3
Peripheral awareness — orientation without distraction
Scroll indicator, meditate-theme gold, progress
0.2
Highlightopacity: 0.2
Guiding the reader, not grabbing them
Keyboard-navigated paragraph outline, current section
0.06
Subliminalopacity: 0.06
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
Interactive (1.0)Texture (0.03)

Typography Specimen

Three type roles serve three different attentional purposes. Reading typography is immersive and warm. Display typography anchors the page with authority. UI typography disappears.

Reading
Merriweather
The season of failure is the best time for sowing the seeds of success.
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

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

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 (14)

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
Always warm (#FAF8F5 minimum in light mode). A library, not a hospital. Pure white is clinical; warm cream is inviting.
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.

✓Required (8)

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.

?Guidelines (3)

“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.

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

Pattern Playground

Foundation tokens composed into live patterns. All values derive from the design token files. Switch themes above to see how tokens adapt across contexts.

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

SRF Color Palette

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

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.
The season of failure is the best time for sowing the seeds of success. Live quietly in the moment and see the beauty of all before you. The future will take care of itself.
— Paramahansa Yogananda, Autobiography of a Yogi, Chapter 1, p. 3