ডিজাইন সিস্টেম বানানোর আগে যে ভুলগুলো এড়ানো দরকার

একটা ডিজাইন সিস্টেম হয় তার প্রথম রিব্র্যান্ড পার করে, নয়তো পারে না। বেশিরভাগ পারে না — আর কারণটা প্রায় সবসময় একই: সিস্টেমে দুইটা লেয়ার আছে, যেখানে দরকার ছিল তিনটা।

দুই-লেয়ারের ফাঁদ

প্রায় প্রতিটা টোকেন সিস্টেম এইভাবে শুরু হয়। একটা প্যালেট, আর কম্পোনেন্ট যেগুলো সেটা ব্যবহার করে।

:root {
  --blue-500: #00d4ff;
  --gray-900: #18181b;
}

.card {
  background: var(--gray-900);
  border-color: var(--gray-800);
}

.button-primary {
  background: var(--blue-500);
}

দেখতে পরিষ্কার। ছয় মাস ভালোই চলে। তারপর ব্র্যান্ড বদলায় — নীল থেকে সবুজ — আর তখন বোঝা যায় --blue-500 নামটাই সমস্যা। এখন হয় সবুজ রঙ একটা blue নামের ভেরিয়েবলে রাখতে হবে, নয়তো কোডবেসে ৪০০টা জায়গায় খুঁজে বদলাতে হবে।

আরও খারাপ ব্যাপারটা হলো ডার্ক মোড। --gray-900 ডার্ক থিমে ব্যাকগ্রাউন্ড, লাইট থিমে টেক্সট। একই টোকেন, দুইটা উল্টো ভূমিকা। কম্পোনেন্ট যখন সরাসরি প্যালেট ছোঁয়, তখন প্রতিটা কম্পোনেন্টকে জানতে হয় থিম কী — আর সেটাই সিস্টেমটার মৃত্যু।

তৃতীয় লেয়ারটা: ভূমিকা

মাঝখানে যা দরকার, সেটা রঙ নয় — ভূমিকা।

/* লেয়ার ১ — প্রিমিটিভ। কোনো প্রোডাক্ট-অর্থ নেই। */
:root {
  --cyan-400: #22d3ee;
  --cyan-600: #0891b2;
  --zinc-50: #fafafa;
  --zinc-900: #18181b;
}

/* লেয়ার ২ — সিমান্টিক। থিম অনুযায়ী বদলায়। */
:root {
  --surface: var(--zinc-50);
  --foreground: var(--zinc-900);
  --primary: var(--cyan-600);
}

[data-theme='dark'] {
  --surface: var(--zinc-900);
  --foreground: var(--zinc-50);
  --primary: var(--cyan-400);
}

খেয়াল করুন --primary দুই থিমে আলাদা hex। এটা ভুল নয়, এটাই মূল কথা। ডার্ক মোডের উজ্জ্বল সায়ান সাদা ব্যাকগ্রাউন্ডে কনট্রাস্ট পরীক্ষায় ফেল করে। "একটা ব্র্যান্ড কালার সব জায়গায়" — এই ধারণাটাই অ্যাক্সেসিবিলিটির সাথে সাংঘর্ষিক।

কম্পোনেন্ট এখন শুধু ভূমিকা ব্যবহার করে:

.card {
  background: var(--surface);
  color: var(--foreground);
}

রিব্র্যান্ড এখন লেয়ার দুইয়ের একটা এডিট। কম্পোনেন্ট একটাও ছুঁতে হয় না।

ভুল ১ — টোকেনের নাম রঙ দিয়ে রাখা

--brand-blue একটা টাইম বোমা। --primary নয়।

নিয়মটা সহজ: টোকেনের নামে যদি এমন কিছু থাকে যা রিব্র্যান্ডে মিথ্যা হয়ে যেতে পারে, নামটা ভুল। blue, large, top-nav — সবগুলোই কোনো না কোনো দিন মিথ্যা হয়।

ভুল ২ — বিল্ড টাইমে রিজলভ করা

Tailwind v4-এ এইটা নিঃশব্দে কামড় দেয়।

/* ভুল — টগল কাজ করা বন্ধ করে দেয় */
@theme {
  --color-surface: var(--surface);
}

/* ঠিক */
@theme inline {
  --color-surface: var(--surface);
}

সাধারণ @theme ব্লক মানটা বিল্ড টাইমে রিজলভ করে ফেলে — অর্থাৎ bg-surface কম্পাইল হয়ে একটা fixed hex-এ পরিণত হয়। থিম অ্যাট্রিবিউট বদলালে ভেরিয়েবল বদলায়, কিন্তু ক্লাসটা আর ভেরিয়েবল পড়ছেই না। inline কি-ওয়ার্ডটা রেফারেন্সটা রানটাইম পর্যন্ত টিকিয়ে রাখে।

লক্ষণটা বিভ্রান্তিকর: থিম টগল "কাজ করে না", অথচ ভেরিয়েবলগুলো DevTools-এ ঠিকঠাক বদলাচ্ছে।

ভুল ৩ — অনেক বেশি টোকেন

একটা সিস্টেমে ২০০টা স্পেসিং টোকেন থাকলে সেটা সিস্টেম নয়, সেটা একটা অভিধান। কেউ মুখস্থ করবে না, সবাই কাছাকাছি একটা বেছে নেবে, আর ফলাফল হবে ইনকনসিস্টেন্সি — ঠিক যেটা ঠেকাতে সিস্টেমটা বানানো।

কম টোকেন, কড়া নিয়ম। যদি একটা মান বছরে একবার লাগে, সেটা টোকেন নয় — সেটা ওই এক জায়গার একটা মান।

ভুল ৪ — কম্পোনেন্ট API-টা লিখে না রাখা

টোকেন ঠিক থাকলেও কম্পোনেন্ট যদি যা খুশি ক্লাস নেয়, সিস্টেমটা ফাঁকা। প্রতিটা ভ্যারিয়েন্ট এক জায়গায় ঘোষিত থাকা দরকার:

const button = tv({
  base: 'inline-flex items-center justify-center rounded-lg',
  variants: {
    variant: {
      primary: 'bg-primary text-on-primary',
      ghost: 'bg-transparent hover:bg-surface-hover',
    },
    size: { sm: 'h-8 px-3', md: 'h-10 px-4' },
  },
})

টেবিলে না থাকলে ভ্যারিয়েন্টটা নেই। এটাই একমাত্র নিয়ম যেটা সিস্টেমকে দুই বছর পরেও সিস্টেম রাখে।

যাচাই করার উপায়

সিস্টেমটা টিকবে কি না, তার একটাই সৎ পরীক্ষা: প্রাইমারি রঙটা বদলে দিন।

একটা ফাইলে একটা লাইন বদলে যদি পুরো প্রোডাক্ট বদলে যায় — দুই থিমেই, কনট্রাস্ট ভেঙে না গিয়ে — তাহলে তিনটা লেয়ার ঠিক আছে। যদি খুঁজে খুঁজে বদলাতে হয়, তাহলে এখনো দুইটা লেয়ার, আর প্রথম রিব্র্যান্ডেই এটা ভাঙবে।

এই পরীক্ষাটা করতে এক দিন লাগে। রিব্র্যান্ডের পর করতে হলে এক কোয়ার্টার লাগে।