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