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