/* * saas-panel-1 — design tokens (product / SaaS theme) * Источник: # (извлечено 2026-04-13 авторизованный сессии) * * Это ОТДЕЛЬНАЯ дизайн-система от marketing-dark-1 (marketing): * – Marketing — dark-only, airy, weight 300, opacity-based greys, 18px base * – Product — dual-theme (dark shell + light content), weight 400, gray-scale, 16px base * * Общее с marketing: бренд (логотип, два оттенка синего, шрифты Circe + PF Din Text Comp Pro). * Всё остальное — самостоятельное решение. * * Для marketing-дизайн-бука см. projects/design-books/marketing-dark-1/tokens.css */ :root { /* ═══ SHELL (тёмный) ══════════════════════════════════════════ Sidebar + header. Наследует marketing-палитру, но свой оттенок. */ --sp1-shell-bg: #1C2032; /* та же база, что marketing */ --sp1-shell-bg-deep: #232025; /* sidebar (чуть иной оттенок!) */ --sp1-shell-surface: #21253A; /* навигационные кнопки */ --sp1-shell-surface-hover: #2A2F4A; --sp1-shell-text: rgba(255, 255, 255, 0.90); /* nav links */ --sp1-shell-text-muted: rgba(255, 255, 255, 0.75); --sp1-shell-divider: rgba(255, 255, 255, 0.23); /* ═══ CONTENT (светлый) ═══════════════════════════════════════ Основная рабочая область ЛК — white cards на светло-сером. */ --sp1-bg: #EEEEEE; /* фон content-зоны */ --sp1-bg-alt: #F5F5F5; /* альтернативный светлый */ --sp1-surface: #FFFFFF; /* белые карточки */ --sp1-surface-hover: #F8F9FB; /* Текстовая шкала — classic gray (НЕ opacity) */ --sp1-text: #424242; /* основной — 98-118 исп. */ --sp1-text-secondary: #595959; --sp1-text-muted: #878787; /* display headings */ --sp1-text-subtle: #9A9DA4; /* captions, meta */ --sp1-text-disabled: #A7A7A7; --sp1-text-placeholder: rgba(135, 135, 135, 0.8); /* ═══ БРЕНД (общие с marketing) ═══════════════════════════════ */ --sp1-brand: #4E8EFD; /* secondary CTA, outline */ --sp1-brand-strong: #2969D8; /* primary buttons — ЧУТЬ ДРУГОЙ оттенок, чем в marketing #2067E2 */ --sp1-brand-soft-bg: rgba(41, 105, 216, 0.08); --sp1-brand-on-light: rgba(41, 105, 216, 0.38); /* ═══ СТАТУСЫ ═════════════════════════════════════════════════ */ --sp1-success: #009D4F; /* чуть темнее, чем в marketing (#36C185) */ --sp1-success-alt: #37B37D; --sp1-warning: #D43D10; /* оранжево-красный — orange notifications */ --sp1-error: #DF1515; /* акцентный красный */ --sp1-error-alt: #B61818; /* ═══ ТИПОГРАФИКА ═════════════════════════════════════════════ */ --sp1-font-body: 'Circe', Arial, sans-serif; --sp1-font-display: 'PF Din Text Comp Pro', Arial, sans-serif; /* Кегли — сдвинутая шкала (плотнее, чем на marketing) */ --sp1-fs-10: 10px; --sp1-fs-11: 11px; --sp1-fs-13: 13px; --sp1-fs-14: 14px; /* меню, meta */ --sp1-fs-15: 15px; --sp1-fs-16: 16px; /* BASE — 131-232 исп. */ --sp1-fs-18: 18px; --sp1-fs-20: 20px; /* H3 section headings */ --sp1-fs-24: 24px; --sp1-fs-40: 40px; /* H2 display */ --sp1-fs-56: 56px; /* H1 display */ /* Веса — весь UI на regular 400, light только акценты */ --sp1-fw-thin: 100; /* 73 исп. — счётчики (редко) */ --sp1-fw-light: 300; /* shell nav */ --sp1-fw-regular: 400; /* BASE — 179-298 исп. */ --sp1-fw-medium: 500; --sp1-lh-tight: 1.15; --sp1-lh-normal: 1.5; --sp1-lh-relaxed: 1.65; /* ═══ РАДИУСЫ ═════════════════════════════════════════════════ */ --sp1-radius-xs: 3px; /* inputs, tabs (верхние углы таб-блока) */ --sp1-radius-sm: 4px; /* inputs, карточки платежей */ --sp1-radius-md: 12px; /* service cards на дашборде */ --sp1-radius-lg: 26px; /* контейнеры pill-групп */ --sp1-radius-pill: 100px; /* кнопки, бейджи */ --sp1-radius-circle: 50%; /* иконки-круги */ /* ═══ ТЕНИ / ГРАНИЦЫ ══════════════════════════════════════════ В product-теме используется микс: классические border + drop-shadow для "левитации" карточек. Glow-borders — только на брендовых акцентах. */ --sp1-border: 1px solid rgba(135, 135, 135, 0.38); --sp1-border-light: 1px solid rgba(0, 0, 0, 0.07); --sp1-border-muted: 1px solid #9A9DA4; --sp1-border-active: 2px solid rgba(41, 105, 216, 0.38); /* Glow (как в marketing) — для брендовых outline-кнопок */ --sp1-glow-brand: 0 0 0 1px var(--sp1-brand), inset 0 0 0 1px var(--sp1-brand); --sp1-glow-brand-strong: 0 0 0 1px var(--sp1-brand-strong), inset 0 0 0 1px var(--sp1-brand-strong); --sp1-glow-error: 0 0 0 1px var(--sp1-error-alt), inset 0 0 0 1px var(--sp1-error-alt); /* Drop shadows — для "поднятых" карточек (логин, модалы) */ --sp1-shadow-sm: 0 1px 2px rgba(66,66,66,0.15), 2px 3px 9px -2px rgba(66,66,66,0.07); --sp1-shadow-md: 0 2px 13px -3px rgba(0,0,0,0.25); --sp1-shadow-card: 0 2px 15px -2px rgba(154,157,164,0.35); /* ═══ SPACING ═════════════════════════════════════════════════ */ --sp1-space-1: 4px; --sp1-space-2: 8px; --sp1-space-3: 12px; --sp1-space-4: 16px; --sp1-space-5: 20px; --sp1-space-6: 24px; --sp1-space-8: 32px; --sp1-space-10: 40px; --sp1-space-12: 48px; /* ═══ LAYOUT ══════════════════════════════════════════════════ */ --sp1-sidebar-w: 180px; /* фикс-ширина тёмного sidebar */ --sp1-content-max: 1100px; --sp1-content-px: 32px; /* ═══ TRANSITIONS ══════════════════════════════════════════════ */ --sp1-ease: cubic-bezier(0.25, 0.74, 0.22, 0.99); /* общий с marketing */ --sp1-ease-alt: cubic-bezier(0.12, 0.65, 0.32, 0.99); /* для toggle, icon-fill */ --sp1-duration-fast: 0.18s; /* toggle */ --sp1-duration: 0.3s; /* кнопки, буквы */ --sp1-duration-icon: 0.3s; --sp1-transition: all var(--sp1-duration) var(--sp1-ease); /* ═══ BREAKPOINTS ══════════════════════════════════════════════ Замечено на живом сайте (375px). Значения стандартные для фреймворков. */ --sp1-bp-mobile: 768px; --sp1-bp-tablet: 1024px; --sp1-bp-desktop: 1280px; } /* * Рекомендации: * – body { background: var(--sp1-bg); color: var(--sp1-text); font: var(--sp1-fw-regular) var(--sp1-fs-16)/var(--sp1-lh-normal) var(--sp1-font-body); } * – Sidebar — background: var(--sp1-shell-bg-deep); color: var(--sp1-shell-text); width: var(--sp1-sidebar-w). * – Header page — H1 var(--sp1-font-display) var(--sp1-fs-56) color: var(--sp1-text-muted). * – Section H3 — var(--sp1-font-body) var(--sp1-fs-20) var(--sp1-fw-regular) color: var(--sp1-text). * – Primary button — bg: var(--sp1-brand-strong), color: var(--sp1-text) (white), border-radius: pill, height: 40px. * – Outline button — bg: transparent, color: var(--sp1-brand), border: 1px solid var(--sp1-brand), pill. * – Input — bg: var(--sp1-surface), border: var(--sp1-border), border-radius: var(--sp1-radius-sm), padding: 8px 12px. * – Card — bg: var(--sp1-surface), border-radius: var(--sp1-radius-md), shadow: var(--sp1-shadow-sm). */