Auros
Bioluminescent məlumat topları olan uçurum terminalı
Auros uçurumda yerləşən bir fintech terminalı kimi fəaliyyət göstərir: bioluminescent məlumat kürələri və firuzəyidən çəhrayıya qədər işıq qradiyentləri olan, dərinlik, axıcılıq və axın hissi yaradan, demək olar ki, qara firuzəyi rəngli bir kətan. İnterfeys minimalist və kinematoqrafikdir, həddindən artıq parlaq olmadan miqyas yaratmaq üçün aqressiv mənfi izləmə ilə orta qalınlıqda tək istifadəçi ekranına (Maddə) əsaslanır. Rənglər bərabər paylanmışdır - demək olar ki, bütün məzmun üçün axromatik ağ və gümüş rənglər istifadə olunur, xromatik palitra isə atmosfer qradiyentləri, kart səthlərini fərqləndirən və rəngini firuzəyi-mavidən lavanda-çəhrayıya dəyişən tək imzalı həb formalı düymə üçün ayrılmışdır. Kartlar hündürlükdən daha çox incə firuzəyi səth silsilələrində (16 piksel radius, kölgələr yoxdur) üzür, buna görə də iyerarxiya kağız üzərində kölgə deyil, suyun dərinliyi kimi qəbul edilir. Komponentlər düşünülmüş və alət kimi görünür: böyük hərf izləmə işarələri, nazik həndəsi ox nişanları, solğun çəhrayı rəngdə böyük rəqəmli oxunuşlar.
Maksimum eni 1440 piksel olan məzmuna malik tünd, tam enli kətan. Əsas element, bütün baxış sahəsinin hündürlüyünü əhatə edən mərkəzləşdirilmiş mətn blokudur (qaş → başlıq → alt mətn → hərəkətə çağırış) və fon elementi kimi hissəcik istifadə olunur. Bölmələr, kətan və bir az girintili səthlər arasında növbələşən, böyük 68 piksel+ şaquli boşluqlarla ayrılmış tam enli zolaqlardır. "Kəşf et" bölməsi asimmetrik iki sütunlu düzülüşdən istifadə edir: sol sütunda yığılmış xüsusiyyət kartları, sağ sütunda isə həndəsi molekulyar illüstrasiya var. Məzmun kənardan kənara uzanmaq əvəzinə, asan oxunması üçün dar sütunlarda (maksimum ~600 piksel) mərkəzləşdirilib. Altbilgi, dərin hovuz effekti yaradan 120 piksel şaquli haşiyəsi olan girintili bir çuxurdur (#011d1c). Naviqasiya, elementləri 16-24 piksel aralıda olan nazik, şəffaf bir paneldir. Ümumi ritm kinematoqrafik və genişdir - hər bölmə nəfəs alır və dərin, suya bənzər rəng sxemi hər keçidlə daha dərinə düşmə hissi yaradır.
Vizual üslub minimalist və atmosferikdir. Ana səhifədə üçölçülü hissəcik kürəsinə rast gəlinir — kətanla əks-səda verən fırlanan kürə əmələ gətirən minlərlə kiçik firuzəyi-mavi və ağ nöqtələr və kənarları boyunca lavanda-çəhrayı vurğular informasiya obyektini xatırladan bioluminescent effekt yaradır. Düz həndəsi molekulyar diaqramlar (ağ dairələr və tünd kətan üzərində nazik birləşdirici xətlər) sağ sütunda dekorativ elementlər kimi xidmət edir. Fotoşəkillər, həyat tərzi şəkilləri, insanlar yoxdur — vizual dil təmiz məlumat qrafikasına və mücərrəd formalara əsaslanır. Zərrəcik kürəsi brend kimliyinin müəyyənedici vizual elementidir; dərin dəniz metaforasını gücləndirmək üçün hər vacib səhifədə ən azı bir dəfə görünməlidir.
Palitra
Brend
- Liquid Abyss
#012624— Əsas fon səhifənin əsas hissəsi, başlığı, əsas elementi və dominant tünd firuzəyi sahəsidir. Dərin dəniz atmosferi yaradır. - Liquid Deep
#011d1c— Girilmiş səth səviyyəsi altbilgi fonu və daha dərin karton panellərdir. O, kətandan yarım ton daha tünd kimi qəbul edilir və incə aşağıya doğru dərinlik qradiyenti yaradır. - Liquid Kelp
#003734— Qaldırılmış kart səthi və düymə doldurma — uçurumdan bir addım yuxarıda yerləşən qaldırılmış səth. Xüsusiyyət kartları, məzmun panelləri və qradiyent düyməsinin başlanğıc nöqtəsi üçün istifadə olunur.
Neytral
- Liquid Mist
#edfffe— Ağ rəngin soyuq çaları əsas mətni, bölmə başlıqlarını və isti, açıq tipoqrafiyanı vurğulayır. Zərif mavi rəng əsas mətni firuzəyi rəng sxeminə uyğunlaşdırır. - Platinum
#ffffff— Saf ağ başlıqlar, naviqasiya elementləri, işarə konturları və yüksək kontrastlı mətn üçün istifadə olunur. Bütün başlıq səviyyələrində və əsas naviqasiyada əsas mətn rəngidir. - Silver Mist
#bbc7c6— İkinci dərəcəli mətn, səssiz təsvirlər və link rəngi orijinal vəziyyətindədir. Firuzəyi fonu tamamlayan yüngül yaşılımtıl çalara malikdir. - Ash
#f2f2f2— Sitat və rəylər üçün əlavə mətn. Silver Mist-in firuzəyi çalarları çox parlaq olduqda neytral, soyuq boz rəng. - Slate Deep
#707777— Qeyri-aktiv və ya az görünən fonlar üçün incə səth tonu. Kətan və karton arasında yerləşir və çox incə hündürlük fərqi yaradır. - Lavender Phosphor
#fde9ff— Böyük statistika, sayğac rəqəmləri və vacib metriklər üçün arxa işıq rəngi. İmza qradiyentindəki çəhrayı rəng qaranlıq səthlərdə parlaq vurğu kimi nadir hallarda istifadə olunur.
Tipoqrafiya
10-dan 96 pikselə qədər · 6 addım
- Matter — əvəzetmə: Inter · konturlar 400, 500 · Başlıqlar və əsas mətn üçün əsas şrift bütün başlıqlar (H1–H3) üçün 500 çəki və böyük kinetik mətn (86–295 piksel) ilə istifadə olunur. Əsas mətn və istifadəçi interfeysi mətni üçün 400 çəki istifadə olunur. Böyük ölçülərdə aqressiv mənfi hərf aralığı (61 pikseldə -0.04em, 86 pikseldə -0.046em) və başlıq böyük hərflərində geniş müsbət hərf aralığı (20 pikseldə 0.08em, 12 pikseldə 0.12em, 10 pikseldə 0.15em) mövcuddur. Başlıqlar üçün yalnız orta ağırlıqdan istifadə strategiyası, şriftə vahid, mexaniki inam verən fərqli bir xüsusiyyətdir - qalın və ya açıq şriftin olmaması.
- Arial — əvəzetmə: system-ui · konturlar 400 · İnteraktiv UI elementləri (naviqasiya, düymələr, başlıq mikrokopiyası, altbilgi) üçün ikinci dərəcəli ehtiyat. Yalnız 14 pikseldə görünür - Matter yüklənmədikdə təhlükəsiz, universal ehtiyat kimi istifadə olunur və forma etiketlərini, düymə mətnini və kiçik köməkçi mətni əhatə edir.
İntervallar və forma
| Məqsəd | Mənası |
|---|---|
| Sıxlıq | orta |
| Əsas addım | 20px |
| Düymə radiusu | 6px |
| Kart radiusu | 16px |
| Kölgələr | kölgələr əvəzinə sərhədlər yoxdur |
| Bölmələr arasında | 68px |
| Səhifə eni | 1440px |
Süni intellekt veb saytınızı Auros üslubunda quracaq və onu dolduracaq
- Məhsullar və paylaşımlar ilə Instagram, TikTok, Facebook linkləri vasitəsilə tanış olun.
- Köhnə saytınızdan məzmunu köçürün — sadəcə ünvanı göstərin.
- Ən yaxşı mühərrikdə müasir dizayn: Server render və SEO optimallaşdırması ilə React ( Next.js).
- Axtarış nəticələri və neyron şəbəkə tövsiyələri üçün tam avtomatlaşdırılmış SEO optimallaşdırması.
Oxşar üslublar
- Design Full-Time — isti bir işıqlandırma sistemi olan studiya kinoteatrı
- Air — "Gecəyarısı Şüşədən Səma" heykəli
- Slash — Qızılı dəftərləri olan gecə yarısı sərdabəsi
- Raycast — Gecəyarısı Komandanlıq Mərkəzi, Mərcan Neon
- Dimension — Buzlu şüşə panelləri olan qaranlıq işıqlı iş yeri
- Modal — Qaranlıq server otağında fosforlu terminal - yeganə işıq mənbəyi parlaq yaşıl rəngdir
- Giga — Buzlu obsidianın üzərində gecə yarısı üfüqü
- Reflect Notes — Ulduzlu bənövşəyi fəza, demək olar ki, qara indigo boşluğunun fonunda notların bürclər kimi üzdüyü qaranlıq bir rəsədxanadır.
- Ameba — Gecəyarısı idarəetmə otağı – buzlu şüşə panellərin içərisində elektrikli mavi impuls
- AgentQL — Gecə terminalının üzərindəki şimal işıqları
- Frame — Gecə film nümayişləri üçün kinoteatr. Tək bir mavi işıqlandırma işığının bütün işləri gördüyü və istifadəçi interfeysinin arxa plana keçdiyi qaranlıq bir otaq, yaradıcı məzmunun irəliyə doğru proyeksiyasına imkan verir.
- Harness — Gecə yarısı fosforlu yaşıl vurğularla Missiya Nəzarəti