Huly
Төн уртасы обсерваториясендә төньяк балкышы - төп герой - шәмәхә төстәге вертикаль нур, ул мәрҗәнгә әйләнә, һәм аның астындагы һәр тыныч өлеш шул ук ике төсле хикәяне тынычрак тон белән сөйли.
Huly космик эш киңлеге атмосферасын искә төшерә: төп элемент аша бер шәмәхә-сары балкышы белән кара төстәге холст, ә аның астында җитештерүчәнлекне арттыру өчен йомшакрак челтәр урнашкан. Система тар төс диапазонында эшли - бер ачык зәңгәр һәм бер мәрҗән катламлы графит өслекләренә каршы барлык брендинг эшен башкара, шуңа күрә караңгы режим беркайчан да нейтраль тоелмый. Типография - функциональ булган бар нәрсә өчен дә Интер-стиль, төп нокталар өчен махсус шрифт (Esbuild) сакланган, 80–84 пиксель аралыгы һәм агрессив тискәре хәреф аралыгы белән. Компонентлар капсула формасында: идарә итү панельләрендә 9999 пиксель радиусы, карточкаларда 12 пиксель, минималь күләгә һәм төп бизәлеш буларак якты градиент сызыклары. Бит тулы бит караңгы өлкәләре һәм тыныч яктылык өлешләре арасында чиратлаша, шуңа күрә теләсә нинди яңа экран төсләрне сайлаганчы режимны сайларга тиеш.
Тулы киңлектәге баш биттә төньяк балкышларының вертикаль нуры һәм сул якка тигезләнгән башлык, шулай ук аскы уң якта урнашкан продукт скриншоты бар. Баш бит астында максималь киңлектәге, 1200 пиксельле эчтәлек өлкәсе урнашкан, ул чиратлашып караңгы һәм якты полосалар белән аерылып тора. Һәр бүлек бер вертикаль блоктан тора: башлык һәм 96 пиксель аралар белән аерылган 3 яки 4 баганалы карточкалар челтәре. "MetaBrain" бүлеге челтәрне үзәкләштерелгән башлык һәм төрле зурлыктагы карточкалар мозаикасы белән бүлә (зур төп карточка һәм кечерәк ярдәмче карточкалар). Бит SaaS стандартларына туры китереп, эчтәлеккә бай, ләкин һәр бүлеккә сулыш алу өчен чиратлашып караңгы һәм якты полосалар кулланыла. Навигация - сез скроллинг ясаганда тоныклыкка әйләнә торган бердәнбер үтә күренмәле өске панель.
Төп элемент - фотосурәтләрсез саф поляр балкышы градиенты. Барлык иллюстрацияләр дә продуктның UI'ның чын скриншотлары (караңгы режимдагы Канбан, почта тартмасы, календарь), дәлилләр һәм бизәү өчен хезмәт итүче карточка рамкаларына урнаштырылган. Тормыш рәвеше фотолары, сток рәсемнәре, 3D рендерлар юк. UI белән бәйле булмаган бердәнбер визуаль элемент - поляр балкышы нигезендәге җылы, нурлы кояш нуры, ул CSS градиенты буларак күрсәтелә. Иконалар - #95979 яки ак төстәге монохром сызык иконкалары, беркайчан да күп төсле түгел. Система үзенең караңгы UI'сын төп элемент итеп карый - продукт - фотосурәтләр.
Палитра
Бренд
- Electric Iris
#5683da— Төп фон, актив навигация индикаторы һәм күзгә ташлана торган Төньяк балкышы акценты — кара фонда якты шәмәхә-зәңгәр төс — корпоратив активлык түгел, ә катнашу тәэсирен тудыра. - Ember Pulse
#ff8964— Икенчел акцент, җылы төньяк балкышлары зонасы, хәбәр итү ноктасы һәм иллюстрациядә ассызыклау - зәңгәр төснең аеклыгын бетерә һәм нурга җылылык өсти торган янтарь төс.
Нейтраль
- Obsidian Canvas
#303236— Битнең фоны, өстенлек итүче өслек, диярлек кара төстә, җылылык сизелә, бу барлык эчтәлек өчен дә стандарт мохит. - Void
#090a0c— Төп экрандагы градиентлар, модаль фоннар һәм холстка туры килергә тиешле рамкалар өчен иң тирән өслек катламы. - Charcoal Card
#111111— Картон һәм панельләрдән ясалган күтәрелгән өслекләр, тукыма өстендә бер адым югарырак урнашкан. - Slate Edge
#4a4b50— Караңгы өслекләрдә нечкә чикләр һәм бүлгечләр - Iron Veil
#6b6c6d— Теглар, исемлек элементларын тутыру һәм сүндерелгән тутырулар өчен фон тоныкландырылган. - Smoke
#95979e— Уртача соры төстәге төп эш элементы - иконка контурлары, өстәмә текст һәм актив булмаган идарә элементлары.
Типография
11 дән 80 пиксельгә кадәр · 8 адым
- Inter — алыштыру: DM Sans · контурлар 300, 400, 500, 600, 700 · Кулланучы интерфейсындагы барлык функциональ текстлар — төп текст, навигация, төймәләр, исемлек элементлары, ярлыклар һәм кечкенә башлыклар — басым ясау өчен 500–600, төп текст өчен 400 һәм күзгә ташланмый торган метамәгълүматлар өчен сирәк кенә 300 шрифт калынлыгында кулланыла.
- Esbuild — алыштыру: Sora · контурлар 400, 500, 600 · Күрсәтү өчен генә: башлангыч исемнәр, бүлек башлыклары һәм MetaBrain мәкалә исемнәре. Кыскартылган геометрия һәм тыгыз хәреф аралыгы SaaS проектларына караганда 84px редакция эше өчен күбрәк туры килә дигән тәэсир калдыра. Беркайчан да 28px тан түбәнрәк кулланмагыз.
Интерваллар һәм форма
| Максат | Мәгънәсе |
|---|---|
| Тыгызлык | киң |
| Төп адым | 12px |
| Төймә радиусы | 9999px |
| Карта радиусы | 12px |
| Күләгәләр | йомшак күләгәләр |
| Бүлекләр арасында | 96px |
| Бит киңлеге | 1200px |
Ясалма интеллект сезнең сайтны Huly стилендә төзер һәм аны тутырыр
- Продуктлар һәм постлар белән Instagram, TikTok, Facebook сылтамасы аша тутырыгыз.
- Иске сайтыгыздан контентны күчерегез — адресны күрсәтегез генә.
- Иң яхшы двигательдә заманча дизайн: сервер рендерингы һәм SEO оптимизациясе белән React ( Next.js).
- Эзләү нәтиҗәләре һәм нейрон челтәр тәкъдимнәре өчен тулысынча автоматик SEO оптимизациясе.
Охшаш стильләр
- monday — Пастель стикерлары белән ак остаханә
- Slack — Сәхнә баклажан төсендә, ак прожекторлар белән бизәлгән. Караңгы урыннарда куе слива төсе өстенлек итә, ә ак төстәге полотно зур, авангард әсәрләргә иркен сулыш алырга мөмкинлек бирә.
- Base44 — Кояш нуры астында лайм маркеры белән дәфтәр
- Supahub — Шәмәхә төстәге йомшак көн яктысы. Бер якты шәмәхә кояш белән яктыртылган, күбесенчә ак, һавалы тукыма, тискәре киңлеккә төсләр сибелгән декоратив градиент сфералар һәм киң түгәрәкләнгән геометрия һәр өслеккә рәхәт, сизелерлек авырлык өсти.
- Raycast — Төн уртасы команда үзәге, Корал Неон
- Dimension — караңгыда яктыртылган эш урыны, бозлы пыяла панельләр
- Wiza — Лаванда томаны белән капланган, караңгы төшкәндә минералларны тикшерү обсерваториясе.
- Paste — Ак мәрмәрдә янган янтарь фонарь — брендның җылы градиент логотибы киң ак киңлектә, кар белән капланган бинадагы бердәнбер яктыртылган тәрәзә кебек, калкып тора.
- Reworkd — Продукция диаграммасындагы йомшак көн яктылыгы үзе өчен сөйли торган бердәнбер төс - бу гамәл төймәсе һәм аның өстендәге градиент исеме.
- Reflect Notes — Йолдызлы шәмәхә киңлек - караңгы обсерватория, анда ноталар йолдызлыклар кебек йөзеп йөри, диярлек кара индиго бушлыгы фонында.
- Ameba — Төн уртасында идарә итү бүлмәсе – бозлы пыяла панельләр эчендә электр зәңгәр пульсы
- Todoist — Кояш нуры белән яктыртылган эш урыны, кәгазь көндәлек – җылы каймак төсендәге өстәл, кара төстәге язмалар, бер кызыл каләм