Pharmacology — a brand, redesigned from the ground up.Pharmacology — علامةٌ أُعيد تصميمها من الأساس.

The practice belongs to the client — a pharmacist who does medication-aware clinical nutrition. The brand, the site, and the system it runs on were my job: a full redesign and a from-scratch rebuild, owning both the visual design and the front-end code.العيادة للعميل — صيدليٌّ يقدّم تغذيةً سريرية واعيةً بالأدوية. أمّا العلامة والموقع والنظام الذي يقوم عليه فكانت مهمّتي: إعادة تصميمٍ كاملة وإعادة بناءٍ من الصفر، بملكيّة التصميم البصري وكود الواجهة معاً.

My roleدوري

Redesign + front-end buildإعادة تصميم + بناء الواجهة

Clientالعميل

Dr. Ahmed Elkhateeb (Pharm.D)د. أحمد الخطيب (دكتور صيدلة)

Domainالمجال

Clinical-nutrition brandعلامة تغذيةٍ سريرية

Scopeالنطاق

25 pages, v3 rebuild25 صفحة، إعادة بناء v3

Languagesاللغات

Arabic + English (RTL-first)عربي + إنجليزي (عربيّ أولاً)

Buildالبناء

Vanilla + Supabase formsبلا إطار + نماذج Supabase

The site already existed, but it had aged the way unmanaged sites do: CSS layered on CSS until rules fought each other, spacing that no longer had a rhythm, and copy that had stopped sounding like one brand. Rather than patch it, I started over — keeping the authoritative copy and pricing, throwing out the tangled foundation, and rebuilding on a single design system so the look stays consistent as the practice adds pages.كان الموقع موجوداً، لكنه تقادم كما تتقادم المواقع غير المُدارة: أنماط CSS فوق أنماط حتى تصارعت القواعد، وتباعدٌ فقد إيقاعه، ونصوصٌ لم تعد تبدو كعلامةٍ واحدة. وبدلاً من ترقيعه، بدأتُ من جديد — مع الإبقاء على النصوص والأسعار المرجعية، والتخلّص من الأساس المتشابك، وإعادة البناء على نظام تصميمٍ واحدٍ كي يبقى المظهر متّسقاً مع إضافة العيادة صفحاتٍ جديدة.

The rebuild is anchored on a token layer: a calm navy-and-sage palette, a fluid bilingual type scale (an Arabic display face paired with Inter Tight for Latin), and a fixed set of spacing, radius, shadow, and motion values — all declared in one place and never re-hardcoded in a component. On top of it sits a single component library: navigation, hero, buttons, cards, badges, accordions, a floating WhatsApp action button, forms, and a footer. New pages compose existing parts instead of inventing new ones, which is what keeps 25 pages looking like one site.ترتكز إعادة البناء على طبقة رموز: لوحةٌ هادئة من الكحلي والميرمية (الأخضر الباهت)، ومقياس خطوطٍ ثنائي اللغة مرن (خطّ عرضٍ عربي مع Inter Tight للّاتينية)، ومجموعةٌ ثابتة من قيم التباعد والحواف والظلال والحركة — كلّها مُعلَنةٌ في مكانٍ واحد ولا يُعاد ترميزها داخل مكوّن. وفوقها مكتبة مكوّناتٍ واحدة: تنقّل، وواجهة، وأزرار، وبطاقات، وشارات، وأكورديون، وزرّ واتساب عائم، ونماذج، وتذييل. تُركَّب الصفحات الجديدة من أجزاءٍ موجودة بدل اختراع غيرها، وهذا ما يُبقي 25 صفحةً تبدو موقعاً واحداً.

Tokensالرموز

Color · type · space · motionلون · خط · تباعد · حركة

Paletteاللوحة

Navy + sage, warm paperكحلي + ميرمية، ورقٌ دافئ

Typeالخط

Arabic display + Inter Tightعرضٌ عربي + Inter Tight

Componentsالمكوّنات

~30 shared patterns~30 نمطاً مشتركاً

The site is Arabic by default and English on toggle. Crucially it's RTL-native: every copy string lives in a single bilingual dictionary and renders through data attributes, and the layout uses CSS logical properties throughout — so flipping the language flips direction, type, and spacing correctly instead of mirroring a Latin design. The English version is the adaptation; the Arabic is the real thing.الموقع عربيٌّ افتراضاً وإنجليزيٌّ عند التبديل. والأهمّ أنه من اليمين لليسار أصلاً: كلّ نصٍّ يعيش في قاموسٍ ثنائي اللغة واحد ويُعرَض عبر سمات البيانات، والتخطيط يستخدم خصائص CSS المنطقية في كلّ مكان — فتبديل اللغة يقلب الاتجاه والخطّ والتباعد بشكلٍ صحيح بدل عكس تصميمٍ لاتيني. النسخة الإنجليزية هي التكييف؛ والعربية هي الأصل.

