Standardize design system.

Author: aalhour

.cursorrules

@@ -1,7 +1,7 @@
 # Digital Bazaar Community — Agent Rules
 
-> Bilingual Arabic/English Jekyll site for WhatsApp community
-> Aesthetic: High-end magazine, Middle Eastern-inspired palette
+> Bilingual Arabic/English Jekyll site for WhatsApp-based community
+> Aesthetic: Warm, focused & curated community website, Middle Eastern-inspired palette
 
 ---
 
@@ -37,15 +37,32 @@ Design every page like a premium publication spread:
 
 ## 🎨 COLOR PALETTE
 
+### Core Colors
 ```
 --sand: #F4E6C4        Background, warm neutral
---saffron: #E2B714     Accent, highlights
+--saffron: #E2B714     Accent, highlights, hover states
 --terracotta: #B34E36  Primary CTA, warmth
---marigold: #D9912A    Secondary accent, energy
+--marigold: #D9912A    Secondary accent, gradients
 --teal: #2F8F9D        Links, cool contrast
 --night: #152029       Headings, strong text
 --ink: #21313B         Body text
---white: #FFFFFF       Cards, buttons
+--white: #FFFFFF       Elevated surfaces
+```
+
+### Semantic Colors (Light Mode)
+```
+--card-bg: #FFFBF0           Cream card backgrounds
+--surface-elevated: #FFFDF6  Slightly warm white
+--terracotta-tint: rgba(179,78,54,.06)  Warm card tint
+--text-muted: #4a5d6a        Secondary text
+--kicker: #7a6330            Section labels
+```
+
+### Footer Colors
+```
+Light mode: #3d2a28 (Terracotta Ground)
+Dark mode:  #1a2a35 (Cool ink)
+Text:       rgba(244,230,196,0.85) (Sand @ 85%)
 ```
 
 **Never introduce colors outside this palette.**
@@ -56,17 +73,42 @@ Design every page like a premium publication spread:
 
 ```
 ├── _config.yml
-├── _data/rules_{ar,en}.yml
-├── _includes/{header,footer,language-toggle,article-card}.html
-├── _layouts/{default,home,article}.html
+├── _data/
+│   ├── strings_ar.yml       ← Arabic UI strings
+│   ├── strings_en.yml       ← English UI strings
+│   └── rules_{ar,en}.yml
+├── _includes/
+│   ├── header.html
+│   ├── footer.html          ← "The Campfire" footer
+│   └── article-card.html
+├── _layouts/
+│   ├── default.html
+│   ├── home.html
+│   ├── start-here.html
+│   ├── cadence.html
+│   ├── rules.html
+│   └── article.html
 ├── _posts/YYYY-MM-DD-title.md
-├── _docs/                    ← Design system reference
-│   ├── design-system.md
-│   ├── image-layouts.md
-│   └── article-templates.md
-├── assets/css/styles.css
-├── ar/index.html
-├── en/index.html
+├── _design_docs/            ← Design system reference
+│   ├── design-system.md     ← Typography, spacing, components
+│   ├── image-layouts.md     ← Float, bleed, overlay patterns
+│   ├── article-templates.md
+│   ├── css-framework-research.md
+│   └── starting-prompt.md
+├── assets/
+│   ├── css/styles.scss      ← Main stylesheet (~2700 lines)
+│   ├── fonts/               ← Self-hosted fonts
+│   └── img/                 ← Images (WebP preferred)
+├── ar/
+│   ├── index.html
+│   ├── start-here/
+│   ├── cadence/
+│   └── rules/
+├── en/
+│   ├── index.html
+│   ├── start-here/
+│   ├── cadence/
+│   └── rules/
 └── index.html               ← Redirects to /ar/
 ```
 
@@ -101,6 +143,7 @@ excerpt: "ملخص قصير"
 10. Verify language toggle works
 
 ### Performance (PageSpeed)
+
 11. Use WebP images with JPG/PNG fallbacks
 12. Add `loading="lazy"` to images below the fold
 13. Add `loading="eager"` and `fetchpriority="high"` to hero/LCP images
@@ -166,10 +209,11 @@ When implementing specific features, read these files:
 
 | Need | Reference |
 |------|-----------|
-| Image layouts (floats, bleeds, overlays) | `_docs/image-layouts.md` |
-| Typography (pull quotes, drop caps) | `_docs/design-system.md` |
-| Article page structure | `_docs/article-templates.md` |
-| Code block styling | `_docs/design-system.md` |
+| Typography, spacing, colors | `_design_docs/design-system.md` |
+| Image layouts (floats, bleeds, overlays) | `_design_docs/image-layouts.md` |
+| Article page structure | `_design_docs/article-templates.md` |
+| Code block styling | `_design_docs/design-system.md` |
+| CSS framework decision | `_design_docs/css-framework-research.md` |
 
 ---
 
