Библиотека референсных дизайн-систем — токены, компоненты и паттерны, собранные с рабочих сайтов как основа для построения своих продуктов.
Dark-only маркетинг: airy типографика, opacity-based иерархия, сигнатурные glow-borders.
saas-panel-1Dual-theme панель: тёмный shell + светлая content-зона. Sidebar, service-cards, toggles, flex-list, pagination.
marketing-dark-2Dense dark marketing: Inter + Berkeley Mono, multi-accent neon palette, hairline borders, отрицательный letter-spacing.
gaming-dark-13-колонная gaming-композиция: action-sidebar + hero + info-panel. Inset-glow вместо drop-shadow, triada cyan/green/orange, uppercase HUD-кнопки.
landing-1Длинный «продающий» лендинг агентства: airy 120-150 px между секциями, signature green pill CTA с diagonal glow, pill-инпуты с inset shadow, 2 финальные dark-секции для контраста.
marketing-light-1Первый light-theme бук: светлое полотно + dark-острова (nav, footer 7-col, bento-карты). Big black H1 66px/800, монохромные black pill CTA radius 12, триада magenta/blue/violet только на pricing-tiers. Signature inset 1px вместо drop-shadow. Pilot-бук для 5-агентного critique.
marketing-light-2Academic + friendly edu-tech landing: dual-font Manrope Variable 124px/780 + Evolventa 55px/700 (кирилл. academic sans). Dual primary равноправны — violet #6553F5 и yellow #FEC800. 3D skeu solid-shadow под CTA, light-sweep flash 3s infinite, pill-radii 4 роли (5/20/100/3000). Cream `#F7F6FB` bg-alternation, dual temporal motion.
landing-2Russian info-product sales page: dual-accent violet #5E4ABB (action) + orange #FF8A00 (navigate) с жёсткой ролевой асимметрией 2:1. Signature warm dual-layer shadow с orange-tint 0.05 (57 occurrences). Pill-radii extremes 100/1000 px для CTA и tags, flat input (0) — role contrast. 25000 px scroll с 10 content-блоками (.b-N Bitrix/Tilda CMS-DNA). Body 15/22, weight 400 dominant (98%), letter-spacing 0.4 px pervasive. Two-speed scroll-reveal 0.8 + 0.6 s. Inline green KPI-bubbles и orange word-highlights вместо отдельных stats-секций.
marketing-light-3Premium fintech marketing: whisper typography (weight 300 dominant, H1 48px light), indigo #533AFD единственный accent, dual-layer indigo-tinted shadows, 112px breathe rhythm, slate blue-gray neutrals hue 210°, signature radius 16.5px, 5-curve easing system.
marketing-light-4Dual-theme marketing: dark indigo hero + warm light body. Alpha-layered text (rgba, не hex), role-partitioned dual accent (blue links + red CTA only), whisper shadows (max 0.08), warm neutrals hue ~35°, bento grid 12px gap с layered screenshots, Inter weight economy 66% regular.
landing-3Direct-response conversion landing: dual-accent orange #FF8A00 (CTA default) + violet #5E4ABB (hue-swap hover). Warm orange-tinted dual-layer shadows (base + 0.05 tint). Whisper-then-shout typography (96% weight 400, CTA = 800 uppercase). Binary radius 0px/100px pill. Pervasive letter-spacing 0.4px. Playfair Display Italic display font. 25000px scroll, 16 sections.
marketing-dark-3B2B messaging platform landing в стиле quiet-dark discipline: single solid violet #630EFF + tri-stop motion gradient (cyan #01C5C8 → blue #046EF4 → violet #572DFF) раскрывается только через ::before opacity 0→1 на hover. Floating glass pill header 16px inset radius 24 + single signature shadow (2 места на весь сайт). 28px pill-card signature radius. Weight economy 400/500/600 (никогда 700+). Binary size scale: body 14-32, display 48-72, нет mid-tier 40-48. Conic-rainbow brand logo-box. First-word gradient text-clip в hero H1.
marketing-light-5Академический журнальный голос на warm cream paper substrate. Dual-voice typography inversion: serif body (Fraunces) + sans display (Inter) в пропорции 50/50 — инверсия digital-стандарта. Cream substrate #faf9f5 + warm-earth палитра hue 40-60°, slate-dark #141413 — тёплый brown-black, не чёрный. Whisper-shadow monodiscipline: одна тройная тень 0.01/0.02/0.04 на весь сайт, триггер только на hover. Clay #d97757 accent deficit (1-2 на viewport). Binary-biased radius 0+pill 100vw. Editorial underline-as-editing в H1. Typographic wordmark с диакритической модификацией. 12-col 89.5rem grid.
marketing-dark-4RU AdTech-маркетплейс: single signature acid-yellow #effd37 CTA с hover→white inversion (НЕ darken — переключатель «света»). Section zebra dark↔light↔alt by meaning. H1 weight 800 + brand-word yellow span (single point of color). Hero outline-doodle constellation 4 SVG в углах (anti-corporate human layer). Tier cards с overlapping brand-logo cluster + pastel rainbow strip vs % OFF badge. Anti-trend refusal: NO glass/blur/glow/multi-shadow/gradient hero — единственная popup-shadow 0 6px 12px rgba(0,0,0,0.12). Inter only weight 400/700/800 (никогда 500/600). Binary radius 0+button 16/22/26+signature card 26+pill 100. Desktop-first 1280px hard floor.
marketing-light-6Curated 8-swatch chromatic sampler с per-page color identity by archetype: product=blueberry-900 navy / company=matcha-500 forest green / solution=oat-200 cream rounded card 40px / pricing=neutral+blueberry-450 highlighted-tier / home=neutral zebra. Warm-cream oat substrate (hue 30-40°). Two-slot near-black: #000 CTA bg vs #1b1a18 oat-950 body (8% sat differentiator). Single-font geometric sans с binary 400/600 + asymmetric tracking (-0.04em display / +0.1em eyebrow / -0.01em body micro). Tri-modal radius binary-with-anchored-signatures: 0 dominant 87% + 12 CTA + 40 hero-card + 1584 pill (запрет mid-radii 4/6/10/16/20). Mascot-as-product naming -ent/-or/-er + 3D claymation textural unifier. FAT mega-sections doctrine 2000-2400px. Restraint manifesto — 9 anti-patterns.