Stripe
دفتر حسابی که با جوهر نیلی روی شیشه مات نوشته شده است
Stripe از زبانی تقریباً تکرنگ برای ابزارهای مالی استفاده میکند: یک بوم سفید نرم و خنک با سرتیترهای آبی تیره، تقریباً بدون عناصر کرومی تزئینی، و یک نیلی روشن (#533afd) که میتواند به طور قانونی به عنوان یک دکمه، لینک یا طرح کلی آیکون استفاده شود. تایپوگرافی فوقالعاده نازک است، با وزن ۳۰۰ نقطه - حتی در ۵۶ پیکسل - که به جای اینکه کاملاً شرکتی به نظر برسد، به طور قابل اعتمادی ساده به نظر میرسد. فاصله حروف با افزایش اندازه به شدت کاهش مییابد. دکمهها کوچک و مربعی (۴ پیکسل) هستند و از پر کردن بنفش یا نازکترین خطوط بنفش استفاده میکنند. این سیستم کاملاً از سایهها اجتناب میکند. عمق از طریق تغییر رنگهای پسزمینه (سفید → #f8fafd → #e5edf5 → رنگهای بنفش) به دست میآید، نه از طریق ارتفاع. کل رابط مانند یک دفتر کل حسابداری یا یک ترمینال رفتار میکند: اطلاعات متراکم، خطوط واضح، فضای کافی بین بخشها و رنگ فقط زمانی ظاهر میشود که عملی مورد نیاز باشد.
حداکثر عرض برای یک ستون محتوای مرکزی روی یک بوم سفید حدود ۱۳۲۰ پیکسل است. قهرمان یک بلوک متنی با تراز چپ در اندازه کامل (۵۶ پیکسل) است که دو دکمه فراخوان در زیر آن قرار دارد، بدون تصویر قهرمان - تایپوگرافی قهرمان است. بخشها به صورت عمودی با ناودانهای مساوی ۹۶ پیکسلی و جداکنندههای ۱ پیکسلی #e5edf5 مرتب شدهاند؛ هیچ نوار تیره/روشن متناوبی وجود ندارد. هر بخش از یک الگوی تکرارشونده پیروی میکند: یک عنوان کوچک برای هر بخش با حروف بزرگ (رنگ دودی، ۱۲ پیکسل)، سپس یک عنوان ۳۲-۴۸ پیکسلی، سپس یک پاراگراف ۲۲ پیکسلی، سپس یک شبکه از کارتهای محصول (۳ ستون در دسکتاپ) یا یک بلوک متنی ۲ ستونی با هنرهای تجسمی. لوگوهای مشتری در یک نوار عمودی باریک، تراز چپ ظاهر میشوند. پاورقی یک نوار پهن #f8fafd با لیستهای چند ستونی از لینکها است. ریتم کلی کند، سنجیده و عمدتاً متنی است - با وجود طول پیمایش طولانی، تراکم اطلاعات کم است.
تصاویر، محدود و به سبک مستند هستند. عکسهای تمامصفحه فقط در بخشهایی با مطالعات موردی (مثلاً عکاسی هوایی برای هرتز) ظاهر میشوند که از بالا یا با زوایای چشمگیر با استفاده از رنگهای طبیعی گرفته شدهاند - بدون دورنگ یا پردازش رنگ. تصاویر رابط کاربری محصول در کارتهای ویژگی استفاده میشوند، با زوایای تیز و حاشیههای واضح، بدون قاب دستگاه رندر میشوند. لوگوهای شرکا با رنگهای خودشان و بدون هیچ گونه محفظهای نمایش داده میشوند. هیچ تصویرسازی، رندر سهبعدی یا عناصر گرافیکی انتزاعی تزئینی وجود ندارد. آیکونها یکنواخت هستند: وزن خط ۱، وزن خط ۲ روی زمینه سفید، با هنر خط هندسی (شورون، فلش، علامت تیک، نمادهای سند). صفحه عمدتاً از متن و فضای سفید تشکیل شده است. تصاویر کمتر از ۳٪ از کل فضای بصری را اشغال میکنند.
پالت
برند
- Indigo Ink
#533afd— رنگ بنفش برای دکمههای توپر، حالتهای ناوبری انتخابشده و لحظات تبدیل متمرکز استفاده میشود. - Indigo Hover
#7389ff— بنفش برای برجسته کردن لینکها، برچسبها و عبارات کوتاه استفاده میشود. نباید به عنوان رنگ اصلی برای دکمههای فراخوان عمل (Call to action) استفاده شود.
خنثی
- Midnight Ink
#061b31— عنوان اصلی و متن بدنه به رنگ تیره و تقریباً مشکی با ته رنگ آبی سرد هستند که به عنوان پایه و اساس کل سیستم فونت عمل میکند. - Slate
#64748d— متن خاکستری، لینکها، برچسبها و عبارات کوتاه را برجسته میکند. - Steel
#50617a— متنهای اضافی و مطالب پشتیبان بین رنگهای بنفش تختهای و کمرنگ مورد استفاده در مجوزهای فرعی قرار گرفتهاند. - Smoke
#839bc8— برای تیترهای تزئینی بزرگ و متن همراه، از سایه بنفش ملایم استفاده میشود - هرگز در پاراگرافهای بدنه استفاده نشود. - Pure White
#ffffff— بوم صفحه و سطوح برجسته کارتها؛ پسزمینه پیشفرض که هر چیز دیگری در مقایسه با آن سنجیده میشود. - Mist
#f8fafd— پسزمینه پاورقی و جداکننده بخشها، یک سایه سرد و ظریف هستند که قسمتها را بدون مرز قابل مشاهده از هم جدا میکنند.
تایپوگرافی
از ۱۲ تا ۵۶ پیکسل · ۹ مرحله
- sohne-var — جایگزینی: Inter Tight (variable · طرح کلی 300, 400 · تنها فونتی که در کل رابط کاربری استفاده میشود، برای عنوانها، متن بدنه، ناوبری، دکمهها و برچسبها است. وزن ۳۰۰ حتی در اندازه صفحه نمایش ۵۶ پیکسل نیز غالب است، که یک ویژگی متمایز است: عنوانها به جای فریاد زدن، نجوا میکنند و اقتدار را از طریق خویشتنداری به جای بلندی ایجاد میکنند. وزن ۴۰۰ فقط در ۱۴ تا ۱۶ پیکسل برای ناوبری و متن دکمه ظاهر میشود، جایی که برای خوانایی در اندازههای کوچکتر، یک خط اضافی لازم است.
فواصل و فرم
| هدف | معنی |
|---|---|
| تراکم | جادار |
| گام اساسی | 8px |
| شعاع دکمه | 4px |
| شعاع کارت | 4px |
| سایهها | بدون حاشیه به جای سایه |
| بین بخشها | 96px |
| عرض صفحه | 1320px |
هوش مصنوعی وبسایت شما را به سبک Stripe میسازد و آن را پر میکند
- از طریق لینک - Instagram ، TikTok ، Facebook - محصولات و پستها را پر کنید.
- محتوا را از سایت قدیمی خود منتقل کنید—فقط آدرس را مشخص کنید.
- طراحی مدرن روی بهترین موتور: React ( Next.js) با رندر سرور و بهینهسازی سئو از پیش آماده.
- بهینهسازی سئو کاملاً خودکار برای نتایج جستجو و توصیههای شبکه عصبی.
سبکهای مشابه
- Ui — طرح بالینی روی کاغذ مات
- monopo saigon — درخششی مایع و رنگینکمانی در پس سکوت تحریریه - گالری تحریریه تکرنگی که بر نوری مذاب شناور است
- Ventriloc — رصدخانهای از دادهها روی کاغذ گرم - یک اخگر نارنجی که دقت تکرنگ را برجسته میکند
- Hyer Aviation — غروب در کابین خلبان بر فراز کاغذ پوستی. آسمان کمرنگ سپیده دم با لوگوی سریف به اندازه بدنه هواپیما تلاقی میکند و یک تکرنگ با رنگ رسی گرم، محدودیت تکرنگی را میشکند.
- Family — برگی از یک افسانه روی کاغذ پوستی خامهای
- OFF+BRAND. — کرهای رنگینکمانی روی پوست کاغذی گرم
- Geniestudio — یک دفترچه یادداشت نرم در نور روز - از آن نوعهایی که حاشیههای پهن و یک ضربه قلم ضخیم دارند
- xAI — آزمایشگاه کرم گرم با قرص سیاه
- Seed — یک موجود زنده زیر شیشه آزمایشگاهی
- Cosmos — یک دیوار گالری که با پارچه کتانی پوشیده شده و پر از عکسهای پولاروید است
- Cal — کاربردی بودن تک رنگ، یک رویکرد انسانی. سیستمی که وضوح و عملکرد را از طریق یک پالت سیاه و سفید دقیق در اولویت قرار میدهد، اما آن را با تایپوگرافی دوستانه و اشکال گرد ملایم میکند.
- T1 Energy — طرحی از یک مرکز تولید روی کاغذ پوستی گرم، صحنهای آرام و تکرنگ است که در آن مقیاس صنعتی و تایپوگرافی ظریف، کل برند را مجسم میکند.