generated sotries

2025-12-20 21:04:23 +02:00
parent d889b24f12
commit 8f95089814
65 changed files with 9501 additions and 0 deletions
@@ -0,0 +1,72 @@
+# Story 9.2: Typography System
+
+## Epic Reference
+**Epic 9:** Design & Branding Implementation
+
+## User Story
+As a **user**,
+I want **professional, readable typography**,
+So that **the platform feels polished and content is easy to read**.
+
+## Acceptance Criteria
+
+### Arabic Fonts
+- [ ] Primary: Cairo or Tajawal (Google Fonts)
+- [ ] Weights: Light (300), Regular (400), SemiBold (600), Bold (700)
+
+### English Fonts
+- [ ] Primary: Montserrat or Lato
+- [ ] Weights: Light (300), Regular (400), SemiBold (600), Bold (700)
+
+### Font Hierarchy
+- [ ] H1: Bold, 2.5rem (40px)
+- [ ] H2: SemiBold, 2rem (32px)
+- [ ] H3: SemiBold, 1.5rem (24px)
+- [ ] Body: Regular, 1rem (16px)
+- [ ] Small: Regular, 0.875rem (14px)
+
+### Performance
+- [ ] Line height: 1.6 body, 1.3 headings
+- [ ] font-display: swap
+- [ ] Preload critical fonts
+
+## Technical Notes
+
+```css
+/* Google Fonts import */
+@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700&family=Montserrat:wght@300;400;600;700&display=swap');
+
+@theme {
+  --font-arabic: 'Cairo', 'Tajawal', sans-serif;
+  --font-english: 'Montserrat', 'Lato', sans-serif;
+
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-base: 1rem;
+  --font-size-lg: 1.125rem;
+  --font-size-xl: 1.25rem;
+  --font-size-2xl: 1.5rem;
+  --font-size-3xl: 2rem;
+  --font-size-4xl: 2.5rem;
+}
+
+/* Dynamic font selection */
+html[lang="ar"] body {
+  font-family: var(--font-arabic);
+}
+
+html[lang="en"] body {
+  font-family: var(--font-english);
+}
+```
+
+## Definition of Done
+- [ ] Fonts load correctly
+- [ ] Arabic fonts work with RTL
+- [ ] English fonts work with LTR
+- [ ] Font hierarchy applied
+- [ ] Performance optimized
+- [ ] Tests pass
+
+## Estimation
+**Complexity:** Medium | **Effort:** 3 hours