Click to zoomاضغط للتكبير

The practice sells a ladder of offers, and the site is structured to match it — from e-books up through a group cohort, maintenance and premium plans, private one-to-one tracks, and an ongoing retainer, plus a Ramadan-specific program. Around the offers sit the supporting pages: an about page that presents the client's credentials, a services overview, a consultancy comparison, an FAQ, a multi-step application form, a thank-you flow, and the full set of legal pages (privacy, terms, medical disclaimer, refund).تبيع العيادة سلّماً من العروض، والموقع مبنيٌّ ليطابقه — من الكتب الإلكترونية صعوداً إلى مجموعةٍ جماعية، وخطط صيانةٍ ومتميّزة، ومساراتٍ فردية خاصة، واشتراكٍ مستمر، إضافةً إلى برنامجٍ خاصٍّ برمضان. وحول العروض تقع الصفحات المساندة: صفحة تعريفٍ تعرض شهادات العميل، ونظرة عامة على الخدمات، ومقارنة استشارات، وأسئلة شائعة، ونموذج تقديمٍ متعدّد الخطوات، وتدفّق شكر، ومجموعة الصفحات القانونية كاملة (الخصوصية، الشروط، إخلاء المسؤولية الطبية، الاسترجاع).

Click to zoomاضغط للتكبير

Vanilla HTML/CSS/JS with no build step keeps the site light and instantly deployable. The interactive parts are hand-written: a scroll-aware glass navbar, reveal-on-scroll that respects reduced-motion, an accordion, and a multi-step application form. The two forms that need a backend — the application and the email waitlist — are wired to Supabase, loaded lazily only on the pages that have them; every primary call-to-action also offers a pre-filled WhatsApp deep link. I deliberately scoped V1 to the public brand and booking surface, leaving the client area, auth, and payments for a later phase rather than half-building them.HTML/CSS/JS صِرف دون خطوة بناء يُبقي الموقع خفيفاً وقابلاً للنشر فوراً. والأجزاء التفاعلية مكتوبةٌ يدوياً: شريط تنقّلٍ زجاجيٌّ واعٍ بالتمرير، وكشفٌ عند التمرير يحترم تقليل الحركة، وأكورديون، ونموذج تقديمٍ متعدّد الخطوات. أمّا النموذجان اللذان يحتاجان خادماً — التقديم وقائمة البريد — فموصولان بـSupabase، يُحمَّلان بتكاسلٍ على صفحاتهما فقط؛ وكلّ دعوةٍ رئيسية تقدّم أيضاً رابط واتساب مُعبّأً مسبقاً. وقد حدّدتُ نطاق الإصدار الأول عمداً بواجهة العلامة والحجز العامة، تاركةً منطقة العميل والمصادقة والمدفوعات لمرحلةٍ لاحقة بدل بنائها نصفاً.

Stackالتقنيات

HTML · CSS · JS, no buildHTML · CSS · JS، دون بناء

Formsالنماذج

Supabase — apply + waitlistSupabase — تقديم + قائمة انتظار

Contactالتواصل

WhatsApp deep linksروابط واتساب مباشرة

V1 scopeنطاق الإصدار 1

Public site (no auth/payments yet)الموقع العام (لا مصادقة/مدفوعات بعد)

Pharmacology is the project where a design system stopped being a nice-to-have and became the whole point: 25 pages only stay coherent because they share one token layer and one component set. It's also where I proved I can take a drifted, inherited codebase and rebuild it into something a non-technical owner can keep growing. The habit it left: rebuild on a system, not on willpower.Pharmacology هو المشروع الذي توقّف فيه نظام التصميم عن كونه رفاهية وصار هو الجوهر كلّه: 25 صفحةً تبقى متماسكةً فقط لأنها تتشارك طبقة رموزٍ واحدة ومجموعة مكوّناتٍ واحدة. وهو أيضاً حيث أثبتُّ أنني أستطيع أخذ كودٍ موروثٍ منحرف وإعادة بنائه إلى شيءٍ يستطيع مالكٌ غير تقنيٍّ مواصلة تنميته. والعادة التي تركها: أعيدي البناء على نظام، لا على قوّة الإرادة.