The Brand Studio

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

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

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

রুমগুলো

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

• Overview - কেন্দ্রবিন্দু। এই মুহূর্তে কী আছে, এক নজরে, প্রতিটি room-এর দরজাসহ।
• Colours - একে একে রং যোগ করুন, roles বরাদ্দ করুন অথবা একটি রং থেকে সম্পূর্ণ প্যালেট তৈরি করুন।
• 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… - সোর্স picker, একটি ফাইল, PDF, ছবি, ফন্ট বা ওয়েবসাইট থেকে ব্র্যান্ড আনার জন্য। নিচে দেখুন Bring a brand in।
• Tray - স্ক্যান যেসব প্রার্থী খুঁজে পেয়েছে কিন্তু এখনও কমিট করেনি। কোনো স্ক্যান আসলেই কিছু রাখা পর্যন্ত এটি লুকানো থাকে, এবং তখন একটি কাউন্ট দেখায়; সেই সারিতে Add না চাপা পর্যন্ত এতে কিছুই আপনার ব্র্যান্ড বদলায় না।
• Export - পুরো ব্র্যান্ডকে একটি LollyBrand-…zip হিসেবে লেখে।
• Tokens (.json) - সাদামাটা design-tokens ডকুমেন্ট নিজে থেকেই, একটি রেপো, বিল্ড স্টেপ বা অন্য কোনো tokens টুলের জন্য।
• Versions - design system-এর নামযুক্ত কপি প্রকাশ, সক্রিয় এবং পুনরুদ্ধার করুন। প্রকাশ করার মতো নিজের কিছু না থাকা পর্যন্ত (অথবা একটি ?area=versions লিংক নাম ধরে না চাওয়া পর্যন্ত) লুকানো থাকে।

signed by Lollyvector SVG2026-08-24নিজেই যাচাই করুনGet the signed file২০ paths~1.1k nodes৩৭ groups১৯ KBsigned by Lollyvector SVG2026-08-24নিজেই যাচাই করুনGet the signed file২০ paths~1.1k nodes৩৭ groups১৯ KBTry it in the app

Overview

Overview হলো যে room-এ আপনি প্রথম পৌঁছান, এবং এর দুটি দিক আছে।

এখনও কিছুই সেট আপ না থাকলে এটি দুটি দরজা অফার করে - Start from a file (design tokens, একটি Penpot প্রজেক্ট, একটি design system pack বা একটি SVG) এবং Start from scratch (একটি রং যোগ করুন, তারপর যখন ইচ্ছা চালিয়ে যান) - এবং তাদের নিচে একটি নিরিবিলি Explore the tools প্রস্থান, কারণ চলে যাওয়াও একটি বৈধ উত্তর।

একবার একটি design system তৈরি হয়ে গেলে, একই room দেখায় আপনার কাছে কী আছে: প্যালেট এবং তার রঙের সংখ্যা, কার্যকর type family, কতগুলো logo স্লট পূর্ণ, কতগুলো token আছে এবং Files room। প্রতিটি ব্লক তার room-এর একটি দরজা। এখানে কাউন্ট আছে, কখনও প্রোগ্রেস বার নয় এবং কখনও 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 Lollyvector SVG2026-09-03নিজেই যাচাই করুনGet the signed file৮ paths~4.8k nodes১৯ groups৫৪ KBsigned by Lollyvector SVG2026-09-03নিজেই যাচাই করুনGet the signed file৮ paths~4.8k nodes১৯ groups৫৪ KB

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

Colours

signed by Lollyvector SVG2026-09-03নিজেই যাচাই করুনGet the signed file১১৪ paths~26k nodes১৪৯ groups৪ images৫২৩ KBsigned by Lollyvector SVG2026-09-03নিজেই যাচাই করুনGet the signed file১১৪ paths~26k nodes১৪৯ groups৪ images৫২৩ KB

