/* ========================================================================== BLENDER BRIDGE — DESIGN TOKENS Single vocabulary for every visible surface: site, extension, desktop app, auth web, installer, admin tools. This file is the ONLY place where a brand value is defined. A new colour, radius, timing or glow that is not here is a defect, not a decision. Values are not invented here. They are extracted from the shipped products (extension 0.1.1, desktop 0.0.81, auth-web) which already agree on every primitive. What differed was the naming, not the number. Colour semantics are ratified: .agent/docs/BRAND_ESSENCE_CARD.md (08.08.2026) Component behaviour laws: ./LAWS.md 3D scene layer: ./SCENE.md + ./scene.json ========================================================================== */ :root { /* --------------------------------------------------------------------- 1. PALETTE Meaning is fixed. Orange = Blender / action. Cyan = AI / connection. Vibrant blue = intermediate depth and active choice. White = clarity. Green and red are status only — never decoration. --------------------------------------------------------------------- */ --bb-deep-space: #00030d; --bb-orange: #ea7600; --bb-cyan: #1589ff; --bb-vibrant-blue: #0033cc; --bb-white: #ffffff; --bb-success: #00e676; --bb-error: #ff3b30; /* Channel triplets. Required — every border and glow in the system is an alpha of a brand colour, so rgba() needs the raw channels. */ --bb-deep-space-rgb: 0, 3, 13; --bb-orange-rgb: 234, 118, 0; --bb-cyan-rgb: 21, 137, 255; --bb-vibrant-blue-rgb: 0, 51, 204; --bb-white-rgb: 255, 255, 255; --bb-success-rgb: 0, 230, 118; --bb-error-rgb: 255, 59, 48; /* --------------------------------------------------------------------- 2. SURFACE Nothing in this system has an opaque interior. A surface is Deep Space at an alpha; an interactive element is fully transparent. --------------------------------------------------------------------- */ --bb-surface-none: transparent; --bb-surface-veil: rgba(var(--bb-deep-space-rgb), 0.58); /* nested section */ --bb-surface-panel: rgba(var(--bb-deep-space-rgb), 0.95); /* overlay, gate */ --bb-surface-menu: rgba(var(--bb-deep-space-rgb), 0.98); /* floating menu */ --bb-surface-card: rgba(var(--bb-deep-space-rgb), 0.995); /* top container */ /* --------------------------------------------------------------------- 3. BORDER ALPHA Every interactive element carries a 1px border. Its alpha encodes role, not taste. Use as: 1px solid rgba(var(--bb-cyan-rgb), var(--bb-line-strong)) --------------------------------------------------------------------- */ --bb-line-hint: 0.28; /* tooltip, passive hairline */ --bb-line-soft: 0.42; /* floating menu */ --bb-line-card: 0.54; /* top-level container */ --bb-line-strong: 0.72; /* primary action, hoverable control */ --bb-line-active: 0.96; /* hover / focus of a brand control */ --bb-line-neutral: 0.35; /* secondary control on white */ --bb-line-neutral-hover: 0.82; --bb-line-quiet: 0.08; /* nested section on white */ /* --------------------------------------------------------------------- 4. GLOW The signature of the system: light leaves the element outward. A ring hugs the edge, a halo spills into the surroundings. Never inset for a brand colour. Compose, do not re-derive. --------------------------------------------------------------------- */ --bb-glow-cyan: 0 0 0 1px rgba(var(--bb-cyan-rgb), 0.28), 0 0 18px rgba(var(--bb-cyan-rgb), 0.15); --bb-glow-orange: 0 0 0 1px rgba(var(--bb-orange-rgb), 0.28), 0 0 18px rgba(var(--bb-orange-rgb), 0.15); --bb-glow-vibrant-blue: 0 0 0 1px rgba(var(--bb-vibrant-blue-rgb), 0.18), 0 0 12px rgba(var(--bb-vibrant-blue-rgb), 0.12); --bb-glow-white: 0 0 0 1px rgba(var(--bb-white-rgb), 0.18) inset, 0 0 18px rgba(var(--bb-white-rgb), 0.14); /* Ambient glow a resting container emits — quieter than any hover state. */ --bb-glow-rest-cyan: 0 0 0 1px rgba(var(--bb-cyan-rgb), 0.1), 0 0 22px rgba(var(--bb-cyan-rgb), 0.08); /* A human hover must remain distinct from an already recommended offer. */ --bb-glow-emphasis-cyan: 0 0 0 1px rgba(var(--bb-cyan-rgb), 0.42), 0 0 28px rgba(var(--bb-cyan-rgb), 0.24); --bb-glow-emphasis-orange: 0 0 0 1px rgba(var(--bb-orange-rgb), 0.42), 0 0 28px rgba(var(--bb-orange-rgb), 0.24); /* --------------------------------------------------------------------- 5. DEPTH Black drop shadows carry weight and altitude. They stack under a glow, never replace it. --------------------------------------------------------------------- */ --bb-shadow-lift: 0 8px 20px rgba(0, 0, 0, 0.36); --bb-shadow-soft: 0 14px 44px rgba(0, 0, 0, 0.32); --bb-shadow-card: 0 18px 44px rgba(0, 0, 0, 0.54); --bb-shadow-modal: 0 24px 80px rgba(0, 0, 0, 0.48); /* --------------------------------------------------------------------- 6. RADIUS Radius encodes nesting depth, not size. An outer container is the roundest thing on screen; each level inward gets tighter. Actions are always pills, at every level. --------------------------------------------------------------------- */ --bb-radius-pill: 999px; /* any action, any size */ --bb-radius-shell: 26px; /* window / popup shell */ --bb-radius-card: 22px; /* top-level container */ --bb-radius-panel: 18px; /* floating menu, overlay */ --bb-radius-section: 16px; /* nested block */ --bb-radius-item: 12px; /* list row */ --bb-radius-input: 11px; /* text field */ --bb-radius-hint: 10px; /* tooltip */ --bb-radius-inner: 8px; /* innermost detail */ /* --------------------------------------------------------------------- 7. TYPE One family. Weight and letter-spacing carry hierarchy; size adapts to the environment (see LAWS.md §"Что переносится между средами"). --------------------------------------------------------------------- */ --bb-font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --bb-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --bb-weight-body: 400; --bb-weight-medium: 500; --bb-weight-strong: 600; --bb-weight-bold: 700; --bb-weight-display: 800; --bb-tracking-display: -0.02em; /* large headings tighten */ --bb-tracking-label: 0.12em; /* uppercase micro-labels */ /* Text alpha over Deep Space. Never a grey hex — always white at alpha, so text stays correct on top of any scene depth. */ --bb-text-primary: rgba(var(--bb-white-rgb), 1); --bb-text-secondary: rgba(var(--bb-white-rgb), 0.56); --bb-text-tertiary: rgba(var(--bb-white-rgb), 0.42); --bb-text-label: rgba(var(--bb-white-rgb), 0.4); /* --------------------------------------------------------------------- 8. MOTION Three speeds, and only three. State is near-instant, movement is deliberate, toggles are mechanical. --------------------------------------------------------------------- */ --bb-ease-state: 0.14s ease; /* colour, border, shadow, opacity */ --bb-ease-toggle: 0.3s ease; /* switch travel */ --bb-ease-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* panel */ --bb-ease-move: 0.5s cubic-bezier(0.4, 0, 0.2, 1); /* transform */ --bb-delay-hint: 0.75s; /* tooltip appears late, hides instantly */ --bb-invitation-period: 3s; /* quiet, recurring invitation in the site film */ /* Hover lifts by exactly one pixel. Active returns and compresses. */ --bb-motion-up-1: -1px; --bb-motion-up-2: -2px; --bb-motion-down-1: 1px; --bb-motion-down-2: 2px; --bb-press-scale: 0.97; } /* ========================================================================== COMPATIBILITY ALIASES — deprecated The desktop app and auth-web shipped with an un-namespaced vocabulary. These aliases let those surfaces adopt this file without a rewrite. Do not use them in new code. Do not add more. ========================================================================== */ :root { --deep-space: var(--bb-deep-space); --blender-orange: var(--bb-orange); --blender-orange-rgb: var(--bb-orange-rgb); --vibrant-blue: var(--bb-vibrant-blue); --vibrant-blue-rgb: var(--bb-vibrant-blue-rgb); --snow-white: var(--bb-white); --success: var(--bb-success); --success-rgb: var(--bb-success-rgb); --error: var(--bb-error); --error-rgb: var(--bb-error-rgb); --font-family: var(--bb-font-family); --font-mono: var(--bb-font-mono); --radius-pill: var(--bb-radius-pill); --radius-card: var(--bb-radius-card); --radius-input: var(--bb-radius-input); --radius-inner: var(--bb-radius-inner); --transition-fast: var(--bb-ease-state); --transition-smooth: var(--bb-ease-smooth); --shadow-soft: var(--bb-shadow-soft); --shadow-modal: var(--bb-shadow-modal); } /* ========================================================================== REDUCED MOTION The system keeps its composition and its light. It loses only travel. ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --bb-motion-up-1: 0px; --bb-motion-up-2: 0px; --bb-motion-down-1: 0px; --bb-motion-down-2: 0px; --bb-press-scale: 1; --bb-ease-move: 0.01s linear; --bb-ease-toggle: 0.01s linear; } }