
Substack
редакциядағы үстелдегі қызғылт сары сия
Substack ескірген жаңалықтар бөлмесінің басқару тақтасына ұқсайды — ақ кенеп, жылы, қара дерлік мәтін және мазмұн жасаудың әр кезеңін белгілейтін бір ашық қызғылт сары екпін. Көрнекі иерархия безендіруге емес, тығыздыққа негізделген: жіңішке сұр сызықтар ағын элементтерін бөледі, аватарлар кішкентай, метадеректер өшірілген және оқырманның көзі қызғылт сары шақыруға, қызғылт сары логотипке, қызғылт сары «Жазылу» сілтемесіне және қызғылт сары «Жасау» түймесіне назар аударуға үйретілген. Беттер тегіс және шектеусіз сақталады — карта көлеңкелері жоқ, хром панель элементтері жоқ — типографияға (арнайы serif тақырып қаріпімен жұптастырылған ықшам хром жүйелік интерфейс элементі) редакциялық салмақтың негізгі бөлігін көтеруге мүмкіндік береді. Қолтаңба стилі - шектеулі хром элементтері және жарқын, бір түсті жарықтар: баспа құралы сияқты сезілетін оқу қолданбасы.
Үш бағандық жұмыс үстелінің орналасуы: бекітілген сол жақ бүйірлік тақта (~200 пиксель, белгішелер мен жапсырмалары бар навигация, жабысқақ), орталық арна (максималды ені ~600 пиксель, жазбалардың тігінен айналдырылатын тізімі) және бекітілген оң жақ бүйірлік тақта (~300 пиксель, іздеу + ұсыныстар + тіркеу). Орталық арна редакциялық өзек болып табылады — карталар жоқ, тек бір-бірінің үстіне жұқа бөлгіштермен және бөлімдер арасында 32 пиксельдік аралықпен жиналған жазбалар. Негізгі баннер арнаның жоғарғы жағында бір толық енді карта ретінде орналасқан. Сол жақ бүйірлік тақтада бренд логотипі (қабаттасқан сызықтары бар қызғылт сары белгі), алты навигация элементі және төменгі жағында толық енді қызғылт сары «Жасау» түймесі бар. Оң жақ бүйірлік тақтада іздеу өрісі, тіркеу картасы және оқуға арналған «Келесі» тізімі бар. Навигация минималды — жоғарғы жолақ жоқ, нан үгінділері жоқ; бүйірлік тақта — навигация. Мазмұн тығыздығы жоғары: жазбалар 12-13 пиксель метадеректерді және 15-19 пиксель негізгі мәтінді пайдаланады, бұл нарық алаңының карта торының сезімін емес, газет тәрізді ырғақты жасайды.
Фотосуреттер – пайдаланушы жасаған мазмұн (автор аватарлары, жазбаның миниатюралары, жазбаның суреттері) — Substack өзінің сәндік фотосуреттерін ұсынбайды. Негізгі карта фон ретінде абстрактілі иллюстрациялық элементтермен (геометриялық пішіндер, қаламдар мен жазбалар сияқты стильдендірілген нысандар) көгілдірден жасылға дейінгі градиентті пайдаланады. Оң жақ бүйірлік тақтадағы жазбаның миниатюралары кішкентай (64 пиксель), 8 пиксель радиуста қоршалған және оқу тізімінің алдын ала көрінісі ретінде қызмет етеді. Жалпы көрнекі тіл мәтінге негізделген: интерфейс – оқу кенебі, ал суреттер атмосфера жасаудың орнына кішкентай көрнекі тірек ретінде қызмет етеді.
Палитра
Бренд
- Signal Orange
#ff6719— Қызғылт сары түс сәндік бөлшектер үшін және сирек кездесетін белгілерді ерекшелеу үшін қосымша екпін ретінде қолданылады. Оны әрекетке шақыру үшін негізгі түс ретінде пайдалануға болмайды.
Бейтарап
- Ink
#363737— Негізгі мәтін – негізгі мәтін, тақырыптар, жазба тақырыптары, уақыт белгілері және авторлардың аты-жөндері; оқуды жеңілдету үшін таза #000 орнына жылы, қара дерлік түс. - Paper
#ffffff— Бет кенебі, карта беттері, енгізу өрістері және шарлау фоны интерфейстің басым бөлігін алып жатқан басым беттер болып табылады. - Charcoal
#232525— Таңдау деңгейлері жоғары қосымша мәтін мен сілтемелер үшін тінтуірдің меңзерін апарыңыз; код блоктары мен таңдау блоктары үшін Ink режимінен тереңірек. - Stone
#777777— Бейтарап түс қосымша интерфейс элементтері, бөлгіштер және дыбыссыз белгілер үшін қолданылады. Оны әрекетке шақыру үшін негізгі түс ретінде пайдалануға болмайды. - Ash
#b6b6b6— Өшірілген басқару элементтеріндегі жіңішке жиек сызықтары, түйме контурлары, белгіше контурлары, жиектер. - Mist
#c8c8c8— Бөлгіш сызықтар, белгішелер үшін көзге көрінбейтін фон, қаңқа түріндегі бос ұяшықтарды толтыру.
Типография
12-ден 32 пиксельге дейін · 5 қадам
- system-ui — ауыстыру: -apple-system · контурлар 400, 500, 600 · Пайдаланушы интерфейсі мен негізгі мәтінге арналған негізгі қаріп навигация белгілері, түймелер, хабарлама мәтіні, метадеректер, енгізу өрістері және барлық интерфейс элементтері үшін қолданылады. Метадеректер үшін 12-13 пиксель және негізгі мәтін үшін 15-19 пиксель өлшемдер тығыз жаңалықтар лентасы сезімін тудырады. Салмағы негізгі мәтін үшін 400, навигация элементтері мен түйме белгілері үшін 500 және ерекшеленген хабарлама тақырыптары мен бөлім тақырыптары үшін 600 құрайды.
- Cahuenga — ауыстыру: Charter · контурлар 500 · Өнім деңгейіндегі тақырыптарға (бүйірлік тақта тақырыптары, тіркеу картасының тақырыптары, негізгі мәтін) арналған қолтаңбалық сәндік сериф қаріпі. Оның орташа салмағы және жолдың аз биіктігі оған көлемді сезілмей, ерекше көрініс береді; бұл қызғылт сары түстен басқа, Substack-тің жеке басын білдіретін жалғыз қаріп.
- Spectral — ауыстыру: Charter · контурлар 400 · Ұзын жазбаларға арналған serif қаріпі — оқу залдарында және жаңалықтар лентасының мазмұнын редакциялық материалдардың оқылуын жақсарту үшін қолданылады. Жол аралығының сәл тарылуы (1.20) жаңалықтар бөлмелеріне тән ықшамдылықты сақтай отырып, абзацтарды ыңғайлы оқуды қамтамасыз етеді.
Аралықтары және формасы
| Мақсаты | Мағынасы |
|---|---|
| Тығыздық | тығыз |
| Негізгі қадам | 8px |
| Түйме радиусы | 9999px |
| Карта радиусы | 12px |
| Көлеңкелер | көлеңкелердің орнына шекаралар жоқ |
| Бөлімдер арасында | 32px |
| Беттің ені | 1200px |
Жасанды интеллект сіздің веб-сайтыңызды Substack стилінде жасайды және оны толтырады
- Instagram, TikTok, Facebook сілтемелері арқылы өнімдер мен жазбаларды толтырыңыз.
- Ескі сайтыңыздан мазмұнды тасымалдаңыз — тек мекенжайын көрсетіңіз.
- Ең үздік қозғалтқыштағы заманауи дизайн: серверді рендерингтеу және SEO оңтайландыру арқылы React ( Next.js).
- Іздеу нәтижелері мен нейрондық желі ұсыныстары үшін толық автоматтандырылған SEO оңтайландыруы.
Ұқсас стильдер
- ElevenLabs — Жылы крем түстес, нәзік тақырыптары бар фотоэссе. Баухаус стиліндегі дәптер — жұмыртқа қабығы түсті қағаз, қара сия және өнімді көрсетуге арналған бір күлгін және қызғылт сары түсті екпін.
- Awesomic — Конфеттиді еске түсіретін қызғылт сары тыныс белгілері бар редакциялық мырыш торы
- Monad — жылы пергаментке арналған редакциялық техникалық журнал
- Dub — Link компаниясының күңгірт күріш қағазынан жасалған басқару панелі
- Seline Analytics — Жылы қағаздағы тыныш аналитикалық үстел
- Notion — Түскі күн астында жылы қағаз дәптер
- Anthropic — Жылы пергамент туралы ғылыми салалық журнал — тыныш піл сүйегі беттері, серифті редакциялық тақырыптар және тек әрекет қажет болған кезде пайда болатын жалғыз саз балшық екпіні.
- Calendly — Суық мәрмәрге қою көк сиямен салынған
- Augen Pro — Apple компаниясының ақ түсті көрінісі монохромды кеңістіктегі жалғыз екпін ретінде клиникалық, жеңіл, электрлік көк түспен ерекшеленеді.
- Antimetal — Крем қағазға басылған редакциялық шежіре — ғылыми журналдағы тыныш таң, мұнда ұстамдылық сенімділік береді, ал серифтер ауыр жұмысты атқарады
- Perk — Жылы пергамент қағазындағы электрлік лайм
- Ditto — Күн сәулесі түсіп тұрған жабайы гүлдердің үлгілерін жасайтын шеберхана. Жылы крем түсті беттер, ашық сары негізгі түс, қою көкшіл сиялар, бұйымның артында гүлдеп тұрған органикалық түсті формалар.