সবচেয়ে সমৃদ্ধ room, দুটি প্যানে। বাঁদিকে আপনি কাজ করেন; ডানদিকে আপনার live palette। আকার বদলাতে তাদের মধ্যেকার divider টেনে নিন (তাতে Enter চাপলে palette সরে গিয়ে জায়গা ছেড়ে দেয়)।

signed by Lollyvector SVG2026-09-03নিজেই যাচাই করুনGet the signed file৬১ paths~9.4k nodes৭৭ groups২০০ KBsigned by Lollyvector SVG2026-09-03নিজেই যাচাই করুনGet the signed file৬১ paths~9.4k nodes৭৭ groups২০০ KB

একটি রং যোগ করুন, তারপর তাকে একটি কাজ দিন

Add a colour হলো সহজ পথের পুরোটাই: যেকোনো notation-এ একটি রং পেস্ট করুন বা বেছে নিন আর এটি ঠিক একটি token হয়ে যায়। এর থেকে কিছুই ডেরাইভ করা হয় না, এতে কিছুই সাজেস্ট করা হয় না, আর কিছুই দাবি করা হয় না। রঙের একটি পুরো তালিকা পেস্ট করুন আর প্রতিটি একটি করে chip হয়ে যায় যা আপনি আলাদাভাবে যোগ করতে পারেন।

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

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

এই দুটির নিচে চারটি ভাঁজ করা সেকশন থাকে। যেটি চান সেটি খুলুন; প্রতিটি #/start?area=color&focus=<wing> হিসেবে deep-link করা যায়:

• Generate a starter palette (focus=generate) - একটি রং থেকে shade-এর একটি সম্পূর্ণ সেট। নিচে বর্ণনা করা হয়েছে।
• Shade curves (focus=curves) - একটি ramp-কে পয়েন্ট ধরে ধরে পুনর্গঠন করুন। Lightness, chroma এবং hue প্রতিটি নিজস্ব curve পায়, L / C / H দিয়ে পাল্টানো যায়, এবং আপনি ড্র্যাগ করার সাথে সাথে নিচের shade-গুলো লাইভ rebake হয়।
• Contrast (focus=contrast) - Contrast-lock আপনার বেছে নেওয়া ব্যাকগ্রাউন্ডের বিপরীতে APCA টার্গেট পূরণ করতে একটি ramp-কে retone করে, প্রতিটি ধাপ তার নিজস্ব hue এবং chroma রেখে; Rotate hue পুরো ramp-কে হুইলের চারপাশে সম্পূর্ণভাবে ঘোরায়, প্রতিটি shade তার lightness ও chroma রেখে।
• Print (focus=print) - প্রেসে primary কী হয়ে দাঁড়ায়: এর স্বয়ংক্রিয় স্ক্রিন মান, অথবা একটি পিন করা CMYK বিল্ড অথবা বদলে একটি নামযুক্ত spot ink।

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

Generate a starter palette-এর ভেতরে, একটি Primary colour বেছে নিন আর Lolly একটি সম্পূর্ণ প্যালেট বের করে নেয় - light ও dark সারফেস, টেক্সট, অ্যাকসেন্ট এবং সম্পূর্ণ tint/shade ramp - engine যে perceptual color maths (OKLCH) সবখানে ব্যবহার করে সেটাই দিয়ে। ডেরিভেশন টিউন করুন:

• Scheme - Mono, Complement, Analogous অথবা Triad - সেকেন্ডারি রং আপনার প্রাইমারির সাথে কীভাবে সম্পর্কিত তা ঠিক করে।
• Shades - 3 থেকে 20 পর্যন্ত একটি স্লাইডার (ডিফল্ট 5) নিয়ন্ত্রণ করে প্রতিটি ramp কতগুলো ধাপ তৈরি করবে।
• Fine-tune (ভাঁজ করা) - UI intensity (Muted / Deep), Contrast (Comfort / High) এবং Text on brand (Auto / Light / Dark)।

