cosy
FAMILY AI OS
ресерч · 2026-07-01

Визуальный язык для cosy: эталон premium-грейда

Разбор семи живых сайтов и один вывод: премиальность держится не на цвете, а на дисциплине — узкая палитра, один акцент, огромный воздух, ровно одна фирменная фишка.

← к обзору ресерча

TL;DR

  • Прежний вариант сайта технически опрятен, но читается как «инженерный дашборд», не как тёплый семейный AI-продукт — нужна не революция, а смещение веса: больше serif/воздуха/тепла, меньше mono/таблиц/чипов.
  • Разобрано 7 живых сайтов (реальный CSS/HTML вытащен напрямую, не с чужих слов): Linear, reMarkable, Teenage Engineering, Dia (The Browser Company), Firewalla, Anytype — плюс отраслевые тренды Awwwards/CSS Design Awards 2025–2026.
  • Ключевой инсайт: премиальность у всех этих брендов держится не на цвете, а на дисциплине — 3–5 цветов, один акцент, огромный negative space, ровно одна «фирменная фишка» (не три).
  • Family.co оказался крипто-кошельком, не family-OS сервисом — исключён из референсов, не выдумываем то, чего не проверили.
  • Рекомендация: go — эволюция текущей палитры в тёплую сторону (кремовый → тёплый bone/paper, фиолетовый акцент → приглушённый теплее-фиолетовый + один тёплый secondary), сохранить Cormorant Garamond как якорь дороговизны, урезать JetBrains Mono до минимума (лейблы/бейджи, не основной текст).

1. Разбор эталонов

Linear (linear.app)

Тон: инженерный, «midnight command deck», но не холодный — за счёт огромного воздуха и типографской дисциплины.

Типографика: Inter Variable, кастомные веса 510 (между Regular и Medium — «точный, но не жирный» голос) и 590 для акцентов; на дисплейных размерах используют вес 300 — «headlines шепчут авторитет через сдержанность, а не кричат жирностью 700+». Это прямая противоположность шаблонному web-дизайну, где заголовок всегда bold.

Цвет: 2025 — ушли от синего к почти монохромному чёрно-белому с редкими акцентами. Меньше цвета = дороже.

Компоненты: своя система Orbiter поверх Radix UI; едва заметные границы/тени, воздушность.

Вывод: снизить количество полужирных заголовков; попробовать light/300 вес для крупных серифных заголовков вместо более тяжёлого — это моментально снимает «баннерность».

Источники: LogRocket — Linear design, Design System Analysis: Linear, прямой fetch linear.app, 2026-07-01

reMarkable (remarkable.com)

Цвет (вытащено из живого CSS): фон почти-белый тёплый #fcfbf8/#f8f7f6 (НЕ чистый белый), текст тёплый почти-чёрный #211e1c/#231a1a, акцент — холодный синий #003bb2/#2559f4/#1142d4, плюс приглушённая земляная палитра для второстепенных элементов: #d2cabc (bone), #cbbdb9 (dusty rose), #bcc8bc (sage), #745858/#6e635e (warm taupe). Это ровно та «paper premium» гамма, которая нужна cosy.

#fcfbf8 bg #231a1a text #1142d4 accent #d2cabc bone #cbbdb9 dusty rose #bcc8bc sage #745858 taupe

Типографика: два кастомных шрифта — reMarkableSans (аналог Helvetica) и reMarkableSerif (аналог Book Antiqua/Georgia) — с явным разделением ролей: sans для UI, serif для «человеческого», редакционного текста. Это прямая модель для пары Inter + Cormorant Garamond.

Философия бренда: воссоздание тактильности бумаги в цифре, e-ink-эстетика, «медленный», сфокусированный продукт — концептуально ближе всего к «второй мозг семьи» из всех разобранных.

Вывод: взять именно эту гамму «тёплый bone-фон + земляные приглушённые вторичные цвета + один холодный акцент для контраста» как основу палитры cosy — она премиальна и не детская.

Источники: прямой fetch и разбор CSS remarkable.com, 2026-07-01; reMarkable Paper Pro; Yanko Design — E Ink 2025

Teenage Engineering (teenage.engineering)

