Design System & UI Kit
This page serves as the source of truth for the Sringeri Scholarly Web App. It documents all colors, typography rules, components, and interaction patterns. Use this page with the html.to.design Figma plugin to instantly generate a perfect Figma UI kit.
1. Color Palette (Tokens)
#FBF9F6
Parchment (bg-page)#FFFFFF
Surface (bg-white)#1D1D1F
Text Primary#86868B
Text Secondary#D33F2E
Sringeri Ochre (Accent)#EBE5D9
Warm Border2. Typography Hierarchy
Display 1 (Sanskrit)
Tiro Devanagari Sanskrit
36px
वेदभाष्य-सङ्ग्रहः
Heading 2 (Mula)
Tiro Devanagari Sanskrit
30px
सवि॒ता य॒न्त्रैः पृ॑थि॒वीम॑रम्णादस्कम्भने
Heading 3 (UI)
Noto Sans Devanagari
20px
Search Results
Body (Commentary)
Noto Sans Devanagari
15px
सविता परमेश्वरः यन्त्रैः नियमनैः पृथिवीम् अरम्णात् अस्थापयत्...
UI Micro (Metadata)
Noto Sans Devanagari
11px
SRINGERI SHARADA PEETHAM
3. Core UI Components
Action Buttons
Metadata Chips
Source ChipContext BadgeInline Citation
Search Input
Search mantras... K
Bhashya Card (Resting vs Hover)
Resting State
दे॒वो व॑स्सवि॒ता प्रार्प॑यतु॒
Standard card elevation with subtle borders and text colors. No hover effects active.
Hover State
दे॒वो व॑स्सवि॒ता प्रार्प॑यतु॒
Elevated shadow tinted with brand color, translated Y-axis, brand border and typography changes.