এই উইং-এর কিছুই আপনার ব্র্যান্ডে কিছু লেখে না। এটি একটি প্রিভিউ, পুরো অ্যাপ জুড়ে লাইভ, যাতে আপনি এটি বিচার করতে পারেন, ঠিক যতক্ষণ না আপনি Replace palette চাপেন (নিচে)।

Primary-র নিচে আপনি লাইভ Primary / Neutral / Secondary / Blend ramp এবং Light ও Dark specimen কার্ড দেখতে পাবেন, প্রতিটি তার নিজস্ব contrast readout বহন করে - WCAG অনুপাত এবং তার পাশে APCA Lc সংখ্যা। ডেরাইভড ডিফল্টের বদলে সেই shade-কে anchor করতে Neutral বা Secondary ramp-এ একটি ধাপে ক্লিক করুন।

signed by Lollyvector SVG2026-09-03নিজেই যাচাই করুনGet the signed file২৫ paths~4.6k nodes৬০ groups৫৭ KBsigned by Lollyvector SVG2026-09-03নিজেই যাচাই করুনGet the signed file২৫ paths~4.6k nodes৬০ groups৫৭ KB

আপনার প্যালেট তৈরি করুন (হারমনি জেনারেটর)

এখনও একই উইংয়ে, Build your palette আপনার প্রাইমারি রঙ থেকে মিলিয়ে অ্যাকসেন্ট রঙ তৈরি করে। একটি Harmony বেছে নিন - Complementary, Adjacent, Triad, Tetrad বা Analogous (যেখানে নিজস্ব Accents সংখ্যা থাকে, 2 থেকে 5, এবং একটি hue Angle 10° থেকে 45° পর্যন্ত) - এবং প্রতিটি প্রার্থী রঙ আসে একটি স্বয়ংক্রিয়ভাবে তৈরি মানুষ-পঠনযোগ্য নাম এবং একটি + Add বাটন সহ। একটি যোগ করলে সেই রঙ তৎক্ষণাৎ আপনার প্যালেটে যুক্ত হয়ে যায়, এক চাপে এক টোকেন। "Your palette, applied" পুরো সেটটিকে আসল গ্রাফিক্সে প্রিভিউ করে।

signed by Lollyvector SVG2026-09-03নিজেই যাচাই করুনGet the signed file৮ paths৯৩৬ nodes১৪ groups১৫ KBsigned by Lollyvector SVG2026-09-03নিজেই যাচাই করুনGet the signed file৮ paths৯৩৬ nodes১৪ groups১৫ KB

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

Replace palette হলো এই উইংয়ের একমাত্র নিয়ন্ত্রণ যা কিছু লেখে, এবং এটি কখনও সরাসরি লেখে না। এটি চাপুন এবং একটি রিভিউ কার্ড প্রথমে খোলে, যার শিরোনাম "Replace the palette?", যা ঠিক কী ঘটতে চলেছে তা তালিকাভুক্ত করে: কতগুলো রোল আপনার নির্ধারিত অবস্থায় থাকে, আপনি নিজে যোগ করা কতগুলো রঙ রাখা হয়, কতগুলো শেড কার্ভ পুনরায় অ্যাঙ্কর করা হয়, কতগুলো প্রিন্ট লক পুনরায় পিন করা হয়, কতগুলো লুকানো শেড লুকানো থাকে, কতগুলো গ্রেডিয়েন্ট স্টপ তাদের রঙ ধরে রাখে।

সেই কার্ডে Replace palette এটি কমিট করে; Cancel সরে যায় এবং কিছু পরিবর্তন করে না। এটি চলার পর, কার্ডটি হয়ে যায় "Palette replaced." একটি একক Undo যা ইতিমধ্যে ফোকাসড - এবং পুরো ডিজাইন সিস্টেমের একটি চেকপয়েন্ট নেওয়া হয় অদল-বদলের আগে, তাই "এটিকে আগের মতো ফিরিয়ে দিন" একটি পুনরুদ্ধার, হারানো একটি বিকেল নয়।

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

