Substack
редакциядагы столдогу кызгылт сары сыя
Substack эскирген жаңылыктар бөлүмүнүн башкаруу панелине окшош — ак полотно, жылуу, дээрлик кара текст жана контентти түзүүнүн ар бир этабын белгилеген бир гана ачык кызгылт сары акцент. Визуалдык иерархия кооздукка эмес, тыгыздыкка негизделген: ичке боз сызыктар лента элементтерин бөлүп турат, аватарлар кичинекей, метадайындар үнсүз жана окурмандын көзү кызгылт сары чакырыкка, кызгылт сары логотипке, кызгылт сары "Жазылуу" шилтемесине жана кызгылт сары "Түзүү" баскычына көңүл бурууга үйрөтүлгөн. Беттер тегиз жана эркин сакталат — карталардын көлөкөсү жок, хром панелинин элементтери жок — типографияга (ыңгайлаштырылган serif аталышынын шрифти менен жупташкан компакттуу хром тутумунун интерфейс элементи) редакциялык салмактын негизги бөлүгүн көтөрүүгө мүмкүндүк берет. Кол тамга стили - чектелген хром элементтери жана жандуу, бир түстүү жарыктар: басма куралындай сезилген окуу колдонмосу.
Үч тилкелүү жумушчу столдун жайгашуусу: сол жактагы бекитилген каптал тилкеси (~200 пиксель, сүрөтчөлөр жана энбелгилер менен навигация, жабышчаак), борбордук лента (максималдуу туурасы ~600 пиксель, посттордун вертикалдуу жылдырылуучу тизмеси) жана бекитилген оң жактагы каптал тилкеси (~300 пиксель, издөө + сунуштар + каттоо). Борбордук лента редакциялык өзөк болуп саналат — карталар жок, жөн гана бири-биринин үстүнө жука бөлгүчтөр менен жана бөлүмдөрдүн ортосунда 32 пиксель аралыктар менен үйүлгөн посттор. Негизги баннер лентанын жогору жагында бир толук туурасы бар карта катары жайгашкан. Сол жактагы каптал тилкесинде бренд логотиби (кабатталган сызыктары бар кызгылт сары белги), алты навигация элементи жана төмөн жагында толук туурасы бар кызгылт сары "Түзүү" баскычы бар. Оң жактагы каптал тилкесинде издөө талаасы, каттоо картасы жана окуу үчүн "Кийинкиге чейин" тизмеси бар. Навигация минималдуу — үстүнкү тилке жок, нан күкүмдөрү жок; каптал тилкеси — бул навигация. Мазмундун тыгыздыгы жогору: посттор 12-13 пиксель метадайындарды жана 15-19 пиксель негизги текстти колдонушат, бул базардын карта торчосунун сезимин эмес, гезит сыяктуу ритмди түзөт.
Сүрөттөр колдонуучу тарабынан түзүлгөн контент (авторлордун аватарлары, посттун эскиздери, посттун сүрөттөрү) — Substack өзүнүн декоративдик сүрөттөрүн бербейт. Негизги карта фон катары абстракттуу иллюстрациялык элементтер (геометриялык фигуралар, калемдер жана жазуулар сыяктуу стилдештирилген объектилер) менен бирюзадан жашылга чейинки градиентти колдонот. Оң каптал тилкесиндеги посттун эскиздери кичинекей (64 пиксель), 8 пиксель радиуста камтылган жана окуу тизмесинин алдын ала көрүнүшү катары кызмат кылат. Жалпы визуалдык тил текстке негизделген: интерфейс окуу полотносу болуп саналат жана сүрөттөр атмосфера түзүүнүн ордуна кичинекей визуалдык таянычтар катары кызмат кылат.
Түстөр палитрасы
Бренд
- Signal Orange
#ff6719— Кызгылт сары түс декоративдик деталдарды жана сейрек кездешүүчү белгилерди баса белгилөө үчүн кошумча акцент катары колдонулат. Аны аракетке чакыруу үчүн негизги түс катары колдонууга болбойт.
Нейтралдуу
- Ink
#363737— Негизги текст – негизги текст, аталыштар, посттун аталыштары, убакыт белгилери жана авторлордун аттары; окууну жеңилдетүү үчүн таза #000 ордуна жылуу, дээрлик кара түс. - Paper
#ffffff— Барактын холсттору, карта беттери, киргизүү талаалары жана навигация фону интерфейстин басымдуу бөлүгүн ээлеген басымдуу беттер болуп саналат. - Charcoal
#232525— Код блоктору жана тандоо деңгээлдери жогору болгон кошумча тексттер жана шилтемелер үчүн курсорду алып келүү абалын тандаңыз; код блоктору жана тандоо блоктору үчүн "Сыя" режимине караганда тереңирээк. - 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 · Узун посттор үчүн сериф шрифти — окуу залдарында жана жаңылыктар лентасынын мазмунунда редакциялык материалдардын окумдуулугун жакшыртуу үчүн колдонулат. Саптардын аралыгы бир аз тарыраак (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 — Күн нуру тийген жапайы гүлдөрдүн үлгүлөрүн жасоочу устакана. Жылуу каймак түстөгү беттер, ачык сары түс, кочкул көк сыялар, чыгарманын артында гүлдөгөн органикалык түстөгү формалар.