@@ -179,4 +223,3 @@ When implementing specific features, read these files:
 - Tailwind RTL: https://github.com/20lives/tailwindcss-rtl
 - CSS Logical Properties: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values
 - Arabic Fonts: https://fonts.google.com/?subset=arabic
-

_data/strings_ar.yml

@@ -77,7 +77,7 @@ months_short:
 # Hero Section
 hero:
   kicker: "دافئ، مركّز، ومنتقى"
-  headline: "مجتمع عربي عالي الجودة للبنّائين."
+  headline: "مجتمع عربي عالي الجودة للبنّائين"
   description: "البازار الرقمي مجتمع «واتساب أولاً» للبنّائين العرب الذين يُنجزون: مؤسسون، مهندسون، قادة منتج، مصمّمون، مسوّقون، باحثون، وفرق.\n\nابدأ من هنا على الموقع لتتعرف كيف نعمل، وتختار المسارات المناسبة، وتشارك في جلساتنا المتكررة مثل <i>سبت البازار</i> و<i>جلسات فايرسايد</i> الشهرية."
   image_alt: "بشر وروبوتات ودودة يتحدثون ويعملون معاً في بازار شرق أوسطي."
 
@@ -531,7 +531,7 @@ footer:
   sections_title: "الأقسام"
   community_title: "المجتمع"
   copyright: "© %{year} البازار الرقمي"
-  tagline: "صُنع بـ ❤ في أنحاء العالم العربي"
+  tagline: "صُنع بـ ❤ عبر أنحاء العالم العربي"
   links:
     whatsapp: "واتساب"
     github: "GitHub"

_data/strings_en.yml

@@ -34,7 +34,7 @@ arrow_external_rtl: "↖"
 # Hero Section
 hero:
   kicker: "warm, focused, and curated"
-  headline: "A high-signal Arabic community for builders."
+  headline: "A high-signal Arabic community for builders"
   description: "Digital Bazaar is a WhatsApp-first community for Arab builders who ship: founders, engineers, product leaders, designers, marketers, researchers, and teams.\n\nStart here on the website to learn how we work, join the right lanes, and show up for recurring sessions like <i>Bazaar Saturdays</i> and the monthly <i>Firesides</i>."
   image_alt: "Humans and friendly robots talking and working together in a Middle Eastern bazaar."
 

_design_docs/article-templates.md

@@ -2,6 +2,8 @@
 
 Page structure and components for articles.
 
+> **Last Updated:** December 2025
+
 ---
 
 ## Article Layout Structure
@@ -84,8 +86,8 @@ Page structure and components for articles.
   flex-wrap: wrap;
   align-items: center;
   gap: 0.5rem;
-  font-size: 0.9rem;
-  color: var(--muted);
+  font-size: var(--text-sm);
+  color: var(--text-muted);
   margin-bottom: 1rem;
 }
 
@@ -94,15 +96,15 @@ Page structure and components for articles.
 }
 
 .article-header h1 {
-  font-size: clamp(2rem, 5vw, 3rem);
+  font-size: var(--text-2xl);
   line-height: 1.15;
-  color: var(--night);
+  color: var(--text-heading);
   margin: 0 0 1rem;
 }
 
 .article-excerpt {
-  font-size: 1.25rem;
-  color: var(--subtitle);
+  font-size: var(--text-lg);
+  color: var(--text-muted);
   line-height: 1.6;
   margin: 0;
 }
@@ -117,8 +119,8 @@ Page structure and components for articles.
   display: inline-flex;
   align-items: center;
   padding: 0.25rem 0.6rem;
-  border-radius: 999px;
-  font-size: 0.75rem;
+  border-radius: var(--radius-full);
+  font-size: var(--text-xs);
   font-weight: 600;
 }
 
