Modal
Ֆոսֆորեսցենտ տերմինալ մութ սերվերային սենյակում. միակ լույսի աղբյուրը վառ կանաչ գույնն է
Մոդալը գործում է ինչպես ֆոսֆորեսցենտ տերմինալը մթնեցված սերվերային սենյակում՝ գրեթե սև կտավ, բաց կանաչ տառատեսակ և մեկ վառ կանաչ-կարմիր շեշտադրում, որը գործում է որպես LED կարգավիճակի ցուցիչ: Դիզայնի լեզուն մշակողների համար է կենտրոնացած՝ մոնոսայդ կոդի պատուհաններ լուսացույցի կետերով, իզոմետրիկ 3D պատկերակներ՝ ստորագրային կանաչ գույնով և մեծ քանակությամբ սպիտակ տարածություն, որը թույլ է տալիս յուրաքանչյուր բաժնի մեկ տարրին փայլել: Տիպագրությունը բաժանված է վերնագրերի համար նախատեսված հատուկ տառատեսակի (Goga) և բոլոր UI տարրերի համար փոփոխական տառատեսակի (Inter), որոնք երկուսն էլ սահմանված են նեղ բացասական հետևողականությամբ: Գույները բաշխված են հավասարաչափ. էկրանների մեծ մասը աքրոմատիկ են, և վառ կանաչ-կարմիր գույնը հայտնվում է միայն հիմնական գործողությունների, լոգոյի, 3D նկարազարդումների և շեշտադրման պահերի վրա: Բաղադրիչները հարթ են և առանց շրջանակի, խորությունը ստեղծվում է նուրբ կանաչ սահմանների և ֆոնի մշուշոտման միջոցով՝ ստվերների փոխարեն:
Մոդալը օգտագործում է լրիվ լայնությամբ մուգ դասավորություն՝ առավելագույնը 1280px լայնությամբ՝ բովանդակությունը տեղավորելու համար: Հերոսի պատուհանը կենտրոնացված է՝ վերնագիրը (առաջին նախադասությունը՝ կրաքարի կանաչով), ենթավերնագիր, երկու կոչ գործողության և մեկ եռաչափ օբյեկտ՝ որպես տեսողական խարիսխ՝ առանց դասավորությունը կողային վահանակից առանձնացնելու: Բովանդակության բաժինները հետևում են միատարր ռիթմի՝ հոնքերի պիտակ (մեծատառեր, Moss 70) → Goga վերնագիր → մարված մարմնի տեքստ, ապա կամ երկսյունակ դասավորություն՝ հատկանիշի նկարագրությամբ (տեքստ + կոդ/տեսողական քարտ) կամ քարտերի եռասյունակ ցանց: Բաժինների միջև ընկած տարածությունները մեծ են՝ 80px: Էջը հերթագայում է խորը դատարկ (#000000) և մի փոքր ավելի բաց ֆոնի (#181818) շերտերի միջև, որտեղ մեկ բաց բաժին (#def0dd) հայտնվում է էջի կենտրոնում՝ որպես տեսողական դադար: Նավիգացիան բաղկացած է մեկ, ֆիքսված վերին վահանակից՝ մշուշոտ ֆոնով՝ առանց կողային վահանակի կամ մեգա-մենյուի: Ստորին մասը կոմպակտ և մուգ է՝ մարված կանաչ հղումների սյուներով: Տեքստի խտությունը հարմար է. յուրաքանչյուր բաժնին տրվում է բավարար տարածք, իսկ քարտային ցանցերը օգտագործում են ոչ ավելի, քան երեք սյունակ։
Modal-ի տեսողական լեզուն բաժանված է երկու ռեժիմի՝ 3D փայլուն արտադրանքի ռենդերինգներ և մութ կոդի պատուհանի մակետներ: Կիզակետը մեկ 3D խորանարդ է, որը ռենդերացվում է մարքեթինգային գրադիենտով (լայմագույն կանաչից մինչև զմրուխտագույն), տեղադրված ճառագայթային գրադիենտային հալոի մեջ, որը դատարկ տարածքը ողողում է կանաչ լույսով՝ ապրանքանիշի բնորոշ տեսողական ոճը: Աշխատանքային բեռնվածության քարտերը պարունակում են իզոմետրիկ 3D պատկերակներ (մետաղական շրջանակի խորանարդ, ամբողջական աստիճան, շերտեր), որոնք ռենդերացվում են նույն լիմոֆիտ կանաչով՝ մուգ ֆոնի վրա: Կոդը և չափանիշային արդյունքները ներկայացված են որպես տերմինալի պատուհանի քարտեր՝ լուսացույցի կետերով, ֆոսֆորեսցենտային պալիտրա մեջ միատարր սինտաքսի ընդգծմամբ և խլացված կանաչ եզրագծով. դրանք նման են իրական հրամանի տողի ինտերֆեյսի էկրանանկարների: Հաճախորդի լոգոները ցուցադրվում են որպես ապահագեցած կանաչ-մոխրագույն պիտակներ մեկ, ցածր կոնտրաստային շարքում, ազդարարելով վստահություն առանց տեսողական մրցակցության: Ընդհանուր խտությունը ցածր է. էջերի մեծ մասը պարունակում է հիմնականում տեքստ, իսկ պատկերները ներկայացված են որպես առանձին կիզակետեր, այլ ոչ թե լուսանկարների ցանցեր: Լուսանկարներ չկան. ամբողջ տեսողական համակարգը ռենդերավորված է, երկրաչափական և ճառագայթող:
Պալիտրա
Բրենդ
- Lime Pulse
#7fee64— Կորպորատիվ ինքնության հիմնական տարրերն են լոգոն, գործողության հիմնական կոչը (CTA), պիտակների լրացումը, ակտիվ վիճակները և նկարազարդման հիմնական գույնը։
Չեզոք
- Phosphor White
#ddffdc— Հիմնական տեքստը, վերնագրի գույնը, պատկերակի ուրվագիծը և լցված կոճակի տեքստը հիմնական ընթեռնելի մակերեսն են։ - Void Black
#000000— Էջի կտավ, ամենախորը ֆոնային շերտը - Ground Iron
#181818— Հիմնական կոճակի լրացում, քարտի մակերեսներ մուգ հատվածներում, օգտագործողի ինտերֆեյսի հիմնական մակերես։ - Carbon Veil
#212525— Բարձրացված մակերեսներ, նավիգացիոն ֆոն, մի փոքր ավելի թեթև, քան գետնը։ - Circuit Border
#485346— Ուրվագիծը/ուրվականի գործողության շրջանակը, հիմնական ինտերակտիվ բարակ գիծը, խլացված կանաչավուն-մոխրագույն երանգ է։ - Phosphor Blue-Black
#1f2a33— Երկրորդային բարակ նշագրման գծեր, որոնք բաժանում են հարվածները մուգ շերտերի միջև:
Տպագրություն
12-ից մինչև 64px · 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 14px-ի դեպքում, -0.022em 16px-ի դեպքում), ինչը ինտերֆեյսին տալիս է սեղմված, վերջնական խտություն։ Այլընտրանքային կետադրության համար պետք է ներառվի «cv11» նիշերի տարբերակը։ 12px-ի վրա մեծատառերով պիտակները օգտագործում են +0.05em տառերի միջև հեռավորությունը՝ հիմնական տեքստի խտությունը հավասարակշռելու համար։
Ժամանակահատվածներ և ձև
| Նպատակ | Նշանակություն |
|---|---|
| Խտություն | միջին |
| Հիմնական քայլ | 20px |
| Կոճակի շառավիղ | 12px |
| Քարտի շառավիղ | 8px |
| Ստվերներ | ստվերների փոխարեն՝ առանց սահմանների |
| Բաժինների միջև | 80px |
| Էջի լայնությունը | 1280px |
Արհեստական բանականությունը կկառուցի ձեր կայքը Modal ոճով և կլրացնի այն
- Լրացրեք ապրանքներով և գրառումներով՝ հղումով - Instagram, TikTok, Facebook:
- Տեղափոխեք բովանդակությունը ձեր հին կայքից՝ պարզապես նշեք հասցեն։
- Ժամանակակից դիզայն լավագույն շարժիչի վրա՝ React ( Next.js)՝ սերվերի ռենդերինգով և SEO օպտիմիզացիայով՝ անմիջապես։
- Լիովին ավտոմատացված SEO օպտիմալացում որոնման արդյունքների և նեյրոնային ցանցերի առաջարկությունների համար։
Նմանատիպ ոճեր
- Slash — Կեսգիշերային պահոց՝ ոսկեզօծ գրանցամատյաններով
- AgentQL — Հյուսիսային լույսերը գիշերը տերմինալի վրա
- GitHub — Տիեզերական հրամանատարական վահանակ՝ բիոլյումինեսցենտ կառավարման կետերով. մութ, մթնոլորտային աշխատանքային տարածք, որտեղ միակ կանաչ լույսը ցույց է տալիս առաջ շարժվելու ճանապարհը։
- Doppler — Գանձարանի մանուշակագույն լուսավորությունը կեսգիշերին։ Գրեթե սև կտավը փայլում է միակ մանուշակագույն ազդանշանով և կանաչ հաստատող լույսով, յուրաքանչյուր մակերես բավականաչափ կոր է բռնվելու համար։
- Basedash — Կեսգիշերային տվյալների տերմինալ՝ մատ տառատեսակով: Մութ դիտարան, որտեղ չափանիշները փայլում են մանուշակագույն և կանաչ, սերիֆ վերնագրերը լողում են աղմուկի վերևում, իսկ սպիտակ հաբի տեսքով կոճակները միակ պայծառ առարկաներն են փափուկ սև մակերեսներով սենյակում:
- Superwhisper — Հյուսիսային լույսերը մարում են կեսգիշերային ապակու վրա
- Better Stack — Midnight SRE կոնսոլ
- Langbase — Կեսգիշերային հյուսիսային լույսերի կոնսոլ
- Astro — Խորը տիեզերական առաքելության կառավարման կենտրոն՝ միգամածությունից եկող միակ մանուշակագույն փայլով
- Wayfinder — Սև ֆիլմի էկրան՝ հազիվ լսելի վերնագրով, որը սավառնում է ուղիղ նկարազարդման վերևում: Ինտերֆեյսը պայծառության սահիկ է, այլ ոչ թե կառավարման վահանակ:
- HashiCorp — Կեսգիշերին մանուշակագույն նեոնով լուսավորված կառավարման սենյակը մուգ տեխնիկական մակերես է, որտեղ փայլող վեցանկյուն խորանարդը ծառայում է որպես միակ գունային հղում։
- Umbrel — Գիշերային սպասարկողների սենյակում հարմարավետ կրակարան՝ մութ սենյակ, որտեղ դեղձի միակ լույսը ընդգծում է իսկապես կարևորը։