Lesson 16 / الدرس 16

Project: build a small system / مشروع: ابنِ نظامًا صغيرًا

Everything in both design courses, applied to one small product: tokens, four components with their states, documentation someone can use in ten seconds, and a handover a developer could build from without asking you anything.

كل ما في دورتَي التصميم، مطبَّقًا على منتج صغير واحد: رموز، وأربعة مكوّنات بحالاتها، وتوثيق يستطيع أحدهم استخدامه في عشر ثوانٍ، وتسليم يستطيع مطوّر البناء منه دون أن يسألك شيئًا.

Choose something small and real: a booking form, a course listing, a simple dashboard. Four or five screens at most. The size is the constraint that makes this possible — a system for a large product cannot be built in an exercise, and one for four screens teaches every idea in both courses.

What to hand in

The tokens, in three layers, with a measured contrast ratio beside every semantic colour, in a light theme and a dark one.
Four components, each with every state drawn and labelled, including focus, and each working at 320px and wide.
A documentation page for each, readable in ten seconds, with the "use something else when" line directly under the description.
One handover, naming tokens rather than values, answering the seven questions, and stating at least one open assumption.
Both directions. Every component shown with dir="rtl" as well, because this is the piece of work that proves you can build for the audience this site has.

What is being assessed

Not how many components you built. Four components that are genuinely consistent with each other, fully specified and documented, are worth far more than twelve that are not — because the whole argument of this course is that a system is about decisions being findable and reusable, and twelve half-finished components demonstrate the opposite of that.

<div style="font-family:ui-monospace,monospace; font-size:13px; line-height:1.9">
<p><strong>A shape for the deliverable</strong></p>
<pre style="margin:0">
  1  The product      what it is, four or five screens
  2  Tokens           primitives / semantic / component, both themes,
                      contrast ratios recorded
  3  Components       4, every state, 320px and wide, LTR and RTL
  4  Documentation    one page each, ten seconds to read
  5  Handover         one component, seven questions, tokens named
  6  Exceptions       anything you broke on purpose, with scope
</pre>
</div>

Section 6 is the one that tells a reviewer most. An exceptions list that is empty means the system was never tested against a real problem; one with two considered entries means it was.

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

<h1>A small design system &mdash; <em>(product)</em></h1>

<h2>1. The product</h2>
<p></p>

<h2>2. Tokens</h2>
<pre></pre>

<h2>3. Components</h2>
<div></div>

<h2>4. Documentation</h2>
<div></div>

<h2>5. Handover</h2>
<div></div>

<h2>6. Exceptions</h2>
<div></div>

Preview / المعاينة

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

1. Why build the tokens before the components?

2. What does an empty exceptions list suggest?

3. Four fully specified components or twelve partial ones — which is the better submission?

Your task / مهمتك

The project. Build a small design system for a real product of four or five screens: tokens in three layers with contrast ratios, four fully specified components with all states in both directions, a documentation page for each, one handover, and an exceptions list.

المشروع. ابنِ نظام تصميم صغيرًا لمنتج حقيقي من أربع أو خمس شاشات: رموزًا في ثلاث طبقات بنسب تباين، وأربعة مكوّنات موصَّفة تمامًا بكل حالاتها في الاتجاهين، وصفحة توثيق لكلٍّ، وتسليمًا واحدًا، وقائمة استثناءات.

Tokens in three layers, both themes, contrast ratios recorded رموز في ثلاث طبقات، والسمتان، ونسب التباين مسجَّلة
Four components with every state, at 320px and wide, in both directions أربعة مكوّنات بكل حالة، عند 320 بكسل وعريضًا، في الاتجاهين
A ten-second documentation page for each, with the "use something else" line صفحة توثيق من عشر ثوانٍ لكلٍّ، وفيها سطر «استخدم غيره»
A handover naming tokens, and an exceptions list with scope تسليم يسمّي الرموز، وقائمة استثناءات بنطاق