ডান প্যানেলে আপনার ব্র্যান্ডের প্রতিটি রঙ তালিকাভুক্ত থাকে, গ্রুপ করা (Primary, Neutral, Secondary, Spectrum, Custom, Roles), প্রতিটি গ্রুপ ভাঁজযোগ্য এবং নিজস্ব + Add সহ। এর নিচে, Colour chart একই সোয়াচগুলোর দুটি ভিউ-এ খোলে: Wheel (OKLCH চাকা - একটি ডট টেনে তার রঙ বদলান, একটি ডট ক্লিক করে সম্পাদনা করুন বা খালি জায়গায় ক্লিক করে নতুন সোয়াচ ফেলুন) এবং Gamut চার্ট, যা দেখায় প্রদর্শনযোগ্য রেঞ্জ আসলে কোথায় শেষ হয়। #/start?area=color&focus=chart কার্ডটি সরাসরি খোলে, যেমন ?wheel সবসময় করে এসেছে।

signed by Lollyvector SVG2026-09-03নিজেই যাচাই করুনGet the signed file১৫৫ paths~14k nodes১৯৯ groups১ image১৯১ KBsigned by Lollyvector SVG2026-09-03নিজেই যাচাই করুনGet the signed file১৫৫ paths~14k nodes১৯৯ groups১ image১৯১ KB

signed by Lollyvector SVG2026-09-03নিজেই যাচাই করুনGet the signed file২৭৪ paths~3.7k nodes৬৭ groups৮৩ KBsigned by Lollyvector SVG2026-09-03নিজেই যাচাই করুনGet the signed file২৭৪ paths~3.7k 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।

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

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

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

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

প্যালেট প্যানেলের নিচের প্রান্তে পার্ক করা ফ্লোটিং পিলটি পুরো প্যালেটটি ডাউনলোড করে Design tokens (JSON), CSS variables, CSS classes, SCSS variables, একটি GIMP palette (.gpl) বা একটি Adobe Swatch Exchange (.ase) হিসেবে - যাতে ব্র্যান্ডটি সরাসরি Illustrator, Figma, GIMP বা একটি স্টাইলশিটে চলে যায়। এটি প্যানেলের স্ক্রলারের বাইরে বসে, তাই প্যালেট যতই স্ক্রল হোক না কেন এটি তার জায়গা ধরে রাখে। (আপনি Catalogue ভিউ থেকেও প্যালেটটি ডাউনলোড করতে পারেন।)

টাইপ

signed by Lollyvector SVG2026-09-03নিজেই যাচাই করুনGet the signed file৭৪ paths~11k nodes৯৯ groups২৩৪ KBsigned by Lollyvector SVG2026-09-03নিজেই যাচাই করুনGet the signed file৭৪ paths~11k nodes৯৯ groups২৩৪ KB

রুমটি শুরু হয় চারটি রোল কার্ড দিয়ে - এই চারটি ফেস যা অ্যাপ, আপনার টুল এবং প্রতিটি এক্সপোর্ট আসলে পড়ে। প্রতিটি কার্ড দেখায় এই মুহূর্তে সেই রোলে কী কাজ করছে, সেই ফেসে সেট করা, নিচে আসল কপির একটি লাইন সহ:

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

Headings, code এবং italic প্রতিটি আপনি নির্ধারণ না করা পর্যন্ত primary-তে ফলব্যাক করে, তাই একটি ওয়ান-ফন্ট ব্র্যান্ডের এখানে কোনো সিদ্ধান্তেরই দরকার নেই। কার্ডের কোনো কিছুই কমিট করে না: Change (অথবা একটি খালি রোলে Choose a face) সেই রোলে সীমাবদ্ধ compare stage খোলে।

signed by Lollyvector SVG2026-09-03নিজেই যাচাই করুনGet the signed file৫৯ paths~9.3k nodes৭৩ groups১৯৬ KBsigned by Lollyvector SVG2026-09-03নিজেই যাচাই করুনGet the signed file৫৯ paths~9.3k nodes৭৩ groups১৯৬ KB

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

