Lesson 8 / الدرس 8

Colour as a job, not a mood / اللون وظيفة لا مزاج

Every colour on an interface should be doing something a reader can name: this is a link, this went wrong, this is the thing to press. Colours chosen for atmosphere and then given jobs afterwards are where inconsistent products come from.

كل لون في الواجهة ينبغي أن يؤدي عملًا يستطيع القارئ تسميته: هذا رابط، وهذا خطأ وقع، وهذا ما يُضغط. أما الألوان المختارة للجوّ ثم المعطاة وظائف بعدُ فمنها تأتي المنتجات غير المتسقة.

Ask what a colour is for and most interfaces cannot answer. Blue is used for links, and for the primary button, and for a heading somewhere, and for an information box — so by the time a reader meets a fifth blue thing they have stopped expecting blue to mean anything. A colour that means four things means nothing.

Name colours by role, never by hue

Instead of	Call it	Because
blue-600	accent	A rebrand changes the hue, not the job
light-grey	surface	In a dark theme it is no longer light
red	danger	The meaning survives; the colour may not
dark-grey-2	muted	Says what it is for, so nobody has to guess

This is the same move the CSS course makes with tokens, and it is the difference between a palette that survives a redesign and one that has to be found and replaced by hand.

<div style="font-family:system-ui; max-width:340px">
  <!-- five blues, five meanings, none of them learnable -->
  <h3 style="color:#1f5fd0; margin:0">Your order</h3>
  <p style="color:#1f5fd0">Delivery on Thursday</p>
  <p><a href="#" style="color:#1f5fd0">Track it</a></p>
  <button style="background:#1f5fd0; color:#fff; border:0; padding:8px 14px">Confirm</button>
</div>

<hr>

<div style="font-family:system-ui; max-width:340px">
  <!-- accent reserved for what can be acted on -->
  <h3 style="margin:0">Your order</h3>
  <p style="color:#444">Delivery on Thursday</p>
  <p><a href="#" style="color:#1f5fd0">Track it</a></p>
  <button style="background:#1f5fd0; color:#fff; border:0; padding:8px 14px">Confirm</button>
</div>

In the second block, blue appears exactly twice and both times it means "you can act on this". A reader learns that in one screen without being told. Restraint is what gives a colour meaning — the fewer things wear it, the more it says.

How many colours you actually need

One accent. The thing to act on. If you have two, a reader has to learn which is more important, and they will not.
Three states. Success, warning, danger. These are conventional and you should not be inventive with them.
Three or four neutrals. Page, panel, border, text. Most of a good interface is neutral, which is why beginners find real palettes disappointing.

Try it live / جرّب بنفسك

<h1>Colour audit</h1>

<table>
  <tr><th>Colour</th><th>Jobs it does</th><th>Should it?</th></tr>
  <tr><td></td><td></td><td></td></tr>
</table>

<h2>Rebuilt</h2>
<div style="font-family:system-ui; max-width:360px"></div>

Preview / المعاينة

Check yourself / اختبر نفسك

1. Why name a colour "accent" rather than "blue-600"?

2. A page uses its accent colour for headings, links, buttons and an info box. What is the effect?

3. Why is red-for-error and green-for-success dangerous as the only signal?

Your task / مهمتك

Take a screen you have built or found and audit its colours: list every distinct colour, the jobs it is doing, and whether any colour is doing more than one. Then rebuild it with one accent used for one job.

خذ شاشة بنيتها أو وجدتها ودقّق ألوانها: اسرد كل لون مميز، والأعمال التي يؤديها، وهل يؤدي أي لون أكثر من عمل. ثم أعد بناءها بلون تمييز واحد لعمل واحد.

A table of every colour and every job it is currently doing جدول بكل لون وكل عمل يؤديه حاليًا
The rebuild uses the accent for one job only إعادة البناء تستخدم لون التمييز لعمل واحد فقط
No state is signalled by colour alone لا حالة يُشار إليها باللون وحده