# Silvana Styles Library Дизайн-система, извлечённая из продакшен-сайта **https://silvana.one/** (17.08.2026). Используйте эту папку как единственный источник правды при создании новых страниц/подстраниц этого сайта — не подбирайте цвета/шрифты/радиусы на глаз, берите их отсюда. ## Структура ``` styles-lib/ ├── tokens/ ← дизайн-токены (переменные), подключать первым делом │ ├── colors.css – светлая/тёмная палитра (:root / .dark) │ ├── typography.css – шрифты (General Sans, Whyte), шкала размеров │ ├── geometry.css – радиусы, отступы, контейнеры/сетка, блюр │ ├── motion.css – easing, длительности, все @keyframes сайта │ ├── effects.css – glass-эффекты, тени, градиенты, hairline-линии │ ├── index.css – единая точка входа (импортирует всё выше) │ └── tokens.json – те же токены в JSON (для JS/тулинга/Figma-подобных нужд) │ ├── components/ ← готовые UI-компоненты поверх токенов │ ├── components.css – кнопки, карточки, бейджи, nav, секции │ └── page-template.html – стартовый шаблон новой страницы │ ├── assets/ │ ├── fonts/ – GeneralSans_Variable.woff2, Whyte_{Regular,Medium,Bold}.ttf │ ├── icons/ – фирменные лого Silvana, SVG-логотипы партнёров, токен-иконки │ └── images/ – характерные визуалы сайта (референс стиля 3D/иллюстраций) │ ├── raw/ ← необработанные исходники сайта (для сверки/повторного анализа) │ ├── index.html │ └── css/*.css – оригинальный собранный CSS (Tailwind v4 + кастомные классы) │ └── docs/ └── design-notes.md – наблюдения о визуальном языке бренда, не выраженные в токенах ``` ## Как использовать при создании новой страницы 1. Скопируйте `components/page-template.html` как отправную точку. 2. Подключите `tokens/index.css`, затем (опционально) `components/components.css`. 3. Пишите разметку, используя CSS-переменные (`var(--accent)`, `var(--radius-xl)`, `var(--text-2xl)` и т.д.) и готовые классы (`.btn`, `.card`, `.badge`, `.section`). 4. Тёмная тема переключается классом `dark` на `` — ничего дублировать не нужно, все токены уже определены для обоих режимов. 5. Для новых шрифтовых начертаний/цветов **не выдумывайте новые значения** — если нужного токена нет, сначала проверьте `raw/css/*.css` (вдруг он там есть, но не был вынесен в `tokens/`), и только потом добавляйте новый токен рядом с существующими, сохраняя нейминг (`--accent-*`, `--surface-*` и т.п.). ## Фирменные логотипы Официальные лого-файлы Silvana лежат в `assets/icons/`: | Файл | Что это | Когда использовать | |---|---|---| | [`silvana-logo.svg`](assets/icons/silvana-logo.svg) | Полный лок-ап (розовая иконка-мет + текст «silvana»), текст тёмный `#283039` | На светлом фоне / светлая тема | | [`silvana-logo-white.svg`](assets/icons/silvana-logo-white.svg) | Тот же лок-ап, текст белый `#FFFFFF` | На тёмном фоне / тёмная тема | | [`silvana-square-transparent.svg`](assets/icons/silvana-square-transparent.svg) | Только иконка-мет (розовый «S», без текста), прозрачный фон | Фавиконки, аватары, компактные места без текста | Иконка-мет всегда фирменного розового (`#D6448F`/`#D7448F` — тот же тон, что и `--accent`), независимо от темы — переключается только текст лого. **Практический приём для новых страниц**: не тащите на страницу сразу два файла (light/dark) — вставьте `silvana-logo.svg` **инлайном** в HTML, пометьте path текста классом (например `.logo-text`) и задайте `fill: var(--fg)` в CSS. Тогда вордмарк сам переключается вместе с темой (`:root` / `.dark`) без дублирования файла и без лишнего JS. Пример — шапка `../trade-pairs-v1/index.html`. ## Ключевые характеристики бренда (кратко) - **Шрифты**: General Sans (текст/UI, вариативный) + Whyte (заголовки/дисплей). - **Акцент**: розово-малиновый `#d6448f` (свет) / `#e25aa3` (тьма). - **Геометрия**: скругления 4–16px (`--radius-sm` → `--radius-2xl`), пилюли для кнопок/бейджей. - **Поверхности**: почти нет жирных бордеров — тонкие hairline-линии (~15% альфа) и glass-эффекты с backdrop-blur. - **Motion**: единый easing `cubic-bezier(.16,1,.3,1)`, появление контента снизу-вверх с blur→sharp (`page-section-reveal`, `premium-soft-reveal`). - **Тематика визуалов**: сетевые узлы, орбитальные вращения, sonar-пульсации — референс на agent/blockchain-тематику продукта (Canton, DeFi, AI-агенты). Подробности и источники значений — см. `docs/design-notes.md`.