# Заметки по дизайну Silvana

Наблюдения о визуальном языке сайта, которые не сводятся к отдельным CSS-переменным,
но важны при создании новых страниц, чтобы они выглядели "родными" для сайта.

## Источник

- Сайт: https://silvana.one/ (Next.js + Tailwind CSS v4, сборка через Turbopack).
- Слоган/позиционирование: "Private Trading and Agent Execution on Canton" —
  торговая инфраструктура для токенизированных активов с AI-агентами поверх сети Canton.
- Стек CSS: Tailwind v4 (`@theme`, `@layer`), кастомные CSS custom properties поверх
  Tailwind-скейлов, `color-mix()` для получения прозрачных вариантов цветов вместо
  захардкоженных rgba.

## Тон и композиция

- Много "воздуха": широкие секции (`padding-block: clamp(3rem, 8vw, 7rem)`), крупная типографика в hero.
- Заголовки в hero используют фирменный шрифт Whyte и **градиентный анимированный текст**
  (`text-gradient-flow`) — это единственный "громкий" акцент на спокойном фоне.
- Контраст поверхностей минимальный: карточки почти сливаются с фоном (surface vs
  surface-2 отличаются едва заметно), разделение достигается тонкими hairline-линиями,
  а не заливками или тяжёлыми тенями.
- Тени используются экономно и всегда мягкие/размытые (`0 26px 60px rgba(...,0.06)`),
  никогда резкие/жёсткие.

## Цвет

- Основной "рабочий" цвет интерфейса — нейтральный (fg/bg/muted/surface), акцентный
  розово-малиновый цвет (`--accent`) применяется точечно: CTA-кнопки, ссылки при hover,
  бейджи, градиентный текст, декоративные blur-пятна ("blobs") на фоне.
- Отдельная пара цветов `--buy` (зелёный) / `--sell` (красный) зарезервирована под
  трейдинговую семантику (цена/изменение/ордербук) — не используйте их как декоративные
  цвета, только для реальных "рост/падение", "покупка/продажа".
- Тёмная тема — не инверсия светлой, а отдельно подобранная палитра (более тёплый/яркий
  accent в тёмном режиме — `#e25aa3` вместо `#d6448f` — чтобы сохранить контраст и "живость"
  на тёмном фоне).

## Форма и геометрия

- Скругления среднего размера везде (8–16px для карточек/панелей), но кнопки и бейджи —
  всегда полностью скруглены (pill/circle).
- Крупные визуалы (иллюстрации продукта) часто "въезжают" в кадр через `clip-path: inset()`
  с анимацией (`premium-visual-reveal`) — угол среза скруглён тем же радиусом, что и сама
  карточка (1.5rem), чтобы маска не создавала острых углов.
- Декоративные фоновые формы — большие круги/пятна с сильным blur (`--blur-3xl` = 64px)
  и низкой непрозрачностью акцентного цвета, размещённые абсолютным позиционированием
  позади контента (см. `.accent-blob` в `components/components.css`).

## Иконография и визуалы

- Тематика иконок и 3D-визуалов (см. `assets/images/`) — сетевые узлы, деревья/графы
  связей, орбитальные кольца: отсылка к distributed ledger / agent network.
  При создании новых иллюстраций для подстраниц придерживайтесь этой метафоры
  (узлы + связи + мягкий 3D-рендер с розовым акцентным светом), а не плоских иконок.
- Логотипы партнёров — монохромные SVG (`assets/icons/partners_*.svg`), встраиваются
  в оттенке `muted`/`fg`, не в оригинальных цветах бренда партнёра — держите такой же
  подход для новых логотипов-партнёров.

## Движение (motion)

- Всё "оживает" при скролле через `IntersectionObserver`-паттерн: элемент рождается
  с `opacity:0; filter:blur(...); transform:translateY(...)` и мягко проявляется
  (`page-section-reveal`, `premium-soft-reveal`, `icon-in-up/down`).
- Единая кривая easing `cubic-bezier(.16,1,.3,1)` ("expo-out"-подобная, быстрый старт,
  плавное затухание) используется практически везде — не подмешивайте linear/ease-in-out
  в новых анимациях, это будет выбиваться из общего фирменного "ощущения".
- Длительности короткие для микро-интеракций (0.18–0.28s) и длинные для появления
  крупных блоков (0.72s) — не делайте промежуточных значений без необходимости.

## Что переиспользовать напрямую

- `tokens/` — переиспользуйте как есть, это прямое отражение продакшен-переменных сайта.
- `components/components.css` — базовый набор, покрывающий 80% типовых блоков
  (кнопки/карточки/бейджи/nav/секции). Расширяйте его по мере необходимости,
  но держите нейминг классов в том же стиле (`.btn-*`, `.card-*`, `.badge-*`).
- `raw/css/25ib2gz9gfjev.css` — полный slice продакшен-CSS (Tailwind-сборка), полезен
  для сверки конкретного класса/значения, если чего-то не хватает в `tokens/`.

## Не найдено на главной странице (стоит доизвлечь при необходимости)

Сайт — multi-page (SDK, документация, блог и т.д.), но эта библиотека построена
по данным **только с главной страницы** (`https://silvana.one/`). Если для новой
подстраницы понадобятся паттерны, которых нет в этом наборе (например, стили таблиц
ордербука, форм, специфичных страниц блога/документации) — повторите процесс:
скачайте нужную страницу (`curl`), найдите её CSS-чанк в `<head>`, и добавьте
недостающие токены/компоненты в соответствующие файлы этой библиотеки.