
ElevenLabs
Фотарэпартаж у цёплых крэмавых танах з ненадакучлівымі загалоўкамі. Нататнік у стылі Баухаус - папера колеру яечнай шкарлупіны, чорныя чарнілы, адзін фіялетавы і аранжавы акцэнт для дэманстрацыі прадукту
ElevenLabs працуе ў стылі цёплага белага мінімалізму: палатно колеру яечнай шкарлупіны (#fdfcfc) з чорным шрыфтам і адным пластом цёплых шэра-карычневых паверхняў (#f5f3f1). Фірмовы стыль ціхі і ўпэўнены ледзь адрозны шрыфт Waldenburg 300 з лімітавай выразнасцю вылучае загалоўкі (-0.02em), у то час як Inter 400/500 надае ўсяму астатняму спакойную нейтральнасць. Два акцэнтныя колеры - яркі фіялетавы #0447ff і яркі аранжавы #ff4704 - успыхваюць толькі ўнутры візуальных элементаў прадукта (аўдыёсферы, абразкі прадукта), ніколі не ў якасці хрому ў карыстацкім інтэрфейсе. Кампаненты застаюцца плоскімі ці злёгку прыпаднятымі з тонкімі 1px рамкамі, шырокімі 20px радыусамі на картках і цалкам запоўненымі 9999px кнопкамі. Сістэма нагадвае студыю Баўхаўса на крэмавай паперы: стрыманая, рэдакцыйная і тэхнічна дакладная.
Часткі ва ўсю шырыню размешчаны вертыкальна ў адной цэнтральнай калонцы максімальнай шырыні з вонкавымі прамежкамі шырынёй 1280px. Галоўны раздзел асіметрычны: загаловак выраўнаваны па левым краі на ўзроўні 48px Вальдэнбург, апісанне тэксту выраўнавана па правым краі, пад загалоўкам размешчаны дзве кнопкі-«таблеткі». Пад галоўнай часткай знаходзіцца вялікая панэль з укладкамі для навігацыі, якая займае ўсю шырыню кантэнту. Часткі чаргуюцца паміж фонамі колеру яечнай шкарлупіны і шэра-карычневага колеру з вертыкальнымі прамежкамі шырынёй 96-125px. Ніжні калантытул ўяўляе сабой кампактную адзіную паласу. Навігацыя - мінімалістычная верхняя панэль - без фіксаваных паводзін, без мега-меню. Рытм кантэнту адпавядае рэдакцыйнаму стылю: шмат вольнай прасторы, адзін асноўны візуальны элемент на частку, няма картачных сетак пад часткай «Давер».
Візуальнае афармленне дамінуе ў каляровай гаме: буйныя градыенты ў выглядзе мяккіх аўдыёсферы (кругі 200px+ з радыяльнымі пераходамі ад фіялетавага да аранжавага і ружовага) служаць галоўным графічным элементам. Лагатыпы ў раздзеле «Давер» прадстаўлены ў нізкакантраснай гаме шэрага на фоне матавага палатна. Фатаздымка мінімальная - адсутнічаюць фатаграфіі ў стылі лайфстайл і прадметнай фатаграфіі. Іканаграфія бедная і манахромная (чорныя контурныя або зафарбаваныя абразкі, няма храматычных абразкоў). Візуальная сістэма больш нагадвае дызайнерскае выданне, чым каталог прадукцыі - стрыманасць рэдакцыі пераважае над маркетынгавым эфектам.
Палітра
Брэнд
- Violet Spark
#0447ff— Візуальны акцэнт прадукта - адлюстроўваецца толькі ўсярэдзіне ілюстрацый аўдыёсферы і дэкаратыўных значкоў прадукта; ніколі не выкарыстоўваецца для элементаў інтэрфейсу.
Нейтральныя
- Eggshell
#fdfcfc— Палатно старонкі, паверхні кнопак, паверхні картак - цёплы, злёгку крэмавы, а не стэрыльна-белы колер дазваляе пазбегнуць лічбавых блікаў і надае сайту спакой, уласцівае паперы. - Warm Taupe
#f5f3f1— Падзяляльныя палосы, дэкаратыўныя карткі і дадатковы ўзровень паверхні - на адзін крок глыбей, чым матавая паверхня, ствараюць ціхі падзел без меж. - Stone
#ebe8e4— Тонкія межы, падзельнікі, фоны для абразкоў - цёплы шэры колер, які знаходзіцца паміж шэра-карычневым і сярэдне-шэрым, але не стварае адчування холаду. - Ink
#000000— Асноўны тэкст, запоўненыя кнопкі, рух, спасылкі - чысты чорны колер служыць асновай для цёплай каляровай палітры і стварае адзіны рэзкі кантраст у сістэме. - Graphite
#44403b— Асноўны тэкст, загалоўкі раздзелаў - ледзь прыкметны цёплы цёмна-шэры колер для тэксту, якому трэба надаць выразнасць, але без рэзкасці чорнага колеру. - Smoke
#777169— Асноўны тэкст, някідкія апісанні, подпісы - сярэдне-цёплы шэры; дамінуючы, чытэльны, але спакойны стыль афармлення картак і тэматычных тэкстаў.
Друкарня
ад 10 да 48px · 8 прыступак
- Waldenburg — замена: Inter (300) or Söhne Light · напісання 300 · Толькі для загалоўкаў і элементаў афармлення. Выкарыстоўваецца ў фармаце 48/36/32px з таўшчынёй шрыфта 300 - звышлёгкі шрыфт з'яўляецца нетрадыцыйным; большасць сайтаў выкарыстоўваюць 600-700, гэты ледзь прыкметны шрыфт стварае аўтарытэт за рахунак стрыманасці. Шчыльны міжлітарны інтэрвал -0.02em збліжае літары пры вялікіх памерах. Замена: "Inter" таўшчынёй 300 або "Söhne" лёгкай таўшчыні ў якасці прэміяльнай альтэрнатывы.
- Inter — замена: Inter or system-ui · напісання 400, 500 · Усё, што знаходзіцца за межамі экрана: асноўны тэкст, рух, кнопкі, спасылкі, подпісы, палі ўводу, карткі. Вага 400 - значэнне па змаўчанні; вага 500 зарэзерваваны для кнопак і выдзеленых спасылак. Памеры вар'іруюцца ад 10 да 10 з паменшаным міжрадковым інтэрвалам (1,47-1,6), што дае абзацам прастору для дыхання. Невялікая міжлітарная адлегласць 1 (2) пры памерах ад 14 да 3 павялічвае чытальнасць пры малых памерах.
- Geist Mono — замена: JetBrains Mono or IBM Plex Mono · напісання 400 · Мікратэкст, размешчаны побач з кодам або тэхнічны, у пазіцыі 13px - выкарыстоўваецца рэдка (частата = 28) для тэхнічных метак або метададзеных. Адзін пласт, вялікая вышыня радка 1,69.
Інтэрвалы і форма
| Прызначэнне | Значэнне |
|---|---|
| Шчыльнасць | шчыльная |
| Базавы крок | 8-16px |
| Радыус кнопак | 9999px |
| Радыус картак | 20px |
| Цені | не - межы замест ценяў |
| Паміж секцыямі | 96-125px |
| Шырыня старонкі | 1280px |
ІІ збярэ ваш сайт у стылі ElevenLabs і напоўніць яго
- Напоўніць таварамі і пастамі па спасылцы — Instagram, TikTok, Facebook.
- Перанясе кантэнт са старога сайта - дастаткова пазначыць адрас.
- Сучасны дызайн на лепшым рухавічку: React ( Next.js) з серверным рэндэрынгам і SEO-аптымізацыяй са скрынкі.
- Поўная аўтаматычная SEO-аптымізацыя пад пошукавую выдачу і рэкамендацыі нейрасетак.
Падобныя стылі
- Awesomic — Рэдакцыйная цынкавая сетка з аранжавымі знакамі прыпынку, якія нагадваюць канфеці
- Monad — рэдакцыйны тэхнічны часопіс на цёплым пергаменце
- Dub — матавая панэль кіравання Link на рысавай паперы
- Seline Analytics — Ціхі аналітычны стол на цёплай паперы
- Notion — Цёплы папяровы блакнот пад паўдзённым сонцам
- Anthropic — Навуковы палявы часопіс на цёплым пергаменце - спакойныя паверхні колеру слановай косткі, рэдакцыйныя загалоўкі з засечкамі і адзіны гліняны акцэнт, які з'яўляецца толькі тады, калі трэба дзейнічаць
- Calendly — Цёмна-сінія чарнілы на халодным мармуры
- Augen Pro — Прэзентацыя Apple на белым фоне - клінічны, бязважкі, электрычны сіні як адзіны акцэнт у манахромнай прасторы
- Antimetal — Рэдакцыйная хроніка на крэмавай паперы - ціхая раніца ў навуковым часопісе, дзе стрыманасць сведчыць аб упэўненасці, а засечкі выконваюць асноўную працу
- Perk — Электрычны лайм на цёплай пергаментнай паперы
- Ditto — Залітая сонцам майстэрня па стварэнні ўзораў палявых кветак. Цёплыя крэмавыя паверхні, яркі жоўты асноўны колер, глыбокія цёмна-сінія чарнілы, арганічныя каляровыя формы, якія квітнеюць за вырабам.
- Officevibe — Рэдакцыйны часопіс на паперы цёплага крэмавага колеру. Уявіце сабе ўдумлівае эсэ па кіраванні персаналам, аформленае ў выглядзе прадукта - курсіўны шрыфт з засечкамі, нібы шэпчучы скрозь сучасны сіні інтэрфейс