Pharmacology: a brand, rebuilt from the ground up.Pharmacology: علامة أُعيد بناؤها من الأساس.

The client is a pharmacist who does medication-aware clinical nutrition. What was mine is the brand, the site and the system underneath it: the visual design and the front-end code both.العميل صيدلي يقدّم تغذية سريرية واعية بالأدوية. وما كان لي هو العلامة والموقع والنظام تحته: التصميم البصري وكود الواجهة كلاهما.

My roleدوري

Redesigned it and wrote the front-endأعدتُ تصميمه وكتبتُ الواجهة

Clientالعميل

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

Domainالمجال

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

Scopeالنطاق

25 pages, third version25 صفحة، النسخة الثالثة

Languagesاللغات

Arabic and English, Arabic firstعربي وإنجليزي، والعربية أولاً

Buildالبناء

Vanilla, with Supabase formsبلا إطار، مع نماذج Supabase

The site existed already, and it had aged the way unmanaged sites do: CSS layered on CSS until the rules fought each other, spacing with no rhythm left, and copy that had stopped sounding like one brand. Patching it would have meant inheriting all of that, so I started over. I kept the authoritative copy and pricing, threw out the tangled foundation, and rebuilt on a single design system so the look holds as the practice adds pages.كان الموقع موجوداً أصلاً، وقد تقادم كما تتقادم المواقع غير المُدارة: أنماط CSS فوق أنماط حتى تصارعت القواعد، وتباعد لم يبقَ له إيقاع، ونصوص لم تعد تبدو كعلامة واحدة. وترقيعه كان يعني أن أرث ذلك كله، فبدأتُ من جديد. أبقيتُ النصوص والأسعار المرجعية، وتخلّصتُ من الأساس المتشابك، وأعدتُ البناء على نظام تصميم واحد ليصمد المظهر مع إضافة العيادة صفحات جديدة.

The rewrite sits on a token layer: a calm navy and sage palette, a fluid bilingual type scale pairing an Arabic display face with Inter Tight, and a fixed set of spacing, radius, shadow and motion values, all declared once and never hardcoded again inside a component. Above that is one component library covering navigation, hero, buttons, cards, badges, accordions, a floating WhatsApp button, forms and a footer. New pages compose existing parts rather than inventing new ones, and that is the only reason 25 pages still look like one site.تقوم إعادة الكتابة على طبقة رموز: لوحة هادئة من الكحلي والميرمية، ومقياس خطوط ثنائي اللغة مرن يقرن خطّ عرض عربي مع Inter Tight، ومجموعة ثابتة من قيم التباعد والحواف والظلال والحركة، كلها مُعلَنة مرة واحدة ولا تُرمَّز مرة أخرى داخل مكوّن. وفوقها مكتبة مكوّنات واحدة تغطّي التنقّل والواجهة والأزرار والبطاقات والشارات والأكورديون وزرّ واتساب عائم والنماذج والتذييل. تُركَّب الصفحات الجديدة من أجزاء موجودة بدل اختراع غيرها، وهذا السبب الوحيد لبقاء 25 صفحة تبدو موقعاً واحداً.

Tokensالرموز

Colour, type, spacing, motionلون، وخط، وتباعد، وحركة

Paletteاللوحة

Navy and sage on warm paperكحلي وميرمية على ورق دافئ

Typeالخط

An Arabic display face with Inter Tightخطّ عرض عربي مع Inter Tight

Componentsالمكوّنات

About 30 shared patternsنحو 30 نمطاً مشتركاً

The site loads in Arabic and switches to English on a toggle. It is genuinely RTL: every string lives in one bilingual dictionary and renders through data attributes, and the layout uses CSS logical properties throughout, so switching language moves direction, type and spacing correctly instead of mirroring a Latin design. English is the adaptation here.يُحمَّل الموقع بالعربية ويتحوّل إلى الإنجليزية بزرّ. وهو عربي الاتجاه فعلاً: كل نصّ يعيش في قاموس ثنائي اللغة واحد ويُعرَض عبر سمات البيانات، والتخطيط يستخدم خصائص CSS المنطقية في كل مكان، فتبديل اللغة ينقل الاتجاه والخطّ والتباعد كما يجب بدل أن يعكس تصميماً لاتينياً. والإنجليزية هي التكييف هنا.

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

The practice sells a ladder of offers and the site is structured to match: e-books at the bottom, then a group cohort, maintenance and premium plans, private one-to-one tracks, an ongoing retainer, and a Ramadan programme. Around those sit the supporting pages: an about page carrying 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 for privacy, terms, medical disclaimer and refunds.تبيع العيادة سلّماً من العروض والموقع مبنيّ ليطابقه: الكتب الإلكترونية في الأسفل، ثم مجموعة جماعية، وخطط صيانة ومتميّزة، ومسارات فردية خاصة، واشتراك مستمر، وبرنامج رمضان. وحولها تقع الصفحات المساندة: صفحة تعريف تحمل شهادات العميل، ونظرة عامة على الخدمات، ومقارنة استشارات، وأسئلة شائعة، ونموذج تقديم متعدّد الخطوات، وتدفّق شكر، ومجموعة الصفحات القانونية كاملة للخصوصية والشروط وإخلاء المسؤولية الطبية والاسترجاع.

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

Plain HTML, CSS and JavaScript with no build step keeps the site light and deployable in seconds. 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 and loaded only on the pages that have them. Every primary call to action also offers a pre-filled WhatsApp link. I scoped the first version to the public brand and booking surface on purpose, and left the client area, auth and payments for a later phase instead of half-building them.HTML وCSS وJavaScript صِرف بلا خطوة بناء يُبقي الموقع خفيفاً وقابلاً للنشر في ثوانٍ. والأجزاء التفاعلية مكتوبة يدوياً: شريط تنقّل زجاجي واعٍ بالتمرير، وكشف عند التمرير يحترم تقليل الحركة، وأكورديون، ونموذج تقديم متعدّد الخطوات. والنموذجان اللذان يحتاجان خادماً، التقديم وقائمة البريد، موصولان بـSupabase ويُحمَّلان على صفحاتهما فقط. وكل دعوة رئيسية تقدّم أيضاً رابط واتساب معبّأً مسبقاً. وحدّدتُ نطاق النسخة الأولى بواجهة العلامة والحجز العامة عن قصد، وتركتُ منطقة العميل والمصادقة والمدفوعات لمرحلة لاحقة بدل أن أبنيها نصفاً.

Stackالتقنيات

HTML, CSS and JS, no build stepHTML وCSS وJS، بلا خطوة بناء

Formsالنماذج

Supabase, for applications and the waitlistSupabase، للتقديم وقائمة الانتظار

Contactالتواصل

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

First versionالنسخة الأولى

The public site, without auth or payments yetالموقع العام، بلا مصادقة أو مدفوعات بعد

This is the project where a design system stopped being a nice-to-have for me. Those 25 pages only stay coherent because they share one token layer and one component set. It is also where I found out I can take a drifted, inherited codebase and turn it into something a non-technical owner can keep growing. The habit it left me with is to rebuild on a system rather than on willpower.هذا هو المشروع الذي توقّف فيه نظام التصميم عن كونه رفاهية عندي. تلك الصفحات الـ25 تبقى متماسكة فقط لأنها تتشارك طبقة رموز واحدة ومجموعة مكوّنات واحدة. وهو أيضاً حيث عرفتُ أنني أستطيع أخذ كود موروث منحرف وتحويله إلى شيء يستطيع مالك غير تقني أن يواصل تنميته. والعادة التي تركها لي أن أعيد البناء على نظام لا على قوّة الإرادة.