Cursor
یک کارگاه دنج کاغذ پوستی، روشن شده با زغالهای گداخته
کرسر از یک تایپوگرافی گرم و شبیه به کاغذ پوستی استفاده میکند: یک بوم کرمی، متن مشکی جوهری و یک لهجه نارنجی آتشین که به جای پر کردن دکمهها، لینکها و انتخابها را فعال میکند. عنوانها، که با CursorGothic با ضخامت ۴۰۰ تنظیم شدهاند، با افزایش اندازه، فاصله حروف به تدریج کاهش مییابد - اقتدار از طریق خویشتنداری و ضخامت نازک حروف به جای برجستگی به دست میآید. سطوح صاف و کاغذی نگه داشته میشوند، با حاشیههای نازک و سایههای خاکستری نرم و گرم؛ گوشهها با ضخامت ۴ پیکسل در سراسر متن، واضح باقی میمانند. EB Garamond به صورت انتخابی برای زیرعنوانها و نثر استفاده میشود، در حالی که berkeleyMono کد، برچسبها و فرادادهها را مدیریت میکند و به سیستم شخصیتی تایپوگرافی میدهد که بیشتر شبیه یک مجله ادبی است تا یک داشبورد SaaS.
حداکثر عرض: ۱۳۰۰ پیکسل در مرکز، حاشیه ۲۴ پیکسل. ناوبری بالا: هدر شفاف با ارتفاع ۵۲ پیکسل با لوگو و علامت متن در سمت چپ، ۴ لینک ناوبری در مرکز، خوشه "ورود / تماس / دانلود" در سمت راست تراز شده است. قهرمان: هدر در سمت چپ + بلوک فراخوان دو مرحلهای با متن از بالا سمت چپ، سپس یک کارت ماکت محصول تمام عرض که کل عرض صفحه را در بر میگیرد. نوار اعتماد: یک ردیف افقی از ۸ کاشی لوگو در یک خط در عرض بخش. بخشهای ویژه متن متناوب در سمت چپ و یک اسکرینشات در سمت راست در یک طرح دو ستونی، هر کدام ۵۰/۵۰، با ریتم عمودی ۶۴-۹۶ پیکسل بین بخشها. همه اسکرینشاتهای ویژه، ماکتهای پنجرهای با سبک macOS یکسان هستند. پاورقی: شبکه چهار ستونی از لینکها با علامت تجاری در سمت چپ. بخشها به جای جداکنندهها با فضای تنفس کافی از هم جدا شدهاند - خود بوم کرم رنگ این جدایی را فراهم میکند.
اسکرینشاتهای محصول در مرکز توجه قرار دارند: ماکتهای بزرگ پنجره macOS که محیط توسعه مکاننما (Cursor IDE) را در عمل نشان میدهند: تبهای فایل، نماهای مختلف، طرحهای عامل، پنلهای ترمینال و ادغام Slack/chat. هر ماکت پنجره با یک کارت #f2f1ed با کنتراست نرم و گرم قاب گرفته شده است. یک عکس منظره کمرنگ (افق کوهها/بیابان) فراتر از بخش اصلی امتداد یافته و بدون ایجاد تضاد با رابط کاربری، به آن گرما میبخشد. لوگوهای مشتری ( Stripe ، OpenAI، Linear، Datadog، NVIDIA، Figma، Ramp، Adobe) به صورت حروف تکرنگ در کاشیهای کتانی قرصی شکل ارائه شدهاند. هیچ عکسی از افراد، تصاویر یا عناصر گرافیکی تزئینی انتزاعی وجود ندارد - تمام وزن بصری بر روی رابط کاربری و برندسازی محصول متمرکز شده است. آیکونها، حروف برجسته نازک و تکخطی هستند که با #7a7974 Ash پر شدهاند و هرگز رنگی نیستند.
پالت
خنثی
- Ink
#26251e— متن اصلی، پسزمینه دکمه عمل اصلی، متن ناوبری - یک سایه گرم و تقریباً سیاه، هرگز خالص نیست #000 - Parchment
#f7f7f4— پسزمینه صفحه، بوم اصلی، به رنگ کرم گرم است که کنتراست را ملایم میکند و حس چاپ جوهری را به جای چاپ دیجیتال ایجاد میکند. - Bone
#f2f1ed— سطوح مقوایی و ظروف برجسته، که یک تُن تیرهتر از بوم نقاشی هستند، جلوهای لایه لایه و بدون حاشیه از «کاغذ روی کاغذ» ایجاد میکنند. - Linen
#e6e5e0— رنگ خنثی روشن برای دکمهها روی سطوح تیره. - Stone
#cdcdc9— حاشیههای نازک، جداکنندهها، پارتیشنهای ظریف - خطوط ۱ پیکسلی با تُنهای گرم - Mist
#a1a19f— متن کمکی سطح سوم، زیرنویسها - بین متن بیصدا و متن ثانویه.
تایپوگرافی
از ۱۲ تا ۷۲ پیکسل · ۶ مرحله
- CursorGothic — جایگزینی: Inter · طرح کلی 400, 500 · فونت اصلی برای رابط کاربری، عنوانها، ناوبری، متن بدنه و طراحی محصول. عنوانها با وزن ۴۰۰ نقطه و کاهش تدریجی فاصله حروف (-۰.۰۰۵em در ۲۲px → -۰.۰۳em در ۷۲px) از ویژگیهای متمایز این فونت هستند: عنوانها هرگز پررنگ نیستند. توابع فونت ss08، ss09 و tnum جایگزینهای سبکی و شکلهای جدولی را فعال میکنند.
- EB Garamond — جایگزینی: Iowan Old Style · طرح کلی 400, 500 · CursorGothic با یک فونت سریف سرمقالهای برای زیرعنوانهای جداگانه، متن اصلی و دادههای جدولی، جلوهای ادبی به رابط کاربری میبخشد.
- berkeleyMono — جایگزینی: ui-monospace · طرح کلی 400, 500 · مونواسپیس - برای بلوکهای کد، قطعه کدهای خط فرمان، فرادادهها، مسیرهای فایل و برچسبهای توسعهدهنده - یک زبان فنی.
فواصل و فرم
| هدف | معنی |
|---|---|
| تراکم | متراکم |
| گام اساسی | 8px |
| شعاع دکمه | 4px |
| شعاع کارت | 4px |
| سایهها | بدون حاشیه به جای سایه |
| بین بخشها | 64-96px |
| عرض صفحه | 1300px |
هوش مصنوعی وبسایت شما را به سبک Cursor میسازد و آن را پر میکند
- از طریق لینک - Instagram ، TikTok ، Facebook - محصولات و پستها را پر کنید.
- محتوا را از سایت قدیمی خود منتقل کنید—فقط آدرس را مشخص کنید.
- طراحی مدرن روی بهترین موتور: React ( Next.js) با رندر سرور و بهینهسازی سئو از پیش آماده.
- بهینهسازی سئو کاملاً خودکار برای نتایج جستجو و توصیههای شبکه عصبی.
سبکهای مشابه
- Amplemarket — یک محل کار آفتابگیر و پوشیده از کاغذ رنگی
- Getharvest — میزی در ساعت طلایی - بوم نقاشی به رنگ کرم گرم، کارت پستالهای سفید آویزان از بوم، و یک شعله نارنجی روشن
- Drive Capital — پوستر سفر جادهای قدیمی روی کاغذ گرم
- Wealthsimple — انبار با روکش ترمه و نورپردازی گالری
- Huddle — کارتهای موجودی پاستلی روی کاغذ کرم رنگ
- Fuser — عکسهای پولاروید پراکنده روی دیوار محل کار یک طراح
- Campsite — میز کار یک ویراستار آفتابگیر - کاغذ کرم گرم با یک مهر نارنجی مخصوص
- Redis Agency — کارگاه ویراستاری که بعد از ساعات کاری باز است، مکانی کاملاً تاریک است که در آن تمام کارهای مربوط به برندسازی با فونتهای سریف و یک تربچه قرمز انجام میشود.
- AI Product Generation — استودیوی عکاسی تحریریه روی کاغذ سفید - عنوان به عنوان جلد، رنگ نارنجی برای برجستهسازی تحریریه
- Getanchor — رنگ گرم سفالی روی زمینه کرم رنگِ آفتابخورده
- Flatfile — یک دفتر خاطرات آرام روی پوست گرم
- Inthememory — یک طرح معماری روی سنگ مرمر سفید با یک نور گرم. یک اتاق داده آرام و تحریریه که در آن جوهر فیروزهای تیره و کنترلهای قرصی شکل بر فراز سطوح سفید و ترد شناور هستند و تنها با یک لکه نارنجی شکسته میشوند.