Substack
redaksiyadakı masada narıncı mürəkkəb
Substack köhnəlmiş xəbər otağı panelinə bənzəyir — ağ kətan, isti, demək olar ki, qara mətn və məzmunun yaradılmasının hər mərhələsini qeyd edən tək parlaq narıncı vurğu. Vizual iyerarxiya bəzəkdən daha çox sıxlığa əsaslanır: nazik boz xətlər lent elementlərini ayırır, avatarlar kiçikdir, metaməlumatlar səssizdir və oxucunun gözü narıncı çağırışa, narıncı loqoya, narıncı "Abunə ol" linkinə və narıncı "Yarat" düyməsinə diqqət yetirmək üçün öyrədilir. Səthlər düz və sərbəst saxlanılır — kart kölgələri, xrom panel elementləri yoxdur — tipoqrafiyanın (xüsusi serif başlıq şrifti ilə birləşdirilmiş kompakt xrom sistem UI elementi) redaksiya çəkisinin əsas hissəsini daşımasına imkan verir. İmza stili təmkinli xrom elementləri və canlı, tək rəngli parıltılardır: nəşriyyat aləti kimi hiss olunan oxu tətbiqi.
Üç sütunlu masaüstü düzeni: sabit sol yan panel (~200px, nişanlar və etiketlərlə naviqasiya, yapışqan), mərkəz lenti (maksimum eni ~600px, şaquli olaraq sürüşdürülən yazıların siyahısı) və sabit sağ yan panel (~300px, axtarış + tövsiyələr + qeydiyyat). Mərkəzi lent redaksiya nüvəsidir — kartlar yoxdur, sadəcə nazik bölücülər və bölmələr arasında 32px boşluqlarla üst-üstə yığılmış yazılar var. Əsas banner lentin yuxarı hissəsində tək tam enli kart kimi yerləşir. Sol yan paneldə brend loqotipi (üstün xətləri olan narıncı işarə), altı naviqasiya elementi və altında tam enli narıncı "Yarat" düyməsi var. Sağ yan paneldə axtarış sahəsi, qeydiyyat kartı və oxumaq üçün "Növbəti" siyahısı var. Naviqasiya minimaldır — üst panel yoxdur, çörək qırıntıları yoxdur; yan panel naviqasiyadır. Məzmun sıxlığı yüksəkdir: yazılar 12-13px metaməlumat və 15-19px əsas mətndən istifadə edir, bu da bazarın kart şəbəkəsi hissi əvəzinə qəzetə bənzər bir ritm yaradır.
Şəkillər istifadəçi tərəfindən yaradılan məzmundur (müəllif avatarları, paylaşım eskizləri, paylaşım şəkilləri) — Substack öz dekorativ fotoşəkillərini təqdim etmir. Əsas kart fon kimi mücərrəd illüstrativ elementlər (həndəsi formalar, qələmlər və qeydlər kimi stilizə edilmiş obyektlər) ilə firuzəyidən yaşıl rəngə qədər qradiyentdən istifadə edir. Sağ yan paneldəki paylaşım eskizləri kiçikdir (64 piksel), 8 piksel radiusda əhatə olunmuşdur və oxu siyahısının önizləməsi kimi fəaliyyət göstərir. Ümumi vizual dil mətn əsaslıdır: interfeys oxu kətanıdır və şəkillər atmosfer yaratmaq əvəzinə kiçik vizual lövbərlər kimi xidmət edir.
Palitra
Brend
- Signal Orange
#ff6719— Narıncı rəng dekorativ detallar üçün ikinci dərəcəli vurğu və nadir hallarda rast gəlinən işarələri vurğulamaq üçün istifadə olunur. Hərəkətə çağırışlar üçün əsas rəng kimi istifadə edilməməlidir.
Neytral
- Ink
#363737— Əsas mətn — əsas mətn, başlıqlar, yazı başlıqları, zaman damğaları və müəllif adları; daha asan oxunması üçün təmiz #000 əvəzinə isti, demək olar ki, qara rəng. - Paper
#ffffff— Səhifə kətanları, kart səthləri, giriş sahələri və naviqasiya fonu interfeysin böyük əksəriyyətini tutan dominant səthlərdir. - Charcoal
#232525— Yüksək seçim səviyyələrinə malik əlavə mətn və keçidlər üçün kursoru götürün; kod blokları və seçim blokları üçün Mürəkkəb rejimindən daha dərindir. - Stone
#777777— İkinci dərəcəli UI elementləri, bölücülər və səssiz etiketlər üçün neytral rəng dəstəklənir. Hərəkətə çağırışlar üçün əsas rəng kimi istifadə edilməməlidir. - Ash
#b6b6b6— Nazik haşiyə xətləri, düymə konturları, işarə konturları, deaktiv idarəetmə elementlərində haşiyələr. - Mist
#c8c8c8— Bölücü xətlər, nişanlar üçün gözə çarpmayan fon, boş hücrələri skelet şəklində doldurmaq.
Tipoqrafiya
12-dən 32 pikselə qədər · 5 addım
- system-ui — əvəzetmə: -apple-system · konturlar 400, 500, 600 · İstifadəçi interfeysi və əsas mətn üçün əsas şrift naviqasiya etiketləri, düymələr, mesaj mətni, metaməlumatlar, giriş sahələri və bütün interfeys elementləri üçün istifadə olunur. Metadata üçün 12-13 piksel və əsas mətn üçün 15-19 piksel ölçülü kompakt şriftlər sıx bir xəbər lenti hissi yaradır. Çəki əsas mətn üçün 400, naviqasiya elementləri və düymə etiketləri üçün 500 və vurğulanmış mesaj başlıqları və bölmə başlıqları üçün 600-dür.
- Cahuenga — əvəzetmə: Charter · konturlar 500 · Məhsul səviyyəli başlıqlar (yan panel başlıqları, qeydiyyat kartı başlıqları, əsas mətn) üçün imza dekorativ serif şrifti. Orta çəkisi və yüngül sətir hündürlüyü ona həcmli hiss vermədən fərqli bir görünüş verir; narıncı rəngdən başqa, Substack-in kimliyini göstərən yeganə şriftdir.
- Spectral — əvəzetmə: Charter · konturlar 400 · Uzun yazılar üçün serif şrift — oxu zallarında və xəbər lentində redaksiya materiallarının oxunaqlılığını artırmaq üçün istifadə olunur. Bir az daha dar sətir aralığı (1.20) xəbər otaqlarına xas olan kompaktlığı qoruyarkən abzasların rahat oxunmasını təmin edir.
İntervallar və forma
| Məqsəd | Mənası |
|---|---|
| Sıxlıq | sıx |
| Əsas addım | 8px |
| Düymə radiusu | 9999px |
| Kart radiusu | 12px |
| Kölgələr | kölgələr əvəzinə sərhədlər yoxdur |
| Bölmələr arasında | 32px |
| Səhifə eni | 1200px |
Süni intellekt veb saytınızı Substack ü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
- 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ı
- Dub — Link-in mat düyü kağızı idarəetmə paneli
- Seline Analytics — İsti kağız üzərində sakit analitik masa
- Notion — Günorta günəşində isti kağız dəftər
- Anthropic — İsti perqament haqqında elmi sahə jurnalı - sakit fil sümüyü səthləri, serif redaksiya başlıqları və yalnız hərəkətə ehtiyac olduqda görünən tək bir gil vurğu.
- Calendly — Soyuq mərmər üzərində tünd mavi mürəkkəb
- Augen Pro — Apple-ın ağ təqdimatı monoxrom məkanda yeganə vurğu kimi klinik, çəkisiz, elektrik mavisinə malikdir.
- Antimetal — Kremli kağız üzərində redaksiya xronikası — elmi jurnalda sakit bir səhər, burada təmkin özünəinam ifadə edir və seriflər ağır işi yerinə yetirir
- Perk — İsti perqament kağızı üzərində elektrik əhəng
- Ditto — Günəş işığı altında vəhşi çiçək nümunələri yaradan emalatxana. İsti krem səthlər, canlı sarı əsas rəng, tünd tünd göy mürəkkəblər, əsərin arxasında çiçəklənən üzvi rəng formaları.