Modal
Қараңғы сервер бөлмесіндегі фосфоресцентті терминал - жалғыз жарық көзі - ашық жасыл түс
Модаль қараңғы сервер бөлмесіндегі фосфоресцентті терминал сияқты жұмыс істейді: қара дерлік кенеп, бозғылт жасыл шрифт және жарықдиодты күй индикаторы ретінде әрекет ететін бір ашық лайм-жасыл екпін. Дизайн тілі әзірлеушіге бағытталған — бағдаршам нүктелері бар біркелкі код терезелері, жасыл түсті изометриялық 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 — Түнгі сервер бөлмесіндегі жайлы камин — шабдалы тәрізді бір жарқыл шынымен маңызды нәрсені айқындап көрсететін қараңғы бөлме.