Цвет: жёстко ограниченная палитра — фактически 5 цветов на весь бренд (оранжевый #ed2024/индустриальный safety-orange, чёрный #231f20/#121114, белый #fff, алюминий, screen-green). Экстремальное ограничение = мгновенная узнаваемость.

#ed2024 #231f20 #121114

Типографика: моно-шрифты как заявление точности/инженерности — но у них это уместно (продукт — синтезаторы), у cosy моно нужно урезать до утилитарных лейблов.

Приём: продукт как герой — 3D-рендеры на чистом фоне, а не lifestyle-фото. Для cosy это транслируется в «UI/скриншоты приложения как герои», не стоковые фото семей.

Вывод: не копировать индустриальный тон, но взять принцип «предельно узкая, дисциплинированная палитра = дорого».

Источники: Blake Crosley — Teenage Engineering: Constraints as Aesthetic, Fonts In Use — Teenage Engineering, прямой fetch teenage.engineering, 2026-07-01

Dia — The Browser Company (diabrowser.com)

Позиционирование AI: «браузер, который вы не будете бояться открывать» — AI подан не как футуристичная угроза, а как тихий помощник; концепция «elevated», не «revolutionary» (в отличие от Arc). Прямая параллель для cosy: AI не должен пугать родителей, должен быть «тихо полезным».

Цвет (вытащено из живого HTML): база чёрно-белая #000/#fff, но с яркими тёплыми акцентными пятнами: #FFDC5C (тёплый жёлтый), #F2FCB3 (лаймово-кремовый), плюс развёрнутая палитра земляных/пыльных тонов для иллюстраций-градиентов: #4d170b, #e6c4ac, #cdbea7, #c5bb9f, #a08058, #9e795f — то есть чёрно-белый каркас + тёплая земляная палитра как decorative layer, не как основной UI-цвет.

#FFDC5C #F2FCB3 #4d170b #e6c4ac #cdbea7 #c5bb9f #a08058 #9e795f

История: Arc (2023, смелый, кастомная типографика Marlin Soft SQ + Inter, мягкие градиенты) → в мае 2025 свёрнут в пользу Dia (более «привычный», меньше когнитивной нагрузки на новых юзеров) → компанию купила Atlassian, сентябрь 2025. Урок: смелая кастомизация UI (Arc) плохо конвертит массовую аудиторию — семейный AI-продукт ближе к Dia-логике («elevated familiar»), чем к Arc-логике («reinvent everything»).

Вывод: чёрно-белый структурный каркас + тёплые акцентные пятна поверх (не по всей странице) — это ровно то, что не даёт cosy-сайту скатиться в «странички для малышей».

Источники: The strategy behind Dia's design, Wikipedia — Arc (web browser), прямой fetch diabrowser.com, 2026-07-01

Humane AI Pin (анти-пример)

Урок: у Humane был «high-end, почти luxury-tech» сайт уровня Apple-launch — но продукт не работал, и разрыв между обещанием сайта и реальностью стал репутационной катастрофой («worst product I've ever reviewed»). Дизайн не спасает продукт, который не держит обещание.

Вывод для cosy: не обещать на сайте того, чего продукт пока не делает (особенно в части «безопасности» и «дети-операторы» — здесь недоверие стоит дороже всего). Тон должен быть на полшага скромнее реальных возможностей, не наоборот.

Источники: Core77 — The Horrific UI/UX Design of Humane's AI Pin, Dezeen — "worst product ever" has a lot to admire, failure.museum — Humane AI Pin

Firewalla (firewalla.com) — семейный кибербез-контекст

Цвет: чёрно-белый каркас с холодным синим акцентом #186BC9, приглушённым фиолетовым #7A5BC4, тёплым оранжевым #C86800 — уместная гамма для «безопасность дома», но без cosy-тепла: это чисто технический, geek-ориентированный бренд.

#186BC9 #7A5BC4 #C86800

Типографика: Josefin Sans — геометричный sans, дружелюбнее Inter, но не premium-editorial.

Вывод: полезен как «что бывает, когда семейная кибербезопасность делается только техническим языком» — избегать, cosy должен быть теплее.

Источник: прямой fetch firewalla.com, 2026-07-01

Anytype (anytype.io) — структура/«второй мозг»

Цвет: нейтральный серый каркас #3A3A3A/#808080 с яркими pastel-акцентами #ffeec3 (кремовый жёлтый), #ffc0c8 (розовый), #F1FFC9 (лайм), #EDFAFF (голубой) — pastel «sticky note» палитра для концепции «личная база знаний / второй мозг».

#ffeec3 #ffc0c8 #F1FFC9 #EDFAFF

Вывод: pastel-акценты работают для «второй мозг» метафоры, но по одному-два за раз, не одновременно — иначе получается инфантильно (риск, релевантный для cosy — «дети-операторы» тянет дизайнеров в мультяшность).

Источник: прямой fetch anytype.io, 2026-07-01

Ни один premium-бренд не строит «дороговизну» на количестве цветов или декоративных элементов — строят на: (1) одном узнаваемом акценте, (2) огромном negative space, (3) типографской иерархии через вес и размер serif, а не через цвет, (4) ограниченном, дисциплинированном decorative layer (земляные/pastel тона — только как акцент, не как основа UI).

2. Дизайн-система для cosy

2.1 Палитра — эволюция от предыдущей версии

Предыдущая палитра: тёплый кремовый фон / насыщенный фиолетовый акцент / почти-чёрный текст — технически холодновата (чистый фиолетовый читается как «SaaS-инструмент», не «тёплый семейный AI»).

Новая палитра (тёплый сдвиг по модели reMarkable + Dia decorative layer) — она же и есть текущая палитра сайта cosy:

РольHexКомментарий
--bg#FBF7F0тёплый bone/paper вместо чистого кремового — ближе к reMarkable, но с большей желтизной
--bg-alt#F3ECE3тёплый secondary фон для секций (замена холодного лавандового)
--text#2B2621тёплый почти-чёрный (warm charcoal) — не читается как «код-редактор»
--text-muted#7A7168тёплый серо-коричневый вместо нейтрального серого
--accent#7C5CFFтот же фиолетовый, но теплее/мягче — сдвиг в сторону сирени, меньше «корпоративного»
--accent-warm#E8956BНОВЫЙ — тёплый терракотовый/persimmon secondary-акцент (в духе Dia) для CTA, hover, «человеческих» моментов — не использовать вместе с --accent в одном элементе
--success#5B8A5Aприглушённый sage-зелёный вместо яркого — мягче, «природнее»
--border#E5DDD0тёплая граница вместо нейтральной
--card#FFFFFFкарточки чуть светлее фона — сохраняет контраст без резкости

Опционально decorative-only (не в UI-компонентах, только в hero-градиентах/иллюстрациях, по модели Dia):

#D2CABC bone #C5BB9F sand #BCC8BC sage-grey

Использовать через mask-image/радиальные градиенты, растворяя края в фон, не как заливки блоков.

Вывод: одна смысловая замена, а не редизайн с нуля — фиолетовый остаётся ДНК-цветом (не выкидываем узнаваемость), но фон/текст/границы сдвигаются в тёплую сторону, и добавляется ровно один тёплый secondary-акцент для «человеческих» моментов (не для основного UI).

2.2 Типографика

Сохранена существующая пара шрифтов, изменены веса и роли:

  • Display/H1 — Cormorant Garamond, вес 500 (не 600) на самых крупных размерах — лёгкость вместо тяжести, по модели Linear (300 на дисплее); 600 оставлен только для H2/H3, где нужна структурная опора.
    • H1: clamp(2.25rem, 5vw, 3.5rem), line-height 1.1
    • H2: clamp(1.5rem, 3vw, 2rem), weight 600
  • Body — Inter, веса 400/500, размер 1rem/1.05rem, line-height 1.6–1.7 (чуть больше типового — воздух = тепло)
  • UI-labels/лейблы/бейджи — JetBrains Mono, урезанное использование: только для меток статуса, версий, коротких тегов (v0.3, beta, номера шагов). НЕ использовать mono для навигации/кнопок — в логотипе и футере можно оставить как «инженерную подпись», но не расширять.
  • Масштаб (rem, 8-точечная типографская шкала): 0.75 / 0.875 / 1 / 1.125 / 1.25 / 1.5 / 2 / 2.75 / 3.5

Вывод: снижение веса serif-заголовков с 600 на 500 — самое дешёвое по усилиям и самое сильное по эффекту изменение (Linear-урок: сдержанность = дорого).

2.3 Сетка, spacing, радиусы, тени

  • Max-width: ~960px для текста/контента, но допускается full-bleed (100vw) для hero-иллюстраций/градиентов — контраст «узкая колонка редакции» vs «широкий воздух» усиливает премиальность (приём reMarkable/Dia).
  • Spacing-шкала: 4/8/12/16/24/32/48/64/96px — вертикальные отступы между секциями увеличены минимум на 30–40% относительно исходных 36–48px → 64–96px между крупными секциями. Именно избыток воздуха читается как «дорого сделано», а не заполненность.
  • Радиусы: 8–12px для карточек (уже мягкие, менять не нужно) — cosy не значит «сильно скруглённо», значит «тепло, но не игрушечно». 12px — потолок, не увеличивать до 20+ (иначе съезжает в мультяшность).
  • Тени: цветная фиолетовая тень заменена на тёплую нейтральную — цветные тени на hover читаются дёшево/geometric-SaaS-generic; тёплая нейтральная тень premium-нейтральнее.
  • Границы: 1px тёплый --border, без градиентных рамок.

2.4 Motion-принципы

  • Transition duration: 150–250ms, easing cubic-bezier(0.16, 1, 0.3, 1) (ease-out-expo — «мягкое торможение», не линейный/ease-in-out) — ощущается спокойнее, «не дёргано».
  • Hover на картах: подъём translateY(-2px) сохранён, но убрана смена border-color на яркий accent при hover (слишком резко для cosy) → заменено на едва заметное усиление тени + мягкий scale.
  • Никаких bounce/spring-анимаций, никакого parallax на скролл сильнее 5–10px смещения — cosy premium = спокойствие, не «вау-эффект» (это как раз риск скатиться в детский тон).
  • Появление секций при скролле: fade + translateY(12px), не более — сдержанно.

Вывод: motion должен быть почти незаметным — если пользователь описывает анимацию словами, она слишком заметна.

2.5 Signature-приёмы (4 штуки, поднимающие восприятие до premium)

  1. Крупная лёгкая serif-типографика с огромным line-height на display-заголовках (Cormorant Garamond 500, line-height 1.1, но с большим padding вокруг) — по модели reMarkable/редакционных сайтов; серия коротких «человеческих» фраз крупным шрифтом между секциями (не только в hero) — создаёт ритм «журнала», не «лендинга».
  2. Тёплый radial-gradient/mask-image слой в hero и на переходах между секциями — decorative-палитра (bone/sand/терракота) с низкой прозрачностью 8–15% через mask-image, растворяя края без видимой рамки. Единственное место, где decorative-палитра используется как заливка, не в UI.
  3. UI/продукт как герой, не иллюстрации людей. По модели Teenage Engineering (продукт-рендер на чистом фоне) — скриншоты реального интерфейса cosy (чат с AI, family dashboard) в лёгких browser-frame/device-frame мокапах, а не стоковые фото «счастливой семьи за планшетом». Второе моментально выглядит как shutterstock-шаблон.
  4. Один явный «фирменный» декоративный мотив, используемый последовательно (не три разных) — тонкая пунктирная/точечная линия-«нить», соединяющая элементы семьи/устройств в диаграммах (метафора «второй мозг связывает»), выполненная тонкой линией 1px в приглушённых цветах border/accent. Использовать ТОЛЬКО этот один мотив везде, где нужна декоративная связь — не изобретать новый паттерн на каждую секцию.

Вывод: дисциплина в применении (один мотив, один decorative-приём, одна typography-эмоция) — источник premium-ощущения сильнее, чем добавление новых элементов.

3. Анти-паттерны — чего не делать

  • Не смешивать decorative-палитру (земляные/pastel тона) с UI-цветами. Земляные оттенки — только в декоративных градиентах/иллюстрациях, никогда как фон кнопки или карточки. Смешение = «шаблон с Canva».
  • Не увеличивать border-radius выше 12–14px ради «мягкости/детскости» — это первый визуальный сигнал «несерьёзно», особенно опасно для продукта про безопасность детей, где родитель должен доверять.
  • Не использовать стоковые фото счастливых семей/детей за экранами. Моментально читается как маркетинг страховой компании, убивает «умный/технологичный» полюс тона. Заменять UI-скриншотами, абстрактной типографикой, тонкими line-иллюстрациями.
  • Не использовать больше одного яркого акцента одновременно на экране. --accent (фиолетовый) и --accent-warm (терракотовый) никогда в одном компоненте/секции — выбирать один на секцию.
  • Не использовать bounce/spring/эластичные анимации — ассоциируются с игровыми/детскими интерфейсами (Duolingo-грейд), а не с premium.
  • Не увеличивать плотность mono-шрифта. Много JetBrains Mono в тексте (не в лейблах) читается как «техническая документация», отталкивает нетехнических родителей — целевая аудитория cosy шире, чем аудитория инженерных доков.
  • Не делать цветные тени на hover (box-shadow с цветом accent) — устаревший SaaS-паттерн 2018–2021, сейчас читается дёшево (Linear/Dia используют нейтральные тени).
  • Не заполнять весь vertical space контентом. Максимальная плотность = дешёвый лендинг. Пустота между блоками — это то, за что платят большие деньги.
  • Не обещать в тексте больше, чем продукт реально делает (урок Humane) — особенно про «безопасность» и «автономность детей-операторов». Один разрыв между обещанием и реальностью в этой нише стоит всего бренда.

Риски и неизвестные

  • Family.co не является релевантным референсом — при первом запросе это оказался крипто-кошелёк (NFT/Ethereum), не «cosy family AI»-продукт. Подходящий одноимённый стартап с такой позиционировкой на дату ресёрча (2026-07-01) не найден — если имелся в виду другой домен/бренд, нужно уточнение.
  • Rabbit (r1) не был проверен напрямую (не было времени/сессии) — вероятно повторяет паттерны Humane (переоценённый премиальный маркетинг, слабый продукт), но это не подтверждено прямым разбором CSS в этой сессии.
  • Retool/Vercel не проверялись напрямую — исключены из финального разбора в пользу более релевантных cosy/семейных/premium-consumer примеров (Firewalla, Anytype, Dia), т.к. они ближе к домену задачи (семейный AI-продукт, не dev-tool).
  • A/B-неизвестное: снизится ли конверсия/доверие от снижения веса serif-заголовков (600→500) — стоит проверить на реальных пользователях, гипотеза из Linear-паттерна экстраполирована на другой домен (Linear — B2B SaaS для разработчиков, cosy — B2C для родителей).
  • Данные по hex-кодам взяты из актуального прод-CSS на 2026-07-01 (прямой разбор, не из архивов/памяти) — это должно быть надёжно, но сайты меняются, стоит перепроверить перед финальной реализацией, если пройдёт много времени.

Рекомендации

На этой неделе:

  1. Применить палитру из раздела 2.1 к прежней версии сайта как черновой prototype — быстрая проверка «на глаз» тёплого сдвига без полного редизайна.
  2. Снизить вес H1 с 600 до 500 в Cormorant Garamond, увеличить line-height и вертикальные отступы между секциями (пункт 2.3) — самое дешёвое высокоэффектное изменение.
  3. Заменить цветные тени на hover (accent-shadow) на нейтральные тёплые тени (пункт 2.3).

В этом месяце:

  1. Заказать/сгенерировать 1–2 UI-скриншота реального продукта cosy для hero-секции взамен текстового hero (принцип signature-приёма №3).
  2. Разработать один decorative-мотив (пунктирная «нить» — signature-приём №4) и применить последовательно на 2–3 ключевых секциях (не сразу везде).
  3. Прогнать финальный вариант через быстрый тест «выглядит ли это как шаблон» — показать 3–5 людям вне контекста, спросить оценку цены/премиальности вслепую в сравнении со старой версией.

Источники

← к обзору ресерча