ડિઝાઇન સિસ્ટમ
આ સ્થળ પર વપરાતું દરેક ટોકન, કૉમ્પોનન્ટ અને ઍનિમેશન એક જ જગ્યાએ. આ પાનું આગળના દરેક કામનો સંદર્ભ છે — જો કંઈ અહીં નથી, તો એ હજી બન્યું નથી.
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-eyebrowSmall 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 band05 — કાર્ડ
કાર્ડ & ફૉર્મ નિયંત્રણ
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
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
- 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भृंगार
બંને પરંપરાઓ જુદાં ચિહ્ન ગણાવે છે. બંને યાદીઓ આપી છે, કોઈને ડિફૉલ્ટ ગણ્યું નથી.
પ્રતીક
07 — ગતિ
ગતિ
prefers-reduced-motion હેઠળ દરેક ઍનિમેશન બંધ થઈ જાય છે.
.jw-risesection reveal — 20px up + fade, 600ms
demo.jw-staggerchildren 70ms apart, capped at 8
demo.jw-text-masklines rise from behind a mask — max 2 per page
demo.jw-image-revealclip wipe from bottom + 1.06 scale settle
demo.jw-image-griddiagonal grid entrance, 80ms apart
demo.jw-rule-growornamental rule grows from the centre
demo.jw-drawSVG stroke draws itself
demo.jw-countinteger count-up, 1400ms ease-out
demo.jw-liftcard hover: 2px lift + shadow
demo.jw-sheen-slow1.4s light sweep on hover
demo.jw-magnetic≤6px pull toward the cursor
demo.jw-parallaxscroll-linked translate, 0.10–0.18
demo.jw-glow-pulse5s ambient pulse — hero glow only
demo.jw-breathe9s wave loop
demo.jw-drift24s gradient drift
demo.jw-progressscroll-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.
| Category | Fill | Text | Chip | Text on clay | Text on chip |
|---|---|---|---|---|---|
| temple | Aa | temple | 7.27:1 | 9.17:1 | |
| sthanak | Aa | sthanak | 10.33:1 | 13.03:1 | |
| hall | Aa | hall | 4.57:1 | 4.99:1 | |
| darshan | Aa | darshan | 5.50:1 | 6.94:1 | |
| food | Aa | food | 4.89:1 | 4.69:1 | |
| stay | Aa | stay | 4.59:1 | 5.79:1 | |
| tirth | Aa | tirth | 8.18:1 | 10.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"
treatment="warm"treatment="duotone"