کتابخانهٔ کامپوننت‌های پنبهنسخهٔ مرور · ۰۱
یک زبان مشترک،
برای روزهای بهتر.
رنگ‌ها، نوشته‌ها و تمام قطعه‌هایی که تجربهٔ پنبه را می‌سازند.
با آن‌ها کار کن و حالت‌های مختلف را ببین.
✳۰۱پایه‌هایی از جنس پنبه
رنگ‌ها، تایپوگرافی و فاصله‌های تأییدشدهٔ پنبه.
تأیید شدهکلمات هم شخصیت دارند.
Vazirmatnنمایشی · ۴۰ / ۷۰۰از همین امروز.
عنوان اول · ۳۲ / ۷۰۰یک قدم به خودت نزدیک‌تر
عنوان دوم · ۲۴ / ۶۰۰قدم‌های کوچک، تغییرهای بزرگ
عنوان سوم · ۱۸ / ۶۰۰برای چیزی که برات مهمه
متن · ۱۴ / ۴۰۰قرار نیست بی‌نقص باشی. همین که شروع کنی، یعنی یک قدم جلو رفته‌ای.
راهنما · ۱۲ / ۴۰۰هر مسیر از یک انتخاب کوچک شروع می‌شود. ۰۱۲۳۴۵۶۷۸۹
فاصله‌ها · بر پایهٔ ۴
گردی گوشه‌ها · در انتظار بررسی
✳آرام، واضح، انسانی.
فضای باز، کنتراست خوانا و تأکیدهای کوچک. آبی کبالت برای انتخاب و پیشرفت؛ طلایی برای جشن گرفتن قدم‌ها.
رنگ، تایپوگرافی و فاصله‌ها · تأیید شده ۰۴هر قطعه، بخشی از یک تجربه
کارت، برچسب، پیشرفت، تب، منو و آکاردئون.
Content & structureنمونهٔ کارت هدف
برای خودم وقت می‌گذارم
هر روز، یک فرصت کوچک برای یاد گرفتن.
برچسب و نشان
پیش‌نویسدر حال انجامانجام شددستاورد یک سؤال، یک قدم روشن‌تر
اگر امروز فقط دو دقیقه وقت داشته باشم؟
همین هم برای شروع کافی است. یک قدم آن‌قدر کوچک انتخاب کن که بتوانی همین حالا انجامش بدهی.
اگر یک روز از مسیر جا بمانم چی؟
می‌توانی دوباره از یک قدم کوچک شروع کنی. لازم نیست همهٔ کارهای قبلی را یک‌جا جبران کنی.
آیا لازم است همه‌چیز را از قبل بدانم؟
نه، برای مرور این نمونه کافی است بخش‌ها را باز کنی و حالت‌های مختلف را ببینی.
یک هدف معنادار، چند قدم شدنی و فرصتی برای دیدن پیشرفت. این متن، نمونهٔ محتوای تب اول است.
قدم اول را کوچک انتخاب کن. یک صفحه بخوان، یک خط بنویس یا فقط دو دقیقه برای شروع وقت بگذار.
هنوز رویدادی در این نمونه ثبت نشده. تاریخچهٔ واقعی در مرحلهٔ بعد طراحی می‌شود.
هنوز چیزی اینجا نیست
شروع‌های خوب، اغلب از یک جای خالی می‌آیند.
۰۵کمی مکث، کمی توجه
پنجرهٔ مودال، تأیید حذف و برگهٔ پایین در موبایل.
Modals & sheetsپنجرهٔ مودال
برای یک تصمیم یا ورودی متمرکز.
برگهٔ پایین
در موبایل از پایین صفحه باز می‌شود.
تأیید یک تصمیم
توضیح روشن پیش از اقدام حساس.
۰۶پنبه جواب می‌دهد
بازخورد روشن؛ در موفقیت، خطا و زمان انتظار.
Feedback & loadingاین بار انجام نشد
این قدم ثبت نشد. دوباره تلاش کن؛ انتخابت از بین نرفته است.
یک قدم جلو رفتی!
قدم کوچک تو هم ارزشمند است. ادامه بده.
آماده‌سازی با پنبه
Loadingآماده‌ای شروع کنیم؟یک قدم کوچک انتخاب کن؛ پنبه کنارت می‌ماند.
پیش‌نمایش محتوا
۰۷یک دعوت به شروع
هیرو، بنر بازاریابی و اسلایدر با کنترل دستی.
Banners & carouselیک شروع کوچکفقط دو دقیقه، برای خودت.
لازم نیست همهٔ راه را بدانی. قدم اول را بردار؛ پنبه کنارت است.
نمونهٔ بنر بازاریابیروزهای بهتر، از قدم‌های کوچک.
یک دعوت کوتاه و روشن، با فضای کافی برای نفس کشیدن.
همین قدمت هم مهمه.نمونهٔ بنر تشویقی درون اپ
۰۸آیکون‌های پنبه
کتابخانهٔ تأییدشدهٔ Phosphor، با سه وزن برای بررسی.
Phosphor · تأیید شدهنرم و متنوع؛ خطی، دوتُن و توپر
۰۹ناوبری پایین پنبه
ناوبری تأییدشدهٔ پنبه با رنگ‌های جوهر و کبالت. مقصد فعال را عوض کن.
Bottom navigation