dhammadassana/tipitaka

1---2name: พระไตรปิฎก มจร. — Tipitaka Reader3description: Digital reader for the MCU Pali Tipitaka canon with full-text search and AI assistance4colors:5  primary: "#c8860a"6  primary-deep: "#9a6307"7  primary-light: "#e8b84a"8  indigo-bg: "#1a1a2e"9  indigo-deep: "#0f0f1e"10  indigo-surface: "#222242"11  neutral-cream: "#fdfaf5"12  neutral-cream-dark: "#f5edd8"13  neutral-paper: "#faf7f2"14  neutral-warm-white: "#f8f6f0"15  text-dark: "#1a1a1a"16  text-soft: "#555555"17  text-muted: "#888888"18  text-light: "#e0e0e0"19  border-light: "#e0d0b0"20  border-dark: "#3a3a5e"21  highlight-bg: "#fff3cd"22  success-bg: "#e8f5e9"23  info-bg: "#e3f2fd"24typography:25  display:26    fontFamily: "Sarabun, 'Noto Serif Thai', 'Noto Sans Thai Looped', sans-serif"27    fontSize: "clamp(1.2rem, 2vw, 1.6rem)"28    fontWeight: 70029    lineHeight: 1.330    letterSpacing: "0.02em"31  body:32    fontFamily: "Sarabun, 'Noto Serif Thai', 'Noto Sans Thai Looped', sans-serif"33    fontSize: "17px"34    fontWeight: 40035    lineHeight: 2.136    letterSpacing: "normal"37  label:38    fontFamily: "Sarabun, 'Noto Sans Thai Looped', sans-serif"39    fontSize: "0.82em"40    fontWeight: 60041    lineHeight: 1.442    letterSpacing: "0.04em"43rounded:44  sm: "4px"45  md: "6px"46  lg: "8px"47  xl: "12px"48spacing:49  xs: "4px"50  sm: "8px"51  md: "16px"52  lg: "24px"53  xl: "32px"54components:55  button-primary:56    backgroundColor: "{colors.primary}"57    textColor: "{colors.neutral-warm-white}"58    rounded: "{rounded.md}"59    padding: "10px 20px"60  button-secondary:61    backgroundColor: "transparent"62    textColor: "{colors.text-light}"63    rounded: "{rounded.md}"64    padding: "10px 20px"65  button-secondary-hover:66    backgroundColor: "{colors.indigo-surface}"67    textColor: "{colors.primary}"68    rounded: "{rounded.md}"69  card:70    backgroundColor: "{colors.neutral-cream}"71    textColor: "{colors.text-dark}"72    rounded: "{rounded.md}"73    padding: "8px 12px"74  reader-panel:75    backgroundColor: "{colors.neutral-cream}"76    textColor: "{colors.text-dark}"77    rounded: "{rounded.lg}"78    padding: "24px 32px"79    maxWidth: "70ch"80    lineHeight: 2.181  page-marker:82    textAlign: "center"83    textColor: "{colors.text-muted}"84    fontSize: "0.82em"85    margin: "32px 0"86    letterSpacing: "0.04em"87  nav-drawer:88    width: "320px"89    widthMobile: "100%"90    backgroundColor: "{colors.indigo-bg}"91    tabs: ["toc", "search", "overview"]92    animation: "slide-in from left"93  ai-fab:94    size: "56px"95    shape: "circle"96    position: "fixed bottom-24px right-24px"97    backgroundColor: "{colors.primary}"98    iconColor: "{colors.neutral-warm-white}"99    hoverScale: 1.05100    activeScale: 0.95101  ai-popup:102    width: "420px"103    maxHeight: "70vh"104    position: "fixed above ai-fab"105    bottomOffset: "96px"106    rightOffset: "24px"107    draggable: true108    minimizable: true109    backgroundColor: "{colors.neutral-paper}"110    rounded: "{rounded.lg}"111  ai-message-user:112    backgroundColor: "{colors.info-bg}"113    textColor: "{colors.text-dark}"114    rounded: "{rounded.xl}"115    padding: "8px 12px"116  ai-message-assistant:117    backgroundColor: "{colors.success-bg}"118    textColor: "{colors.text-dark}"119    rounded: "{rounded.xl}"120    padding: "8px 12px"121  right-toolbar:122    width: "44px"123    position: "fixed right-0"124    backgroundColor: "{colors.indigo-surface}"125    buttonSize: "44px"126    iconColorRest: "{colors.text-muted}"127    iconColorActive: "{colors.primary}"128    dividerColor: "{colors.border-dark}"129    opacityScrolling: 0.2130    opacityRest: 1.0131    scrollStopDelay: "1.5s"132    hoverZone: "60px"133themes:134  dark:135    description: "Default — Indigo Midnight shell, Parchment reader"136    shell: "{colors.indigo-bg}"137    nav: "{colors.indigo-bg}"138    reader: "{colors.neutral-cream}"139    ai-panel: "{colors.indigo-deep}"140  light:141    description: "Warm white shell, paper reader"142    shell: "{colors.neutral-warm-white}"143    nav: "{colors.neutral-cream-dark}"144    reader: "{colors.neutral-paper}"145    ai-panel: "{colors.neutral-cream-dark}"146  classic:147    description: "Parchment throughout — closest to printed scripture"148    shell: "{colors.neutral-cream-dark}"149    nav: "{colors.neutral-cream}"150    reader: "{colors.neutral-cream}"151    ai-panel: "{colors.neutral-paper}"152---153 154# Design System: พระไตรปิฎก มจร. — Tipitaka Reader155 156## 1. Overview157 158**Creative North Star: "The Dhamma Light" (แสงแห่งธรรม)**159 160A digital scripture reader that feels like light illuminating ancient wisdom. The interface is a quiet chamber — indigo walls, warm golden accents, and cream-paper reading surfaces. Every design decision bends toward one purpose: making the sacred text the most prominent thing on screen.161 162This system explicitly rejects:163- SaaS dashboard aesthetics (cards with badges, data-heavy chrome, progress bars)164- AI-first UIs where the chatbot dominates the experience165- Dark mode as a gamer-aesthetic choice (dark surfaces exist but are subdued, not dramatic)166- Anything that competes with readability — animated backgrounds, neon accents, decorative floating elements167 168The app has two modes of being: **reading** (the user is deep in text — controls fade, AI is closed) and **exploring** (the user is searching or browsing — panels open, navigation is present). The design prioritizes the reading state.169 170### Key Characteristics171 172- **Tonal layering, not shadows.** Depth is conveyed through shifts in background lightness, not drop shadows. The reader surface is the lightest layer; navigation panels are progressively darker.173- **Typography-led hierarchy.** Scale and weight contrast carry the information architecture. Color is supplementary, not structural.174- **Generous rhythm.** Line height, padding, and margins are spacious — this is text meant for slow, contemplative reading, not rapid scanning.175- **The accent is earned.** Gold appears on interactive elements, highlights, and active states — never as decoration. Its rarity signals "this is actionable."176 177## 2. Colors: The Indigo & Gold Palette178 179The palette pairs a deep indigo architecture (nav, sidebar, backgrounds) with warm cream for reading surfaces and gold for interaction. The contrast between cool indigo and warm cream+gold creates a serene, focused atmosphere.180 181### Primary182 183- **Dhamma Gold** (`#c8860a` / oklch(0.62 0.12 68)): The sole accent color. Used for active states, hover borders, icons, highlight markers, and page pills. Never applied to more than 10% of any surface. Its golden warmth echoes the ink of illuminated manuscripts.184 185### Neutral186 187- **Indigo Midnight** (`#1a1a2e` / oklch(0.18 0.04 280)): App shell and navigation background. A very dark blue-black that reads as black but has subtle cool character.188- **Indigo Void** (`#0f0f1e` / oklch(0.12 0.03 280)): The deepest layer — AI panel, footer areas. Conveys depth below the navigation layer.189- **Indigo Surface** (`#222242` / oklch(0.22 0.05 280)): Hover state for navigation items, secondary card backgrounds.190- **Parchment Cream** (`#fdfaf5` / oklch(0.96 0.01 75)): The reading surface. Warm off-white reminiscent of aged paper. Used for reader panel and cards in classic/light mode.191- **Cream Dark** (`#f5edd8` / oklch(0.93 0.02 75)): Hover state for reading-surface items. Also used for active result cards.192- **Warm Paper** (`#faf7f2` / oklch(0.95 0.01 75)): Alternative reading background, slightly cooler than Parchment Cream. Used for AI panel and secondary surfaces.193 194### Semantic195 196- **Text Dark** (`#1a1a1a`): Primary body text on light surfaces.197- **Text Soft** (`#555555`): Secondary text, section headers.198- **Text Muted** (`#888888`): Metadata, timestamps, page numbers.199- **Text Light** (`#e0e0e0`): Text on dark surfaces.200- **Border Cream** (`#e0d0b0`): Borders on light/classic surfaces.201- **Border Indigo** (`#3a3a5e`): Borders on dark surfaces.202- **Highlight Yellow** (`#fff3cd`): Search result highlighting in text.203- **Message User Blue** (`#e3f2fd`): User chat bubble background.204- **Message Assistant Green** (`#e8f5e9`): AI chat bubble background.205 206### Named Rules207 208**The Gold Rarity Rule.** Gold appears on ≤5% of any given screen. Its role is signal, not ornament. If an element is not interactive or active, it should not be gold.209 210**The Parchment Priority Rule.** The reader surface is always the lightest element on screen, regardless of theme. Even in dark mode, the reader background lifts by one tonal step.211 212## 3. Typography213 214**Display & Body Font:** Sarabun (with 'Noto Serif Thai', 'Noto Sans Thai Looped' fallback)215 216Sarabun is a modern Thai sans-serif with excellent readability at body sizes. Its open counters and generous ascenders accommodate Thai tone marks and Pali diacritics without crowding. The font is native to the Thai web ecosystem (Google Fonts) and renders reliably across platforms.217 218**Character:** Warm, legible, undistracting. Sarabun at 17px with 2.1 line-height creates a rhythm that matches the cadence of Pali chanting — spacious enough for the eye to rest between lines.219 220### Hierarchy221 222- **Display** (700, clamp(1.2rem, 2vw, 1.6rem), 1.3): Volume titles, section headings in the TOC. Large enough to anchor a panel, never dramatic.223- **Headline** (600, 1.2rem, 1.4): Panel headers ("ผลการค้นหา", "เลือกเล่มที่ต้องการอ่าน").224- **Title** (600, 1rem, 1.4): Card titles, result headers.225- **Body** (400, 17px / 1rem, 2.1): The primary reading size. Capped at 70ch max-width on the reader panel. Line height of 2.1 is deliberate — Thai script needs vertical breathing room for tone marks above and below characters.226- **Label** (600, 0.82em, 1.4, 0.04em letter-spacing): Metadata, page numbers, section references. Uppercase in Thai context via CSS text-transform.227 228### Named Rules229 230**The Sarabun Solitude Rule.** No secondary font. Sarabun serves every role from display to label. Mixing fonts would add visual chatter to a system whose job is to disappear.231 232## 4. Elevation233 234The system uses **tonal layering exclusively** — depth is conveyed by varying background lightness, never by box shadows. This is deliberate: shadows create the illusion of floating cards, which contradicts the manuscript-like reading experience. Instead, surfaces feel like stacked paper.235 236The z-order from deepest to lightest:2371. **AI panel / background chrome** — darkest indigo (`#0f0f1e`)2382. **Sidebar / navigation** — dark indigo (`#1a1a2e`)2393. **Card / hover surfaces** — indigo surface (`#222242`) on dark; cream dark (`#f5edd8`) on light2404. **Reader panel** — lightest cream (`#fdfaf5`) — always the brightest surface241 242### Named Rules243 244**The Flat-By-Default Rule.** Every surface is flat at rest. Tonal shifts appear only in response to state — hover, active, focus. No card shadows, no floating elements, no elevated buttons.245 246## 5. Components247 248### Buttons249 250- **Shape:** Rounded rectangle with 6px radius. Consistent across all variants.251- **Primary:** Gold fill (`#c8860a`), white text. Used for the primary action on any panel — "ค้นหา", "ส่งคำถาม". Hover: deeper gold (`#9a6307`). Height: 44px minimum.252- **Secondary:** Transparent fill, border matching current theme's border color. Used for navigation, toggle, and utility actions. Hover: gold border + indigo surface background. Active: translateY(-1px) micro-motion.253- **Icon-only:** Transparent, same geometry. Used in sidebar icon mode. Active variant uses gold border.254- **Ghost (TOC/List items):** Full-width, text-align left, transparent. Hover: gold text + tinted background.255 256### Cards (Search Results / TOC)257 258- **Shape:** 6px radius, 1px border matching theme border color. Left border is not used as accent (avoiding side-stripe anti-pattern per design law).259- **Resting:** Transparent or panel-matching background. Text at body weight.260- **Active:** Gold border + lighter background tint. No shadow.261- **Internal spacing:** 8px top/bottom, 12px left/right.262 263### Reader Panel264 265- **Shape:** 8px radius, no border (breathes within its column). Background is always the lightest surface on screen.266- **Header:** Section title + volume/page pill in gold. Separated from text by a thin border.267- **Typography:** 17px body, 2.1 line-height, 70ch max-width. Content is left-aligned (Thai/Pali reads left-to-right).268- **Search highlighting:** `mark` element with highlight yellow background + gold underline.269 270### AI Chat Panel (inside AIPopup)271 272- **Container:** 8px radius popup, floating above the FAB — never a permanent column.273- **User message bubble:** Light blue (`#e3f2fd`) background, 12px radius (bottom-right corner flattened to 4px).274- **Assistant message bubble:** Light green (`#e8f5e9`) background, 12px radius (bottom-left corner flattened to 4px).275- **Thinking indicator:** Italic, muted text above assistant messages when in reasoner mode.276- **Input:** Full-width text input with 44px height, gold focus ring.277 278### Right Reading Toolbar279 280Vertical strip fixed to the right edge of the viewport. The sole home for all reading-flow controls. Never in the NavDrawer — these need to be reachable without opening a panel.281 282**Layout (top to bottom):**283 284```285┌────────┐286│ หน้า N │  ← page pill (current page, tappable to jump)287│  / 532 │  ← total pages, muted288├────────┤289│   ^    │  ← previous page290│   v    │  ← next page291├────────┤292│   ↑    │  ← scroll to top293│  A+    │  ← increase font size294│  A−    │  ← decrease font size295│  ☀/🌙 │  ← cycle theme (dark → light → classic)296└────────┘297```298 299- **Width:** 44px. Each button is 44 × 44px (touch minimum).300- **Background:** Indigo Surface (`#222242`) in dark theme — one step lighter than the shell, reads as a contained strip.301- **Dividers:** 1px `border-dark` (`#3a3a5e`) between groups. No divider between A+ and A−.302- **Icon color:** Text Muted (`#888888`) at rest; Dhamma Gold (`#c8860a`) on hover/active.303- **Page pill:** Gold text on dark surface. Tapping opens an inline number input for direct page jump (no modal).304- **Auto-hide:** Fades to 20% opacity when the user is actively scrolling. Returns to full opacity on scroll-stop (1.5s) or when cursor enters the 60px right edge zone.305- **No shadow.** Sits flush against the right viewport edge — tonal contrast with the reader panel is sufficient separation.306- **Theme toggle icon:** Changes to reflect current theme — ☀ (dark), 🌙 (light), 📜 (classic).307 308### Page Marker (Continuous Scroll Divider)309 310Appears between pages in the continuous scroll reading experience. It is purely informational — never a control.311 312- **Layout:** Centered, full reader-column width.313- **Text:** "— หน้า N —" in Text Muted (`#888888`), label scale (0.82em), 0.04em letter-spacing.314- **Margin:** 32px top and bottom — generous breathing room signals a boundary without breaking rhythm.315- **No border, no rule.** The text alone is sufficient. A horizontal rule would add visual weight where only a pause is needed.316 317### NavDrawer (Navigation Sidebar)318 319Three tabs: **TOC** (table of contents), **Search**, **Overview**. Slides in from the left.320 321- **Width:** 320px on desktop; 100% viewport width on mobile with an overlay backdrop.322- **Background:** Indigo Midnight (`#1a1a2e`) in dark/default theme — one tonal step lighter than the app shell.323- **Tabs:** Full-width tab strip at top, gold underline on active tab. No icon-only tab bar — labels are always visible.324- **Behavior:** On desktop, the drawer can push the reader or overlay it (user preference). On mobile, always overlays with a semi-transparent backdrop.325- **Close target:** The backdrop itself is tappable to close on mobile; a ✕ button is present at top-right for keyboard users.326 327### AI Floating Action Button (FAB)328 329The sole entry point to the AI assistant. Presence at bottom-right is persistent when AI is closed; it disappears when the popup is open (replaced by the popup's close control).330 331- **Size:** 56 × 56px circle. Minimum touch target met without padding hacks.332- **Background:** Dhamma Gold (`#c8860a`). This is the only gold surface in the UI — it earns its prominence.333- **Icon:** Lotus or spark glyph in warm white. No text label (position and color are sufficient affordance).334- **Hover:** scale(1.05), color deepens to `#9a6307`. Ease-out-quart, 150ms.335- **Active:** scale(0.95), 80ms. Communicates physical press.336- **Unread indicator:** 8px dot in amber at top-right of button. Only when the AI has a response the user hasn't seen.337- **No shadow.** Tonal layering rule applies — the gold surface against the indigo background creates sufficient contrast without elevation.338 339### AI Popup340 341Opens above the FAB. Draggable by its title bar. Never full-screen on desktop.342 343- **Default position:** `bottom: 96px; right: 24px` (24px gap above FAB).344- **Size:** 420px wide, max-height 70vh. On mobile: 100vw − 16px margin each side, anchored to bottom.345- **Draggable:** Title bar drag handle (cursor: grab). Constrained to viewport bounds.346- **States:** Open (full), Minimized (title bar only, ~48px tall), Closed (FAB only).347- **Background:** Warm Paper (`#faf7f2`) — lighter than indigo shell, slightly darker than reader panel. Reads as a floating layer without a shadow.348- **Title bar:** "✨ ผู้ช่วยธรรมะ" left-aligned, minimize (—) and close (✕) right-aligned.349- **Quick Actions:** Shown on first open, before any message. Four preset buttons in a 2×2 grid: อธิบายให้เข้าใจง่าย, สรุปใจความสำคัญ, วิเคราะห์หลักธรรม, ประยุกต์ใช้ในชีวิต. Plus a free-text input below.350- **Mode toggle:** fast / reasoner — compact toggle in title bar area. Not prominent; scholars who need it will find it.351 352### Highlight / Mark353 354- **Shape:** 3px radius, no padding for inline highlights.355- **Color:** Highlight yellow (`#fff3cd`) background in light mode, amber-gold (`#4a3c10`) in dark mode.356- **Weight:** Bolded to distinguish from surrounding text.357- **Animation:** Subtle pulse-in on appearance (400ms ease-out-quart).358 359## 6. Themes360 361Three named themes. Dark is the default — the physical scene is a scholar at a desk in a dim monastery library, warm lamp to the right, the screen the primary light source.362 363| Token | Dark (default) | Light | Classic |364|---|---|---|---|365| Shell | Indigo Midnight `#1a1a2e` | Warm White `#f8f6f0` | Cream Dark `#f5edd8` |366| NavDrawer | Indigo Midnight `#1a1a2e` | Cream Dark `#f5edd8` | Parchment Cream `#fdfaf5` |367| Reader | Parchment Cream `#fdfaf5` | Warm Paper `#faf7f2` | Parchment Cream `#fdfaf5` |368| AI Panel | Indigo Void `#0f0f1e` | Cream Dark `#f5edd8` | Warm Paper `#faf7f2` |369| Body text | Text Dark `#1a1a1a` | Text Dark `#1a1a1a` | Text Dark `#1a1a1a` |370| Nav text | Text Light `#e0e0e0` | Text Dark `#1a1a1a` | Text Soft `#555555` |371 372**Switching:** Via the theme toggle button (☀/🌙/📜) in the Right Reading Toolbar — bottom of the toolbar strip, always visible.373 374## 7. Do's and Don'ts375 376| Do | Don't |377|---|---|378| Use gold sparingly — only for interactive/active elements | Add gold borders to every card "for consistency" |379| Keep the reader panel as the lightest surface | Use shadows to elevate the reader above the background |380| Let typography carry the hierarchy | Rely on color alone to distinguish headings from body |381| Use generous line height (2.1) for Thai/Pali text | Squeeze text to fit more content on screen |382| Close AI panel when not in active use | Let the AI panel dominate the layout |383| Use tonal layering to indicate depth | Add drop shadows anywhere |384| Keep navigation compact and predictable | Add animations that delay reading |385| Show the page number prominently in gold | Hide navigation controls in hamburger menus |386| Test every color combination at WCAG AA | Assume dark theme text on dark backgrounds is readable |387| Prefer inline/panel alternatives to modals | Use modals for search results or text selection |388 389## 8. Animation & Motion390 391All animations serve function — they orient the user or confirm an action. No animation exists for decoration.392 393**Global:** Respect `prefers-reduced-motion: reduce` — all animations collapse to instant state changes.394 395### Easing & Duration Tokens396 397| Token | Value | Usage |398|-------|-------|-------|399| `ease-standard` | `cubic-bezier(0.4, 0, 0.2, 1)` | Most transitions (panels, opacity) |400| `ease-out-quart` | `cubic-bezier(0.25, 1, 0.5, 1)` | Elements entering view (drawer, popup) |401| `ease-in-quart` | `cubic-bezier(0.5, 0, 0.75, 0)` | Elements exiting view |402| `duration-fast` | `150ms` | Micro-interactions (hover, active) |403| `duration-normal` | `250ms` | Panel transitions, state changes |404| `duration-slow` | `400ms` | Large-area transitions (drawer, popup) |405 406### Component Animations407 408| Component | Trigger | Animation | Duration | Easing |409|-----------|---------|-----------|----------|--------|410| **NavDrawer** | Open | `translateX(-100%) → translateX(0)` | `duration-slow` | `ease-out-quart` |411| **NavDrawer** | Close | `translateX(0) → translateX(-100%)` | `duration-normal` | `ease-in-quart` |412| **NavDrawer backdrop** | Open | `opacity: 0 → 0.5` | `duration-slow` | `ease-standard` |413| **AI FAB** | Hover | `scale(1) → scale(1.05)`, color deepens | `duration-fast` | `ease-out-quart` |414| **AI FAB** | Active | `scale(1) → scale(0.95)` | `80ms` | `ease-standard` |415| **AI FAB** | Unread pulse | Subtle ring pulse (opacity 0.4→0→0.4) | `2000ms` loop | `ease-standard` |416| **AI Popup** | Open | `opacity: 0, translateY(16px) → opacity: 1, translateY(0)` | `duration-slow` | `ease-out-quart` |417| **AI Popup** | Close | `opacity: 1 → 0, translateY(0) → translateY(8px)` | `duration-normal` | `ease-in-quart` |418| **Search results** | Appear | Stagger children: `opacity: 0 → 1`, delay `50ms × index` (max 8 items) | `duration-normal` | `ease-out-quart` |419| **Highlight mark** | Appear | Background pulse-in (0→100% opacity) | `duration-slow` | `ease-out-quart` |420| **Page marker** | Enter viewport | No animation — static text, appears naturally via scroll | — | — |421| **Right Toolbar** | Scroll start | `opacity: 1 → 0.2` | `duration-normal` | `ease-standard` |422| **Right Toolbar** | Scroll stop (1.5s) | `opacity: 0.2 → 1` | `duration-normal` | `ease-standard` |423| **Theme switch** | Toggle | Cross-fade backgrounds: `opacity` swap | `duration-slow` | `ease-standard` |424| **Loading skeleton** | Pulse | Background shimmer left→right | `1500ms` loop | `ease-standard` |425 426### Named Rules427 428**The No-Bounce Rule.** No spring or bounce physics anywhere. The aesthetic is calm, not playful — overshooting motion contradicts the contemplative reading environment.429 430**The Stagger Cap Rule.** List animations stagger at most 8 items (8 × 50ms = 400ms max). Beyond 8, remaining items appear instantly. Long stagger chains feel sluggish.431