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 — Түнкү сервер бөлмөсүндөгү жайлуу очок — бир гана шабдалы түстүү жаркыроо чындап маанилүү нерсени баса белгилеп турган караңгы бөлмө.