
Caldera
آتش را روی سنگ آهک گرم بجوشانید. بوم نقاشی از گچ خام و گرم ساخته شده و هر عنصر نارنجی مانند زغالهای گداختهای است که به سطح آن فشرده شدهاند.
کالدرا بر روی یک بوم سنگ آهک گرم، غرق در رنگ نارنجی مذاب، اجرا میشود. سطح مشترک صاف و بدون سایه است و به تایپوگرافی فوقالعاده جسورانه و متراکم در مقیاسی نزدیک به معماری (تا ۱۸۹ پیکسل) اجازه میدهد تا کل بار سازه را به دوش بکشد. یک نارنجی پر جنب و جوش (#fc5000) به عنوان تنها لهجه رنگی تهاجمی در برابر پسزمینهای از خاکستریهای گرم و تک رنگ عمل میکند، بنفش پلاسما برای تصویر اصلی نیمرنگ و زرد گوگردی برای برچسبها در نظر گرفته شده است. زبان بصری آتشفشانی است: حروف متراکم و سنگین، الگوهای نقطهای نیمرنگ، شعاعهای ۴۰ پیکسلی روی کارتها و دکمهها و کنترلهای قرصی شکل ۸۰۰ پیکسلی - گرمایی که در سطحی نرم و کاغذ مانند محصور شده است.
پالت بصری مینیمالیستی و متفکرانه است. پنجره اصلی به جای عکس از یک الگوی نقطهای نیمرنگ انتزاعی (نقاط نارنجی روی گرادیان بنفش به نارنجی) استفاده میکند - این الگو نه به عنوان تزئین، بلکه به عنوان بیان هنری برند عمل میکند. کارتهای حاوی اطلاعات محصول و اطلاعیهها از بلوکهای Ember جامد یا یک نیمرنگ Plasma Violet به عنوان تصویر پر شده استفاده میکنند و یک سیستم گرافیکی یکپارچه ارائه میدهند. لوگوهای شریک/ادغام به صورت آیکونهای تکرنگ روی یک پسزمینه روشن ظاهر میشوند. هیچ عکس، رندر سهبعدی یا تصویر سبک زندگی وجود ندارد. آیکونها کوچک، تکرنگ و مینیمالیستی هستند - Discord، X و Telegram به صورت گلیفهای ساده در ناوبری قرار گرفتهاند. زبان بصری گرافیکی و ویرایشی است، نه عکاسی: بیشتر شبیه طراحی پوستر است تا تصاویر استوک.
پالت
برند
- Ember
#fc5000— دکمههای اصلی عمل، کارتهای آمار و عناصر بصری کلیدی، تنها عناصر رنگی تهاجمی هستند؛ غنای آن در برابر تُنهای خاکستری گرم، حس فوریت را بدون نیاز به عناصر تزئینی اضافی ایجاد میکند. - Plasma Violet
#524ae9— پایه گرادیان نیمرنگ اصلی، یک سطح کارت اضافی - تقریباً منحصراً در الگوی نقطهای اصلی و روی یک کارت اختصاصی استفاده میشود؛ هرگز برای کنترلها استفاده نشده است.
خنثی
- Sulfur
#f5f28e— پسزمینهی آیکونهای برچسب و دستهبندی، هایلایتهای کوچک، به رنگ زرد ملایم است که برای نشان دادن دستهبندیهای پستهای وبلاگ و اطلاعیههای برنامه استفاده میشود. - Limestone
#f7f6f2— سطوح کارت، پسزمینههای بلوک محتوا و دکمههای اضافی، سایه روشنتر و گرمتری از سفید هستند که باعث میشود عناصر در مقابل بوم صفحه برجسته شوند. - Pumice
#e2e2df— پسزمینه اصلی صفحه، خاکستری متوسط گرم است که به عنوان پایه هر بخش عمل میکند؛ این رنگ کمی تیرهتر از سطح مقوا است و امکان جداسازی ظریف شکل و پسزمینه را بدون سایه فراهم میکند. - Obsidian
#070607— متن اصلی، عنوانها، متن لینکها و قاب دکمهها تقریباً مشکی هستند و ته رنگ گرم آنها به سختی قابل توجه است که با رنگهای گرم بوم مطابقت دارد. - Chalk
#ffffff— متن در بخشهای تیره، متن ورودی روی پسزمینههای تیره، پوششهای با کنتراست بالا - سفید خالص فقط در جایی استفاده میشود که حداکثر کنتراست با سطوح تیره مورد نیاز باشد.
تایپوگرافی
از ۱۲ تا ۱۸۹ پیکسل · ۱۰ مرحله
- PP Neue Corp Compact — جایگزینی: Bebas Neue · طرح کلی 400 (Ultrabold cut) · تمام عنوانها و متن نمایش داده شده. یک فونت سفارشی، فشرده و فوقالعاده پررنگ، به عنوانها وزنی صنعتی و تابلو مانند میدهد. اندازه ۱۸۹ پیکسل در بلوک اصلی، سبک امضای برند را منعکس میکند: فشرده، تقریباً ساختاری به جای تایپوگرافی. تنظیمات "ss06" و "ss10" فرمها و فاصلههای متناوب حروف را برای ریتمی تهاجمیتر و فشردهتر فعال میکنند. فاصله مثبت حروف (+۰.۰۲em) برای اندازههای صفحه نمایش غیرمعمول است و از احساس تنگی متن در ۸۰ تا ۱۸۹ پیکسل جلوگیری میکند.
- DM Sans — جایگزینی: Inter · طرح کلی 500 (Medium only — never Regular or Bold) · متن اصلی، لینکهای ناوبری، برچسبهای دکمهها و عنوانهای ثانویه تا 30 پیکسل هستند. وزن فونت متوسط عمداً انتخاب شده است - فونت معمولی در مقابل فونت عنوان خیلی پررنگ خیلی نازک به نظر میرسد و فونت پررنگ با آن رقابت میکند. DM Sans یک نقطه مقابل انسانگرایانه و کمی هندسی برای فونت عنوان صنعتی ایجاد میکند.
- System sans-serif — جایگزینی: Inter · طرح کلی 400 · زیرنویسها، متامتن، تاریخها، میکروتگها. فقط در اندازه ۱۲ پیکسل استفاده میشود، جایی که وزن و تشخیص برند از صرفهجویی در اندازه اهمیت کمتری دارند.
فواصل و فرم
| هدف | معنی |
|---|---|
| تراکم | میانگین |
| گام اساسی | 16px |
| شعاع دکمه | 40px |
| شعاع کارت | 40px |
| سایهها | بدون حاشیه به جای سایه |
| بین بخشها | 80px |
| عرض صفحه | 1280px |
هوش مصنوعی وبسایت شما را به سبک Caldera میسازد و آن را پر میکند
- از طریق لینک - Instagram ، TikTok ، Facebook - محصولات و پستها را پر کنید.
- محتوا را از سایت قدیمی خود منتقل کنید—فقط آدرس را مشخص کنید.
- طراحی مدرن روی بهترین موتور: React ( Next.js) با رندر سرور و بهینهسازی سئو از پیش آماده.
- بهینهسازی سئو کاملاً خودکار برای نتایج جستجو و توصیههای شبکه عصبی.
سبکهای مشابه
- teenage engineering — کاتالوگ صنعتی در نورپردازی استودیویی - محصول تنها شیء مهم در صفحه است و هر چیز دیگری پیرامون آن بحث میشود.
- basement — یک چاپخانه خالی در ساعت ۳ صبح - فونتهای بزرگ و فشردهای که در سراسر سیاهی مطلق پخش شدهاند، یک سوسوی نور نارنجی در نوار ناوبری، و هر چیز دیگری سفید یا خاکستری شبحوار.
- amra — یک کره رنگینکمانی روی پسزمینه سفید - رنگ بنفش کمرنگ تنها پالس رنگی روی یک صفحه تقریباً کاملاً بیرنگ است و کره گرادیان واحد کاری را انجام میدهد که تصویر اصلی معمولاً انجام میدهد.
- Stink Studios — یک استودیوی فیلمسازی در نیمهشب - پروژکتور وزوز میکند، اتاق تاریک است، فقط فیلم روشن است
- Andrei Rybin — دفتر طراحی تک رنگ، دفترچه یادداشتی است که در آن صفحات تلفن مانند کانتکت شیتها به یک دیوار سفید متصل میشوند.
- Uniswap Cup — پخش مسابقه ورزشهای الکترونیکی در یک سایت شبیهسازی شده انجام میشود - یک ماژیک صورتی، شبکهای از مربعهای سفید و خطوط نازک را ترسیم میکند.
- Freytag Anderson — پرده سینما با یک کلمه بالا میرود. یک تصویر متحرک عظیم تمام صفحه را اشغال میکند، نام تجاری مانند یک عنوان در گوشهای قرار میگیرد و هیچ چیز دیگری حواس بیننده را پرت نمیکند.
- Integrated Biosciences — آزمایشگاه زیستتابی در نیمهشب
- Vercel — ترمینال چاپ شده روی کاغذ سفید
- Mintlify — یک باغ ابری بالای یک میز شیشهای. آسمانِ نقاشیشده با دست و مستند در قابی کنار هم قرار گرفتهاند - تنها جایی که رنگ و مفهوم پیش از محو شدن صفحه در سفیدی صومعهوار، با هم تلاقی میکنند.
- Gleap — یک فضای کاری که با تُنهای کرم گرم و تزئینات گرافیتی تزئین شده است - استودیویی که در آن نقاط جوهر مشکی مات به نظر میرسد که بر فراز معماری کتانی شناور هستند.
- ClickUp — یک داشبورد قدرتمند روی سنگ مرمر سفید. این صفحه یک بروشور محصول برای یک ابزار بهرهوری است، بنابراین زبان بصری از خود محصول وام گرفته شده است: فهرستهای متراکم، نشانگرهای وضعیت، گروههایی از آواتارها و عبارات تایپوگرافیک جسورانه که مانند مشخصات محصول روی صفحه نمایش به نظر میرسند.