@@ -140,49 +142,47 @@ Page structure and components for articles.
 ## Article Content Container
 
 ```css
-.article-content {
-  font-size: 1.1rem;
-  line-height: 1.8;
-  color: var(--ink);
+.article-page article {
+  font-size: var(--text-md);
+  line-height: 1.7;
+  color: var(--text);
 }
 
-.article-content p {
-  margin-bottom: 1.5rem;
+.article-page article p {
+  margin: 0 0 16px;
 }
 
-.article-content h2 {
-  font-size: 1.75rem;
-  color: var(--night);
-  margin-top: 3rem;
-  margin-bottom: 1rem;
+.article-page article h2 {
+  font-size: var(--text-xl);
+  color: var(--text-heading);
+  margin: 26px 0 10px;
 }
 
-.article-content h3 {
-  font-size: 1.35rem;
-  color: var(--night);
-  margin-top: 2rem;
-  margin-bottom: 0.75rem;
+.article-page article h3 {
+  font-size: var(--text-lg);
+  color: var(--text-heading);
+  margin: 22px 0 8px;
 }
 
 /* Lists */
-.article-content ul,
-.article-content ol {
-  padding-inline-start: 1.5rem;
-  margin-bottom: 1.5rem;
+.article-page article ul,
+.article-page article ol {
+  padding-inline-start: 1.5em;
+  margin: 0 0 16px;
 }
 
-.article-content li {
-  margin-bottom: 0.5rem;
+.article-page article li {
+  margin-bottom: 8px;
 }
 
 /* Links */
-.article-content a {
+.article-page article a {
   color: var(--teal);
   text-decoration: underline;
-  text-underline-offset: 3px;
+  text-underline-offset: 2px;
 }
 
-.article-content a:hover {
+.article-page article a:hover {
   color: var(--terracotta);
 }
 ```
@@ -206,21 +206,21 @@ Page structure and components for articles.
 
 ```css
 .related-articles {
-  margin-top: 4rem;
-  padding-top: 3rem;
-  border-top: 1px solid rgba(21, 32, 41, 0.1);
+  margin-top: var(--space-2xl);
+  padding-top: var(--space-xl);
+  border-top: 1px solid var(--border);
 }
 
 .related-articles h2 {
-  font-size: 1.5rem;
-  color: var(--night);
-  margin-bottom: 1.5rem;
+  font-size: var(--text-xl);
+  color: var(--text-heading);
+  margin-bottom: var(--space-lg);
 }
 
 .articles-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: 1.5rem;
+  gap: var(--space-lg);
 }
 ```
 
@@ -254,11 +254,11 @@ Page structure and components for articles.
 
 ```css
 .article-card {
-  background: var(--white);
-  border-radius: 16px;
+  background: var(--surface);
+  border-radius: var(--radius-lg);
   overflow: hidden;
-  box-shadow: var(--shadow-sm);
-  border: 1px solid rgba(21, 32, 41, 0.06);
+  box-shadow: var(--card-shadow);
+  border: 1px solid var(--border);
   transition: transform 0.15s ease, box-shadow 0.2s ease;
 }
 
@@ -269,34 +269,37 @@ Page structure and components for articles.
 
 .article-card img {
   width: 100%;
-  aspect-ratio: 16/10;
+  height: 140px;
   object-fit: cover;
 }
 
 .article-card .card-content {
-  padding: 1.25rem;
+  padding: 12px 14px 14px;
 }
 
-.article-card h3 {
-  font-size: 1.1rem;
-  margin: 0.75rem 0 0.5rem;
-  line-height: 1.4;
+.article-card-kicker {
+  font-size: var(--text-2xs);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.15em;
+  color: var(--kicker);
 }
 
-.article-card h3 a {
-  color: var(--night);
-  text-decoration: none;
+.article-card-title {
+  font-size: var(--text-md);
+  font-weight: 650;
+  color: var(--text-heading);
+  margin: 0;
 }
 
-.article-card h3 a:hover {
-  color: var(--terracotta);
+.article-card-meta {
+  font-size: var(--text-xs);
+  color: var(--text-muted);
 }
 
-.article-card .card-meta {
-  font-size: 0.85rem;
-  color: var(--muted);
-  display: flex;
-  gap: 1rem;
+.article-card-excerpt {
+  font-size: var(--text-sm);
+  color: var(--text-muted);
+  margin: 0;
 }
 ```
-

_design_docs/css-framework-research.md

@@ -1,8 +1,14 @@
 # CSS Framework Research: Digital Bazaar
 
 **Date:** December 2025  
+**Status:** Research complete — **Custom CSS chosen** (no framework adopted)  
 **Purpose:** Evaluate CSS frameworks for cross-browser compatibility, RTL support, and design flexibility
 
+> **Outcome:** After evaluation, we chose to continue with custom CSS using design tokens 
+> (CSS custom properties) rather than adopting a framework. This provides maximum flexibility 
+> for our magazine aesthetic while keeping the codebase simple. The custom design system uses 
+> `--text-*`, `--space-*`, and `--radius-*` tokens similar to Open Props.
+
 ---
 
 ## Executive Summary