Контекст: baseline
menopace_v4_real_packs.html(300×600, quiz Menopace) — логіка ОК, візуально слабкий: шрифти не ті, колонки криво, ритм збитий. Цей звіт — про візуальну якість, не про маркетинг-методологію (вона вже у/srv/reports/banner-frameworks-research-2026-05-01.md).
zephyrwang6/brand-design-md — 62 brand-design-системи з точними CSS-токенами, не описами. Беремо як референси для tone-of-voice (Stripe, Apple, Notion рівень якості).jaywilburn/refactoring-ui-skill — кодифіковані 12 принципів Refactoring UI (Wathan/Schoger): hierarchy, modular type scale, HSL-палітри, spacing scale. Це той «дизайн-клас», якого бракує v4.ehmo/platform-design-skills — 450+ rules з Apple HIG + Material 3 + WCAG 2.2. Touch-targets 44px, type ramp, contrast — must для legibility у 300×600.Cormorant Garamond 17–22px + Nunito 9–14px без modular scale → шрифти конфліктують. Гра кольорів — теплий «autumn-spice» (#e8704c #fde2cf #1a3a44) — не той код для аудиторії 40+ (modern brand-аналітика 2024–2025: мінопауз-преміум відмовляється від pastel/warm-spice на користь bold sophisticated B&W + electric accent).--brand-hue (нейтральний deep teal або aubergine), generous whitespace, animate тільки stage-transitions (не «тлумачення»), pack-shot як hero — а не як trio-strip.npx getdesign@latest add <slug> отримуєш точні CSS-токени (color hex/rgba, font-family/weight/letter-spacing, spacing, layered shadows) з 62 топ-брендів — Apple, Stripe, Notion, Linear, Figma, Vercel, Spotify, Airbnb… Не описи стилю, а готові значення для копіпасту./skill brand-design-md
> Generate Menopace 300x600 in "Stripe" design language
#1a3a44 на #fff5ec — ОК; #6e574b на #fde2cf — ризик).motion-framer — Framer-Motion + GSAP scroll-trigger, 11 типів animation + timeline builder. Для transitions hook→quiz→result.gsap-scrolltrigger — професійні scroll/transition timelines.lottie-animations — векторна After-Effects анімація. Для pack-shot reveal на result screen.animejs — SVG morphing, stagger effects. Для micro-interactions на q-options selection.motion-framer + lottie-animations + animejs./brand-design для Claude Code, генерує self-contained HTML з inline CSS, brand-token system. Default 1584×396 (LinkedIn), але patterns переносні.<style> або :root). У baseline tokens розкидані по всьому коду.:root {
--color-bg: oklch(0.96 0.02 50);
--color-fg: oklch(0.20 0.04 230);
--color-accent: oklch(0.55 0.18 30);
--type-base: 14px;
--type-ratio: 1.25;
--space-base: 8px;
}
Editorial, Brutalist, Solarpunk…). Для нашого v5 — Editorial-Modern.| Тип | Serif (headline) | Sans (body/UI) | Verdict |
|---|---|---|---|
| Editorial-Modern | Fraunces (variable, optical sizing) | Inter | ⭐ #1, обидва free, modern, premium-feel |
| Editorial-Classic | Lora | Inter / Lato | classic medical pairing |
| Premium-Wellness | Cormorant Garamond (наш baseline) | Manrope замість Nunito | Cormorant зберігаємо, але pair зі стрункішим sans, не з round Nunito |
| Pharmacy-Trust | Source Serif Pro | Source Sans Pro | "державний", низький emotion |
| Bauhaus-Bold | (none — display only) | Space Grotesk + Inter | для bold-варіанту |
Чому baseline Cormorant + Nunito не працює: Cormorant — high-contrast Garamond-style (тонкі штрихи, історична серіфа). Nunito — round geometric sans з friendly bowls. Це конфлікт estetic eras — Renaissance serif vs late-2010s startup-friendly sans. Як solution: або міняємо sans на більш neutral (Inter / Manrope), або серіфу на більш modern (Fraunces з optical sizing).
--t-1: 9px (legal)
--t-2: 11px (eyebrow / micro-label, tracking 0.18em)
--t-3: 14px (body, q-options, secondary CTA)
--t-4: 18px (q-title, deck)
--t-5: 22px (headline, brand-name)
--t-6: 28px (display, опційно для hook only)
1.1 для headlines (≥18px), 1.4 для body (≤14px), 1.2 для buttons.4/6/7/8/10/14/16/18 без логіки.Згідно BoF / WWD / Modern Retail / Margaret Andersen аналітики ринку мінопауз-брендів:
«Modern menopause brands are intentionally rejecting traditional pastel/soft-pink/lavender pharmacy aesthetics. New aesthetic: black, white, beige primary with vibrant electric secondary accents. Bold confident sophistication. Hand-drawn illustrations, friendly serif typefaces, refined wordmark logos.»
Бренди: Wile, Stripes (Naomi Watts), Joylux, Mae, Lyma.
Висновок: наш baseline #fde2cf #f6bb98 #e8704c (warm autumn spice) — не той код. Це більше «recipe blog 2018» естетика. Треба заміняти.
--brand-hue approach (підхід Linear/Slack/Stripe, через OKLCH).230 (deep teal-blue, медичний trust, не «дитячий пастель»).30 (warm amber — невеликий, controlled — для CTA only).--bg-primary: oklch(0.98 0.005 80); /* near-white warm cream */
--bg-secondary: oklch(0.94 0.012 80); /* subtle beige */
--fg-primary: oklch(0.22 0.030 230); /* deep teal-ink */
--fg-secondary: oklch(0.45 0.020 230); /* mid-grey-teal */
--fg-muted: oklch(0.62 0.015 80); /* warm grey */
--accent: oklch(0.62 0.150 30); /* controlled warm amber CTA */
--accent-hover: oklch(0.55 0.165 30);
--border: oklch(0.88 0.010 230);
| Стиль | Brand-hue | Accent | Mood |
|---|---|---|---|
| Editorial-Modern | 230 (deep teal) | 30 (amber) | NYT, intelligent, calm |
| Bold-Bauhaus | 0 (true black) | 220 (electric blue) | Wile/Stripes-aesthetic |
| Pharmacy-Trust | 200 (medical blue) | 145 (clean green) | Bayer/Pfizer style |
| Premium-Wellness | 80 (warm beige base) | 350 (muted rose) | Goop/Drunk Elephant |
Принцип: анімація має підкреслювати UX flow, не «прикрашати». Кожна анімація мусить мати communicative role: confirm action / direct attention / reveal hierarchy.
cubic-bezier(0.4, 0.0, 0.2, 1) (Material Standard easing), 300ms.@keyframes burst { 0% { box-shadow: 0 0 0 0 var(--accent); } 100% { box-shadow: 0 0 0 14px transparent; } }.heatWave — прибрати або переробити. Зараз вона передає «припливи» (hot flashes), що ризиковано: viewer 40+ може прочитати як «у тебе припливи» — pre-diagnostic claim. Legal каже — слайдити. Замінити на нейтральний breathing-pulse (just opacity 0.6→1.0, 4s ease-in-out) на brand-mark.oklch(0.98 0.005 80), ink-teal FG oklch(0.22 0.030 230).#000 #fff #f4f4f0) + electric blue accent oklch(0.55 0.20 220). Wile/Stripes-aesthetic.oklch(0.50 0.13 230) + soft green oklch(0.65 0.10 145) accent + pure white BG. Pfizer/Bayer-style.oklch(0.94 0.015 80) cream + oklch(0.65 0.08 350) muted rose accent + oklch(0.30 0.02 80) warm-charcoal text.Обґрунтування:
https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
Все, що не з цієї шкали — fix.
:root {
/* surfaces */
--bg: oklch(0.98 0.005 80); /* warm cream */
--bg-card: oklch(1.00 0.000 0); /* pure white card */
--bg-subtle: oklch(0.94 0.012 80); /* beige hover state */
/* text */
--fg: oklch(0.22 0.030 230); /* deep teal-ink (high contrast 12:1) */
--fg-muted: oklch(0.45 0.020 230); /* mid teal-grey */
--fg-subtle: oklch(0.62 0.015 80); /* warm grey for legal/eyebrow */
/* accent (ONLY on CTA + selected state) */
--accent: oklch(0.62 0.150 30); /* controlled amber */
--accent-hover: oklch(0.55 0.165 30);
--accent-fg: oklch(0.99 0.005 80); /* white text on accent */
/* borders */
--border: oklch(0.88 0.010 230);
--border-strong:oklch(0.75 0.015 230);
}
Контраст: --fg на --bg = ~12:1 (AAA), --accent-fg на --accent = ~6:1 (AA Large).
translateY(18px) на translateX(20px) + opacity 0→1, 300ms cubic-bezier(0.4, 0, 0.2, 1). Дає «прогресію» feel.box-shadow pulse на select (200ms), потім card transition.heatWave 3.4s на breathe 4s ease-in-out infinite — opacity 0.6→1.0 на brand-mark тільки (не floating halo). Прибирає медичний-symptom-натяк, додає організовану «pulse of life» метафору.ctaPulse 1.8s, але тільки на intro (щоб не конкурувати з q-options burst).16px 14px → 20px 18px (на 8pt grid).padding 12px 10px → робимо повноширинні стек кнопок (vertical stack) з padding 14px 16px і height 44px+ — touch-target compliance + читаніше на 300×600.cta-products має бути 2× weight проти secondary cta-detail. Зараз різниця тільки в кольорі — додати font-weight 800 vs 600, font-size 14 vs 12.Додати у проект meddet-banner-builder файл CLAUDE.md:
# Menopace Banner v5 — Editorial-Modern theme
- **Style:** Editorial-Modern (NYT × Notion × Stripe).
- **Type:** Fraunces (headlines, optical sizing 9–24) + Inter (body/UI).
- **Type ratio:** 1.25 Major Third. 5 sizes only: 11/14/18/22/28.
- **Spacing:** 8pt grid. 4/8/12/16/24/32/48.
- **Color:** OKLCH derived from --brand-hue: 230, --accent-hue: 30.
- **Mood keywords:** intelligent, calm, premium, editorial, NOT pastel-pharmacy.
- **Animation:** transitions only carry communicative role; no decorative bling.
- **References:** brand-design-md/notion, brand-design-md/stripe.
## Constraints
- ≤200KB initial. ≤14 distinct font-sizes is bad — keep 5.
- WCAG AA contrast min. Touch-targets ≥44px.
- No diagnostic visual metaphors (heat-waves, symptom imagery).
Цей файл лочить дизайнерські рішення для всієї подальшої роботи Claude.