सीधे सामग्री पर जाएँ
JAIN WAVES

डिज़ाइन सिस्टम

इस स्थल पर प्रयुक्त हर टोकन, कम्पोनेंट और एनिमेशन एक ही जगह। यह पृष्ठ आगे के हर काम का सन्दर्भ है — यदि कुछ यहाँ नहीं है, तो वह अभी बना नहीं है।

01 — टाइपोग्राफ़ी

टाइपोग्राफ़ी

प्रदर्शन के लिए Cormorant Garamond, इंटरफ़ेस के लिए Plus Jakarta Sans। प्रदर्शन-मुखाकृति 20 पिक्सेल से नीचे कभी प्रयुक्त नहीं होती।

.jw-display-xlclamp(56px, 11vw, 132px)

Everything your community knows

जैन ध्यास · जैन विश्वास

જૈન ધ્યાસ · જૈન વિશ્વાસ

.jw-displayclamp(44px, 7.5vw, 88px)

Everything your community knows

जैन ध्यास · जैन विश्वास

જૈન ધ્યાસ · જૈન વિશ્વાસ

.jw-h1clamp(34px, 4.6vw, 56px)

Everything your community knows

जैन ध्यास · जैन विश्वास

જૈન ધ્યાસ · જૈન વિશ્વાસ

.jw-h2clamp(27px, 3.4vw, 40px)

Everything your community knows

जैन ध्यास · जैन विश्वास

જૈન ધ્યાસ · જૈન વિશ્વાસ

.jw-h3clamp(21px, 2.2vw, 27px)

Everything your community knows

जैन ध्यास · जैन विश्वास

જૈન ધ્યાસ · જૈન વિશ્વાસ

.jw-lead / body / .jw-eyebrow

Small caps eyebrow — 12px

Lead paragraph. Plus Jakarta Sans at clamp(17px, 1.6vw, 21px), line-height 1.65, capped at 62 characters.

Body copy at 16–17px, line-height 1.7, capped at 66 characters. Everything below 20px is Plus Jakarta Sans — the display face is never used at UI sizes, which is the single rule that keeps a Garamond-family site from looking amateurish.

देवनागरी शरीर पाठ — नोटो सैंस देवनागरी, छोटे आकारों के लिए बेहतर।

02 — रंग

रंग

पाँच रंगों का अर्थ

हमारा रंग-पटल सजावट नहीं है। जैन ध्वज के पाँच रंग पंच-परमेष्ठी में से एक-एक के प्रतीक हैं — वे पाँच परम पद जिन्हें नवकार मन्त्र में नमस्कार किया जाता है।

  • Arihant

    अरिहंत

    #FAF7F0

    --color-pp-arihant

    [object Object]

    [object Object]

  • Siddha

    सिद्ध

    #9B2C36

    --color-pp-siddha

    [object Object]

    [object Object]

  • Acharya

    आचार्य

    #C98A2B

    --color-pp-acharya

    [object Object]

    [object Object]

  • Upadhyaya

    उपाध्याय

    #1F5F4E

    --color-pp-upadhyaya

    [object Object]

    [object Object]

  • Sadhu & Sadhvi

    साधु

    #1C2B4A

    --color-pp-sadhu

    [object Object]

    [object Object]

पट्टियों का क्रम और अर्थ Jainpedia, Jain Heritage Centres और Wikipedia से मिलाकर जाँचे गए। पाँचवीं पट्टी गहरे नीले रंग की है या काले, इस पर स्रोत भिन्न हैं।

Scarcity rule: these five appear together in exactly two places on the site — the Navkar Mantra line markers and the explainer beneath them. This page is the system reference, not a third usage.

उष्ण उदासीन रंग

  • --color-parchment

    #FAF6ED

    page background

  • --color-sand

    #F2ECDF

    alternating band

  • --color-clay

    #E6DCC8

    inset / well

  • --color-surface

    #FFFFFF

    cards

  • --color-line

    #ECE4D6

    hairline

  • --color-line-2

    #DDD1BC

    stronger hairline

संरचनात्मक गहरे रंग

  • --color-indigo-900

    #121A2C

    primary dark band

  • --color-indigo-800

    #1C2B4A

    dark surface

  • --color-indigo-700

    #2A3D63

    dark hover

  • --color-jade-900

    #0F3B31

    deep jade band

  • --color-jade-700

    #1F5F4E

    verified / trust

  • --color-jade-100

    #E8F1ED

    jade tint

उभार-रंग

  • --color-maroon-900

    #4E1620

    primary pressed

  • --color-maroon-700

    #7A2430

    primary action

  • --color-maroon-500

    #9C3B47

    primary hover ring

  • --color-saffron-500

    #E88A3C

    accent, gradients

  • --color-gold-600

    #A8871F

    ornament

  • --color-gold-700

    #795D03

    eyebrow text on LIGHT (AA on parchment, sand AND clay)

  • --color-gold-400

    #E0BC4E

    eyebrow text on DARK (9.48 indigo, 6.79 jade)

  • --color-saffron-700

    #8F4A13

    food accent as TEXT (4.89 on clay)

Ink

  • --color-ink

    #201B19

    body text

  • --color-ink-2

    #4A403A

    sub-heading

  • --color-muted

    #6A5F57

    secondary text — the smallest AA-safe tone

  • --color-faint

    #9A8F86

    DECORATION ONLY — never text (2.3–2.9:1)

कंट्रास्ट का नियम