স্টেজটি রুমের ভেতরেই ইনলাইনে খোলে, কোনো ডায়ালগে নয়, তাই আপনি যে কার্ড থেকে এসেছেন তা স্ক্রিনে থেকে যায়। একটি Google Fonts ফ্যামিলি সার্চ করুন (Inter, Fraunces, Space Grotesk…) অথবা একটি ফন্ট ফাইল ড্রপ করুন, Add to the comparison চাপুন এবং যেকোনোটি ইনস্টল হওয়ার আগেই প্রার্থীগুলো একই শব্দে পাশাপাশি দাঁড়ায়। Escape বাতিল করে এবং কীবোর্ড ফিরিয়ে দেয় সেই কার্ডে যেখান থেকে আপনি এটি খুলেছিলেন।

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

• Fonts on this device - প্রতিটি ইনস্টল করা ফ্যামিলি, এটি যে রোলগুলো পরিবেশন করে এবং একটি ডিলিট অপশন। এখানে Add a face একই কম্পেয়ার স্টেজ কোনো সীমাবদ্ধতা ছাড়াই খোলে।
• Your fonts - আপনার নিজের মেশিন থেকে একটি TTF, OTF বা WOFF আপলোড করুন। এটি এমন একটি লাইসেন্সপ্রাপ্ত কর্পোরেট টাইপফেসের পথ যা আপনি ইতিমধ্যে মালিক।

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

নিচে Type roles প্যানেল প্রতিটি রোলের একটি লাইভ নমুনা দেখায় - primary-তে body এবং UI, শীর্ষ হেডিংয়ের জন্য একটি ঐচ্ছিক ডিসপ্লে ফেস, এমফ্যাসিসের জন্য একটি ইতালিক, কোড এবং ডেটার জন্য একটি মনো - যাতে আপনি পুরো সেটটি একসাথে কাজ করতে দেখতে পান।

signed by Lollyvector SVG2026-09-03নিজেই যাচাই করুনGet the signed file১৭ paths~5.6k nodes২৯ groups৬৮ KBsigned by Lollyvector SVG2026-09-03নিজেই যাচাই করুনGet the signed file১৭ paths~5.6k nodes২৯ groups৬৮ KB

টোকেন

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

signed by Lollyvector SVG2026-09-03নিজেই যাচাই করুনGet the signed file৭৩ paths~14k nodes৯৫ groups১ image২৯২ KBsigned by Lollyvector SVG2026-09-03নিজেই যাচাই করুনGet the signed file৭৩ paths~14k nodes৯৫ groups১ image২৯২ KB

• Rounded corners - একটি একক radius স্লাইডার (0–1.5rem) যা অ্যাপ জুড়ে কার্ড, বাটন এবং প্যানেল অনুসরণ করে।
• More tokens - spacing, sizing, stroke width, opacity, rotation, সাধারণ numbers এবং shadows যোগ ও এডিট করুন। একটি টাইপ বেছে নিন, নাম দিন (Gutter, Card shadow…) এবং এর মান সেট করুন। এগুলো স্ট্যান্ডার্ড design tokens (DTCG) হিসেবে সংরক্ষিত হয় এবং আপনার ব্র্যান্ডের সাথে ভ্রমণ করে।

ফাইল

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

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

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

