Column
sərin şəfəq altında tünd mavi bir dəftər
Sütun, demək olar ki, ağ fonda dərin, institusional tünd göy rəngdən istifadə edir: səhifə əvvəlcə möhkəm bank məhsulu səthi, ikincisi isə geliştirici oyun meydançası kimi hiss olunur. Brend rəngi tək deyil, koordinasiyalı bir cütdür - tünd göy #111a4a ciddi struktur üçün, nanə yaşılı #44b48b məlumat və kod üçün - Brex kartı kimi yüksək intensivlikli vurğu səthləri üçün ayrılmış tək isti narıncı (#ec652b). Tipoqrafiyada 300-dən (linklər) 600-ə (displey) qədər bütün çəki diapazonunda istifadə edilən həndəsi sans serif olan SuisseIntl üstünlük təşkil edir və sistemə əksər fintech şirkətlərində olmayan zərif, redaksiya üslubu verir. Kartlar incə, qatlı kölgələrlə böyük ağ səthlərdə üzür; interfeys elementlərinin əksəriyyəti düzdür, dərinlik yalnız kartın fiziki bir obyekt kimi hiss etməli olduğu yerlərdə görünür (əməliyyat vidjetləri, məhsul maketləri). Kod və maliyyə məlumatları monoxrom, dəniz köpüyü rəngində təqdim olunur - bu, bunun mühəndislər tərəfindən mühəndislər üçün qurulmuş bir bank olduğuna dair vizual bir siqnaldır.
Səhifə strukturu tam enli, mərkəzdə geniş yan kənarlarla (masaüstündə 64–15 sm) yerləşir. Əsas ekran bölünmüş düzülüşdür: başlıq və hərəkətə çağırışlar 25 sm-də sola düzülmüş, üzən əməliyyat vidjeti isə sağda 55 sm-də yarımtonlu xəritə fonunda yerləşdirilib. Əsas ekranın altında bölmələr 6 sm şaquli novlarla ağ (4 sm) və açıq kətan (5 sm) arasında növbələşir. Məzmun tək 6 sütunlu şəbəkəyə uyğun olaraq düzülmüşdür: mətn blokları 4 sütun (7 sm), şəkil/məhsul kartları 5–6 sütun tutur və şəbəkədən qəsdən kənarlaşdırılır. Xüsusiyyətləri təsvir edən bölmələr 2 sütunlu düzülüşdən istifadə edir: mətn solda, məhsul sağda. Etibar statistikası bölməsi səhifənin tam enində 4 sütunlu şəbəkəyə bölünmüşdür. Müştəri loqotipləri 48 piksellik novlarla tək mərkəzləşdirilmiş sətirdə yerləşir. Altbilgi kompakt iki sütunlu düzülüşə malikdir. Naviqasiya, əsas ekranın üzərindəki sabit, 62 piksel hündürlüyündə, şəffaf üst paneldir və sürüşdürdükcə ağ rəngə çevrilən bulanıq fona malikdir. Yan panel və ya meqa menyu yoxdur — açılan menyular sadə ox tipli menyulardır.
Vizual üslub minimalist və funksionaldır — Sütun stok fotoqrafiyasından tamamilə qaçınır. Vizual dil üç mənbəyə əsaslanır: (1) SVG məlumat illüstrasiyaları, xüsusən də əsas elementin arxasında qlobal miqyaslı atmosfer yaradan, indigodan narıncıya və firuzəyiyə qədər bir qradiyentlə göstərilən nöqtəli yarımtonlu dünya xəritəsi; (2) məhsul kartı düzülüşləri — dramatik kölgələri olan ağ kartlarda hesab balanslarını, köçürmə məlumatlarını və JSON kod parçalarını göstərən üzən vidjetlər; (3) diaqram vizuallaşdırmaları — etibar/statistika bölməsində istifadə edilən nazik birləşdirici xətləri olan firuzəyi şamdan və ya sütunlu diaqramlar. Yarıtonlu xəritə imza vizual elementidir — onun qradiyenti #d65620 (narıncı) rəngdən bənövşəyi, mavi, göy, firuzəyi və sarı rənglərə keçir və bütün brend palitrasını tək bir dekorativ səthdə birləşdirən bir spektr yaradır. İkonlar #232730 və ya #a9acb6 variantlarında 1,5–2 piksel vahid kontur qalınlığına malikdir, aktiv vəziyyətlər üçün doldurma ilə. Həyat tərzi fotoşəkilləri, mücərrəd 3D görüntülər yoxdur — məhdudiyyət məhsula və məlumatlara diqqəti yönəltmək üçün nəzərdə tutulub.
Palitra
Brend
- Indigo Navy
#111a4a— Əsas brend rəngi hərəkətə çağırışlar, aktiv naviqasiya vəziyyətləri, başlıq və loqo üçün istifadə olunur. Tünd bənövşəyi-mavi rəng sayta möhkəm, lakin zəngin qara rəng verir; ağ mətnlə birləşdirildikdə, saytdakı ən iddialı düyməni yaradır. - Seafoam 600
#44b48b— Kod və məlumat rəngi, kod parçalarındakı JSON açarları, identifikatorları və maliyyə dəyərləri üçün marka rəngidir. Həmçinin, qrafiklərdə və böyümə vizuallaşdırmalarında məlumat nöqtələri üçün də istifadə olunur. - Seafoam 700
#167e6c— Məlumat kontekstində kontur, diaqram xətləri və işarə vurğuları üçün dəniz köpüyünün daha tünd çaları. Bu, dəniz köpüyü miqyasını daha tünd fona bərkidir. - Seafoam 400
#94efb7— Vurğulanmış kod fraqmenti kod blokları daxilində sətir dəyərlərini, URL-ləri və API son nöqtələrini ehtiva edir. Ən açıq dəniz köpüyü rəngi yaşılımtıl çalara malik monospace şrifti kimi oxunur. - Deep Sea
#023247— Diaqramın dekorativ konturu və vurğu rəngi, dəniz köpüyü rəng şkalası ilə yanaşı, SVG illüstrasiyalarında və məlumat vizuallaşdırmalarında istifadə edilən zəngin firuzəyi rəngdir.
Neytral
- Midnight Ink
#011821— Tünd səth və vurğulanmış mətn – məhsul kartı fonu, yüksək kontrastlı əsas mətn. Sərin mavi-yaşıl çalarla boz rəngə daha yaxın; hissənin tərsinə çevrilməsi lazım olduqda qaranlıq rejim üçün əsas kimi istifadə olunur. - Slate Ink
#3b3e47— İkinci dərəcəli başlıq və əsas mətn, təmiz qara rəngin açıq kətan üzərində çox sərt görünəcəyi yerlərdə istifadə edilən "Gecəyarısı Mürəkkəbi"ndən bir az daha istidir. - Steel
#7c7f88— Əsas mətn və keçid mətnində solğun rəng üstünlük təşkil edir (əsas mətndə 245 dəfə istifadə olunub). Sakit kimi qəbul edilən, heç vaxt solmayan neytral boz-mavi rəng. - Fog
#a9acb6— İkon konturları, üçüncü dərəcəli sərhədlər və yer tutucu mətn. Mətni rəqabət aparmadan ayıran orta boz rəng. - Mist
#cbcccf— Əsas mətn — imzalar, xəbərdarlıqlar və kiçik şriftlər — ağ fonda oxunaqlıdır, lakin vizual olaraq daha az nəzərə çarpır. - Silver Lining
#e3e4e8— Kart sərhədləri, giriş sahəsi sərhədləri, ayırıcı xətlər. Bu struktur, incə rəng, iki səthin kölgəsiz ayrılması lazım olduqda istifadə olunur.
Tipoqrafiya
10-dan 60 pikselə qədər · 10 addım
- SuisseIntl — əvəzetmə: Inter · konturlar 300, 400, 500, 600 · Əsas şrift – bütün başlıqlar, əsas mətn, düymələr, naviqasiya, keçidlər və kart mətni üçün istifadə olunur. Unikal həndəsi sans serif şrifti, Columna-ya fərqli bir redaksiya tərzi verir və onu yalnız Inter-only ilə işləyən digər fintech şirkətlərindən fərqləndirir. Çəki başlıqlar üçün 52–60 piksel, alt başlıqlar üçün 500, əsas mətn üçün 400 və az vurğulu keçidlər üçün 300 pikseldir.
- SuisseIntlMono — əvəzetmə: JetBrains Mono · konturlar 400 · SuisseIntl-ə bənzər bir aralı şrift, texniki etiketlər, API identifikatorları və UI elementlərindəki daxil edilmiş məlumatlar üçün istifadə olunur. SuisseIntl ilə eyni nisbətləri saxlayır, beləliklə bir aralı və mütənasib mətn qarışıq kontekstlərdə düzgün şəkildə hizalanır.
- SFMono — əvəzetmə: Fira Code · konturlar 400 · Kod parçasının göstərilməsi – JSON nümunələrində və API sənədləşdirmə bloklarında göstərilir. Kodu UI mətnindən vizual olaraq ayırd etmək üçün dəniz köpüyü kölgəsindən istifadə olunur.
İntervallar və forma
| Məqsəd | Mənası |
|---|---|
| Sıxlıq | orta |
| Əsas addım | 8px |
| Düymə radiusu | 8px |
| Kart radiusu | 8px |
| Kölgələr | kölgələr əvəzinə sərhədlər yoxdur |
| Bölmələr arasında | 72px |
| Səhifə eni | 1200px |
Süni intellekt veb saytınızı Column ü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
- dope.security — Bənövşəyi mayaklarla gecəyarısı terminalı
- Leonardo — Tərs çevrilmiş redaksiya qalereyası. Bənövşəyi başlıqların divar instalyasiyaları kimi çıxış etdiyi və süni intellekt tərəfindən yaradılan portretlərin aşağıda sıx bir şəbəkədə asılıb qaldığı qara divarlı muzey.
- VEED — Neon yaşıl işıq düymələri olan ağ qalereya divarı
- Craft Docs — Skrapbuk üçün rəqəmsal kollaj. Dizayn, strukturlaşdırılmış rəqəmsal notların yumşaq, üzvi teksturalarla birləşdiyi düşünülmüş, toxunuşa uyğun bir albomu xatırladır.
- Letter — Anbardan parıldayan artefaktları nümayiş etdirən özəl qalereya. Qalereyanın rəngli divarlarında xrom heykəllərin üzərində serif başlıqlarının üzdüyü qara divarlı sərgi sahəsi.
- Railway — Kosmik Gecəyarısı Ekspresi. Aydın siqnallarla idarə olunan qaranlıq, ulduzlu kosmosda sakit və həyəcanlı bir səyahət.
- Garden Eight — Krem rəngli kağız üzərində monumental redaksiya məqaləsi. 215 piksellik serif başlıq isti perqament üzərində təkbaşına yerləşir, ətrafı üzən heykəltəraşlıq formaları və dəniz havasını xatırladan neqativ boşluqla əhatə olunub - səhifə idarəetmə panelindən daha çox sənət monoqrafiyasının üz qabığına bənzəyir.
- Steep — İsti Kağızda Serif Şriftlərinin Təhlili
- ElevenLabs — İsti krem tonlarında incə başlıqlarla yazılmış foto esse. Bauhaus üslubunda dəftər — yumurta qabığı rəngli kağız, qara mürəkkəb və məhsul nümayişi üçün tək bənövşəyi və narıncı vurğu.
- Awesomic — Konfeti xatırladan narıncı durğu işarələri olan redaksiya sink tor
- Monad — isti perqament üzərində redaksiya texniki jurnalı
- AI for Business — İsti boz tonlarda qəddar redaksiya salonu