
Framer
صفر میں نیین گیلری
فریمر تقریباً مکمل اندھیرے کے طور پر کام کرتا ہے — ایک سیاہ کینوس جہاں مواد گیلری کے کھلنے پر نیون سائن کی طرح منڈلاتا ہے۔ 0.8–1.1 کی سخت لائن اسپیسنگ کے ساتھ GT Walsheim میڈیم میں سیٹ کی گئی ہیڈلائنز اور جارحانہ منفی لیٹر اسپیسنگ (54px پر -0.04em)، ایک گاڑھا، آرائشی ٹائپ فاس بنائیں جو صفحہ پر صفائی کے ساتھ بیٹھنے کے بجائے آگے بڑھاتا ہے۔ ایک الیکٹرک بلیو (#0099ff) تمام فنکشنل لہجے فراہم کرتا ہے — بارڈرز، گلو، آئیکنز، ایکٹو سٹیٹس — جبکہ باقی انٹرفیس رنگین رہتا ہے، خالص سیاہ سے گہرائی پیدا کرنے کے لیے ٹھیک ٹھیک گرے ٹرانزیشن (#111, #171717, #242424) پر انحصار کرتا ہے۔ اجزاء کو آرائشی کے بجائے سمجھا جاتا ہے: 8–25px کا گول ریڈی، پتلی 1px بارڈرز، کم سے کم ڈراپ شیڈو، اور پارباسی سطحیں جو صفر کو چمکنے دیتی ہیں۔
مکمل چوڑائی والے حصے سیاہ کینوس سے باہر پھیلے ہوئے ہیں، مواد کی زیادہ سے زیادہ چوڑائی ~1200px تک محدود ہے اور اس کے اندر مرکز ہے۔ مرکزی حصے میں بائیں طرف سے منسلک ہیڈر اور سنگل کال ٹو ایکشن (CTA) بٹن شامل ہے، جس میں دائیں طرف جان بوجھ کر خالی چھوڑ دیا گیا ہے — غیر متناسب طور پر، مرکز میں نہیں۔ صرف ٹیکسٹ لے آؤٹس (بڑے ہیڈر + سب ٹیکسٹ) اور پروڈکٹ کے اسکرین شاٹس کے درمیان متبادل حصے۔ "Framer کے ساتھ آتا ہے" سیکشن 4 کالم گرڈ میں لوگو والی دیوار کا استعمال کرتا ہے۔ کمیونٹی سیکشن میں، پروڈکٹ کا اسکرین شاٹ گول کونوں کے ساتھ مرکز میں، پوری چوڑائی والے کنٹینر میں رکھا جاتا ہے۔ نیویگیشن کم سے کم ہے - بائیں طرف لوگو کے ساتھ ایک پتلی ٹاپ بار اور دائیں طرف منسلک لنکس، بغیر کسی نظر آنے والے کنٹرول کے۔ سیکشن تال: سیکشنز کے درمیان اہم 80px عمودی فرق، باطل میں تیرتے ہوئے مواد کے الگ الگ جزیرے۔
پروڈکٹ کے یوزر انٹرفیس کے اسکرین شاٹس غالب ہیں—ٹریفک لائٹ کے نقطوں کے ساتھ کروم نما ونڈو کے ذریعے تیار کردہ، ایپ کے ایمبیڈڈ اسکرین شاٹس مرکزی تصویر بن جاتے ہیں۔ لوگو، معیار کے ثبوت کے طور پر، وسیع وقفہ کے ساتھ سیاہ پس منظر پر سفید حروف میں پیش کیے جاتے ہیں۔ کوئی تصویریں، عکاسی، یا تجریدی گرافکس استعمال نہیں کیے جاتے ہیں- بصری زبان خود ایک پروڈکٹ ہے، جو ایک زندہ انٹرفیس کے طور پر ظاہر ہوتی ہے۔ آئیکن اسٹائل: مرصع، خاکہ نما، مونوکروم اور چھوٹے سائز میں سفید۔ متن کی کثافت: پروڈکٹ اسکرین شاٹس کی شکل میں کبھی کبھار بڑے ٹکڑوں کے ساتھ، بنیادی طور پر متن۔ خلا کا بصری توازن واضح طور پر تصاویر پر ٹائپوگرافی کی حمایت کرتا ہے۔
پیلیٹ
برانڈ
- Vivid Violet
#0066ff— بنیادی ایکشن بٹن انٹرفیس میں واحد جگہ ہے جہاں ایک ٹھوس رنگین بٹن کا پس منظر ظاہر ہوتا ہے۔
غیر جانبدار
- Bone
#ffffff— مرکزی عنوانات، سیاہ پس منظر پر مرکزی متن، بٹن کا پس منظر روشنی کا واحد ذریعہ ہے۔ - Void
#000000— صفحہ کینوس، نیویگیشن کا پس منظر، کارڈ کی سطحیں، آئیکن فل—سب ایک نہ ختم ہونے والا سیاہ رنگ ہے جو تمام غیر ضروری مواد کو جذب کرتا ہے۔ - Graphite
#111111— ابھرے ہوئے کارڈ کی سطحیں صفر سے ایک قدم اوپر ہیں—بڑے، فعال کارڈز اور موڈل کنٹینرز۔ - Obsidian
#171717— بٹنوں، اضافی کارڈز، UI فلز کے لیے درمیانی سطح - کینوس سے متعامل عناصر کو الگ کرتی ہے۔ - Slate
#242424— ہوور پر، ٹیکسٹ فارمیٹ پر سوئچ کرنے سے پہلے ان پٹ فیلڈز اور انڈینٹڈ پینلز سب سے روشن غیر جانبدار سایہ ہیں۔ - Ash
#333333— غیر فعال پس منظر کی تصاویر اور ساختی عناصر کے لیے گہری بھریں۔
نوع ٹائپ
12 سے 68px تک · 8 مراحل
- sans-serif — متبادل: Inter · خاکہ 400 · sans-serif - نکالے گئے ڈیٹا میں پایا جاتا ہے لیکن AI کے ذریعہ بیان نہیں کیا گیا ہے۔
- GT Walsheim — متبادل: Inter Tight · خاکہ 500 · عنوانات اور عنوانات کا فونٹ برانڈ فونٹ ہے۔ یہ جارحانہ طور پر گاڑھا ہے، 0.8–1.1 کی لائن اسپیسنگ اور 44–68px رینج میں -0.04em سے -0.05em کے لیٹر اسپیسنگ کے ساتھ۔ یہ آرائشی عنصر نہیں ہے؛ GT Walsheim کی ہندسی گرم جوشی، سخت میٹرکس کے ساتھ مل کر، سسٹم کی آواز کو تخلیق کرتی ہے — پر اعتماد، کمپیکٹ، اور قدرے مستقبل۔ اسی طرح کے ہندسی اظہار کے لیے، Inter Tight یا Space Grotesk Bold پر غور کریں۔
- Inter Variable — متبادل: Inter · خاکہ 400 · مرکزی متن، نیویگیشن، اور ثانوی عنوانات ورک ہارس ہیں۔ انٹر ویری ایبل محور وزن کے ہموار انٹرپولیشن کی اجازت دیتا ہے۔ جیسے جیسے سائز بڑھتا ہے ٹریکنگ تنگ ہوتی جاتی ہے: -0.001em سے 18px تک اور -0.027em سے 22px تک۔ متغیر ورژن سائٹ کی ہموار مائیکرو اینیمیشنز کی اجازت دیتا ہے۔ تبدیلی: انٹر ( Google) – عملی طور پر ایک جیسی فال بیک۔
وقفے اور شکل
| مقصد | مطلب |
|---|---|
| کثافت | اوسط |
| بنیادی قدم | 10px |
| بٹن کا رداس | 9999px |
| کارڈ کا رداس | 20px |
| سائے | نہیں - سائے کی بجائے سرحدیں |
| حصوں کے درمیان | 80px |
| صفحہ کی چوڑائی | 1200px |
AI آپ کی ویب سائٹ کو Framer کے انداز میں بنائے گا اور اسے بھرے گا۔
- لنک کے ذریعے پروڈکٹس اور پوسٹس بھریں - Instagram, TikTok, Facebook.
- اپنی پرانی سائٹ سے مواد منتقل کریں—بس پتہ کی وضاحت کریں۔
- بہترین انجن پر جدید ڈیزائن: سرور رینڈرنگ اور SEO آپٹیمائزیشن کے ساتھ React ( Next.js) باکس سے باہر۔
- تلاش کے نتائج اور نیورل نیٹ ورک کی سفارشات کے لیے مکمل طور پر خودکار SEO کی اصلاح۔
ملتے جلتے انداز
- Auros — بائولومینیسینٹ ڈیٹا گیندوں کے ساتھ ابلیسل ٹرمینل
- Origin Financial — آدھی رات کی خاموشی کی ایک گیلری۔ ایک پُرسکون، تقریباً تاریک کمرہ جہاں بڑے سیرف فونٹس اور چند روشن رنگین پینلز یہ احساس پیدا کرتے ہیں کہ فنانس آرٹ کا ایک احتیاط سے تیار کردہ کام ہے۔
- Raycast — آدھی رات کا کمانڈ سینٹر، کورل نیین
- Dimension — فراسٹڈ شیشے کے پینلز کے ساتھ شام کی روشنی والا ورک سٹیشن
- Reflect Notes — تارامی بنفشی جگہ ایک تاریک رصد گاہ ہے جہاں نوٹ تقریباً سیاہ انڈگو کے خالی پن کے پس منظر میں برج کی طرح تیرتے ہیں۔
- Ameba — آدھی رات کو کنٹرول روم – فراسٹڈ شیشے کے پینل کے اندر ایک برقی نیلی نبض
- Branding — سیاہ گیلری کی دیوار، خون کے سرخ لہجے - بڑے سفید فانٹ ایک گہرے کینوس پر تیرتے ہیں جو کہ ایک باطل سے مشابہت رکھتے ہیں، جس میں ایک ہی روشن سرخ لہجے میں خلل پڑتا ہے اور آرائشی عناصر جو ویب انٹرفیس سے زیادہ گیلری کے اشارے کی طرح نظر آتے ہیں۔
- Harness — فاسفورسنٹ سبز لہجوں کے ساتھ آدھی رات کو مشن کنٹرول
- Koto — آدھی رات کو اوبسیڈین گیلری۔ تقریباً سیاہ رنگ کا مرحلہ، جہاں صرف گرم روشنی کا ذریعہ ایک ہی پیلے رنگ کا مارکر ہے، اور نمائشی پوسٹرز جیسی وسیع منفی جگہ میں گاڑھی قسم تیرتی ہے۔
- Ohzi — تاریک گیلری میں ایک چمکتا ہوا کیوب
- Depot — ایک تاریک سرور ٹرمینل۔ تقریباً سیاہ ڈویلپر کنسول، جس میں ایک ہی سبز ایل ای ڈی کام کے آغاز کا اشارہ دے رہا ہے، اور باقی یوزر انٹرفیس گریفائٹ میں دکھایا گیا ہے۔
- Maciej Zadykowicz — مڈ نائٹ گیلری اس کے کیلیڈوسکوپک دیوار کے ساتھ تقریباً ایک سیاہ اسٹوڈیو کی دیوار ہے جہاں ایک متحرک، رنگین ٹائپوگرافک آرٹ توجہ کا حکم دیتا ہے جبکہ باقی سب کچھ خاموش اور جان بوجھ کر رہتا ہے۔