इस स्थल का हर पाठ-वर्ण हर उस पट्टी पर WCAG AA (4.5:1) पार करता है जिस पर वह आ सकता है — surface, cream, parchment, sand और clay।

  • ink · ink-2 · mutedतीनों पाठ-वर्ण। किसी भी हल्की पट्टी पर, किसी भी आकार के पाठ के लिए सुरक्षित।
  • faintकेवल सजावट — 2.3–2.9:1। पाठ के लिए कभी नहीं। यदि पाठ के लिए चाहिए, तो आपको muted चाहिए।
  • parchment/55गहरी पट्टियों पर पाठ की न्यूनतम सीमा। 45% पर माप 4.21 और 40% पर 3.60 आता है।

03 — उठान

उठान & कोण-वक्रता

  • shadow-1
  • shadow-2
  • shadow-3
  • shadow-4
  • shadow-ring
  • shadow-inset
  • r-sm
  • r-md
  • r-lg
  • r-xl
  • r-pill

04 — बटन

बटन

variant="primary"
variant="secondary"
variant="jade"
variant="ghost"
on a dark band

05 — कार्ड

कार्ड & फ़ॉर्म नियन्त्रण

Standard card

shadow-ring at rest, lifts 2px with a slow sheen on hover.

With brackets

Gold corner marks at 30% on two opposite corners.

With tilt

≤4° pointer-follow, desktop and fine pointer only.

Well

.jw-well — inset surface for quiet blocks

Ornamental rule

06 — आइकन समुच्चय

आइकन समुच्चय

24×24 grid · 1.5px stroke · currentColor · no fills · never emoji.

  • temple
  • sthanak
  • hall
  • monk
  • food
  • stay
  • tirth
  • community
  • directory
  • group
  • office-bearer
  • business
  • feed
  • calendar
  • book
  • seva
  • search
  • location
  • phone
  • mail
  • clock
  • arrow-right
  • arrow-up-right
  • chevron-down
  • check
  • menu
  • close
  • globe
  • shield
  • heart
  • star
  • download
  • apple
  • play-store

श्वेताम्बर परम्परा

  • Svastikaस्वस्तिक
  • Śrīvatsaश्रीवत्स
  • Nandyāvartaनन्द्यावर्त
  • Vardhamānakaवर्धमानक
  • Bhadrāsanaभद्रासन
  • Kalaśaकलश
  • Darpaṇaदर्पण
  • Mīnayugalaमीनयुगल

दिगम्बर परम्परा

  • Chatraछत्र
  • Dhvajaध्वज
  • Kalaśaकलश
  • Chāmaraचामर
  • Darpaṇaदर्पण
  • Vyajanaव्यजन
  • Supratiṣṭhaसुप्रतिष्ठ
  • Bhṛṅgāraभृंगार

दोनों परम्पराएँ भिन्न चिह्न गिनाती हैं। दोनों सूचियाँ दी गई हैं, किसी को डिफ़ॉल्ट नहीं माना गया।

प्रतीक

Jain Prateek Chihna — the emblem of Jainismअहिंसापरस्परोपग्रहो जीवानाम्

07 — गति

गति

prefers-reduced-motion के अन्तर्गत हर एनिमेशन बन्द हो जाता है।

  • .jw-rise

    section reveal — 20px up + fade, 600ms

    demo
  • .jw-stagger

    children 70ms apart, capped at 8

    demo
  • .jw-text-mask

    lines rise from behind a mask — max 2 per page

    demo
  • .jw-image-reveal

    clip wipe from bottom + 1.06 scale settle

    demo
  • .jw-image-grid

    diagonal grid entrance, 80ms apart

    demo
  • .jw-rule-grow

    ornamental rule grows from the centre

    demo
  • .jw-draw

    SVG stroke draws itself

    demo
  • .jw-count

    integer count-up, 1400ms ease-out

    demo
  • .jw-lift

    card hover: 2px lift + shadow

    demo
  • .jw-sheen-slow

    1.4s light sweep on hover

    demo
  • .jw-magnetic

    ≤6px pull toward the cursor

    demo
  • .jw-parallax

    scroll-linked translate, 0.10–0.18

    demo
  • .jw-glow-pulse

    5s ambient pulse — hero glow only

    demo
  • .jw-breathe

    9s wave loop

    demo
  • .jw-drift

    24s gradient drift

    demo
  • .jw-progress

    scroll-progress hairline

    demo

08 — Category colours

Seven categories, seven colours

The colour is doing a job: it tells you what kind of place a card is before you read it. That is what makes a wide palette a system rather than decoration — and it is why the accents appear in the header dropdown and on related-content cards, not only inside Discover.

An accent has two roles and they cannot share one value.accent is a fill — a dot, a rule, a chip.accentText is the same identity at a value that can be read as text on a light band. For five categories they are the same colour; forhalls and food they cannot be, because gold-600 is 2.51:1 on clay and saffron-600 is 2.67:1. Both shipped an unreadable category eyebrow until this was split.

CategoryFillTextChipText on clayText on chip
templeAatemple7.27:19.17:1
sthanakAasthanak10.33:113.03:1
hallAahall4.57:14.99:1
darshanAadarshan5.50:16.94:1
foodAafood4.89:14.69:1
stayAastay4.59:15.79:1
tirthAatirth8.18:110.32:1

Every figure measured against the worst band the element can land on — clay for text, the accent itself for a chip. All clear WCAG AA (4.5:1). Regenerate with the contrast script before changing any value here.

08 — छायाचित्र-संस्कार

छायाचित्र-संस्कार

treatment="none"
Carved white marble pillars filling the interior hall of the Ranakpur Jain temple, each one different
treatment="warm"
Carved white marble pillars filling the interior hall of the Ranakpur Jain temple, each one different
treatment="duotone"
Carved white marble pillars filling the interior hall of the Ranakpur Jain temple, each one different