Vercel
ترمینال چاپ شده روی کاغذ سفید
سیستم طراحی ورسل، تمرینی در تکرنگ منظم است: یک بوم تقریباً سفید (#fafafa)، تایپ مشکی، حاشیههای نازک و فقدان کامل رنگهای تزئینی. زبان بصری، ترمینال یک توسعهدهنده را که به صورت چاپی ارائه شده است، تداعی میکند - Geist Sans در مقیاس "قهرمانانه" با وزن ۴۰۰-۴۵۰ و فاصله حروف -۰.۰۶em به سختی قابل خواندن است، در حالی که Geist Mono برچسبها، فرادادهها و نمونههای کد را در اندازههای بزرگ ۱۱-۱۳px اعمال میکند. دکمهها شعاعهای تیز ۶px یا مستطیلهایی از سیاه خالص روی سفید یا سفید روی سیاه هستند. این سیستم به جای رنگ، بر کنتراست و سلسله مراتب تایپوگرافی تکیه میکند و از علامت مثلثی (▲) و یک علامت کلمه دو خطی به عنوان تنها عناصر برندسازی استفاده میکند. سطوح به ترتیب #fafafa → #ebebeb → #۱۷۱۷۱۷ روی هم قرار میگیرند و از طریق تغییر مقادیر تُن به جای سایه یا رنگ، عمق ایجاد میکنند. هر عنصر بر روی یک شبکه ۴ پیکسلی با تراکم فشرده ساخته شده است، که منجر به رابط کاربریای میشود که یادآور دفترچه یادداشت یک مهندس است - دقیق، کاربردی و بیباک از فضای سفید.
این کانتینر ۱۲۸۰ پیکسل عرض دارد، در مرکز قرار گرفته و دارای حاشیه افقی وسیع (۲۴-۴۸ پیکسل) است. بلوک اصلی از یک ترکیب سهگانه نامتقارن استفاده میکند: یک تیتر بزرگ در سمت چپ، یک علامت تجاری در مرکز و یک بلوک "ابرو" در سمت راست. در زیر بلوک اصلی، محتوا به صورت نوارهای متناوب مرتب شده است: یک نوار تمام عرض با لوگوی مشتری، و به دنبال آن یک بخش دو ستونی "سازندگان عامل" با تیتر در سمت چپ و یک طرحبندی محصول در سمت راست، و به دنبال آن یک شبکه از سه کارت با ویژگیها. بخشها توسط ناودانهای عمودی ۹۶-۱۲۸ پیکسلی بدون جداکننده یا آفست پسزمینه از هم جدا شدهاند. ناوبری یک پنل ثابت ۶۴ پیکسلی با پسزمینه تار است. شبکههای کارتی به طور مداوم از یک طرحبندی دو یا سه ستونی با ناودانهای ۱۶-۲۴ پیکسلی استفاده میکنند. تراکم کلی فشرده است - متن به راحتی قابل خواندن است، فضای سفید کافی وجود دارد، اما اندازه فونت و اندازه اجزا مانع از احساس بیروحی صفحه میشود.
تصاویر پراکنده و همیشه کاربردی هستند. عنصر بصری اصلی مثلث سیاه (▲) است - یک علامت تجاری هندسی که به صورت یک سیلوئت معلق در مقیاس "بزرگ" ظاهر میشود. لوگوهای مشتری در نوار اثبات مفهوم از کلمات کلیدی واقعی هر برند در مقیاس خاکستری استفاده میکنند. ماکتهای محصول (رابط چت Notion، خروجی ترمینال CLI، کارت گذرنامه) به صورت تصاویر حالت روشن در کارتهای قاببندی شده تعبیه شدهاند. هیچ عکس، تصویر یا عنصر سهبعدی وجود ندارد - سیستم صرفاً تایپوگرافی و اشکال هندسی روی کاغذ سفید است.
پالت
خنثی
- Obsidian
#171717— تیترهای اصلی، حاشیههای ناوبری، دکمههای تیره رنگ و نشانگرهای لیست، همگی تقریباً مشکی هستند تا از خشونت و اشباع زننده جلوگیری شود. - Paper White
#fafafa— بوم صفحه، سطوح کارت، نور دکمهها - اینها پسزمینه استانداردی هستند که همه چیز دیگر روی آن قرار دارد. - Pure White
#ffffff— سطوح برجسته کارت، درجها، فیلدهای ورودی. - Hairline
#ebebeb— حاشیههای ۱ پیکسلی روی دکمهها، لینکها و کارتها در بزرگنمایی بالا قابل مشاهده هستند، اما در بزرگنمایی پایین نامرئی میباشند. - Ash
#c9c9c9— متن غیرفعال، برچسبهای بیصدا، واترمارکهای نام تجاری در لوگوهای مشتری. - Smoke
#a8a8a8— متن ثانویه، متن جایگزین، پر کردن ظریف با آیکون.
تایپوگرافی
از ۱۱ تا ۶۴ پیکسل · ۶ مرحله
- Geist Sans — جایگزینی: Inter · طرح کلی 400, 450, 500 · فونت اصلی برای رابط کاربری و عنوانها، یک فونت sans-serif هندسی سفارشی از Vercel با فاصله کم بین حروف در اندازههای بزرگ است (-0.06em در 56-64px، -0.05em در 30px). برای عنوانهای بالای صفحه، وزن 450 انتخاب شد: ضخیمتر از Light اما سبکتر از Semi-Bold، که لحنی مطمئن اما نه سلطهجویانه ایجاد میکند.
- Geist Mono — جایگزینی: JetBrains Mono · طرح کلی 400, 500, 600 · یک فونت ثانویه تکفاصله برای زیرنویسها، بلوکهای کد، پنلهای خروجی CLI، فرادادهها و متن با حروف بزرگ. ترکیب 8px/600px/حروف بزرگ امکان قرارگیری دقیق کلمات کوچک را فراهم میکند. فاصله زیاد حروف (0.071em) در نسخه تکفاصله، فضای کافی برای متن با حروف بزرگ فراهم میکند.
فواصل و فرم
| هدف | معنی |
|---|---|
| تراکم | متراکم |
| گام اساسی | 12px |
| شعاع دکمه | 6px |
| شعاع کارت | 6px |
| سایهها | بدون حاشیه به جای سایه |
| بین بخشها | 96-128px |
| عرض صفحه | 1280px |
هوش مصنوعی وبسایت شما را به سبک Vercel میسازد و آن را پر میکند
- از طریق لینک - Instagram ، TikTok ، Facebook - محصولات و پستها را پر کنید.
- محتوا را از سایت قدیمی خود منتقل کنید—فقط آدرس را مشخص کنید.
- طراحی مدرن روی بهترین موتور: React ( Next.js) با رندر سرور و بهینهسازی سئو از پیش آماده.
- بهینهسازی سئو کاملاً خودکار برای نتایج جستجو و توصیههای شبکه عصبی.
سبکهای مشابه
- Headspace — گوشهای آفتابی برای سلامتی روی کاغذ گرم
- WHOOP — آزمایشگاه اجرا در نیمهشب - میزهای سفید آزمایشگاه بالینی زیر یک فضای خالی سیاه تئاتری، یک پالس بنفش برق
- Together AI — کنسول تحقیقاتی روی کاغذ یخبندان
- v0 by Vercel — طراحی با دستگاه تراش. دقت و کارایی از اهمیت بالایی برخوردارند، و هر عنصر هدف مشخصی را روی سطحی تمیز و از نظر فنی بینقص ارائه میدهد.
- Dovetail — طرحی زیر نور ماه سیاه - خطوط نمودار به سختی قابل مشاهده، فونت سفید، یک درخشش بنفش
- Glideapps — میز طراحی تک رنگ با یک درخشش فیروزهای برقی
- Timescale — طراحی مهندسی روی کاغذ گراف گرم
- UGLYCASH — یک دفترچه یادداشت با روکش برچسب روی کاغذ کرم رنگ، حال و هوای یک فینتک جسورانه و حداکثری را تداعی میکند که با افتخار هرج و مرج خود را به نمایش میگذارد.
- Sprout Social — جوانهای سبز روی تختهسنگ سیاه. یک لهجهی روشن روی بوم تکرنگِ محض، که رنگش فقط برای اکشن استفاده میشود، با فونت هندسیِ مطمئنی که به عنوان تابلوهای راهنما عمل میکند.
- Krea — گالری نوآر در نیمه شب
- Evergreen — گلخانه خورشیدی روی کاغذ کتانی
- Factory — ترمینال «اتاق جنگ» در نیمهشب. «کارخانه» یک صفحه کنترل کاملاً سیاه است که یک کارت سفید مانند یک اعلان روشن با چراغ قوه روی آن قرار میگیرد - تنها شیء موجود در اتاق، خودِ کار است.