• Design tokens or a design file - DTCG বা Tokens Studio JSON, একটি Penpot প্রজেক্ট, একটি টোকেন সেটের zip, একটি Lolly design system প্যাক অথবা একটি SVG।
• PDF - একটি ডেক বা গাইডলাইন ফাইল, এর রঙ, মার্ক এবং এমবেড করা টাইপফেসের জন্য এই ডিভাইসেই পড়া হয়।
• Image - একটি স্ক্রিনশট বা একটি ছবি; এর রঙ এই ডিভাইসেই পড়া হয় এবং কিছুই আপলোড করা হয় না।
• Font file - TTF, OTF বা WOFF। এটি Type রুম খোলে, যেখানে ফেসটি ইনস্টল হয়।
• Website - একটি পাতা, যার রঙ এবং টাইপ পড়া হয়। এই টাইলটি শুধুমাত্র এমন একটি ডিভাইসে দেখা যায় যা আসলেই একটি পাতা পড়তে পারে, কারণ এমন কিছুর বিজ্ঞাপন দেওয়া একটি নিষ্ক্রিয় টাইল যা কেউ চাপতে পারে না, তা কোনো টাইল না থাকার চেয়েও খারাপ। যেখানে এটি দেখা যায় সেখানে এটি স্পষ্টভাবে তার পাঠককে নাম দেয়: এই ডিভাইসে অ্যাপ দ্বারা ফেচ করা, অথবা ব্যাকগ্রাউন্ড ট্যাবে ব্রাউজার এক্সটেনশনের মাধ্যমে পড়া, আপনি হিসেবে সাইন ইন করা অবস্থায়। একটি URL নাম দেওয়া শুধু ফিল্ডটি প্রিফিল করে - ফেচ বাটনটিই সম্মতি, তাই কেউ আপনাকে পাঠানো একটি লিংক কখনও নিজে থেকে একটি পড়া শুরু করতে পারে না।

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

signed by Lollyvector SVG2026-08-24নিজেই যাচাই করুনGet the signed file১৯ paths~3.2k nodes৩৫ groups২ images১৭৫ KBsigned by Lollyvector SVG2026-08-24নিজেই যাচাই করুনGet the signed file১৯ paths~3.2k nodes৩৫ groups২ images১৭৫ KB

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

• একটি LollyBrand প্যাক (.zip) - এক ধাপে ইনস্টল হয়;
• একটি Penpot এক্সপোর্ট (.penpot) - এর ডিজাইন টোকেন টেনে আনে;
• একটি Design Tokens ফাইল (.json) - W3C DTCG;
• একটি Tokens Studio ফাইল (.json) - Tokens Studio;
• একটি plain SVG (.svg) - Lolly এর রঙ স্ক্যান করে এবং কোনটি রাখবেন তা বেছে নিতে দেয়, প্রথমটি আপনার primary হয়ে যায়।

একটি সোর্স ইনস্টল প্রথমে একটি checkpoint নেয়, তাই "ইম্পোর্টের আগের অবস্থায় ফিরিয়ে দিন" একটি মাত্র রিস্টোর। এবং একটি স্ক্যান যা খুঁজে পায় তা সরাসরি ঢুকে যায় না: প্রার্থীগুলো Tray-তে পৌঁছায়, যেখানে প্রতিটি সেই ধরনের উপাদানের মালিক রুমের মাধ্যমে নিজস্ব চাপে যোগ করা হয়।

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

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

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

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

ভার্সন

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

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

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

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

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

কিছু build-এ একটি locked brand থাকে - এর রং, ফন্ট ও টোকেনই প্রতিটি টুল ও এক্সপোর্ট ব্যবহার করে, আর পরিবর্তনের কিছু নেই। এমন ক্ষেত্রে স্টুডিওর জায়গায় একটি সংক্ষিপ্ত নোট দেখানো হয় যা ব্যাখ্যা করে যে এই build একটি নির্দিষ্ট ব্র্যান্ড নিয়ে আসে এবং সম্পাদনা বন্ধ রাখা হয়েছে। এটি ইচ্ছাকৃত: এভাবেই একটি প্রতিষ্ঠান নিশ্চিত করে যে সবকিছু on-brand থাকে।

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

• Using Lolly - ক্যানভাস, সেভ করা, প্রজেক্ট ও ক্যাটালগ।
• Design Tokens - যে টোকেন মডেলে আপনার ব্র্যান্ড প্রকাশ পায়।
• Exporting & formats - প্রিন্ট ইউনিট, CMYK এবং আপনার ব্র্যান্ড যেসব ফরম্যাটে রেন্ডার হয়।