Lesson 1 / الدرس 1
Why products drift / لماذا تنحرف المنتجات
Nobody decides to have eleven shades of grey and four button styles. It happens one reasonable decision at a time, by people who could not see what already existed — and that is the problem a system solves.
لا أحد يقرر أن يكون لديه أحد عشر تدرّجًا من الرمادي وأربعة أنماط أزرار. بل يحدث ذلك قرارًا معقولًا بعد آخر، على يد أناس لم يستطيعوا رؤية ما كان موجودًا أصلًا — وتلك هي المشكلة التي يحلّها النظام.
A designer needs a grey for a border on a Tuesday. There is no list of greys, so they pick one that looks right. Six months and nine designers later the product has eleven greys, and every one of them was a reasonable local decision. Inconsistency is almost never carelessness; it is the absence of a place to look, and shouting at people about it has never once worked.
What drift actually costs
-
Readers stop learning. If a primary button looks different on three screens, the rule "this shape means the main action" never forms, and every screen has to be read from scratch. يكفّ القرّاء عن التعلّم. فإن بدا الزر الرئيس مختلفًا في ثلاث شاشات، لم تتكوّن قاعدة «هذا الشكل يعني الفعل الرئيس» قط، ووجب قراءة كل شاشة من جديد.
-
Every change becomes a search. Making the brand blue darker means finding every blue, deciding which ones meant "brand", and missing three. يصير كل تغيير بحثًا. فجعل أزرق العلامة أغمق يعني إيجاد كل أزرق، وتقرير أيّها كان يعني «العلامة»، وتفويت ثلاثة.
-
Accessibility is re-litigated forever. Eleven greys means eleven contrast ratios nobody measured, and a fix in one place that does not travel. تُعاد إتاحة الوصول إلى الجدال أبدًا. فأحد عشر رماديًا تعني أحد عشر نسبة تباين لم يقسها أحد، وإصلاحًا في موضع لا ينتقل.
-
New people slow down. Someone joining has to infer the rules from the product, and the product contradicts itself. يبطؤ القادمون الجدد. فمن ينضمّ عليه أن يستنبط القواعد من المنتج، والمنتج يناقض نفسه.
A system is a shared memory, not a rulebook
The useful framing is not "rules people must follow" — that framing produces documents nobody opens. A design system is the place where a decision already made can be found, so the next person does not have to make it again from nothing. Its success is measured by how often people reach for it, which means the easiest path has to be the consistent one.
<style>
body { font-family:system-ui; font-size:14px }
.row { display:flex; gap:10px; align-items:center; margin-bottom:14px; flex-wrap:wrap }
.b1 { background:#1f5fd0; color:#fff; border:0; padding:8px 14px; border-radius:6px }
.b2 { background:#2563eb; color:#fff; border:0; padding:9px 16px; border-radius:4px }
.b3 { background:#1e5ac8; color:#fff; border:1px solid #17489f; padding:7px 12px; border-radius:8px }
.b4 { background:#1f5fd0; color:#fff; border:0; padding:8px 14px; border-radius:6px }
</style>
<p>Four “primary” buttons from four screens of one product:</p>
<div class="row">
<button class="b1">Save</button>
<button class="b2">Save</button>
<button class="b3">Save</button>
<button class="b4">Save</button>
</div>
<p>One of these is repeated. Which two are identical?</p>Try it live / جرّب بنفسك
Check yourself / اختبر نفسك
1. Why does a product end up with eleven greys?
Every one of those greys was chosen by someone doing their job properly. The failure is structural — there was nowhere to find what already existed — which is why policies do not fix it and a findable list does.
2. What is the useful definition of a design system?
Framing it as rules produces documents nobody opens. Framing it as shared memory makes its success measurable: how often do people reach for it — which only happens if the consistent path is also the easiest one.
3. The documented button is harder to use than writing a new one. What should change?
People take the cheapest path under deadline, every time. A system competes with "just write it" on convenience, and any approach that relies on discipline instead of convenience loses slowly and invisibly.
Score / النتيجة: 0 / 3
Your task / مهمتك
Audit one component across a product you use — every button, or every input, or every card. Collect at least six real examples, list what differs between them, and say which differences carry meaning and which are drift.
دقّق مكوّنًا واحدًا في منتج تستخدمه — كل زر، أو كل خانة، أو كل بطاقة. اجمع ستة أمثلة حقيقية على الأقل، واسرد ما يختلف بينها، وقل أيّ الاختلافات يحمل معنى وأيّها انحراف.
- Six or more real examples of the same component ستة أمثلة حقيقية أو أكثر للمكوّن نفسه
- A table of what differs — padding, radius, colour, weight جدول بما يختلف — الحشو والاستدارة واللون والوزن
- A judgement on each difference: meaningful, or drift حكم على كل اختلاف: ذو معنى أم انحراف