Column
د سړې سهار لاندې یو تیاره نیلي کتابچه
ستون په نږدې سپین پس منظر کې ژور، اداري نیلي رنګ کاروي: پاڼه لومړی د قوي بانکي محصول سطحې او دوهم د پراختیا کونکي د لوبې ډګر په څیر احساس کوي. د برانډ رنګ یو واحد نه دی، مګر یو همغږي جوړه ده - د جدي جوړښت لپاره بحري نیلي #111a4a، د معلوماتو او کوډ لپاره نعناع شنه #44b48b - د یو واحد ګرم نارنجي (#ec652b) سره چې د لوړ شدت تلفظ سطحو لپاره ساتل شوی لکه د بریکس کارت. ټایپوګرافي د SuisseIntl لخوا تسلط لري، یو جیومیټریک سینز سیرف چې د 300 (لینکونو) څخه تر 600 (ډسپلې) پورې د ټول وزن رینج کې کارول کیږي، سیسټم ته یو اصلاح شوی، اداری سټایل ورکوي چې ډیری فینټیک شرکتونه نلري. کارتونه په لویو سپینو سطحو کې د فرعي، پرتونو سیوري سره تیریږي؛ ډیری انٹرفیس عناصر فلیټ دي، د ژوروالي سره یوازې هغه ځای کې ښکاري چیرې چې کارت باید د فزیکي شی په څیر احساس وکړي (د راکړې ورکړې ویجټونه، د محصول ماک اپونه). کوډ او مالي معلومات په مونوکروم، سمندري فوم رنګ کې وړاندې کیږي - یو بصري سیګنال چې دا یو بانک دی چې د انجینرانو لخوا د انجینرانو لپاره جوړ شوی.
د پاڼې جوړښت بشپړ پلنوالی لري، د پراخو اړخونو حاشیو سره متمرکز دی (په ډیسټاپ کې 64-15 سانتي متره). اصلي سکرین یو ویشل شوی ترتیب دی: سرلیک او د عمل کولو غوښتنې په 25 سانتي مترو کې کیڼ اړخ ته تنظیم شوي، پداسې حال کې چې د لامبو وهلو ویجیټ په ښي خوا کې د نیم ټون نقشې شالید په وړاندې په 55 سانتي مترو کې موقعیت لري. د اصلي سکرین لاندې، برخې د سپین (4 سانتي متره) او سپک کینوس (5 سانتي متره) ترمنځ د 6 سانتي مترو عمودی ګټرونو سره بدیل کیږي. مینځپانګه د یو واحد 6-ستون گرډ سره سم تنظیم شوې ده: د متن بلاکونه 4 ستنې (7 سانتي متره) نیسي، د عکس/محصول کارتونه 5-6 ستنې نیسي، د ګریډ څخه قصدي آفسیټ سره. هغه برخې چې ځانګړتیاوې بیانوي د 2-ستون ترتیب کاروي: متن په کیڼ اړخ کې، محصول په ښي اړخ کې. د باور احصایې برخه د پاڼې په بشپړ عرض کې په 4-ستون گرډ ویشل شوې ده. د پیرودونکي لوګو په یوه واحد مرکز قطار کې د 48px ګټرونو سره موقعیت لري. فوټر یو کمپیکٹ دوه کالم ترتیب لري. نیویګیشن یو ثابت، ۶۲ پکسله اوږد، شفاف پورتنۍ بار دی چې د اصلي سکرین په سر کې یو تیاره شالید لري چې د سکرول کولو سره سپین ته تیاره کیږي. هیڅ اړخ پټه یا میګا مینو نشته — ډراپ ډاونونه ساده د تیر سټایل مینو دي.
د بصري سټایل لږترلږه او فعال دی — کالم په بشپړ ډول د سټاک عکس اخیستنې څخه ډډه کوي. بصري ژبه په دریو سرچینو جوړه شوې ده: (1) د SVG ډیټا انځورونه، په ځانګړي توګه د نقطې هافټون نړۍ نقشه، د انډیګو څخه نارنجي ته فیروزي ته د تدریجي سره وړاندې کیږي، چې د اصلي عنصر تر شا د نړیوال پیمانه فضا رامینځته کوي؛ (2) د محصول کارت ترتیبونه — د حساب بیلانس، د لیږد توضیحات، او د JSON کوډ ټوټې په سپینو کارتونو کې د ډراماتیک سیوري سره ښودل کیږي؛ (3) د چارټ لیدونه — د فیروزي شمعې یا بار چارټونه د باور/احصایې برخې کې کارول شوي پتلي نښلونکي لینونو سره. د هافټون نقشه د لاسلیک بصري عنصر دی — د هغې تدریجي لیږدونه د #d65620 (نارنج) څخه د بنفش، نیلي، نیلي، فیروزي، او ژیړ له لارې، یو سپیکٹرم رامینځته کوي چې ټول برانډ پیلټ په یوه واحد آرائشی سطحه سره یوځای کوي. شبیهونه د #232730 یا #a9acb6 ډولونو کې د 1.5–2px یونیفورم خاکه ضخامت لري، د فعال حالتونو لپاره ډک سره. نه د ژوند طرز عکسونه، نه د 3D لنډیز رینډرونه - دا محدودیت په قصدي ډول د محصول او معلوماتو باندې تمرکز کولو لپاره دی.
پالټ
برانډ
- Indigo Navy
#111a4a— د برانډ اصلي رنګ د ډک شوي کال ټو ایکشن، فعال نیویګیشن حالتونو، سرلیک او لوګو لپاره کارول کیږي. ژور بنفش-آبي رنګ سایټ ته یو قوي مګر بډایه تور رنګ ورکوي؛ د سپین متن سره یوځای، دا په سایټ کې ترټولو قوي تڼۍ رامینځته کوي. - Seafoam 600
#44b48b— د کوډ او ډیټا رنګ د JSON کیلي، پیژندونکو، او د کوډ سنیپټونو کې مالي ارزښتونو لپاره د برانډ رنګ دی. دا په چارټونو او د ودې لیدونو کې د ډیټا پوائنټونو لپاره هم کارول کیږي. - Seafoam 700
#167e6c— د معلوماتو په شرایطو کې د خاکې، چارټ لینونو، او د آئیکون تلفظونو لپاره د سمندري فوم تیاره سیوري. دا د تیاره شالید په وړاندې د سمندري فوم پیمانه لنگر کوي. - Seafoam 400
#94efb7— د کوډ روښانه شوې ټوټه د کوډ بلاکونو دننه د تار ارزښتونه، URLs، او API پای ټکي لري. د سیفوم ترټولو سپک رنګ د شنه رنګ سره د مونوسپیس فونټ په توګه لوستل کیږي. - Deep Sea
#023247— د چارټ د سینګار خاکه او تلفظ رنګ یو بډایه فیروزي رنګ دی چې د SVG انځورونو او معلوماتو لیدونو کې کارول کیږي، د سمندري فوم رنګ پیمانه سره.
بې طرفه
- Midnight Ink
#011821— تیاره سطحه او روښانه شوی متن - د محصول کارت شالید، لوړ برعکس اصلي متن. خړ ته نږدې د یخ نیلي - شنه رنګ سره؛ د تیاره حالت لپاره د اساس په توګه کارول کیږي کله چې یوه برخه برعکس کولو ته اړتیا وي. - Slate Ink
#3b3e47— دوهم سرلیک او اصلي متن د نیمې شپې رنګ په پرتله یو څه ګرم دي، چیرې چې خالص تور رنګ په روښانه کینوس کې ډیر سخت ښکاري کارول کیږي. - Steel
#7c7f88— اصلي متن او د لینک متن د یو خاموش رنګ لخوا تسلط لري (په اصلي متن کې 245 ځله کارول شوی). یو بې طرفه خړ-آبي رنګ چې د ارام په توګه ګڼل کیږي، هیڅکله نه مینځل شوی انځور. - Fog
#a9acb6— د آیکون بڼې، دریمې درجې پولې، او د ځای ساتونکي متن. یو منځنی خړ رنګ چې متن پرته له دې چې ورسره سیالي وکړي جلا کوي. - Mist
#cbcccf— اصلي متن — لاسلیکونه، ردونه، او کوچني چاپ — په سپینه شالید کې لوستل کیدی شي، مګر په لید کې لږ د پام وړ دي. - Silver Lining
#e3e4e8— د کارتونو پولې، د ننوتلو ساحې پولې، د ویشلو کرښې. دا جوړښتي، نازک رنګ هغه ځای کې کارول کیږي چیرې چې دوه سطحې باید پرته له سیوري جلا شي.
ټایپوګرافي
له ۱۰ څخه تر ۶۰ پکسله پورې · ۱۰ ګامونه
- SuisseIntl — بدیل: Inter · بڼې 300, 400, 500, 600 · لومړني فونټ - د ټولو سرلیکونو، د بدن متن، تڼیو، نیویګیشن، لینکونو، او د کارت متن لپاره کارول کیږي. ځانګړی جیومیټریک سنز سیریف کالم ته یو ځانګړی اداری سټایل ورکوي، چې دا د نورو فینټیک شرکتونو څخه جلا کوي چې په ځانګړي ډول د انټر-یوازې سره کار کوي. وزن یې د سرلیکونو لپاره په 52-60px کې 600، د فرعي سرلیکونو لپاره 500، د بدن متن لپاره 400، او د ټیټ ټینګار لینکونو لپاره 300 دی.
- SuisseIntlMono — بدیل: JetBrains Mono · بڼې 400 · د SuisseIntl سره ورته یو مونوسپیس فونټ، چې د تخنیکي لیبلونو، API پیژندونکو، او په UI عناصرو کې د ایمبیډ شوي معلوماتو لپاره کارول کیږي. دا د SuisseIntl په څیر ورته تناسب ساتي، نو مونوسپیس او متناسب متن په مخلوط شرایطو کې په سمه توګه سمون لري.
- SFMono — بدیل: Fira Code · بڼې 400 · د کوډ ټوټې ښودنه - د JSON مثالونو او API اسنادو بلاکونو کې ښودل شوي. د سمندري فوم سیوري د کوډ د UI متن څخه د لید توپیر لپاره کارول کیږي.
وقفې او بڼه
| موخه | معنی |
|---|---|
| کثافت | اوسط |
| اساسي ګام | 8px |
| د تڼۍ وړانګې | 8px |
| د کارت وړانګې | 8px |
| سیوري | د سیوري پر ځای هیڅ سرحد نشته |
| د برخو ترمنځ | 72px |
| د پاڼې پلنوالی | 1200px |
AI به ستاسو ویب پاڼه په Column سټایل کې جوړه کړي او ډکه یې کړي
- د لینک له لارې محصولات او پوسټونه ډک کړئ - Instagram ، TikTok ، Facebook.
- له خپل زوړ سایټ څخه مواد انتقال کړئ — یوازې پته مشخص کړئ.
- په غوره انجن کې عصري ډیزاین: د سرور رینډرینګ او SEO اصلاح کولو سره React ( Next.js).
- د لټون پایلو او عصبي شبکې سپارښتنو لپاره په بشپړ ډول اتوماتیک SEO اصلاح کول.
ورته سټایلونه
- dope.security — د نیمې شپې ټرمینل د ارغواني څراغونو سره
- Leonardo — یوه معکوسه اداری ګالري. یو تور دیوال لرونکی موزیم چیرې چې ارغواني سرلیکونه د دیوال نصبولو په توګه کار کوي، او د مصنوعي ذهانت لخوا تولید شوي انځورونه په لاندې یوه ګڼه جال کې ځړول شوي دي.
- VEED — د سپین ګالري دیوال د نیون شنه رڼا تڼیو سره
- Craft Docs — د سکریپ بوک کولو لپاره ډیجیټل کولیج. ډیزاین د یو فکري، لمسونکي سکریپ بوک سره ورته دی، چیرې چې جوړښت شوي ډیجیټل نوټونه د نرم، عضوي جوړښتونو سره یوځای کیږي.
- Letter — یوه شخصي ګالري چې د ذخیرې څخه ځلیدونکي اثار پکې ښودل شوي. د تور دیوال نندارتون ځای چیرې چې د ګالري رنګ شوي دیوالونو کې د کروم مجسمو څخه پورته سیریف شوي سرلیکونه تیریږي.
- Railway — د کاسمیک نیمې شپې ایکسپریس. د تیاره، ستورو روښانه فضا له لارې یو ارام، په زړه پورې سفر، د روښانه نښو لخوا رهبري شوی.
- Garden Eight — په کریم رنګ کاغذ باندې یو یادګاري اداریه. د 215px سیریف سرلیک یوازې په ګرمو چرمیو کې ناست دی، د لامبو وهونکو مجسمو بڼو او د سمندري هوا په څیر منفي ځای سره محاصره شوی - پاڼه د ډشبورډ په پرتله د هنر مونوګراف پوښ په څیر احساس کوي.
- Steep — په ګرم کاغذ کې د سیرف فونټونو تحلیل
- ElevenLabs — د عکس مقاله په ګرمو کریمي رنګونو کې د نازکو سرلیکونو سره. د باهوس سټایل نوټ بوک - د هګۍ د خولۍ رنګ کاغذ، تور رنګ، او د محصول د نندارې لپاره یو واحد ارغواني او نارنجي تلفظ.
- Awesomic — د نارنجي ټکي نښو سره د اداری زنک میش چې د کنفټي یادونه کوي
- Monad — د ګرمو پوستکو په اړه د تخنیکي مجلې اداریه
- AI for Business — په ګرمو خړ رنګونو کې د ظالمانه اداری نندارتون