Modal
ფოსფორესცენტული ტერმინალი ჩაბნელებულ სერვერების ოთახში - სინათლის ერთადერთი წყარო კაშკაშა მწვანე ფერია
მოდალური სისტემა ფუნქციონირებს როგორც ფოსფორესცენტული ტერმინალი ბნელ სერვერულ ოთახში: თითქმის შავი ტილო, ღია მწვანე შრიფტით და ერთი კაშკაშა ლაით-მწვანე აქცენტით, რომელიც LED სტატუსის ინდიკატორის ფუნქციას ასრულებს. დიზაინის ენა დეველოპერზეა ორიენტირებული - მონოსაიდური კოდის ფანჯრები შუქნიშნის წერტილებით, იზომეტრიული 3D ხატულები ხელმოწერილ მწვანე ფერში და უამრავი თეთრი სივრცი, რაც თითოეულ სექციაში ერთ ელემენტს ნათების საშუალებას აძლევს. ტიპოგრაფია დაყოფილია სათაურებისთვის მორგებულ შრიფტად (Goga) და ყველა ინტერფეისის ელემენტისთვის ცვლად შრიფტად (Inter), ორივე დაყენებულია ვიწრო უარყოფითი თვალთვალით. ფერები თანაბრად არის განაწილებული: ეკრანების უმეტესობა აქრომატულია და კაშკაშა ლაით-მწვანე ფერი მხოლოდ ძირითად მოქმედებებზე, ლოგოზე, 3D ილუსტრაციებსა და ხაზგასმულ მომენტებზე ჩანს. კომპონენტები ბრტყელია და ჩარჩოს გარეშე, სიღრმე შექმნილია დახვეწილი მწვანე საზღვრებით და ფონის დაბინდვით და არა ჩრდილებით.
მოდალური ვერსია იყენებს სრული სიგანის მუქ განლაგებას, მაქსიმალური სიგანით 1280 პიქსელი კონტენტის განსათავსებლად. მთავარი ფანჯარა ცენტრშია განთავსებული: სათაური (პირველი წინადადება ლაიმის მწვანეში), ქვესათაური, ორი მოწოდება მოქმედებისკენ და ერთი 3D ობიექტი, როგორც ვიზუალური წამყვანი - განლაგების გვერდითი ზოლისგან გამოყოფის გარეშე. კონტენტის სექციები მიჰყვება ერთგვაროვან რიტმს: წარბის ტეგი (დიდი ასოებით, Moss 70) → Goga სათაური → მდუმარე ტექსტი, შემდეგ ან ორსვეტიანი განლაგება ფუნქციის აღწერით (ტექსტი + კოდი/ვიზუალური ბარათი) ან ბარათების სამსვეტიანი ბადე. სექციებს შორის დაშორებები დიდია - 80 პიქსელი. გვერდი მონაცვლეობით იცვლება ღრმა ცარიელი (#000000) და ოდნავ ღია ფონის (#181818) ზოლებს შორის, ერთი ღია სექცია (#def0dd) ჩანს გვერდის შუაში, როგორც ვიზუალური შესვენება. ნავიგაცია შედგება ერთი, ფიქსირებული ზედა ზოლისგან ბუნდოვანი ფონით - გვერდითი ზოლის ან მეგამენიუს გარეშე. ქვედა კოლონტიტული კომპაქტური და მუქია, მდუმარე მწვანე ბმულების სვეტებით. ტექსტის სიმჭიდროვე კომფორტულია: თითოეულ სექციას საკმარისი ადგილი აქვს და ბარათების ბადეები სამ სვეტზე მეტს არ იყენებს.
Modal-ის ვიზუალური ენა ორ რეჟიმად იყოფა: 3D მანათობელი პროდუქტის რენდერები და მუქი კოდის ფანჯრის მაკეტები. ფოკუსური წერტილი არის ერთი 3D კუბი, რომელიც რენდერირებულია მარკეტინგული გრადიენტის გამოყენებით (ცისფერი მწვანედან ზურმუხტისფერამდე), განლაგებული რადიალური გრადიენტის ჰალოში, რომელიც ცარიელ სივრცეს მწვანე შუქით ასხივებს - ბრენდის დამახასიათებელი ვიზუალური სტილი. სამუშაო დატვირთვის ბარათები შეიცავს იზომეტრიულ 3D ხატებს (wireframe კუბი, მყარი კიბე, ფენები), რომლებიც რენდერირებულია იმავე ცაცხვის მწვანე ფერში მუქ ფონზე. კოდი და საორიენტაციო შედეგები წარმოდგენილია ტერმინალის ფანჯრის ბარათების სახით შუქნიშნის წერტილებით, ფოსფორესცენტურ პალიტრაში მონოსაიდური სინტაქსის ხაზგასმით და მდუმარე მწვანე საზღვრით - ისინი რეალური ბრძანების ხაზის ინტერფეისის ეკრანის ანაბეჭდებს წააგავს. კლიენტის ლოგოები ნაჩვენებია როგორც გაუჯერებელი მწვანე-ნაცრისფერი ეტიკეტები ერთ, დაბალი კონტრასტის რიგში, რაც ნდობას მიანიშნებს ვიზუალური კონკურენციის გარეშე. საერთო სიმჭიდროვე დაბალია - გვერდების უმეტესობა ძირითადად ტექსტს შეიცავს, ხოლო სურათები წარმოდგენილია როგორც ინდივიდუალური ფოკუსური წერტილები და არა ფოტოების ბადე. არ არის ფოტოები; მთელი ვიზუალური სისტემა რენდერირებულია, გეომეტრიული და კაშკაშა.
პალიტრა
ბრენდი
- Lime Pulse
#7fee64— კორპორატიული იდენტობის ძირითადი ელემენტებია ლოგო, მოქმედებისკენ მოწოდების მთავარი ფორმა (CTA), ტეგის შევსება, აქტიური მდგომარეობები და ილუსტრაციის ძირითადი ფერი.
ნეიტრალური
- Phosphor White
#ddffdc— მთავარი ტექსტი, სათაურის ფერი, ხატულას კონტური და შევსებული ღილაკის ტექსტი წარმოადგენს მთავარ წასაკითხ ზედაპირს. - Void Black
#000000— გვერდის ტილო, ფონის ყველაზე ღრმა ფენა - Ground Iron
#181818— მთავარი ღილაკის შევსება, ბარათის ზედაპირები მუქ ადგილებში, მომხმარებლის ინტერფეისის ძირითადი ზედაპირი. - Carbon Veil
#212525— ამაღლებული ზედაპირები, ნავიგაციის ფონი, მიწაზე ოდნავ მსუბუქი. - Circuit Border
#485346— კონტური/აჩრდილის ფორმის მოქმედების ჩარჩო, მთავარი ინტერაქტიული თხელი ხაზი, მდუმარე მომწვანო-ნაცრისფერი ელფერისაა. - Phosphor Blue-Black
#1f2a33— მეორადი თხელი მარკირების ხაზები, რომლებიც ყოფენ შტრიხებს მუქ ზოლებს შორის.
ტიპოგრაფია
12-დან 64 პიქსელამდე · 8 ნაბიჯი
- Goga — ჩანაცვლება: Inter Tight or Space Grotesk · კონტურები 400, 500 · სათაურისა და ქვესათაურის შრიფტი – გამოიყენება ყველა H1–H4 სათაურისა და ბარათისთვის. Goga არის გეომეტრიული sans-serif შრიფტი ვიწრო აპერტურებითა და ოდნავ კვადრატული ტერმინალებით. საშუალო წონა (500) გამოიყენება ბარათის დონის სათაურების მონიშვნისთვის; ნორმალური წონა (400) გამოიყენება გმირისა და სექციის სათაურებისთვის. Modal-ის იდენტობის განმსაზღვრელი ალტერნატიული გლიფის ფორმების წვდომისთვის, მისი „ss01“ სტილისტური ნაკრები უნდა იყოს ჩართული. უარყოფითი ასოების ინტერვალი თანდათან მცირდება -0.007em-დან 48px-ზე -0.017em-მდე 21px-ზე.
- Inter Variable — ჩანაცვლება: Inter · კონტურები 400, 500 · მომხმარებლის ინტერფეისი და ძირითადი ტექსტის ასლი – ნავიგაცია, ღილაკები, ძირითადი ტექსტის ასლი, ეტიკეტები, ქვედა კოლონტიტული. ინტერაქტიული ელემენტებისა და ნავიგაციისთვის ნაგულისხმევად გამოიყენება საშუალო წონა (500); აბზაცებისთვის გამოიყენება ნორმალური (400). ასოებს შორის დაშორება შესამჩნევად მცირდება მცირე ზომის შემთხვევაშიც კი (-0.026em 14 პიქსელზე, -0.022em 16 პიქსელზე), რაც ინტერფეისს შეკუმშულ, ტერმინალურ სიმკვრივეს ანიჭებს. ალტერნატიული პუნქტუაციისთვის უნდა იყოს ჩართული „cv11“ სიმბოლოების ვარიანტი. 12 პიქსელზე დიდი ასოების ეტიკეტები იყენებენ +0.05em დაშორებას ძირითადი ტექსტის სიმკვრივის დასაბალანსებლად.
ინტერვალები და ფორმა
| მიზანი | მნიშვნელობა |
|---|---|
| სიმჭიდროვე | საშუალო |
| ძირითადი ნაბიჯი | 20px |
| ღილაკის რადიუსი | 12px |
| ბარათის რადიუსი | 8px |
| ჩრდილები | საზღვრების გარეშე ჩრდილების ნაცვლად |
| სექციებს შორის | 80px |
| გვერდის სიგანე | 1280px |
ხელოვნური ინტელექტი შექმნის თქვენს ვებსაიტს Modal სტილში და შეავსებს მას
- შეავსეთ პროდუქტებითა და პოსტებით ბმულის საშუალებით - Instagram, TikTok, Facebook.
- გადაიტანეთ კონტენტი თქვენი ძველი საიტიდან — უბრალოდ მიუთითეთ მისამართი.
- თანამედროვე დიზაინი საუკეთესო ძრავზე: React ( Next.js) სერვერის რენდერინგით და SEO ოპტიმიზაციით, დაუყოვნებლივ.
- სრულად ავტომატიზირებული SEO ოპტიმიზაცია ძიების შედეგებისა და ნეირონული ქსელის რეკომენდაციებისთვის.
მსგავსი სტილები
- Slash — შუაღამის სარდაფი მოოქროვილი საწიგნეებით
- AgentQL — ჩრდილოეთის ნათება ტერმინალის თავზე ღამით
- GitHub — კოსმოსური სარდლობის პანელი ბიოლუმინესცენტური საკონტროლო წერტილებით — ბნელი, ატმოსფერული სამუშაო სივრცე, სადაც ერთი მწვანე ნათება წინსვლის გზას მიუთითებს.
- Doppler — სარდაფის იისფერი განათება შუაღამისას. თითქმის შავი ტილო ერთი ლავანდისფერი სიგნალითა და მწვანე დამადასტურებელი შუქით ანათებს, ყველა ზედაპირი საკმარისად მოხრილია, რომ მისი მოჭერა შესაძლებელი იყოს.
- Basedash — შუაღამის მონაცემთა ტერმინალი მქრქალი შრიფტით. ბნელი ობსერვატორია, სადაც მეტრიკა ანათებს იისფერ და მწვანე ფერებში, ხმაურის ზემოთ სერიფული სათაურები ლივლივებს, ხოლო თეთრი აბის ფორმის ღილაკები ერთადერთი კაშკაშა ობიექტებია რბილი შავი ზედაპირების მქონე ოთახში.
- Superwhisper — ჩრდილოეთის ნათება შუაღამის მინაზე ქრება
- Better Stack — შუაღამის SRE კონსოლი
- Langbase — შუაღამის ჩრდილოეთის შუქების კონსოლი
- Astro — ღრმა კოსმოსური მისიის კონტროლი ნისლეულიდან ერთი იასამნისფერი ნათებით
- Wayfinder — შავი კინოეკრანი, რომლის ზემოთაც ძლივს გასაგონად გამოსახული სათაური ლივლივებს. ინტერფეისი მართვის პანელის ნაცვლად სიკაშკაშის სლაიდერს წარმოადგენს.
- HashiCorp — შუაღამისას იისფერი ნეონის შუქებით აღჭურვილი საკონტროლო ოთახი ბნელი ტექნიკური ზედაპირია, სადაც მანათობელი ექვსკუთხა კუბი ერთადერთ ფერად მინიშნებას წარმოადგენს.
- Umbrel — მყუდრო კოცონი ღამის სერვერების ოთახში - ბნელი ოთახი, სადაც ერთი ატმისფერი ნათება ხაზს უსვამს იმას, რაც ნამდვილად მნიშვნელოვანია.