Letters
Ранішні прыём у клініцы пад адкрытым небам - стэрыльна-белы стол пад мяккай блакітнай столлю, усеяны інструментамі хірургічнага сіняга колеру
Letters - гэта інструмент для напісання медыцынскіх лістоў, які пачынаецца з градыентнага загалоўка ў выглядзе адкрытага неба - мяккай сіняй атмасфернай паласы, якая стварае спакойную, клінічную атмасферу, перш чым перайсці да чыстай белай працоўнай прасторы. Сістэма выканана ў манахромным стылі: чыстае белае палатно, амаль чорны тэкст (#070709), цёмныя заклікі да дзеяння ў форме таблетак і закругленыя карткі, парылыя на найтонкіх ценях. Адзін яркі сіні колер (#2597d0) зарэзерваваны для функцыянальнай пунктуацыі - абразкоў, мікраграфікі, прайгравальнікаў хвалевых формаў - ніколі не выкарыстоўваецца для кнопак або вялікіх залівак. У друкарцы выкарыстоўваецца шрыфт Open Runde, геаметрычны гуманістычны шрыфт без засечак з агрэсіўнай адмоўнай міжлітарнай адлегласцю пры вялікіх памерах экрана (-0.04emпри80px), які сціскае загалоўкі ва ўпэўненыя блокі. Кампаненты адчуваюцца лёгкімі, як у медыцынскай прылады: тонкія рамкі, шчодры водступ для картак, кнопкі ў форме таблетак і стрыманае выкарыстанне ўзвышэння, якое дазваляе загалоўку ў выглядзе неба выконваць эмацыйную працу.
Загалоўная старонка з градыентам неба, якая займае ўсю шырыню старонкі, з загалоўкам і падтэкстам па цэнтры, а ніжэй - кнопка закліку да дзеяння. Плыўна пераходзіць у белую вобласць кантэнту з вялікім водступам паміж раздзеламі (80-120px). Часткі з функцыямі выкарыстоўваюць двухкалонкавую сетку з вялікіх закругленых картак (радыус 18-32px) роўных прапорцый. Загалоўкі раздзелаў заўсёды цэнтраваны, у адну калонку, над сеткай картак. Навігацыя ўяўляе сабой фіксаваную белую верхнюю панэль з выраўнаваным па цэнтры кластарам спасылак і выраўнаванымі па правым краі дзеяннямі аўтарызацыі. Агульны рытм: адна атмасферная галоўная паласа, затым якія чаргуюцца белыя і #f5f5f5 часткі з сталай вертыкальнай прасторай для дыхання. Няма бакавой панэлі, няма мега-меню, няма асіметрычных макетаў старонка ўспрымаецца як спакойная, сіметрычная калонка.
Візуальнае афармленне практычна цалкам арыентавана на карыстацкі інтэрфейс прадукта - ніякіх фатаграфій у стылі лайфстайл, ніякіх абстрактных 3D-рэндэраў. Візуальная мова пабудаваны на картках прадукта, якія дэманструюць уласны інтэрфейс прыкладання: параўнанне дакументаў "Да" і "Пасля", зона загрузкі з пункцірнай рамкай і аўдыяплэер у выглядзе хвалевай дыяграмы. Адзіны атмасферны візуальны элемент - гэта градыент неба на галоўным малюнку. Абразкі - плоскія, аднакаляровыя лінейныя абразкі #2597d0 (канверт, мікрафон, галачка) - з аднолькавай таўшчынёй лініі, без залітых варыянтаў. Стыль ілюстрацый стрыманы: макеты прадукта на белым фоне з невялікім паваротам для стварэння глыбіні, ніколі не нахіляюцца рэзка. Рукапісны шрыфт (The Doctor) - адзіны арганічны / ручны элемент, які выкарыстоўваецца выключна для таго, каб выклікаць асацыяцыі з клінічным почыркам на картцы "Да".
Палітра
Брэнд
- Surgical Blue
#2597d0— Абразкі, значок мікрафона, прайгравальнік гукавых хваль і невялікія функцыянальныя акцэнты - адзіная храматычная нота на ўсім інтэрфейсе.
Нейтральныя
- Obsidian
#070709— Асноўны тэкст, запоўненыя кнопкі закліку да дзеяння і цёмныя элементы карыстацкага інтэрфейсу - амаль чорны колер абраны замест чыстага #000 для змякчэння кантрасту на белым фоне. - Paper White
#ffffff— Фон старонкі, паверхні картак і тэкст кнопак - асноўнае палатно для ўсіх раздзелаў ніжэй галоўнага элемента. - Cloud Gray
#f5f5f5— Дадатковыя паверхні картак і фоны частак - адлучаюць функцыянальныя блокі ад асноўнага палатна. - Sky Tint
#d7e6f5— Адценне кардоннай рамкі і ледзь прыкметны сіні тон паверхні - ствараюць адчуванне атмасфернасці, а не шэрасці. - Charcoal
#60606c— Асноўны тэкст, другарадны тэкст і прыглушаныя межы - дамінуючы нейтральны колер для кантэнту, які не з'яўляецца загалоўкам. - Slate
#8b8b8b— Другарадны тэкст і неактыўныя памежныя станы - выкарыстоўваюцца для пазначэння месцаў і забеспячэння даступнасці для людзей з абмежаванымі магчымасцямі.
Друкарня
ад 12 да 80px · 8 прыступак
- sans-serif — замена: Inter · напісання 400, 700 · sans-serif - выяўлены ў вынятых дадзеных, але не апісаны ІІ.
- Open Runde — замена: Inter Tight · напісання 400, 500, 600, 700, 900 · Асноўны шрыфт для загалоўкаў і навігатараў - геаметрычны гуманістычны, са шчыльнай міжлітарнай адлегласцю пры вялікіх памерах; -0.04em у 80px сціскае загаловак у адзіны упэўнены блок. Выкарыстоўвайце для ўсіх загалоўкаў, навігацыі і буйнога тэксту.
- Inter — замена: system-ui · напісання 400, 500 · Другарадны асноўны тэкст і тэкст карыстацкага інтэрфейсу - выкарыстоўваецца для невялікіх загалоўкаў, элементаў навігацыі і ўбудаваных спасылак, дзе неабходзен больш нейтральны рытм чытання. Спалучаецца з Open Runde для стварэння іерархічнага кантрасту.
Інтэрвалы і форма
| Прызначэнне | Значэнне |
|---|---|
| Шчыльнасць | шчыльная |
| Базавы крок | 12-16px |
| Радыус кнопак | 100px |
| Радыус картак | 18px |
| Цені | не - межы замест ценяў |
| Паміж секцыямі | 80-120px |
| Шырыня старонкі | 1200px |
ІІ збярэ ваш сайт у стылі Letters і напоўніць яго
- Напоўніць таварамі і пастамі па спасылцы — Instagram, TikTok, Facebook.
- Перанясе кантэнт са старога сайта - дастаткова пазначыць адрас.
- Сучасны дызайн на лепшым рухавічку: React ( Next.js) з серверным рэндэрынгам і SEO-аптымізацыяй са скрынкі.
- Поўная аўтаматычная SEO-аптымізацыя пад пошукавую выдачу і рэкамендацыі нейрасетак.
Падобныя стылі
- Integrated Biosciences — біялюмінесцэнтная лабараторыя апоўначы
- Mintlify — Воблачна сад над шкляным сталом. Намаляванае ад рукі неба і дакументальны прадукт знаходзяцца ў адной рамцы - адзінае месца, дзе колер і канцэпцыя сутыкаюцца, перш чым старонка пагрузіцца ў манаскую беласць.
- Gleap — Працоўная прастора, аформленая ў цёплых крэмавых танах з графітавымі акцэнтамі - студыя, дзе матавыя чорныя чарнільныя кропкі нібы параць над ільняной архітэктурай.
- Render — Чарцёж на шліфаваным алюмініі. Інтэрфейс успрымаецца як лаканічны, геаметрычны інжынерны дакумент - пустая прастора, тонкія лініі і адна фіялетавая лінія, якая прыцягвае ўвагу да дзеяння
- Grafbase — інжынерны чарцёж на халодным мармуры
- Slash — Паўночнае сховішча з пазалочанымі лініямі бухгалтарскіх кніг
- Modal — Фосфарны тэрмінал у прыцемненым серверным пакоі - адзінай крыніцай святла з'яўляецца ярка-зялёны колер
- Whimsical — Насычаныя калючая чарніла на фоне лавандавага адцення — блакнот для творчай студыі, які ўспрымаецца як тэхнічная дошка.
- AgentQL — Паўночнае ззянне над начным тэрміналам
- Alveos One — Утульны прытулак з рачных камянёў - ціхі, заліты крэмавым святлом пакой для медытацыі, дзе адзіны графітавы прадмет у мяккім бурштынавым святле.
- GitHub — Касмічная камандная панэль з біялюмінесцэнтнымі кантрольнымі кропкамі - цёмная, атмасферная працоўная прастора, дзе адзінае зялёнае свячэнне паказвае шлях наперад
- Buddy — Інжынерны чарцёж на міліметровай паперы. Белая чарцёжная паверхня, размечаная ледзь прыкметнай сеткай, нанесенай чарніламі амаль чорнага колеру, з флуарэсцэнтнымі салатавымі паметкамі і пераліўнымі градыентнымі рыскамі