The Brand Studio

#/start-এ থাকা Brand Studio হলো একমাত্র জায়গা যেখানে আপনি আপনার ব্র্যান্ড গড়ে তোলেন - এর লোগো, রং, টাইপ, আপনার বাকি টোকেন এবং এটি যেসব ফাইল রাখে। এখানে একবার সেট করুন আর প্রতিটি টুল, পেজ ও এক্সপোর্ট নির্মাণগতভাবেই তা অনুসরণ করবে, কোনো রিভিউয়ের মাধ্যমে নয়।

আপনি পরিবর্তন করার সাথে সাথেই সেগুলো পুরো অ্যাপ জুড়ে লাইভ প্রিভিউ হয়, যাতে কমিট করার আগেই একটি রং বা ফন্ট সবখানে কেমন দেখায় তা দেখতে পারেন। সবকিছু অন-ডিভাইস: আপনার ব্র্যান্ড ফাইল এবং টোকেন কখনও আপনার মেশিন ছেড়ে যায় না (একটি Google Font বেছে নিলে, সম্মতি ডায়ালগের পর একবার Google থেকে সেই একটি ফ্যামিলি আনা হয়), এবং ব্র্যান্ডটি একটি একক brand pack ফাইলে ভ্রমণ করে।

এটি এডিটর। ড্যাশবোর্ড হলো আয়না। ড্যাশবোর্ডের (#/d) Design system ট্যাব আপনার ব্র্যান্ড read-only দেখায়; আপনি এটি এখানে #/start-এ এডিট করেন। পরে কোনো রং পরিবর্তন করতে চাইলে Brand Studio-তে ফিরে আসুন।

রুমগুলো

স্টুডিওটি পাশের একটি রেলে তালিকাভুক্ত rooms-এর একটি সেট - কোনো ধাপ নয়। এখানে কিছুই সংখ্যায়িত নয়, কোনোকিছুই অন্য কিছুর ওপর নির্ভরশীল নয়, এবং এদের যেকোনোটিতে গিয়ে পৌঁছানোই বৈধ:

• Overview - কেন্দ্রবিন্দু। এই মুহূর্তে কী আছে, এক নজরে, প্রতিটি room-এর দরজাসহ।
• Colours - একে একে রং যোগ করুন, roles বরাদ্দ করুন অথবা একটি রং থেকে সম্পূর্ণ palette তৈরি করুন।
• Type - চারটি ফেস যা অ্যাপ, টুল এবং প্রতিটি এক্সপোর্ট পড়ে।
• Logos - আপনার মার্ক, প্রতিটি orientation এবং treatment-এ।
• Tokens - corner radius, spacing, shadows এবং সিস্টেমের বাকি অংশ।
• Files - ছবি, অডিও এবং মোশন ফাইল যা আপনার ব্র্যান্ড রাখে।

ফোনে একই তালিকা হেডারের নিচে পিন করা একটি অনুভূমিক chip strip হয়ে যায়। room পাল্টালে কিছুই রিলোড হয় না - এডিটর তার সব প্যানেল মাউন্ট করেই রাখে এবং শুধু আপনি যেটি চেয়েছেন সেটি দেখায়।

#/start?area=<key> দিয়ে একটি room deep-link করুন। কীগুলো হলো overview, color (URL-এ US বানান লক্ষ্য করুন), type, logos, tokens, catalogue (Files room - panel key একটি স্থায়ী চুক্তি, তাই URL পুরনো নামই রাখে) এবং versions। ?tab= একই জিনিসের দীর্ঘদিনের alias এবং এখনও কাজ করে, তাই পুরনো লিংক ও বুকমার্ক কার্যকর থাকে; অচেনা কিছু হলে dead-end না হয়ে Overview খোলে।

রেলের নিচের অংশে পিন করা আছে সেই অ্যাকশনগুলো যা একটিমাত্র room-এর নয়, বরং পুরো design system-এর:

• Add from… - সোর্স পিকার, কোনো ফাইল, PDF, ছবি, ফন্ট বা ওয়েবসাইট থেকে ব্র্যান্ড আনার জন্য। নিচে দেখুন একটি ব্র্যান্ড আনুন।
• Tray - যেসব প্রার্থী কোনো স্ক্যান খুঁজে পেয়েছে কিন্তু এখনো কমিট করেনি। যতক্ষণ না কোনো স্ক্যান আসলেই কিছু রাখে ততক্ষণ এটা লুকানো থাকে, আর তখন একটা কাউন্ট দেখায়; এতে কিছুই আপনার ব্র্যান্ডকে বদলায় না যতক্ষণ না আপনি সেই row-এ Add চাপেন।
• Export - পুরো design system-কে একটি LollyBrand-….lolly হিসেবে লেখে।
• Tokens (.json) - সাদামাটা design-tokens ডকুমেন্ট একা, কোনো রেপো, বিল্ড স্টেপ বা অন্য কোনো tokens টুলের জন্য।
• Restore brand settings - কোনো ইমপোর্ট বা ব্র্যান্ড সেটিংসের বদলের আগে সেভ করা একটি চেকপয়েন্টে ফিরে যান।
• Versions - design system-এর নাম দেওয়া কপি পাবলিশ, অ্যাকটিভেট আর রিস্টোর করুন। যতক্ষণ না পাবলিশ করার মতো আপনার নিজের কিছু থাকে (বা কোনো ?area=versions লিংক নাম ধরে এটা চায়) ততক্ষণ লুকানো থাকে।

signed by Lolly2026-10-21vector SVG১৮ paths~1.2k nodes৪০ groups২০ KBনিজেই যাচাই করুনস্বাক্ষরিত ফাইলটি নিন signed by Lolly2026-10-21vector SVG১৮ paths~1.2k nodes৪০ groups২০ KBনিজেই যাচাই করুনস্বাক্ষরিত ফাইলটি নিনTry it in the app

Overview

Overview হলো প্রথম room, আর এর দুটি দিক আছে।

এখনো কিছু বেছে নেওয়া হয়নি থাকলে এটা বলে নিজের মতো করে নিন। Start from a reference কোনো লোগো, স্ক্রিনশট, ওয়েব পাতা বা ডিজাইন ফাইলের জন্য সোর্স পিকার খোলে। একটি রং বেছে নিন, একটি ফেস বেছে নিন আর একটি লোগো যোগ করুন সরাসরি তাদের বিদ্যমান কন্ট্রোল খোলে। প্রতিটি পথ একটি সিদ্ধান্ত দিয়ে শুরু হয়; একটা খোলা মানে কিছু লেখা নয়। টুলগুলো দেখুন সাথে সাথেই পাওয়া যায়।

একবার যেকোনো কিছু আপনার নিজের হয়ে গেলে, একই room দেখায় আপনার কাছে কী আছে, আপনার বানানো count-গুলো সামনে রেখে। Colours বলে দেয় design system কতগুলো রং বহন করছে, আর একটি ম্লান · N starter তখনই যোগ করে যখন দেখানোর মতো ইনহেরিটেড রং থাকে; তার পাশের স্ট্রিপ প্রথমে আপনার বেছে নেওয়া রংগুলো রাখে, তারপর একটা হেয়ারলাইন আর তার পর ম্লান starter রংগুলো। Type ভূমিকা অনুযায়ী পড়ে (হেডিংয়ের জন্য Inter, তার নিচে বাকিদের জন্য Starter · SUSE, SUSE Mono)। Logos বলে দেয় কতগুলো স্লট ভরা, বা সেট করা নেই। Tokens corner radius বহন করে, যতক্ষণ না আপনি সরান ততক্ষণ starter ট্যাগ করা। Files বলে এখনও কিছু নেই যতক্ষণ লাইব্রেরি খালি। প্রতিটি ব্লক তার room-এর একটি দরজা। এখানে count আছে, কখনও প্রোগ্রেস বার নয় আর কখনও finish কার্ড নয় - এই স্টুডিওতে কিছুই বকেয়া নেই।

Logos

শুরু করুন আপনার মার্কের ফোল্ডার উপরের drop zone-এ খালি করে দিয়ে: "Drop marks here, or choose several at once" একবারেই যত ফাইল আছে সব নেয়। প্রতিটি ফাইল তার আকার ও কালির জন্য পড়া হয়, তারপর Waiting for a slot-এর নিচে একটি chip হিসেবে সারিবদ্ধ হয় যা বলে সে কী মনে করছে - "Looks like the Horizontal primary", কোন মাপের ভিত্তিতে সে এটা ঠিক করেছে তাসহ, এবং একটি Place বোতাম (Replace, যেখানে সেই স্লট ইতিমধ্যে পূর্ণ)। যেখানে সে নিশ্চিত নয়, chip সেটা স্পষ্টভাবে বলে এবং বদলে Change slot অফার করে, যাতে সব আটটি তালিকাভুক্ত থাকে। আপনি কিছু না চাপা পর্যন্ত কিছুই বসানো হয় না।

সেই কিউকে ঘিরে দুটি জিনিস ঘটে। অতিরিক্ত খালি মার্জিনসহ একটি মার্ক প্রথমে একটি trim offer পায় - এর উত্তর দিন অথবা Escape চাপুন, তাহলে মূল ফাইলটি অপরিবর্তিতভাবে যোগ হয়ে যাবে। এবং যেখানে একটি মার্ক একটি খালি sibling স্লট পূরণ করতে পারে, সেখানে room নিজস্ব chip হিসেবে ডেরাইভড mono বা reverse ভার্সন অফার করে, Generated চিহ্নিত, যা আপনি অন্যভাবে সেই স্লট পূরণ করলে আবার অদৃশ্য হয়ে যায়।

তার নিচে থাকে সেই গ্রিড যেখানে প্রতিটি মার্ক শেষমেশ যায় - orientation × treatment স্লট:

• Orientations: Horizontal (একই সারিতে wordmark + symbol) এবং Vertical (স্তূপাকার, বর্গাকার ও লম্বা স্পেসের জন্য)।
• Treatments: Primary, Primary reverse (dark background-এর জন্য), Mono (একটি রং) এবং Mono reverse।

এটি আটটি ঐচ্ছিক স্লট। একটি PNG, SVG, JPEG বা WebP যোগ করতে একটি স্লটে ক্লিক করুন; একটি পূর্ণ স্লট বদলাতে সেটিতে ক্লিক করুন। প্রতিটি স্লট ঐচ্ছিক এবং সবকিছু এই ডিভাইসেই থাকে।

signed by Lolly2026-10-23vector SVG৩২ paths~12k nodes৬৯ groups১২৩ KBনিজেই যাচাই করুনস্বাক্ষরিত ফাইলটি নিন signed by Lolly2026-10-23vector SVG৩২ paths~12k nodes৬৯ groups১২৩ KBনিজেই যাচাই করুনস্বাক্ষরিত ফাইলটি নিন

• কাস্টম মার্ক - আপনার ব্র্যান্ড নিজের নামে যে মার্ক ডাকে (একটি আইকন, একটি ক্রেস্ট, একটি favicon) কাস্টম মার্ক-এর অধীনে যোগ করুন; একে নাম দিন আর একটা ফাইল বেছে নিন।
• More identities - কোনো সাব-ব্র্যান্ড, প্রোডাক্ট বা ইভেন্টের নিজস্ব সম্পূর্ণ লোগো সেট থাকতে পারে। + আরেকটি লোগো যোগ করুন ব্যবহার করুন আর একে নাম দিন; আপনার প্রধান সেটটি স্রেফ "Your logo"।
• একটি SVG আপলোড করুন আর Lolly এর রংগুলো পড়ে নেবে। একেবারে নতুন ইনস্টলে এটা চুপচাপ লোগো থেকে আপনার প্রাইমারি রং সেট করে দেয় আর তা জানায়। একটা বিদ্যমান ব্র্যান্ডে এটা বদলে রংটাকে একটা পরামর্শ হিসেবে অফার করে - "Found in the logo: #…" সাথে একটি প্রধান হিসেবে ব্যবহার করুন বোতাম পাশে - Colours room-এ, যেখানে আপনি সেটা গ্রহণ বা বাতিল করতে পারেন।

Colours

এই room design system-এর সাথে সাথে বড় হয়। যা এখনো আপনার লাগেনি তা পাতায় নেই, তাই প্রথম ভিজিট একটাই সিদ্ধান্ত আর বাকি সব palette-এর সাথে সাথে আসে।

প্রথম রং

যে design system-এর নিজের কোনো রং নেই তা একটা কেন্দ্রের কলামে খোলে: একটি রং দিয়ে শুরু করুন, একটা বড় লাইভ চিপ, একটা ফিল্ড, আর একটা শান্ত লাইন যা বলে দেয় roles, shades আর প্রিন্ট সেটিংস সিস্টেম বড় হওয়ার সাথে সাথে আসে।

• চিপটাই পিকার। এটা চাপুন আর স্টুডিওর নিজস্ব OKLCH কার্ড চিপের উপর খোলে, ফিল্ডে যা কিছু আছে তা দিয়ে সিড করা: একটা নাম, চাকা, চারটা ডায়াল, alpha আর যেভাবে সংরক্ষিত, নিচে বাতিল করুন আর রং যোগ করুন-সহ। কোনো ডায়াল টেনে নেওয়া চিপকে রং করে দেয় আর সাথে সাথে ফিল্ডকে আবার লেখে, আর যতক্ষণ না আপনি রং যোগ করুন চাপেন ততক্ষণ কিছুই design system-এ পৌঁছায় না।
• ফিল্ড যেকোনো নোটেশন নেয় - #e0452b, rgb(224 69 43), oklch(58% .19 32) বা একটা সাধারণ রঙের নাম - আর রঙের একটা সম্পূর্ণ তালিকা চিপের একটা সারি হয়ে যায় যা আপনি একে একে যোগ করেন।
• এর পাশে আরও দুটো দরজা আছে। আইড্রপার (যে ব্রাউজারে আছে) স্ক্রিন থেকে একটা রং তুলে নেয়, আর একটি ছবি থেকে এই ডিভাইসের কোনো স্ক্রিনশট বা ছবি পড়ে আর তাতে পাওয়া রংগুলো দেখায়।
• Add কখনো নিষ্ক্রিয় থাকে না। ফিল্ডে পড়ার মতো কিছু না থাকলে এটা পিকার খুলে দেয়, যা একটা খালি প্রেসের মানে সাধারণত এটাই; যে টেক্সট এটা পড়তে পারে না তার জন্য ফিল্ডের নিচে একটা লাইন তা বলে দেয়, একটা মৃত বোতামের বদলে।

প্রথম রংটি প্রাইমারি হয়ে যায়, আর যে চিপ সেই যোগের উত্তর দেয় তা তা বলে দেয় - "Primary is now Vivid Violet" - পাশে ফাইন-টিউন-সহ।

signed by Lolly2026-10-21vector SVG১৬৭ paths~11k nodes২৪৩ groups১ image১৯১ KBনিজেই যাচাই করুনস্বাক্ষরিত ফাইলটি নিন signed by Lolly2026-10-21vector SVG১৬৭ paths~11k nodes২৪৩ groups১ image১৯১ KBনিজেই যাচাই করুনস্বাক্ষরিত ফাইলটি নিন

স্টার্টার

স্টার্টার শব্দটা এমন যেকোনো কিছুর জন্য যা বেছে নেওয়ার বদলে অ্যাপের সাথে এসেছে। একটা নতুন ইনস্টলে একদম কোনো রং থাকে না: তার কাছে শুধু একটা নিউট্রাল র্যাম্প থাকে, কালি থেকে কাগজ পর্যন্ত, যাতে কেউ কিছু ঠিক করার আগেই সারফেস, টেক্সট আর হেয়ারলাইন রেন্ডার হতে পারে। সেই নিউট্রালগুলো স্ক্যাফোল্ডিং, তাই সেগুলোকে রং হিসেবে গোনা হয় না আর palette প্যানেলে আঁকা হয় না। সেগুলো Tokens room-এ নিউট্রাল · স্টার্টার · 9 হিসেবে থাকে, একটা খুলুন-সহ যা সেগুলোকে Colours প্যানেলে একটা ভাঁজ করা, ট্যাগ করা group হিসেবে দেখায় (#/start?area=color&group=neutral)।

একই শব্দ প্রতিটি room-এ চলে: কোনো starter রঙের উপর দাঁড়ানো কোনো role পড়ে "Starter Paper stands in" আর এর পিকার দেয় বেছে নিন…; কোনো starter face একটা স্টার্টার ট্যাগ পরে আর কোনো টিন্ট নয়; কোনো starter corner radius Overview-তে ট্যাগ করা থাকে। ইনহেরিটেড ম্যাটেরিয়াল কখনো ড্যাশড বর্ডার দিয়ে আঁকা হয় না, কারণ এখানে ড্যাশড বর্ডার মানে একটা ড্রপ টার্গেট।

palette বড় হওয়ার সাথে সাথে

আপনার রংগুলো একটা চওড়া স্ক্রিনে কনটেক্সটে প্রিভিউয়ের পাশে থাকে আর ছোট স্ক্রিনে তার উপরে স্ট্যাক হয়। প্রিভিউ আপনার palette ব্যবহার করে একটা পোস্টার, চার্ট বা ইন্টারফেস কার্ড দেখাতে পারে। Starter রংগুলো নিজেদের ভাঁজ করা যায় এমন group-এ থাকে, আপনার যোগ করা রং থেকে আলাদা।

আলাদা আলাদা রং বা shade-এর একটা সেট যোগ করুন, তাদের role ঠিক করুন, আর দরকার হলে অ্যাডভান্সড সেকশন খুলুন। রঙের চার্ট, gradient আর ডাউনলোড কন্ট্রোল palette-এর সাথেই থাকে।

signed by Lolly2026-10-21vector SVG১৭১ paths~12k nodes২৪৫ groups১ image১৯৮ KBনিজেই যাচাই করুনস্বাক্ষরিত ফাইলটি নিন signed by Lolly2026-10-21vector SVG১৭১ paths~12k nodes২৪৫ groups১ image১৯৮ KBনিজেই যাচাই করুনস্বাক্ষরিত ফাইলটি নিন

Roles - টুল কী পড়ে

Roles হলো সোয়াচের উপরের স্তর: প্রতিটি টুল আর এক্সপোর্টে কোন রং কোন অংশ পালন করে। Role ঐচ্ছিক (তিনটে আলগা রং আর কোনো role ছাড়া একটা design system-ও একদম ঠিক আছে), যেকোনো সোয়াচ একটা role নিতে পারে আর কনট্রাস্ট রিডআউট সারফেসের বিপরীতে মাপা হয়, প্রথমে APCA দিয়ে।

একটা সারি তিনটে রেজিস্টারের একটাতে পড়ে, যাতে স্ট্রিপ কখনো এমন সিদ্ধান্তের দাবি না করে যা কেউ করেনি:

• পুরো শক্তিতে সেই role পালন করা একটা নিজস্ব রং;
• *Starter Paper stands in - মিউটেড, এর পিকারে বেছে নিন…*-সহ;
• ↳ follows Primary - এই role নিজের কোনো রঙের বদলে প্রাইমারির মাধ্যমেই ঠিক হয়।

একবার palette-এ shade চলে এলে, স্ট্রিপ বেড়ে সেই সাতটা স্লটে পৌঁছায় যা কোনো টুল পড়তে পারে: প্রাইমারি, সেকেন্ডারি, সারফেস, টেক্সট, মিউট করা, প্রান্ত আর প্রাইমারির উপর। প্রাইমারির উপর প্রাইমারি থেকে উদ্ভূত, উদ্ভূত পড়ে আর এর কোনো পিকার থাকে না।

অ্যাপের নিজস্ব accent একটা পছন্দ, কোনো টোকেন নয়। ডিফল্টভাবে ইন্টারফেস design system অনুসরণ করে আর chrome accent প্রাইমারি রং নিয়ে নেয়। এটা আপনার প্রোফাইলে একটা Appearance সেটিং - ইন্টারফেস ডিজাইন সিস্টেম অনুসরণ করে - আর এটা বন্ধ করলে chrome নিউট্রাল থেকে যায়। টুল, ক্যানভাস আর এক্সপোর্ট দুই অবস্থাতেই অপ্রভাবিত থাকে, আর ফন্ট ও corner radius design system অনুসরণ করে সেটিংটা চালু বা বন্ধ যাই থাকুক না কেন।

এক্সপার্ট উইং

কম্পোজিশন প্রিভিউ আর রঙের role-এর নিচে চারটা ভাঁজ করা সেকশন আছে। যেটা চান খুলুন; প্রতিটি #/start?area=color&focus=<wing> হিসেবে ডিপ-লিংক করা যায়, যা room অন্য যা-ই দেখাক না কেন সেটা খুলে দেয়:

• Explore shades & harmonies (focus=generate) - একটা রং থেকে shade-এর সম্পূর্ণ সেট। নিচে বর্ণনা করা হয়েছে।
• শেড কার্ভ (focus=curves) - র্যাম্পকে পয়েন্ট-বাই-পয়েন্ট আবার আকার দিন। Lightness, chroma আর hue-এর প্রতিটির নিজস্ব কার্ভ থাকে, L / C / H দিয়ে বদলানো, আর নিচের shade-গুলো আপনি টানার সাথে সাথে লাইভ আবার বেক হয়।
• কনট্রাস্ট (focus=contrast) - কনট্রাস্ট-লক আপনার বেছে নেওয়া ব্যাকগ্রাউন্ডের বিপরীতে APCA টার্গেট পেতে একটা র্যাম্পকে আবার টোন করে, প্রতিটি step নিজের hue ও chroma রেখে; হিউ ঘোরান পুরো র্যাম্পকে চাকার চারপাশে একসাথে ঘুরিয়ে দেয়, প্রতিটি shade নিজের lightness ও chroma রেখে।
• প্রিন্ট (focus=print) - প্রেসে প্রাইমারি কী হয়ে যায়: এর স্বয়ংক্রিয় স্ক্রিন ভ্যালু, বা এর বদলে একটা পিন করা CMYK বিল্ড বা একটা নাম দেওয়া spot ink।

একটি রং, একটি সম্পূর্ণ প্যালেট

Explore shades & harmonies-এর ভেতরে, একটা Starting colour বেছে নিন। Lolly ইঞ্জিন অন্য জায়গায় যে একই perceptual রং গণিত (OKLCH) ব্যবহার করে সেটা দিয়ে মিলে যাওয়া shade সাজেস্ট করে। সাজেশনগুলো টিউন করুন:

• স্কিম - Mono, Complement, Analogous বা Triad - ঠিক করে সেকেন্ডারি রং প্রাইমারির সাথে কীভাবে সম্পর্কিত।
• শেড - 3 থেকে 20 পর্যন্ত একটা স্লাইডার (ডিফল্ট 5) ঠিক করে প্রতিটা র্যাম্প কত step বানায়।
• ফাইন-টিউন (ভাঁজ করা) - UI তীব্রতা (মিউট / গভীর), কনট্রাস্ট (স্বাচ্ছন্দ্য / উচ্চ) আর ব্র্যান্ডের উপর টেক্সট (অটো / লাইট / ডার্ক)।

Starting colour আর কন্ট্রোল বদলানো শুধু সাজেশনগুলোই বদলায়। সেই রং যোগ করতে কোনো shade-এ ক্লিক করুন, বা একটা group যোগ করতে Add 5 shades চাপুন (সংখ্যাটা আপনার Shades সেটিং অনুসরণ করে)। বিদ্যমান রং আর role নিজেদের জায়গায় থাকে। Undo এই যোগটা সরিয়ে দেয়।

প্রাইমারি, নিউট্রাল আর সেকেন্ডারি সারি সাজেস্ট করা shade দেখায়। লাইট আর ডার্ক উদাহরণ আর তাদের কনট্রাস্ট রিডিং দেখতে Theme preview খুলুন। সেখানে প্রস্তাবিত থিম অ্যাঙ্কর ঠিক করতে একটা Neutral বা Secondary step বেছে নিন। পুরো palette আবার বানানো নিচে একটা আলাদা, রিভিউ করা কাজ হিসেবে থেকে যায়।

signed by Lolly2026-10-21vector SVG২২ paths~1.9k nodes৪৯ groups২৭ KBনিজেই যাচাই করুনস্বাক্ষরিত ফাইলটি নিন signed by Lolly2026-10-21vector SVG২২ paths~1.9k nodes৪৯ groups২৭ KBনিজেই যাচাই করুনস্বাক্ষরিত ফাইলটি নিন

palette বানান (harmony generator)

Find matching colours-এ, harmony generator প্রাইমারি থেকে মিলে যাওয়া accent রং সাজেস্ট করে। একটা Harmony বেছে নিন - কমপ্লিমেন্টারি, অ্যাডজেসেন্ট, ট্রায়াড, টেট্রাড বা অ্যানালগাস (যা নিজের সাথে 2 থেকে 5 পর্যন্ত একটা Accents count আর 10° থেকে 45° পর্যন্ত একটা hue কোণ নিয়ে আসে) - আর প্রতিটা প্রার্থী একটা অটো-জেনারেটেড, পড়ার মতো নাম আর একটা + যোগ করুন বোতামসহ আসে। একটা যোগ করা মানে সেই রংটা তখনই palette-এ ঢুকে যাওয়া, এক প্রেসে এক টোকেন। কনটেক্সটে আপনার যোগ করা রংগুলোকে নমুনা কম্পোজিশনে প্রিভিউ করে।

signed by Lolly2026-10-21vector SVG৮ paths৯৩৬ nodes১৪ groups১৫ KBনিজেই যাচাই করুনস্বাক্ষরিত ফাইলটি নিন signed by Lolly2026-10-21vector SVG৮ paths৯৩৬ nodes১৪ groups১৫ KBনিজেই যাচাই করুনস্বাক্ষরিত ফাইলটি নিন

একটি জেনারেট করা প্যালেট কমিট করা

কোনো সাজেস্ট করা রং বা shade group যোগ করা আপনার বাকি palette-কে যেমন আছে তেমনই রাখে। সম্পূর্ণ প্রতিস্থাপনের জন্য, Rebuild the whole palette… খুলুন আর Preview full rebuild চাপুন। রিভিউটা বদলগুলো ব্যাখ্যা করে: কতগুলো role আপনার দেওয়া অবস্থাতেই থাকে, আপনার নিজে যোগ করা কতগুলো রং রাখা হয়, কতগুলো shade কার্ভ আবার অ্যাঙ্কর হয়, কতগুলো প্রিন্ট লক আবার পিন হয়, কতগুলো লুকানো shade লুকানো থাকে, কতগুলো gradient স্টপ নিজের রং রাখে।

সেই কার্ডে Apply rebuilt palette এটা কমিট করে; বাতিল করুন সরে যায় আর কিছু বদলায় না। এটা চলে যাওয়ার পর, কার্ডটা আগে থেকেই ফোকাস করা Undo-র সুযোগ দেয় - আর অদলবদলের আগেই পুরো design system-এর একটা চেকপয়েন্ট নেওয়া হয়, যাতে "এটা যেমন ছিল তেমন ফিরিয়ে দাও" একটা restore হয়, একটা হারানো বিকেল নয়।

প্যালেট, চার্ট এবং প্রতিটি সোয়াচ

palette design system-এর রংগুলোকে ভাঁজ করা যায় এমন group-এ তালিকাভুক্ত করে, প্রতিটার নিজস্ব + যোগ করুন কন্ট্রোলসহ। আপনার কাজ গুছিয়ে রাখতে group তৈরি করুন আর নাম বদলান। কোনো role কখনো দ্বিতীয় টাইল বানায় না: একটা টোকেন একটা টাইল, আর যে টাইলের দিকে কোনো role নির্দেশ করে সেটা তার বদলে একটা ছোট কর্নার মার্ক পরে (P, S, Su, T)। টাইলগুলোর নিচে, রঙের চার্ট একই সোয়াচের দুটো ভিউয়ে ভাঁজ খোলে: হুইল (OKLCH চাকা - কোনো ডট টেনে তাকে আবার রং করুন, কোনো ডটে ক্লিক করে এডিট করুন বা নতুন সোয়াচ ফেলতে খালি জায়গায় ক্লিক করুন) আর গ্যামাট চার্ট, যা দেখায় দেখানোর যোগ্য রেঞ্জ আসলে কোথায় শেষ হয়। #/start?area=color&focus=chart কার্ডটা সরাসরি খোলে, যেমন ?wheel সবসময় করে এসেছে।

signed by Lolly2026-10-21vector SVG১১৩ paths~9.3k nodes২৩১ groups১ image১৩৩ KBনিজেই যাচাই করুনস্বাক্ষরিত ফাইলটি নিন signed by Lolly2026-10-21vector SVG১১৩ paths~9.3k nodes২৩১ groups১ image১৩৩ KBনিজেই যাচাই করুনস্বাক্ষরিত ফাইলটি নিন

signed by Lolly2026-10-21vector SVG৫২৯ paths~4.9k nodes১৬১ groups১৪৯ KBনিজেই যাচাই করুনস্বাক্ষরিত ফাইলটি নিন signed by Lolly2026-10-21vector SVG৫২৯ paths~5.4k nodes১৬৫ groups১৭৪ KBনিজেই যাচাই করুনস্বাক্ষরিত ফাইলটি নিন

যেকোনো সোয়াচে ক্লিক করে এর এডিটর খুলুন:

• এটিকে Rename করুন।
• Set the colour - পিকারটি পারসেপচুয়াল OKLCH স্লাইডারে খোলে, সাথে Hex, HSL, RGB এবং CMYK মোড থাকে; ভ্যালু ফিল্ডটি যে স্পেস সক্রিয় থাকে সেটিতেই পড়ে এবং লেখে, তাই আপনি একটি হেক্স পেস্ট করতে পারেন বা ইঙ্ক শতাংশ টাইপ করতে পারেন। লক্ষ্য করুন CMYK প্রবেশ করালে কনভার্সনের মাধ্যমে স্ক্রিন রঙ সেট হয় - সঠিক ইঙ্ক পিন করতে নিচের প্রিন্ট লক ব্যবহার করুন।
• Stored as - সোয়াচটি কীভাবে সংরক্ষিত হবে তা বেছে নিন: LCH (ডিফল্ট - পারসেপচুয়াল, ওয়াইড-গ্যামাট, এডিটিংয়ের জন্য সেরা পছন্দ), Hex, RGB বা HSL। যখন আপনার একটি সঠিক লিগ্যাসি হেক্স পিন করা বা একটি sRGB মান মেলানো প্রয়োজন হয়, তখন এটি ওভাররাইড করুন।
• Use as - Roles প্যানেলে ফিরে না গিয়ে এই সোয়াচকে সরাসরি একটি ব্র্যান্ড রোল দিন। (একটি রোলের নিজস্ব টাইল এটি অফার করে না - একটি রোল অন্য রোল নিতে পারে না।)
• Print substitutes (ভাঁজ করা) - রঙের প্রিন্ট আচরণ লক করুন:
• CMYK - স্বয়ংক্রিয় sRGB→CMYK কনভার্সন ওভাররাইড করে সঠিক ইঙ্ক মান (C/M/Y/K, 0–100) বসাতে এটিকে Auto থেকে Locked-এ পরিবর্তন করুন।
• Spot colour - সোয়াচটিকে একটি স্পট রঙে লক করতে এটিকে None থেকে Set-এ পরিবর্তন করুন; এটিকে একটি Name দিন (যেমন PANTONE 186 C), একটি ঐচ্ছিক Book এবং একটি ঐচ্ছিক Finish (ডিফল্টে Ordinary ink) দিন, যখন ইঙ্কটি আদৌ ইঙ্ক নয় - একটি ফয়েল, একটি এমবস বা ডিবস, একটি স্পট ভার্নিশ, একটি সফট টাচ বা একটি ডাই কাট, ক্রিজ বা পারফোরেশন।
• In other spaces (ভাঁজ করা) - একই ধারণার বিস্তৃত রূপ: প্রতিটি সারি এমন একটি স্পেস যেখানে এই সোয়াচটি প্রকাশ করা যায়, হয় ক্যানোনিকাল মান থেকে উদ্ভূত অথবা আপনার দ্বারা রচিত, এবং এক্সপোর্টের সময় রচিত মানটিই জয়ী হয়।

এই প্রিন্ট লকগুলোই একটি প্রেস ব্যবহার করে যখন আপনি একটি CMYK PDF বা TIFF এক্সপোর্ট করেন - দেখুন Exporting।

একটি সোয়াচ ডিলিট করা নিরাপদ: উদ্ভূত র‍্যাম্প স্টেপ এবং থিম রোলগুলো লুকিয়ে রাখা হয় (অন্তর্নিহিত টোকেন রিজলভ করতে থাকে, তাই ডাউনস্ট্রিমে কিছু ভাঙে না), যখন আপনি নিজে যোগ করা রঙগুলো সম্পূর্ণভাবে সরিয়ে ফেলা হয়।

অনেক সোয়াচ নিয়ে কাজ করা

প্রতিটা সোয়াচের নিজস্ব আলাদা ড্র্যাগ হ্যান্ডেল আছে। এর group-এর ভেতরে রং পুনরায় সাজাতে টেনে নিন, বা এটা ফোকাস করুন, Space চাপুন, অ্যারো কী ব্যবহার করুন, আর ড্রপ করতে আবার Space চাপুন। Escape বাতিল করে দেয়। ক্রম স্টুডিও আবার খুললেও থেকে যায় আর তা undo করা যায়। রংগুলোকে group-এর মধ্যে সরাতে, সোয়াচ এডিটরের গ্রুপ কন্ট্রোল ব্যবহার করুন বা কয়েকটা রং বেছে সরান ব্যবহার করুন। টোকেন নাম আর role রেফারেন্স অক্ষত থাকে।

palette প্যানেলে সিলেকশন একটা জেসচার, কোনো মোড নয়। প্রথমে চাপার মতো কোনো বোতাম নেই, আর বারটা প্রথম বেছে নেওয়া টাইলের সাথে আসে আর শেষটার সাথে চলে যায়।

• প্যানেলের খালি জায়গায় ড্র্যাগ করুন একটা rectangle আঁকতে: এটা যে টাইলকে ছোঁয় সেটা সিলেকশনে যোগ হয়ে যায়, group-এর সীমানার পারেও। কোনো ভাঁজ করা সেকশন কিছু যোগ করে না, আর যে ড্র্যাগ কখনো নড়েই না তা সিলেকশন সাফ করে দেয়।
• Shift-ক্লিক রেঞ্জটা পড়ার ক্রমে নেয়; Cmd/Ctrl-ক্লিক একটা টাইল টগল করে; একটা সাধারণ ক্লিক তখনও সেই টাইলের এডিটর খুলে দেয়।
• প্রতিটা group হেডারে সব নির্বাচন করুন থাকে, আর কোনো টাইল ফোকাসে থাকলে Cmd-A design system-এর প্রতিটা রং নিয়ে নেয় - কখনো কোনো starter রং নয়।
• গ্রিডে একটাই ট্যাব স্টপ আছে। অ্যারো এতে চলে, Shift-অ্যারো সিলেকশন বাড়ায়, Space একটা টাইল টগল করে, Delete সিলেকশন সরায় আর Escape তা সাফ করে দেয়। (অ্যারো শুধু ফোকাস সরায়: কোনো চ্যানেল নাজ করতে, আগে l, c বা h চাপুন, যেমন রিডআউট বলে।)
• টাচ স্ক্রিনে কোনো rectangle নেই। সিলেকশন শুরু করতে কোনো টাইল চেপে ধরে রাখুন, তারপর যোগ করতে ট্যাপ করুন; group-প্রতি সব নির্বাচন করুন বাকিটা করে।

বারটা নিজেই পড়ে {n} নির্বাচিত, তারপর সরান (কোনো বিদ্যমান group, বা মেনুর ভেতরে আপনার নাম দেওয়া একটা নতুন), একটি ভূমিকা দিন (প্রতিটা বেছে নেওয়া রং পালা করে পরের role নেয়, তাই চারটা টাইল একটা প্রেসেই চারটা role ভরে দেয়), ডাউনলোড (ছয়টা palette ফরম্যাটের যেকোনো একটায় সিলেকশন), মান কপি করুন (প্রতিটা রঙের একটা লাইন তার সংরক্ষিত নোটেশনে) আর মুছুন। সরান আর একটি ভূমিকা দিন তখনই দেখা যায় যখন palette-এ ঘোরানোর মতো shade থাকে। একটা Ctrl/Cmd-Z একটা পুরো bulk কাজ undo করে দেয় - চল্লিশটার একটা move, একটা role walk, একটা delete - আর কোনো delete বলে দেয় সেটা কী রেখেছে, কারণ সিলেকশন এমন টাইলেও পৌঁছায় যা এই room সরায় না।

গ্রেডিয়েন্ট

একটা ঐচ্ছিক গ্রেডিয়েন্ট প্যানেল ব্যাকগ্রাউন্ড আর accent-এর জন্য palette থেকে ব্লেন্ড টোকেন বানায়। design system যদি গ্রেডিয়েন্ট না করে তাহলে এটা পুরোপুরি বাদ দিন। প্রতিটা গ্রেডিয়েন্টে একটা প্রিভিউ, নাম দেওয়া stop (2-8) আর একটা angle থাকে। মূল আচরণ: একটা stop কোনো সোয়াচকে রেফার করে, তাই সেই সোয়াচটা আবার রং করুন আর গ্রেডিয়েন্ট তা অনুসরণ করে। পরিষ্কার ব্লেন্ডের জন্য ইন্টারপোলেশন OKLCH-এ চলে। রানটা ছোট করতে কোনো stop ডিলিট করুন।

প্যালেট অন্য কোথাও নিয়ে যান

palette প্যানেলের নিচের কিনারায় আটকে থাকা ভাসমান pill পুরো palette-কে ডিজাইন টোকেন (JSON), CSS ভেরিয়েবল, CSS ক্লাস, SCSS ভেরিয়েবল, একটা GIMP প্যালেট (.gpl) বা একটা Adobe Swatch Exchange (.ase) হিসেবে ডাউনলোড করে - যাতে design system সরাসরি Illustrator, Figma, GIMP বা কোনো স্টাইলশিটে ঢুকে যায়। এটা প্যানেলের scroller-এর বাইরে বসে, তাই palette যতই স্ক্রল হোক এটা নিজের জায়গা ধরে রাখে, আর এটা তখন দেখা যায় যখন palette-এ shade থাকে। (আপনি palette-টা অ্যাসেট থেকেও ডাউনলোড করতে পারেন।)

টাইপ

এই room একই ভাবে বড় হয়। নিজের কোনো face ছাড়া এটা একটা কার্ড আর একটা সিদ্ধান্ত: প্রাইমারি, আজ যে face এটাকে সার্ভ করছে তাতেই reading সাইজে সেট, নামের পাশে একটা স্টার্টার ট্যাগ, একটা ভরা একটি ফেস বেছে নিন আর লাইনটা "Nothing installs until you choose one." কার্ডের নিচে "Headings, code and italic follow the primary until you choose them" বসে আছে, সাথে আলাদাভাবে বেছে নিন বাকি ভিজিটের জন্য বাকি তিনটে কার্ড দেখিয়ে দেয়।

signed by Lolly2026-10-21vector SVG৮৭ paths~9.9k nodes৯১ groups১৫১ KBনিজেই যাচাই করুনস্বাক্ষরিত ফাইলটি নিন signed by Lolly2026-10-21vector SVG৮৭ paths~9.9k nodes৯১ groups১৫১ KBনিজেই যাচাই করুনস্বাক্ষরিত ফাইলটি নিন

একটা face বেছে নিন আর room খুলে চারটা role কার্ড, Fonts তালিকা আর লাইভ নমুনা দেখিয়ে দেয়। এই চারটা face-ই সেগুলো যা অ্যাপ, টুল আর প্রতিটা এক্সপোর্ট আসলে পড়ে:

• Primary - বডি কপি, বাটন এবং প্রতিটি টুল।
• Headings - h1/h2-এর জন্য ডিসপ্লে ফেস।
• Code - কোড এবং ডেটার জন্য একটি মনোস্পেস ফেস।
• Italic - এমফ্যাসিস, উদ্ধৃতি এবং পার্শ্বমন্তব্যের জন্য একটি প্রকৃত ইতালিক সঙ্গী।

Headings, code আর italic প্রতিটা ততক্ষণ প্রাইমারিতে ফিরে যায় যতক্ষণ না আপনি সেগুলো বরাদ্দ করেন, তাই একটা এক-face design system-এ এখানে একদমই কোনো সিদ্ধান্ত লাগে না।

একটা টিন্ট মানে আপনি এটা বেছে নিয়েছেন। কোনো কার্ড শুধু সেখানেই টিন্ট করা যেখানে আপনি সেই face ইনস্টল করেছেন। একটা starter face সেই একই স্টার্টার ট্যাগ পরে যা palette-এর ইনহেরিটেড group পরে, মিউটেড রেজিস্টারে আর কোনো টিন্ট ছাড়া, আর যে role কেউ বেছে নেয়নি তা ↳ follows Primary পড়ে, প্রাইমারির নাম আবার বলার বদলে যেন সেটা বেছে নেওয়া হয়েছিল। আপনার নিজের কোনো face-এ বোতাম পরিবর্তন করুন বলে আর বাকি সব জায়গায় একটি ফেস বেছে নিন। কোনো কার্ডে কিছুই কমিট হয় না: বোতাম সেই role-এ সীমাবদ্ধ compare stage খুলে দেয়।

signed by Lolly2026-10-21vector SVG২১ paths~6.1k nodes৩১ groups৭৩ KBনিজেই যাচাই করুনস্বাক্ষরিত ফাইলটি নিন signed by Lolly2026-10-21vector SVG২১ paths~6.1k nodes৩১ groups৭৩ KBনিজেই যাচাই করুনস্বাক্ষরিত ফাইলটি নিন

কম্পেয়ার স্টেজ

signed by Lolly2026-10-21vector SVG১০২ paths~12k nodes১১৭ groups১৭৭ KBনিজেই যাচাই করুনস্বাক্ষরিত ফাইলটি নিন signed by Lolly2026-10-21vector SVG১০২ paths~12k nodes১১৭ groups১৭৭ KBনিজেই যাচাই করুনস্বাক্ষরিত ফাইলটি নিন

স্টেজটা room-এর ভেতরেই ইনলাইন খোলে, কোনো ডায়ালগে নয়, আর ঠিক সেই কার্ডের নিচে যা আপনি চেপেছেন। এটা যতক্ষণ উপরে আছে কার্ডগুলো role আর face-এর এক-লাইন স্ট্রিপে ভাঁজ হয়ে যায়, তাই স্টেজটা ফোনেও প্রথম স্ক্রিনে থাকে। Escape বাতিল করে দেয় আর কীবোর্ড সেই কার্ডকেই ফিরিয়ে দেয় যেখান থেকে আপনি এটা খুলেছিলেন।

একটা face বেছে নেওয়া মানে তিনটা প্রেস:

1. কার্ডে একটি ফেস বেছে নিন।
2. একটা family নাম টাইপ করুন আর প্রিভিউ চাপুন - বা ফিল্ডের নিচের ছয়টা পিন করা family-র একটায় চাপুন, একে একে। কার্ডটা আগে থেকেই লোড হচ্ছে দেখায়, নমুনার জায়গায় একটা skeleton bar-সহ, এখনো না দেখা face-এর জায়গায় দাঁড়ানো ইন্টারফেস face-এর বদলে।
3. এই ফেস ব্যবহার করুন।

সম্মতি একবারই চাওয়া হয়, আপনার করা প্রেসে। যখন প্রথমবার একটা প্রিভিউ Google Fonts-এ পৌঁছায়, একটা ডায়ালগ বলে দেয় কী হয়: Google family-র নাম আর আপনার IP ঠিকানা জানতে পারে। তারপর ফাইলটা এই ডিভাইসে রাখা হয় আর অফলাইনে ব্যবহার হয়। স্টুডিওতে এটাই একমাত্র ধাপ যা কোনো তৃতীয় পক্ষের কাছে পৌঁছায়। Google থেকে আনুন এগিয়ে যায় আর মনে রাখা হয়। বাতিল করুন কার্ডটা এই কথা বলে রেখে দেয় "Not fetched. Nothing was sent to Google." নিজস্ব লাইভ Google থেকে আনুন-সহ, তাই মন পাল্টানো মানে কার্ডেই একটা প্রেস। কোনো কার্ড কখনো মৃত বোতাম দেখায় না: এটা যে অবস্থাতেই থাকুক, এর একটা primary বলে দেয় পরের ধাপ কী।

স্টেজে একটা ফন্ট ফাইল ফেলুন আর এটা সাথে সাথে প্রিভিউ হয়ে যায় - আপনার নিজের মেশিন থেকে TTF, OTF বা WOFF, যা কোনো লাইসেন্স করা কর্পোরেট টাইপফেসের জন্য পথ যা আপনার কাছে আগে থেকেই আছে। সেই ড্রপ জোনটাই এই room-এর একমাত্র ফাইল দরজা।

যেভাবেই হোক face এই ডিভাইসেই থেকে যায়, অ্যাপে, টুলে আর প্রতিটা এক্সপোর্টে রেন্ডার হয়, চিরদিনের জন্য অফলাইন, আর design system ফাইলে ভ্রমণ করে - রেন্ডারের সময় কিছুই আনা হয় না। Google Fonts-এ থাকা সবকিছু একটা ওপেন লাইসেন্সের (OFL/Apache/UFL) অধীনে শিপ হয়।

এই ডিভাইসে থাকা ফন্ট

ফন্ট প্যানেল এই ডিভাইসের কাছে থাকা প্রতিটা face আর তার role তালিকাভুক্ত করে। আপনার যোগ করা face গুলো design system-এ সামনে থাকে, প্রতিটার role আর একটা delete-সহ, আর যেটা Primary সার্ভ করে সেটা ব্যাজ পরে। starter face গুলো একটা ভাঁজ করা সারিতে তাদের পেছনে আসে - Starter · SUSE, SUSE Mono · আপনি না বাছা পর্যন্ত Primary আর Code সার্ভ করছে - মিউটেড, কোনো delete ছাড়া আর প্রমোট করার কিছু নেই, কারণ এর কোনোটাই কারো নেওয়া সিদ্ধান্ত নয়। একটি ফেস যোগ করুন একই compare stage কোনো scope ছাড়াই খুলে দেয়।

নিচে Type roles প্যানেল প্রতিটা role-এর একটা লাইভ নমুনা দেখায় - primary-তে body আর UI, উপরের heading-এর জন্য একটা ঐচ্ছিক display face, জোর দেওয়ার জন্য একটা italic, code আর data-র জন্য একটা mono - প্রতিটার পাশে family আর তার অবস্থাসহ (Inter, SUSE · starter, SUSE · follows Primary), যাতে পুরো সেটটা একসাথে পড়া যায়।

টোকেন

ডিজাইন সিস্টেমের বাকি অংশ, কোড স্পর্শ না করেই এডিটযোগ্য:

signed by Lolly2026-10-21vector SVG৩৩৬ paths~32k nodes৫৭৫ groups১ image৪৯০ KBনিজেই যাচাই করুনস্বাক্ষরিত ফাইলটি নিন signed by Lolly2026-10-21vector SVG৩৩৬ paths~32k nodes৫৭৫ groups১ image৪৯২ KBনিজেই যাচাই করুনস্বাক্ষরিত ফাইলটি নিন

• গোলাকার কোণ - একটা একক radius স্লাইডার (0–1.5rem) যা অ্যাপ জুড়ে কার্ড, বোতাম আর প্যানেল অনুসরণ করে।
• নিউট্রাল - সেই কালি-থেকে-কাগজ র্যাম্প যা নিয়ে একটা নতুন ইনস্টল শিপ হয়, নিউট্রাল · স্টার্টার · 9 হিসেবে তালিকাভুক্ত, তার নয়টা step আর Colours প্যানেলে একটা খুলুন-সহ। এটাই একমাত্র জায়গা যেখানে starter নিউট্রাল ম্যানেজ হয়, আর starter ট্যাগটা সেই মুহূর্তেই চলে যায় যখন র্যাম্পটা ইনহেরিট হওয়ার বদলে জেনারেট করা হয়।
• আরও টোকেন - স্পেসিং, সাইজিং, স্ট্রোকের প্রস্থ, অস্বচ্ছতা, ঘূর্ণন, সাধারণ সংখ্যা আর শ্যাডো যোগ ও এডিট করুন। একটা type বেছে নিন, নাম দিন (Gutter, Card shadow…) আর এর ভ্যালু সেট করুন। এগুলো স্ট্যান্ডার্ড design tokens (DTCG) হিসেবে সংরক্ষিত হয় আর design system-এর সাথে ভ্রমণ করে।

ফাইল

আপনার ব্র্যান্ড যে ফাইলগুলো রাখে - লোগো বাদে - সেগুলো এখানে ফেলুন: vector, image, audio এবং motion (ভিডিও, Lottie, অ্যানিমেটেড) অ্যাসেট। এগুলো অ্যাসেট-এ পৌঁছায়, বিভাগে সাজানো এবং প্রতিটি টুলের অ্যাসেট পিকারে প্রস্তুত থাকে। সবকিছু এই ডিভাইসেই থাকে। (রেইল এই room-কে Files লেবেল করে; URL কী থাকে catalogue, কারণ একটি প্যানেল কী একটি স্থায়ী চুক্তি।)

একটি ব্র্যান্ড নিয়ে আসুন

রেইলের নিচে Add from… একটি দুই-ধাপের পিকার খোলে। প্রথম ধাপটি জিজ্ঞাসা করে আপনার কাছে কী আছে, এটি কী ফরম্যাট তা নয়:

• ডিজাইন টোকেন বা একটা ডিজাইন ফাইল - DTCG বা Tokens Studio JSON, একটা Penpot প্রজেক্ট, একটা টোকেন সেটের zip, একটা Lolly design system প্যাক অথবা একটা SVG।
• PDF - একটা ডেক বা একটা গাইডলাইন ফাইল, এই ডিভাইসে তার রং, তার মার্ক আর তার এমবেডেড টাইপফেসের জন্য পড়া হয়।
• Logo or screenshot - একটা ছবি একটা সাজেস্ট করা palette হয়ে যায়, এই ডিভাইসেই পড়া। কিছুই আপলোড হয় না। এটা রং পড়ে, ছবির টাইপফেস বা লেআউট নয়।
• Saved web page - একটা HTML ফাইল আর তার CSS ফাইল বেছে নিন, বা HTML বা CSS পেস্ট করুন। মোট 20টা ফাইল আর 2 MB পর্যন্ত। শুধু দেওয়া টেক্সটই পড়া হয়; লিংক করা রিসোর্স আনা হয় না আর স্ক্রিপ্ট চলে না। এই পথটা এক্সটেনশন বা ডেস্কটপ অ্যাপ ছাড়াও কাজ করে।
• ফন্ট ফাইল - TTF, OTF বা WOFF। Type room খোলে, যেখানে face ইনস্টল হয়।
• ওয়েবসাইট - একটা পাতা, তার রং আর type-এর জন্য পড়া। এই টাইলটা শুধু এমন ডিভাইসেই দেখা যায় যা আসলেই একটা পাতা পড়তে পারে, কারণ এমন কিছুর বিজ্ঞাপন দেওয়া একটা নিষ্ক্রিয় টাইল যা কেউ চাপতেই পারে না, তা কোনো টাইল না থাকার চেয়েও খারাপ। যেখানে এটা দেখা যায় সেখানে এটা স্পষ্টভাবে বলে দেয় কোন reader ব্যবহার হচ্ছে: এই ডিভাইসে অ্যাপ দিয়ে আনা, বা একটা ব্যাকগ্রাউন্ড ট্যাবে ব্রাউজার এক্সটেনশন দিয়ে পড়া, আপনার হিসেবে সাইন ইন করা। একটা URL নাম দেওয়া শুধু ফিল্ডটা prefill করে - fetch বোতামটাই সম্মতি, তাই কেউ আপনাকে পাঠানো একটা লিংক কখনো নিজে থেকে একটা read শুরু করতে পারে না।

ডিজাইন-ফাইল সোর্সটি বেছে নিন এবং দ্বিতীয় ধাপটি হলো নিচের কার্ড: গৃহীত ফরম্যাটগুলো অগ্রাধিকার ক্রমে আইকন টাইল হিসেবে সামনে থাকে, এবং পুরো কার্ডটিই একটি ড্রপ টার্গেট - এর যেকোনো জায়গায় ক্লিক করুন অথবা এর উপর একটি ফাইল টেনে আনুন। আপনি স্টুডিওতেও সরাসরি একটি ফাইল ফেলতে পারেন।

signed by Lolly2026-10-21vector SVG২০ paths~3.1k nodes৩৫ groups২ images১৭৩ KBনিজেই যাচাই করুনস্বাক্ষরিত ফাইলটি নিন signed by Lolly2026-10-21vector SVG২০ paths~3.1k nodes৩৫ groups২ images১৭৪ KBনিজেই যাচাই করুনস্বাক্ষরিত ফাইলটি নিন

প্রতিটি ডিজাইন ফাইল আপনাকে যা দেয়:

• একটা Lolly design-system প্যাক (.lolly; পুরনো .zip-ও এখনও গৃহীত) - এক ধাপেই ইনস্টল হয়ে যায়;
• একটা Penpot এক্সপোর্ট (.penpot) - এর design tokens টেনে আনে;
• একটা ডিজাইন টোকেন ফাইল (.json) - W3C DTCG;
• একটা Tokens Studio ফাইল (.json) - Tokens Studio;
• একটা সাধারণ SVG (.svg) - Lolly এর রং স্ক্যান করে আর আপনাকে বেছে নিতে দেয় কোনগুলো রাখবেন, প্রথমটা আপনার প্রাইমারি হয়ে যায়।

একটা লোগো/স্ক্রিনশট, ওয়েবসাইট বা সেভ করা পাতা Your suggested design system খোলে। প্রস্তাবিত রং ব্যবহার করা একটা উদাহরণ দেখুন, দরকার হলে একটা ভিন্ন Main colour বেছে নিন, আর সিস্টেমটা নাম দিন। Use this design system জেনারেট করা লাইট আর ডার্ক palette প্রয়োগ করে আর Overview-তে ফিরে যায়। বিদ্যমান ফন্ট নিজেদের জায়গায় থাকে। এটা সক্রিয় সিস্টেমের রং আর অন্যান্য টোকেন সেটিংস বদলে দেয়। প্রথমে একটা চেকপয়েন্ট সফল হতে হবে; Restore brand settings আগের সেটিংস ফিরিয়ে আনে।

Source details and individual choices দেখায় কী পড়া হয়েছিল, কোন ফন্ট নাম শনাক্ত হয়েছে আর প্রিভিউয়ের text/action কনট্রাস্ট। এটা Choose individual items in the tray আর Download design context-ও দেয়। JSON রিপোর্টটা observation, প্রস্তাবিত টোকেন আর সোর্স তথ্য বহন করে; সেভ করা HTML/CSS-এ দেওয়া টেক্সটের একটা SHA-256 থাকে। এতে কোনো raw পাতার টেক্সট নেই আর এটা কোনো সাইন করা Content Credential নয়। ফন্ট নাম সাজেশন: ফন্ট বেছে নেওয়া আর ইনস্টল করার জায়গা এখনও Type-ই।

PDF আর অন্যান্য ডিজাইন-ফাইল ইমপোর্ট তাদের বিদ্যমান রিভিউ কন্ট্রোল বজায় রাখে। Tray-তে রাখা জিনিস ততক্ষণ কিছুই বদলায় না যতক্ষণ না সেগুলোকে সেই room দিয়ে যোগ করা হয় যেটা সেই ধরনের ম্যাটেরিয়ালের মালিক।

#/start?source=<kind> কোনো নির্দিষ্ট সোর্সে পিকার খোলে (file, pdf, image, font, url, page), আর ?import একে সাধারণ তালিকায় খোলে।

দুটি ডিভাইসের মধ্যে একটি ব্র্যান্ড সরান

রেলের নিচে Export একটা মাত্র LollyBrand-….lolly লেখে - আপনার টোকেন, ফন্ট, লোগো আর থিম পছন্দ, একটা ইন্টেগ্রিটি ম্যানিফেস্টসহ যা এটা ফিরে ঢোকার সময় যাচাই করে। 1.0.7-এর আগের ওয়েব রিলিজগুলো একই payload-কে .zip নাম দিত; সেই পুরনো বানানটাও এখনও গৃহীত। এর পাশে, Tokens (.json) সাদামাটা design-tokens ডকুমেন্ট একাই লেখে: না ফন্ট, না লোগো, শুধু টোকেন, যা আসলে কোনো রেপো, কোনো CI ধাপ বা অন্য কোনো tokens টুল পড়ে।

একটি ফিরিয়ে আনা হলো Add from… → Design tokens or a design file (উপরে), অথবা স্টুডিওতে একটি ড্র্যাগ-অ্যান্ড-ড্রপ। এভাবেই একজন সহকর্মী আপনাকে একটি ব্র্যান্ড হস্তান্তর করে, অথবা আপনি একটিকে দ্বিতীয় ইনস্টলে বহন করেন - কোনো অ্যাকাউন্ট নেই, কোনো ক্লাউড নেই। এর বদলে কমান্ড লাইন থেকে একটি ব্র্যান্ড আনতে, দেখুন ingest:brand।

আগের সেটিংস ফিরিয়ে আনুন

রেলের নিচে Restore brand settings বেছে নিন, একটা তারিখওয়ালা চেকপয়েন্ট বেছে নিন, তারপর রিস্টোর করুন চাপুন। এটা সক্রিয় ব্র্যান্ডের জন্য রং, type সেটিংস আর অন্যান্য ব্র্যান্ড টোকেন ফিরিয়ে আনে। ফন্ট আর ছবির ফাইল যেমন আছে তেমনই থাকে।

চেকপয়েন্ট প্রয়োগ করার আগে Lolly আপনার বর্তমান সেটিংসগুলো Before restore হিসেবে সেভ করে রাখে। restore টা উল্টাতে সেই চেকপয়েন্ট বেছে নিন, এমনকি ব্রাউজার বন্ধ করে আবার খোলার পরও। শেষ 20টা চেকপয়েন্ট এই ডিভাইসেই রাখা হয়। যদি স্টোরেজ পড়া না যায় বা বর্তমান সেটিংস সেভ করা না যায়, তাহলে ডায়ালগটা সমস্যা জানিয়ে দেয় যাতে আপনি আবার চেষ্টা করতে পারেন।

ভার্সন

রেলের নিচে Versions সেই জায়গা যেখানে একটি ডিজাইন সিস্টেম একটি চলমান লক্ষ্য হওয়া বন্ধ করে দেয়। একটি ভার্সন পাবলিশ করুন এবং এই ডিভাইসে রাখা একটি স্থায়ী, নাম দেওয়া কপি পান: এটি এরপর আর কখনো বদলায় না, তাই যে টুল এটি পিন করে তা সবসময় একই জিনিস আঁকতে থাকে। যতক্ষণ না পাবলিশ করার মতো আপনার নিজের কিছু থাকে ততক্ষণ প্যানেলটি লুকানো থাকে, তাই যে স্টুডিও কখনো পাবলিশ করে না সে কখনো এই কন্ট্রোলগুলো দেখে না।

কিছুতে ক্লিক করার আগে জানার মতো তিনটি বিষয় আছে, আর প্যানেলটি ক্লিক করার আগেই এই তিনটি জানিয়ে দেয়, পরে নয়:

• একটি ভার্সন স্থায়ী। এখনো ডিলিটের অপশন নেই, তাই প্যানেলটি বলে যে কী রাখা হয়েছে এবং সেটি রাখাই থাকবে, মিথ্যা বলা কোনো বোতাম দেওয়ার বদলে।
• সরানো জিনিস কম্প্যাটিবিলিটি কার্ডে সবার আগে আসে। যোগ করা ও বদলানো টোকেন খবর; একটি সরানো টোকেন হলো সেই জিনিস যা কোনো টুলকে ভেঙে দেয়, তাই এটিকে প্রথমে নাম দেওয়া হয় এবং যা তা তাই বলা হয়।
• পাবলিশ করা পূর্বাবস্থায় ফেরানো যায় না; রিস্টোর করা যায়। Restore latest from this version হেডের ওপর একটি সাধারণ এডিট, তাই এটি স্টুডিওর undo স্ট্যাকে যায় এবং প্যানেল আপনাকে সাথে সাথে Undo অপশন দেয়।

আপনি চাইলে শুধু Publish only করতে পারেন, অথবা Publish and make active - পার্থক্য হলো টুল ও অ্যাপ এখন থেকে সেই version অনুসরণ করবে নাকি আপনার সর্বশেষ সম্পাদনা অনুসরণ করতেই থাকবে। Follow the latest again প্রতিটি সম্পাদনাকে তৈরি হওয়ার মুহূর্তেই লাইভ করে দেয়। #/start?area=versions সরাসরি প্যানেলটি খুলে দেয়।

যখন ব্র্যান্ড স্থির থাকে

কিছু বিল্ড একটা লক করা design system-সহ আসে, যেমন SUSE Brand। এটা খুললে সম্পাদনাযোগ্য কপি তৈরি করুন আর সুইচ-সহ একটা read-only নোট দেখা যায়। এর আসল রং, ফন্ট আর টোকেন অক্ষত থাকে। আপনার নিজের লোকাল সিস্টেমগুলো এডিটযোগ্য থেকে যায়, এমনকি যখন লক করা সিস্টেমটাই এই ডিভাইসে প্রথম ছিল। Profile-এ, খুলুন একটা সিস্টেম বেছে নেয় আর এর স্টুডিও খোলে; নতুন একটা বানিয়ে ফেলো একটা লোকাল সিস্টেম তৈরি করে আর এটাকে #/start-এ এর নামের ফিল্ড ফোকাস করা অবস্থায় খোলে।

এরপর কোথায় যাবেন

• Lolly ব্যবহার করা - ক্যানভাস, সেভ করা, প্রজেক্ট আর অ্যাসেট।
• ডিজাইন টোকেন - সেই টোকেন মডেল যাতে আপনার ব্র্যান্ড প্রকাশিত হয়।
• এক্সপোর্টিং ও ফরম্যাট - প্রিন্ট একক, CMYK আর যেসব ফরম্যাটে আপনার ব্র্যান্ড রেন্ডার হয়।

একটা look খুঁজুন আর compare করুন

Overview থেকে বা Profile-এর design-system তালিকা থেকে Find a look খুলুন। এই ডিভাইসে সেভ করা সিস্টেম আর কয়েকটা পুনর্ব্যবহারযোগ্য Lolly উদাহরণ ব্রাউজ করুন। নাম, রঙের ট্যাগ বা উল্লেখ করা ফন্ট দিয়ে সার্চ করুন। Closest to my current palette মাপা রঙের মিল দিয়ে সাজায়, সমান হলে মিলে যাওয়া ফন্ট family ঠিক করে দেয়; এটা কোনো কোয়ালিটি স্কোর নয়।

একটা look রিভিউ করতে একটা বেছে নিন, অথবা compare করতে দুটো। ছোট স্ক্রিনেও রিভিউ বোতাম পাওয়া যায়। একটা look বেছে নেওয়া কিছুই বদলায় না। Use this saved system বিদ্যমান design-system রেজিস্ট্রি দিয়ে সুইচ করে। এই রংগুলো ব্যবহার করুন সাধারণ চেকপয়েন্ট আর ইনস্টল ফ্লো দিয়ে একটা উদাহরণ প্রয়োগ করে, বর্তমান ফন্ট বজায় রেখে। Restore brand settings আগের look ফিরিয়ে আনতে পারে।

Details and design context-এর অধীনে, সেভ করা সিস্টেমগুলোর এডিটযোগ্য Search tags আর একটা context ডাউনলোড থাকে। উদাহরণগুলো আসল Lolly রঙের রেসিপি ব্যবহার করে; এতে কোনো দূর থেকে স্ক্র্যাপ করা inspiration সংগ্রহ বা প্রয়োজনীয় অ্যাকাউন্ট নেই।

signed by Lolly2026-10-21vector SVG৩০ paths~9.3k nodes৪৪ groups১০৬ KBনিজেই যাচাই করুনস্বাক্ষরিত ফাইলটি নিনTry it in the app

তুলনাটা দুটো palette-ই একসাথে দৃশ্যমান রাখে। একটা look রিভিউ করা ততক্ষণ কিছুই বদলায় না যতক্ষণ না আপনি এই রংগুলো ব্যবহার করুন বা Use this saved system বেছে নেন।

সোর্স এভিডেন্স পড়ুন

সোর্স রিভিউয়ের ঐচ্ছিক ডিটেল যেখানে দেখা গেছে সেখানে typography, gap, padding আর corner ভ্যালু দেখায়। সেভ করা HTML/CSS আর নেটিভ ওয়েবসাইট read declaration রিপোর্ট করে, যা হয়তো রেন্ডার হওয়া পাতায় ব্যবহৃত না-ও হতে পারে। ব্রাউজার এক্সটেনশন দৃশ্যমান এলিমেন্টের একটা সীমিত নমুনা থেকে মাপা style রিপোর্ট করতে পারে, নিজের viewport আর ব্রাউজার রং পছন্দসহ। পুরনো এক্সটেনশনও declared style দিয়ে কাজ করে। অনুপস্থিত ফিল্ড Not observed বলে।

এগুলো observation, কোনো automatic style সেটিংস নয়। কোনো reference স্ক্যান দিয়ে ফন্ট ফাইল আনা বা ইনস্টল করা হয় না, আর সোর্স spacing চুপচাপ আপনারটার জায়গা নেয় না। Count নমুনায় উপস্থিতি বর্ণনা করে, confidence বা কোয়ালিটি নয়।

একটা কম্পোজিশনকে design system-এর বিপরীতে যাচাই করুন

Design-এ, Export খুলুন, তারপর এক্সপোর্ট করার আগে। এই যাচাই রেন্ডারের মতোই কার্যকর design-system ভার্সন ব্যবহার করে। এটা লেখা রং, টোকেন alias, ফন্ট বাছাই আর ছবির অ্যাসেট ID তুলনা করে। Custom ভ্যালু ইচ্ছাকৃত হতে পারে; উল্লেখিত ব্র্যান্ড অ্যাসেটের বাইরের কোনো ছবি একটা রিভিউ আইটেম, কোনো নিষিদ্ধ ছবি নয়।

যেখানে একটা নির্দিষ্ট রং বা ফন্ট সাজেশন পাওয়া যায়, সেখানে এর বোতাম শুধু সেই একটা স্তর বদলায়। সাধারণ Undo আসল ভ্যালু ফিরিয়ে আনে। লক করা বা বদলানো স্তর কোনো পুরনো সাজেশন দিয়ে ওভাররাইট হয় না। অনুপস্থিত সোর্স এভিডেন্স কোনো ম্যাচ থেকে আলাদা থেকে যায়। রেন্ডার করা কনট্রাস্ট আর টেক্সট লেআউট বিদ্যমান মাউন্ট করা চেক দিয়ে যাচাই হয়। Gradient, ইফেক্ট, নেস্টেড টুল কন্টেন্ট, rights আর সাবজেক্টিভ কোয়ালিটি ব্র্যান্ড তুলনায় মূল্যায়ন করা হয় না। যাচাইগুলো ডাউনলোড-কে আটকায় না।

ডিজাইন কনটেক্সট স্থানীয়ভাবে ব্যবহার করুন

Download design context-এ টোকেন ডকুমেন্ট, resolved রং, উল্লেখিত ফন্ট family, অ্যাসেট ID, যেখানে রেকর্ড করা আছে সেখানে সোর্স এভিডেন্স, coverage আর স্পষ্ট নিয়ম থাকে। এতে ফন্ট ফাইল বা মালিকানার প্রমাণ থাকে না। reference রিভিউতেও এর প্রস্তাবিত টোকেন আর observation থাকে।

CLI কোনো সার্ভার ছাড়াই দুটোর যেকোনো ডাউনলোড পড়তে পারে:

lolly system import ./lolly-design-context.json
lolly system context --output=design-context.json
lolly system check ./design-inputs.json --file=design-context.json

system check একটা boxes array-সহ Design ইনপুট বা একটা কম্পাইল করা Design ডকুমেন্ট গ্রহণ করে। এটা কম্পোজিশন না বদলিয়ে প্রস্তাবিত সংশোধন রিপোর্ট করে। এটা ব্রাউজার লেআউট বা রেন্ডার করা কনট্রাস্ট মাপতে পারে না। বিদ্যমান MCP রিসোর্স lolly://design-context কনফিগার করা লোকাল MCP প্রসেসের মাধ্যমে কার্যকর সিস্টেমের কনটেক্সট এক্সপোজ করে; নতুন কোনো হোস্ট করা পরিষেবা বা API key দরকার নেই।