Vercel
Terminal ağ kağız üzərində çap olunub
Vercel dizayn sistemi intizamlı monoxromda bir məşqdir: demək olar ki, ağ rəngli kətan (#fafafa), qara şrift, nazik haşiyələr və dekorativ rəngin tamamilə olmaması. Vizual dil, çap şəklində göstərilən bir geliştiricinin terminalını xatırladır - Geist Sans, 400-450 çəkisi və -0.06em hərf aralığı ilə "qəhrəmanlıq" miqyasında çətinliklə oxunur, Geist Mono isə etiketləri, metaməlumatları və kod nümunələrini 11-13 piksel böyüklükdə tətbiq edir. Düymələr kəskin 6 piksel radiuslu və ya ağda təmiz qara və ya qarada ağdan düzbucaqlılardır. Sistem, rəngdən daha çox kontrasta və tipoqrafik iyerarxiyaya əsaslanır, üçbucaq işarəsindən (▲) və iki sətirli söz işarəsindən yeganə brendinq elementləri kimi istifadə edir. Səthlər bir-birinin üstünə #fafafa → #ebebeb → #171717 sırası ilə yığılır və kölgə və ya rəng əvəzinə tonal dəyərləri dəyişdirərək dərinlik yaradır. Hər bir element kompakt sıxlığa malik 4 piksellik şəbəkə üzərində qurulub və nəticədə mühəndisin dəftərini xatırladan dəqiq, funksional və ağ boşluqdan qorxmayan bir interfeys yaranır.
Konteyner 1280 piksel enində, mərkəzləşdirilmiş, bol üfüqi boşluqlu (24-48 piksel) bir yerdədir. Əsas blok asimmetrik üç zonalı kompozisiyadan istifadə edir: solda böyük bir başlıq, mərkəzdə marka qlif və sağda "qaş" bloku. Əsas blokun altında məzmun növbələşən zolaqlar şəklində düzülmüşdür: müştərinin loqosu olan tam enli zolaq, ardınca solda başlıq və sağda məhsul düzeni olan iki sütunlu "Agent Yaradıcıları" bölməsi, ardınca xüsusiyyətləri olan üç kartdan ibarət şəbəkə. Bölmələr bölücülər və ya fon ofsetləri olmayan 96-128 piksellik şaquli novlarla ayrılır. Naviqasiya bulanıq fonlu tək sabit 64 piksellik paneldir. Kart şəbəkələri ardıcıl olaraq 16-24 piksel novları olan iki və ya üç sütunlu bir düzülüşdən istifadə edir. Ümumi sıxlıq kompaktdır - mətni oxumaq asandır, kifayət qədər ağ boşluq var, lakin şrift ölçüsü və komponent ölçüləri səhifənin havadar hiss olunmasına mane olur.
Şəkillər seyrəkdir və həmişə funksionaldır. Əsas vizual element qara üçbucaqdır (▲) — "böyük" miqyasda hərəkət edən siluet kimi görünən həndəsi marka nişanıdır. Konsepsiya sübutu zolağındakı müştəri loqotipləri hər bir brendin faktiki söz nişanlarını boz tonlarda istifadə edir. Məhsul maketləri (Notion-un söhbət interfeysi, CLI terminal çıxışı, pasport kartı) çərçivəli kartların içərisinə işıq rejimində ekran görüntüləri kimi yerləşdirilib. Fotoşəkillər, illüstrasiyalar və ya 3D elementlər yoxdur — sistem təmiz tipoqrafiya və ağ kağız üzərində həndəsi formalardan ibarətdir.
Palitra
Neytral
- Obsidian
#171717— Əsas başlıqlar, naviqasiya sərhədləri, tünd düymə doldurma və siyahı işarələri demək olar ki, qara rəngdədir, sərtlik və parlaq doyma qarşısını alır. - Paper White
#fafafa— Səhifə kətanları, karton səthləri, düymələrin işıqlandırılması — bunlar hər şeyin yerləşdiyi standart fondur. - Pure White
#ffffff— Qaldırılmış kart səthləri, əlavələr, giriş sahələri. - Hairline
#ebebeb— Düymələr, keçidlər və kartlar üzərindəki 1px haşiyələr yüksək zum səviyyələrində görünür, lakin aşağı zum səviyyələrində görünmür. - Ash
#c9c9c9— Müştəri loqotiplərində deaktiv mətn, səssiz etiketlər, marka adı su nişanları. - Smoke
#a8a8a8— İkinci dərəcəli mətn, yer tutucu mətn, incə işarə doldurma.
Tipoqrafiya
11-dən 64 pikselə qədər · 6 addım
- Geist Sans — əvəzetmə: Inter · konturlar 400, 450, 500 · İnterfeys və başlıqlar üçün əsas şrift, böyük ölçülərdə sıx hərf aralığına malik Vercel-dən xüsusi hazırlanmış həndəsi sans-serif şriftidir (56-64 pikseldə -0.06em, 30 pikseldə -0.05em). Səhifənin yuxarısındakı başlıqlar üçün 450 çəki seçildi: Light-dan daha qalın, lakin Semi-Bold-dan daha yüngül, özünəinamlı, lakin həddindən artıq olmayan bir ton yaradır.
- Geist Mono — əvəzetmə: JetBrains Mono · konturlar 400, 500, 600 · Başlıqlar, kod blokları, CLI çıxış panelləri, metaməlumatlar və böyük hərfli mətn üçün monospace ikinci dərəcəli şrift. 8px/600px/böyük hərf kombinasiyası kiçik söz işarələrinin dəqiq yerləşdirilməsinə imkan verir. Monospace versiyasında geniş hərf aralığı (0.071em) böyük hərfli mətn üçün geniş yer təmin edir.
İntervallar və forma
| Məqsəd | Mənası |
|---|---|
| Sıxlıq | sıx |
| Əsas addım | 12px |
| Düymə radiusu | 6px |
| Kart radiusu | 6px |
| Kölgələr | kölgələr əvəzinə sərhədlər yoxdur |
| Bölmələr arasında | 96-128px |
| Səhifə eni | 1280px |
Süni intellekt veb saytınızı Vercel ü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
- Headspace — İsti kağız üzərində günəşli bir sağlamlıq guşəsi
- WHOOP — Gecəyarısı performans laboratoriyası - qara teatr boşluğunun altında ağ klinik laboratoriya masaları, tək bir bənövşəyi elektrik impulsu
- Together AI — Buzlaq kağızı üzərində tədqiqat konsolu
- v0 by Vercel — Torna dəzgahının çəkilişi. Dəqiqlik və funksionallıq hər bir elementin təmiz və texniki cəhətdən mükəmməl bir səthdə aydın bir məqsədə xidmət etməsi ilə vacibdir.
- Dovetail — Qara ayın altındakı plan — çətinliklə görünən qrafik xətləri, ağ şrift, bir bənövşəyi parıltı
- Glideapps — Bir elektrik firuzəyi parıltılı monoxrom qaralama masası
- Timescale — İsti qrafik kağız üzərində mühəndislik rəsmləri
- UGLYCASH — Krem rəngli kağız üzərində stikerlə örtülmüş dəftər, xaosunu qürurla nümayiş etdirən cəsarətli, maksimalist bir fintech şirkətinin ab-havasını əks etdirir.
- Sprout Social — Qara şifer üzərində yaşıl cücərti. Rəngi yalnız hərəkət üçün istifadə edilən sərt monoxrom kətan üzərində parlaq bir vurğu, yol göstəricisi kimi inamlı həndəsi şrift.
- Krea — gecə yarısı qara qalereya
- Evergreen — Kətan kağız üzərində günəş istixanası
- Factory — Gecəyarısı "müharibə otağı" terminalı. "Fabrik" qara rəngli idarəetmə panelidir, burada tək bir ağ kart fənərlə işıqlandırılmış mesaj kimi düşür — otaqdakı yeganə obyekt əsərin özüdür.