Modal
Харанхуй серверийн өрөөнд байрлах фосфоресцент терминал - цорын ганц гэрлийн эх үүсвэр нь тод ногоон өнгөтэй
Модаль нь харанхуй серверийн өрөөнд фосфоресцент терминал шиг ажилладаг: бараг хар өнгийн зураг, цайвар ногоон фонт, LED төлөвийн индикатор болж ажилладаг ганц тод шохойн ногоон өнгийн өргөлт. Дизайны хэл нь хөгжүүлэгчдэд чиглэсэн - гэрлэн дохионы цэгүүдтэй нэг зайтай код цонх, ногоон өнгийн изометрийн 3D дүрс, цагаан зай ихтэй тул хэсэг бүрт нэг элемент гэрэлтэх боломжтой. Типографийг гарчгийн хувьд өөрчлөн тохируулсан фонт (Goga) болон бүх UI элементүүдийн хувьд хувьсах фонт (Inter) гэж хуваадаг бөгөөд хоёулаа нарийн сөрөг хяналттайгаар тохируулагдсан байдаг. Өнгө нь жигд тархсан: ихэнх дэлгэцүүд нь өнгөгүй бөгөөд тод шохойн ногоон өнгө нь зөвхөн гол үйлдлүүд, лого, 3D чимэглэл, онцлох мөчүүд дээр л харагддаг. Бүрэлдэхүүн хэсгүүд нь хавтгай, хүрээгүй бөгөөд гүн нь сүүдэр биш харин нарийн ногоон хил хязгаар, дэвсгэр бүдгэрүүлснээр бий болдог.
Модаль нь контентыг багтаахын тулд дээд тал нь 1280 пиксел өргөнтэй бүрэн өргөнтэй бараан байрлалыг ашигладаг. Баатрын цонхыг төвд байрлуулсан: гарчиг (шим ногоон өнгөтэй эхний өгүүлбэр), дэд гарчиг, үйлдэлд хоёр уриалга, харааны зангуу болгон ганц 3D объект - байрлалыг хажуугийн мөрөөс тусгаарлахгүйгээр. Агуулгын хэсгүүд нь жигд хэмнэлийг дагадаг: хөмсөгний шошго (том үсэг, Moss 70) → Goga гарчиг → бүдэг үндсэн текст, дараа нь функцийн тайлбартай хоёр баганатай байрлал (текст + код/харагдах карт) эсвэл гурван баганатай картын сүлжээ. Хэсгүүдийн хоорондох ус зайлуулах хоолойнууд нь өргөн цар хүрээтэй - 80 пиксел. Хуудас нь гүн хоосон (#000000) болон арай цайвар дэвсгэртэй (#181818) судалтай ээлжлэн байрладаг бөгөөд хуудасны голд харааны амьсгал болгон нэг цайвар хэсэг (#def0dd) гарч ирдэг. Навигаци нь бүдэг дэвсгэртэй ганц, тогтмол дээд мөрөөс бүрдэнэ - хажуугийн мөр эсвэл мега цэсгүй. Хөл хэсэг нь авсаархан, бараан өнгөтэй бөгөөд бүдэг ногоон холбоос баганатай. Текстийн нягтрал нь тухтай: хэсэг бүрт хангалттай зай өгөгдсөн бөгөөд картын тор нь гурваас илүүгүй багана ашигладаг.
Модалийн харааны хэл нь хоёр горимд хуваагддаг: 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-оос 64 пиксел хүртэл · 8 алхам
- Goga — солих: Inter Tight or Space Grotesk · тоймууд 400, 500 · Гарчиг болон дэд гарчгийн фонт – Бүх H1–H4 гарчиг болон картуудад ашиглагддаг. Goga нь нарийн нүхтэй, бага зэрэг дөрвөлжин терминалтай, өөрчлөн тохируулсан геометрийн sans-serif фонт юм. Дунд зэргийн жин (500) нь картын түвшний гарчгийг тодруулахад зориулагдсан; хэвийн жин (400) нь баатрын болон хэсгийн гарчигт ашиглагддаг. Модалийн мөн чанарыг тодорхойлдог өөр глиф хэлбэрт хандахын тулд түүний 'ss01' хэв маягийн багцыг идэвхжүүлсэн байх ёстой. Сөрөг үсгийн зай нь 48 пиксел дээр -0.007em-ээс 21 пиксел дээр -0.017em хүртэл аажмаар буурдаг.
- Inter Variable — солих: Inter · тоймууд 400, 500 · Хэрэглэгчийн интерфэйс болон үндсэн текст – навигаци, товчлуурууд, үндсэн текст, шошго, хөл хэсэг. Дунд зэргийн жин (500)-г интерактив элементүүд болон навигацид анхдагчаар ашигладаг бол хэвийн (400)-г догол мөрүүдэд ашигладаг. Үсгийн зай нь жижиг хэмжээтэй үед ч мэдэгдэхүйц багасдаг (14 пиксел дээр -0.026em, 16 пиксел дээр -0.022em), энэ нь интерфэйсийг товчилсон, терминалын нягтралтай болгодог. Өөр цэг таслалын хувьд 'cv11' тэмдэгтийн хувилбарыг оруулах ёстой. 12 пиксел дээрх бүх том үсгээр бичсэн шошго нь үндсэн текстийн нягтралыг тэнцвэржүүлэхийн тулд +0.05em үсгийн зайг ашигладаг.
Интервал ба хэлбэр
| Зорилго | Утга |
|---|---|
| Нягтрал | дундаж |
| Үндсэн алхам | 20px |
| Товчлуурын радиус | 12px |
| Картын радиус | 8px |
| Сүүдэр | сүүдрийн оронд хил хязгаар байхгүй |
| Хэсгүүдийн хооронд | 80px |
| Хуудасны өргөн | 1280px |
Хиймэл оюун ухаан таны вэбсайтыг Modal хэв маягаар бүтээж, дүүргэх болно
- Instagram, TikTok, Facebook холбоосоор дамжуулан бүтээгдэхүүн болон нийтлэлүүдээр дүүргээрэй.
- Хуучин сайтаасаа контентыг шилжүүлэх - зүгээр л хаягийг нь зааж өгнө үү.
- Шилдэг хөдөлгүүр дээрх орчин үеийн дизайн: Серверийн рендеринг болон SEO оновчлолыг хайрцагнаас нь гарган React ( Next.js).
- Хайлтын үр дүн болон мэдрэлийн сүлжээний зөвлөмжид зориулсан бүрэн автомат SEO оновчлол.
Төстэй хэв маяг
- Slash — Алтлаг дэвтэртэй шөнө дундын сейф
- AgentQL — Шөнийн цагаар терминалын дээгүүр хойд гэрлүүд
- GitHub — Биолюминесцент хяналтын цэгүүд бүхий сансрын удирдлагын самбар - ганц ногоон гэрэл урагшлах замыг зааж буй харанхуй, агаар мандлын ажлын талбар.
- Doppler — Шөнө дундын үед сэндвичний нил ягаан гэрэл асна. Бараг хар өнгийн зураг нь ганцхан лаванда цэцгийн дохио болон ногоон баталгаажуулалтын гэрлээр гэрэлтэж, гадаргуу бүр нь атгахад хангалттай муруй хэлбэртэй байна.
- Basedash — Мэтт фонттой шөнө дундын өгөгдлийн терминал. Метриц нь нил ягаан, ногооноор гэрэлтдэг, сериф гарчиг нь чимээ шуугианаас дээгүүр хөвдөг, цагаан эм хэлбэртэй товчлуурууд нь зөөлөн хар гадаргуутай өрөөнд цорын ганц тод объектууд байдаг харанхуй ажиглалтын төв.
- Superwhisper — Хойд гэрэл шөнө дундын шилэн дээгүүр замхарч байна
- Better Stack — Шөнө дундын SRE консол
- Langbase — Шөнө дундын хойд гэрлийн консол
- Astro — Мананцараас ганцхан нил ягаан туяатай Гүн сансрын нислэгийн удирдлага
- Wayfinder — Шууд зургийн дээр бараг сонсогдохгүй гарчигтай хар киноны дэлгэц. Интерфэйс нь удирдлагын самбар биш харин гэрэлтүүлгийн гулсагч юм.
- HashiCorp — Шөнө дундын үед нил ягаан неон гэрэлтэй удирдлагын өрөө нь бараан техникийн гадаргуу бөгөөд гэрэлтсэн зургаан өнцөгт куб нь цорын ганц өнгөний лавлах хэсэг болдог.
- Umbrel — Шөнийн серверийн өрөөнд тухтай задгай зуух байдаг бөгөөд энэ нь тоорын өнгөтэй ганцхан гэрэл үнэхээр чухал зүйлийг тодотгож өгдөг харанхуй өрөө юм.