External/open-design
1
0
Fork 0
mirror of https://github.com/nexu-io/open-design.git synced 2026-10-27 09:51:12 +01:00
Code Issues Packages Projects Releases Wiki Activity
Files
codex/motion-hyperframes-retirement
open-design/design-systems/cohere/DESIGN-ru.md
T
xne998808-aiGitHubJoey
 681dacde18 feat(landing): DESIGN.md systems hub + design-token spec sheet + scenario mocks on design-system pages (#4420) 
* feat(landing): systems-page DESIGN.md/FAQ copy + design-token loader

* feat(landing): DESIGN.md+FAQ sections on systems hub, token spec sheet on detail

* feat(landing): detail-page TOC nav, token visuals, tighter spacing, unified related cards

* feat(landing): multi-scenario themed previews (web/app/slides/poster) on design-system detail

* feat(landing): localized routes for design-system detail pages (chrome i18n, DESIGN.md body stays en)

* feat(landing): theme scenario mocks from real design tokens; phone app, 16:9 slide, refined poster

* feat(landing): redesign slide mock (two-zone), sticky schema nav, contribute moved to top

* feat(landing): right-rail section nav + 2-up related cards on design-system detail

* fix(landing): localize design-system detail title suffix + keyword-rich meta description + keywords meta

* feat(landing): declutter detail header — icon-only share, move contribute callout to page bottom

* fix(landing): cancel homepage 130px section padding on detail-block (killed huge inter-section gaps)

* i18n(landing): localize design-system detail + systems-hub chrome across 17 locales

* feat(landing): locale-aware DESIGN.md body loading (DESIGN-<locale>.md) with English fallback

* i18n(design-systems): localize apple DESIGN.md body into 17 locales

* i18n(design-systems): localize stripe DESIGN.md body into 17 locales

* i18n(design-systems): localize vercel DESIGN.md body into 17 locales

* i18n(design-systems): localize notion DESIGN.md body into 17 locales

* i18n(design-systems): localize github DESIGN.md body into 17 locales

* i18n(design-systems): localize airtable DESIGN.md body into 17 locales

* i18n(design-systems): localize figma DESIGN.md body into 17 locales

* i18n(design-systems): localize openai DESIGN.md body into 17 locales

* i18n(design-systems): localize slack DESIGN.md body into 17 locales

* i18n(design-systems): localize discord DESIGN.md body into 17 locales

* i18n(design-systems): localize webflow DESIGN.md body into 17 locales

* i18n(design-systems): localize cohere DESIGN.md body into 17 locales

* i18n(design-systems): localize duolingo DESIGN.md body into 17 locales

* i18n(design-systems): localize spotify DESIGN.md body into 17 locales

* i18n(design-systems): localize shopify DESIGN.md body into 17 locales

* i18n(design-systems): localize nvidia DESIGN.md body into 17 locales

* i18n(design-systems): localize pinterest DESIGN.md body into 17 locales

* i18n(design-systems): localize uber DESIGN.md body into 17 locales

* i18n(design-systems): localize nike DESIGN.md body into 17 locales

* i18n(design-systems): localize airbnb DESIGN.md body into 17 locales

* i18n(design-systems): localize ibm DESIGN.md body into 17 locales

* i18n(design-systems): localize playstation DESIGN.md body into 17 locales

* i18n(design-systems): localize starbucks DESIGN.md body into 17 locales

* i18n(landing): localize detailSystemLabel (design-system H1/title noun) across 17 locales

* i18n(landing): localize plugins chrome (contribute callout, card CTA, search, about) across 15 remaining locales

* i18n(landing): localized card taglines + category labels for design systems (149 systems x 17 locales)

* fix(landing): suppress on-load locale auto-redirect on design-system detail pages (keep localized routes + hreflang)

* fix(landing): localize SystemCard detail link so cards on /<locale>/ stay in-locale

---------

Co-authored-by: Joey <276262049+xne998808-ai@users.noreply.github.com>
2026-06-17 15:24:58 +08:00

26 KiB
Raw Permalink Blame History

Дизайн-система, вдохновлённая Cohere

Category: ИИ и языковые модели Корпоративная AI-платформа. Яркие градиенты, эстетика насыщенных дашбордов.

1. Визуальная тема и атмосфера

Интерфейс Cohere — это отполированная корпоративная командная панель: уверенная, лаконичная, созданная с целью показать ИИ как серьёзную инфраструктуру, а не потребительскую игрушку. Всё разворачивается на ярко-белом холсте, где контент организован в щедро скруглённые карточки (радиус 22px), формирующие органичный, «облачный» визуальный язык. Сайт обращается к техническим директорам и корпоративным архитекторам: профессионально без холодности, сложно без излишней строгости.

Дизайн-язык соединяет два мира через систему из двух шрифтов: CohereText — кастомная дисплейная антиква с плотным трекингом — придаёт заголовкам авторитет технологического манифеста, тогда как Unica77 Cohere Web отвечает за весь основной и интерфейсный текст с геометрической швейцарской точностью. Это сочетание антиквы и гротеска создаёт личность «уверенный авторитет встречает инженерную ясность», идеально отражающую корпоративную AI-платформу.

Цвет используется с крайней сдержанностью — интерфейс почти полностью чёрно-белый с холодными серыми границами (#d9d9dd, #e5e7eb). Пурпурно-фиолетовый появляется лишь в фотографических hero-полосах, градиентных секциях и интерактивном синем (#1863dc), сигнализирующем состояния наведения и фокуса. Такая хроматическая сдержанность означает, что когда цвет всё же появляется — в скриншотах продукта, корпоративной фотографии и глубокой пурпурной секции — он несёт максимальный визуальный вес.

Ключевые характеристики:

  • Ярко-белый холст с холодными серыми разграничивающими рамками
  • Радиус скругления 22px — отличительная «округлость карточки Cohere»
  • Два кастомных шрифта: CohereText (дисплейная антиква) + Unica77 (основной гротеск)
  • Корпоративная хроматическая сдержанность: чёрный, белый, холодные серые, минимальный пурпурно-синий акцент
  • Глубокие пурпурно-фиолетовые hero-секции для драматического контраста
  • Ghost/прозрачные кнопки, переходящие в синий при наведении
  • Корпоративная фотография, демонстрирующая разнообразные реальные сценарии
  • CohereMono для кода и технических меток с трансформацией в верхний регистр

2. Цветовая палитра и роли

Основные цвета

  • Cohere Black (#000000): Основной цвет заголовков и элементов максимального акцента.
  • Near Black (#212121): Стандартный цвет ссылок в тексте — чуть мягче чистого чёрного.
  • Deep Dark (#17171c): Сине-тёмный почти-чёрный для навигации и текста на тёмных секциях.

Вторичные цвета и акценты

  • Interaction Blue (#1863dc): Основной интерактивный акцент — появляется при наведении на кнопки, в состояниях фокуса и активных ссылках. Единственный хроматический цвет действий.
  • Ring Blue (#4c6ee6 с 50%): Цвет Tailwind ring для индикаторов фокуса с клавиатуры.
  • Focus Purple (#9b60aa): Цвет рамки фокуса у полей ввода — приглушённый фиолетовый.

Поверхности и фоны

  • Pure White (#ffffff): Основной фон страницы и поверхность карточек.
  • Snow (#fafafa): Деликатно приподнятые поверхности и фоны светлых секций.
  • Lightest Gray (#f2f2f2): Рамки карточек и самые мягкие разграничивающие линии.

Нейтральные цвета и текст

  • Muted Slate (#93939f): Приглушённые ссылки в футере и третичный текст — холодно-тонированный серый с лёгким сине-фиолетовым оттенком.
  • Border Cool (#d9d9dd): Стандартные рамки секций и элементов списков — холодный серый с едва заметным пурпурным тоном.
  • Border Light (#e5e7eb): Более светлый вариант рамки — стандартный gray-200 из Tailwind.

Система градиентов

  • Пурпурно-фиолетовая hero-полоса: Глубокие пурпурные градиентные секции, создающие драматический контраст на белом холсте. Размещаются как полноширинные полосы, содержащие скриншоты продукта и ключевые сообщения.
  • Тёмный градиент футера: Страница переходит через глубокий пурпурный/угольный к чёрному футеру, создавая эффект «сумерек».

3. Правила типографики

Семейства шрифтов

  • Дисплейный: CohereText, с запасными: Space Grotesk, Inter, ui-sans-serif, system-ui
  • Основной / UI: Unica77 Cohere Web, с запасными: Inter, Arial, ui-sans-serif, system-ui
  • Код: CohereMono, с запасными: Arial, ui-sans-serif, system-ui
  • Иконки: CohereIconDefault (кастомный иконочный шрифт)

Иерархия

Роль Шрифт Размер Насыщенность Межстрочный Трекинг Примечание
Дисплейный / Hero CohereText 72px (4.5rem) 400 1.00 (плотный) -1.44px Максимальный акцент, авторитет антиквы
Дисплейный вторичный CohereText 60px (3.75rem) 400 1.00 (плотный) -1.2px Крупные заголовки секций
Заголовок секции Unica77 48px (3rem) 400 1.20 (плотный) -0.48px Заголовки разделов с функциями
Подзаголовок Unica77 32px (2rem) 400 1.20 (плотный) -0.32px Заголовки карточек, названия функций
Заголовок функции Unica77 24px (1.5rem) 400 1.30 normal Небольшие заголовки секций
Крупный текст Unica77 18px (1.13rem) 400 1.40 normal Вводные абзацы
Основной / Кнопка Unica77 16px (1rem) 400 1.50 normal Стандартный текст, текст кнопок
Средняя кнопка Unica77 14px (0.88rem) 500 1.71 (свободный) normal Небольшие кнопки, акцентные метки
Подпись Unica77 14px (0.88rem) 400 1.40 normal Метаданные, описания
Метка в верхнем регистре Unica77 / CohereMono 14px (0.88rem) 400 1.40 0.28px Метки секций в верхнем регистре
Мелкий Unica77 12px (0.75rem) 400 1.40 normal Самый мелкий текст, ссылки в футере
Микро-код CohereMono 8px (0.5rem) 400 1.40 0.16px Крошечные метки кода в верхнем регистре

Принципы

  • Антиква для деклараций, гротеск для утилит: CohereText несёт голос бренда на дисплейном уровне — засечки придают заголовкам авторитет публикуемого исследования. Unica77 справляется с любыми функциональными задачами в швейцарско-геометрической нейтральности.
  • Отрицательный трекинг на крупных размерах: CohereText использует -1.2px до -1.44px межбуквенного расстояния при 60–72px, создавая плотные, выразительные текстовые блоки.
  • Единственная насыщенность текста: Почти всё использование Unica77 — насыщенность 400. Насыщенность 500 появляется только для небольшого акцента кнопок. Система опирается на размер и отступы, а не на контраст насыщенности.
  • Метки кода в верхнем регистре: CohereMono использует верхний регистр с положительным межбуквенным расстоянием (0.16–0.28px) для технических тегов и маркеров секций.

4. Стилизация компонентов

Кнопки

Ghost / Прозрачная

  • Фон: прозрачный (rgba(255, 255, 255, 0))
  • Текст: Cohere Black (#000000)
  • Рамка не видна
  • При наведении: текст переходит в Interaction Blue (#1863dc), прозрачность 0.8
  • При фокусе: сплошная обводка 2px в Interaction Blue
  • Основной стиль кнопки — невидима до взаимодействия

Тёмная сплошная

  • Фон: тёмный/чёрный
  • Текст: Pure White
  • Для CTA на светлых поверхностях
  • Форма пилюли или стандартный радиус

С обводкой

  • Ограничение через рамку
  • Используется для вторичных действий

Карточки и контейнеры

  • Фон: Pure White (#ffffff)
  • Рамка: тонкая сплошная Lightest Gray (1px solid #f2f2f2) для деликатных карточек; Cool Border (#d9d9dd) для акцентных
  • Радиус: 22px — фирменный радиус Cohere для основных карточек, изображений и диалоговых контейнеров. Также 4px, 8px, 16px, 20px для меньших элементов
  • Тень: минимальная — Cohere опирается на цвет фона и рамки, а не на тени
  • Особое: 0px 0px 22px 22px радиус (скругление только снизу) для контейнеров секций
  • Диалог: радиус 8px для модальных окон

Поля ввода и формы

  • Текст: белый на тёмном инпуте, чёрный на светлом
  • Рамка фокуса: Focus Purple (#9b60aa) с 1px solid
  • Тень фокуса: красное кольцо (rgb(179, 0, 0) 0px 0px 0px 2px) — вероятно, для индикации ошибки
  • Обводка фокуса: Interaction Blue сплошная 2px

Навигация

  • Чистая горизонтальная навигация на белом или тёмном фоне
  • Логотип: надпись Cohere (кастомный SVG)
  • Ссылки: тёмный текст 16px Unica77
  • CTA: тёмная сплошная кнопка
  • Мобильная: коллапс в бургер

Обработка изображений

  • Корпоративная фотография с разнообразными персонажами и окружением
  • Фотография с пурпурным оттенком для драматических секций
  • Скриншоты интерфейса продукта на тёмных поверхностях
  • Изображения с радиусом 22px в соответствии с системой карточек
  • Полноширинные секции с пурпурным градиентом

Особые компоненты

Система карточек 22px

  • Радиус скругления 22px — визуальная подпись Cohere
  • Все основные карточки, изображения и контейнеры используют этот радиус
  • Создаёт облачную, органичную мягкость, отличающую от типичных 8–12px

Полоса корпоративного доверия

  • Логотипы компаний, расположенные в горизонтальной полосе
  • Демонстрирует корпоративное внедрение
  • Чистая монохромная обработка логотипов

Пурпурные hero-полосы

  • Полноширинные глубоко пурпурные секции для демонстрации продукта
  • Создают драматические визуальные разрывы в потоке белой страницы
  • Скриншоты продукта парят в пурпурном окружении

Теги кода в верхнем регистре

  • CohereMono в верхнем регистре с межбуквенным расстоянием
  • Используется как маркеры секций и метки категоризации
  • Создаёт техническую, структурированную иерархию информации

5. Принципы компоновки

Система отступов

  • Базовая единица: 8px
  • Шкала: 2px, 6px, 8px, 10px, 12px, 16px, 20px, 22px, 24px, 28px, 32px, 36px, 40px, 56px, 60px
  • Внутренние отступы кнопок варьируются в зависимости от варианта
  • Внутренние отступы карточек: примерно 24–32px
  • Вертикальные отступы секций: щедрые (56–60px между секциями)

Сетка и контейнер

  • Максимальная ширина контейнера: до 2560px (очень широкий) с адаптивным масштабированием
  • Hero: по центру с драматической типографикой
  • Секции с функциями: многоколоночные сетки карточек
  • Корпоративные секции: полноширинные пурпурные полосы
  • Обнаружено 26 брейкпоинтов — исключительно детализированная адаптивная система

Философия белого пространства

  • Корпоративная ясность: Каждая секция представляет одно чёткое предложение с пространством для дыхания между ними.
  • Фотография как герой: Крупные фотографические секции обеспечивают визуальный интерес без необходимости в декоративных дизайн-элементах.
  • Группировка в карточки: Связанный контент объединяется в карточки со скруглением 22px, создавая естественные кластеры информации.

Шкала радиуса скругления

  • Острый (4px): Элементы навигации, мелкие теги, пагинация
  • Комфортный (8px): Диалоговые окна, вторичные контейнеры, маленькие карточки
  • Щедрый (16px): Акцентные контейнеры, средние карточки
  • Крупный (20px): Большие карточки с функциями
  • Фирменный (22px): Основные карточки, hero-изображения, главные контейнеры — ФИРМЕННЫЙ радиус Cohere
  • Пилюля (9999px): Кнопки, теги, индикаторы статуса

6. Глубина и уровни поднятия

Уровень Обработка Применение
Плоский (0) Нет тени, нет рамки Фон страницы, текстовые блоки
С рамкой (1) 1px solid #f2f2f2 или #d9d9dd Стандартные карточки, разделители списков
Пурпурная полоса (2) Полноширинный тёмно-пурпурный фон Hero-секции, демонстрация функций

Философия теней: Cohere практически без теней. Глубина передаётся через контраст цвета фона (белые карточки на пурпурных полосах, белая поверхность на snow), ограничение рамками (холодно-серые рамки) и драматическое чередование светлых и тёмных секций. Когда элементам нужна высота, они достигают её, будучи белыми на тёмном, а не через тени.

7. Что делать и чего избегать

Делать

  • Использовать радиус скругления 22px на всех основных карточках и контейнерах — это визуальная подпись
  • Использовать CohereText для дисплейных заголовков (72px, 60px) с отрицательным трекингом
  • Использовать Unica77 для всего основного и интерфейсного текста с насыщенностью 400
  • Поддерживать палитру чёрно-белой с холодно-серыми рамками
  • Использовать Interaction Blue (#1863dc) только для интерактивных состояний наведения/фокуса
  • Использовать глубокие пурпурные секции для драматических визуальных разрывов и демонстрации продукта
  • Применять верхний регистр + межбуквенное расстояние на CohereMono для меток секций
  • Поддерживать корпоративную фотографию с разнообразными персонажами

Не делать

  • Не использовать радиус скругления, отличный от 22px, на основных карточках — фирменный радиус важен
  • Не вводить тёплые цвета — палитра строго холодных тонов
  • Не использовать тяжёлые тени — глубина достигается за счёт цветового контраста и рамок
  • Не использовать жирное начертание (700+) для основного текста — диапазон 400–500
  • Не пропускать иерархию антиква/гротеск — CohereText для заголовков, Unica77 для текста
  • Не использовать пурпурный как цвет поверхности карточек — пурпурный зарезервирован для полноширинных секций
  • Не сокращать отступы между секциями ниже 40px — корпоративные компоновки требуют пространства для дыхания
  • Не применять декоративные элементы на кнопках по умолчанию — ghost/прозрачная — базовое состояние

8. Адаптивное поведение

Брейкпоинты

Название Ширина Ключевые изменения
Маленький мобильный <425px Компактная компоновка, минимальные отступы
Мобильный 425–640px Одна колонка, карточки в столбик
Крупный мобильный 640–768px Незначительные корректировки отступов
Планшет 768–1024px Начинаются двухколоночные сетки
Десктоп 1024–1440px Полная многоколоночная компоновка
Крупный десктоп 1440–2560px Максимальная ширина контейнера

Обнаружено 26 брейкпоинтов — один из наиболее детализированных адаптивных сайтов в наборе данных.

Цели касания

  • Кнопки достаточного размера для касания
  • Ссылки навигации с комфортными отступами
  • Поверхности карточек как цели касания

Стратегия коллапса

  • Навигация: Полная навигация сворачивается в бургер
  • Сетки функций: Многоколоночная → 2 колонки → одна колонка
  • Текст hero: 72px → 48px → 32px прогрессивное масштабирование
  • Пурпурные секции: Сохраняют полную ширину, контент складывается
  • Сетки карточек: 3 → 2 → 1 колонка

Поведение изображений

  • Фотография пропорционально масштабируется внутри контейнеров со скруглением 22px
  • Скриншоты продукта сохраняют соотношение сторон
  • Пурпурные секции пропорционально масштабируют фон

9. Руководство по промптам для агента

Краткий справочник цветов

  • Основной текст: «Cohere Black (#000000)»
  • Фон страницы: «Pure White (#ffffff)»
  • Вторичный текст: «Near Black (#212121)»
  • Акцент при наведении: «Interaction Blue (#1863dc)»
  • Приглушённый текст: «Muted Slate (#93939f)»
  • Рамки карточек: «Lightest Gray (#f2f2f2)»
  • Рамки секций: «Border Cool (#d9d9dd)»

Примеры промптов для компонентов

  • «Создай hero-секцию на Pure White (#ffffff) с CohereText размером 72px, насыщенность 400, межстрочный 1.0, трекинг -1.44px. Текст Cohere Black. Подзаголовок в Unica77 18px насыщенность 400, межстрочный 1.4.»
  • «Спроектируй карточку функции с радиусом 22px, рамкой 1px solid Lightest Gray (#f2f2f2) на белом фоне. Заголовок в Unica77 32px, трекинг -0.32px. Текст в Unica77 16px, Muted Slate (#93939f).»
  • «Создай ghost-кнопку: прозрачный фон, текст Cohere Black в Unica77 16px. При наведении текст переходит в Interaction Blue (#1863dc) с прозрачностью 0.8. При фокусе: сплошная обводка 2px в Interaction Blue.»
  • «Создай полноширинную секцию глубокого пурпурного с белым текстом. CohereText 60px для заголовка. Скриншот продукта парит внутри со скруглением 22px.»
  • «Спроектируй метку секции в CohereMono 14px, верхний регистр, трекинг 0.28px. Текст Muted Slate (#93939f).»

Руководство по итерации

  1. Фокусируйся на ОДНОМ компоненте за раз
  2. Всегда используй радиус 22px для основных карточек — «округлость карточки Cohere»
  3. Указывай шрифт — CohereText для заголовков, Unica77 для текста, CohereMono для меток
  4. Интерактивные элементы используют Interaction Blue (#1863dc) только при наведении
  5. Поддерживай белые поверхности с холодно-серыми рамками — никаких тёплых тонов
  6. Пурпурный — для полноширинных секций, никогда не для фонов карточек
Reference in New Issue View Git Blame Copy Permalink