Metrics

1. COLORS — Use these exact hex tokens: --bg #FAFAFB (near-white page canvas), --surface #FFFFFF (cards, panels, nav), --ink #0E1116 (darkest text, dark sections), --text #0E1116 (primary copy), --muted #5B6472 (secondary copy, captions, labels), --primary / --indigo #4F46E5 (buttons, links, active states), --indigo-hover #4338CA (button hover), --indigo-soft #EEF0FE (icon backgrounds, tinted card highlights), --border #E8EAF0 (1px hairlines on every card and divider), --cyan #06B6D4 / --emerald #10B981 / --amber #F59E0B / --pink #EC4899 (chart data series only — never use for UI chrome). Hero carries a radial-gradient glow: radial-gradient(ellipse, rgba(79,70,229,0.08), transparent 70%) centered above the headline. The palette mood: clinical precision lit by indigo. 2. TYPOGRAPHY — Load "Inter" and "JetBrains Mono" from Google Fonts (exact names as listed). Type scale: H1 68px / weight 800 / line-height 1.02 / letter-spacing -0.04em — one word or phrase inside <em> rendered in #4F46E5 (no italic, no font-style change). H2 48px / weight 800 / line-height 1.08 / letter-spacing -0.03em. H3 34px / weight 800 / line-height 1.12 / letter-spacing -0.03em. H4 18px / weight 700 / letter-spacing -0.02em. Body-L 19px / weight 400 / line-height 1.6. Body 16px / weight 400 / line-height 1.6. Eyebrow/label: JetBrains Mono 12px / weight 700 / letter-spacing 0.06em / text-transform UPPERCASE / color #4F46E5. Caption 13px / weight 400 / line-height 1.5. All metric numerals (KPI cards, stats section): Inter 28–52px / weight 800 / font-variant-numeric tabular-nums / letter-spacing -0.03em. 3. PAGE SECTIONS — Build in this exact sequence: sticky nav → hero (eyebrow + 68px H1 with indigo <em> word + 19px description + dual CTA row + trust note + large dashboard mockup) → logo cloud ("Trusted by data teams at" + 6 grayscale brand names) → feature grid (eyebrow "Why Metrics" + H2 + subline + 6 cards in a 3-col grid, each with colored icon background, H4 title, 2-line body) → product showcase (2 alternating left/right rows, each with eyebrow + H3 + paragraph + 3 bullet points + a visual panel showing a mini chart or connection list) → integrations section (eyebrow + H2 + 12-cell grid with emoji icon + mono name label, 6 columns) → stats band (dark #0E1116 background, 4 stats in a row: "8,400+" / "1.2s" / "40+" / "99.99%") → pricing (3 cards: Free $0, Pro $99/mo featured, Enterprise custom — featured card has indigo 1.5px border + box-shadow 0 0 0 4px rgba(79,70,229,0.06)) → final CTA (dark rounded box on white section, indigo radial glow inside) → footer. Never ship just hero + one feature section + pricing — the full section sequence is mandatory. 4. SIGNATURE ELEMENT — The hero dashboard mockup is the single most visually distinctive element. It is a white card (background #FFFFFF) with border 1px solid #E8EAF0, border-radius 16px, box-shadow 0 30px 80px rgba(14,17,22,0.08), overflow hidden. Inside: a mac-style titlebar with three colored dots (#FF5F57, #FFBD2E, #28C840), a JetBrains Mono URL label in #5B6472 at 12px, and a green "● Live" pill (background rgba(16,185,129,0.10), color #10B981, border-radius 999px, font-family JetBrains Mono, font-size 11px, padding 3px 10px). Below that: a 4-column KPI row (each KPI card: background #FAFAFB, border 1px #E8EAF0, border-radius 12px, padding 18px) containing a colored 8×8px square label, a 28px tabular numeral, a delta pill (JetBrains Mono 11px, color #10B981 for up / #EC4899 for down, prefixed ▲ or ▼), and a 7-bar sparkline at 24px height. Below the KPIs: a full-width grouped bar chart (indigo + cyan + emerald series) with a legend. This element defines the aesthetic because it proves the product instead of describing it. 5. COMPONENT SPECS — Primary button: background #4F46E5, color #FFFFFF, padding 9px top/bottom × 18px left/right (nav size) or 13px × 26px (hero CTA size), border-radius 8px, font-weight 600, font-size 14–15px; hover: filter brightness(1.08) + transform translateY(-1px), transition 0.15s. Secondary button: background #FFFFFF, border 1px solid #E8EAF0, color #0E1116, padding 13px × 24px, border-radius 8px, font-weight 600, font-size 15px; hover: border-color #5B6472, transition 0.2s. Ghost nav button: background none, border none, color #5B6472, font-size 14px, font-weight 500; hover: color #0E1116. Feature cards: background #FFFFFF, border 1px solid #E8EAF0, border-radius 14px, padding 28px; hover: box-shadow 0 12px 40px rgba(14,17,22,0.06) + transform translateY(-3px), transition 0.2s. Integration cells: aspect-ratio 1, border-radius 14px, hover border-color #4F46E5 + translateY(-3px). Nav: height 60px, background rgba(250,250,251,0.88), backdrop-filter blur(14px), border-bottom 1px solid #E8EAF0, sticky top 0, z-index 100. 6. COPY VOICE — Four exact example lines from this template: headline "See everything, at a glance" (68px with "at a glance" in indigo); hero subline "Metrics turns your product data into live dashboards your whole team can read. Connect a source, ask a question in plain English, get the answer in seconds. No SQL, no data team."; showcase H3 "Your team stops asking the data team for SQL"; CTA headline "Your first dashboard, five minutes from now." Five banned phrases for analytics SaaS: "Powerful analytics", "Data-driven decisions", "Unlock insights", "Single source of truth", "Actionable insights". Audience: data teams, growth and ops leads, product managers, and founders at B2B SaaS companies. Core pain point: they have data buried in warehouses and can't get answers without waiting for an engineer to write a SQL query. 7. BACKGROUND ZONES — Four distinct background levels. Zone 1: #FAFAFB — the default page canvas used by hero, logo cloud, feature grid, integrations, CTA outer section, and footer. Zone 2: #FFFFFF — cards, nav bar, product showcase section (full section background), pricing section background. Zone 3: #0E1116 (slate-ink dark) — stats band section and the CTA rounded box (max-width 760px, border-radius 24px, padding 72px 48px). Zone 4: #EEF0FE (indigo-soft) — KPI card backgrounds inside the dashboard mockup, indigo icon backgrounds in feature cards. The hero glow is a non-section radial gradient: background radial-gradient(ellipse, rgba(79,70,229,0.08), transparent 70%), positioned absolute at top -20%, left 50%, width 800px, height 500px, pointer-events none. The CTA dark box carries its own inner glow: radial-gradient(ellipse, rgba(79,70,229,0.40), transparent 70%), absolute top -40%, width 500px, height 300px. No repeating textures or patterns. 8. SCROLL ANIMATIONS — All elements that should animate carry class "reveal"; on intersection (threshold 0.12) the class "in-view" is added via IntersectionObserver, which is never disconnected. Default state: opacity 0, transform translateY(22px), transition opacity 0.55s cubic-bezier(0.16,1,0.3,1), transform 0.55s cubic-bezier(0.16,1,0.3,1). In-view state: opacity 1, transform none. Stagger delays via data-delay attribute: data-delay="1" → transition-delay 0.1s, data-delay="2" → 0.2s, data-delay="3" → 0.3s. Elements that animate: eyebrow labels, H1, hero description, CTA row, hero note, dashboard mockup, logo names (staggered), section headings, feature cards (3-card stagger per row), showcase rows, integration cells, stat numbers, pricing cards, and CTA box. Honor prefers-reduced-motion: @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } 9. RESPONSIVE — Three breakpoints: desktop ≥1024px, tablet 768–1023px, mobile ≤767px. Feature grid: 3-col desktop → 2-col tablet → 1-col mobile. Dashboard KPI row: 4-col desktop → 2-col tablet → 1-col mobile; chart span adjusts to match. Integrations grid: 6-col → 3-col → 1-col. Stats grid: 4-col → 2-col → 1-col. Pricing grid: 3-col → 1-col → 1-col. Product showcase rows: 2-col side-by-side desktop → single column stacked tablet and mobile (reverse order removed on mobile). Footer grid: 2fr 1fr 1fr 1fr desktop → 1fr 1fr tablet → 1fr mobile. H1: 68px desktop → 48px tablet → 38px mobile. Section H2: 48px → 34px → 32px. CTA box H2: 48px → 32px. Nav links (.nl): visible desktop, display:none mobile. Container .wrap padding: 0 80px desktop, shrinks to 0 24px on mobile. Buttons in hero CTA stack to full-width on mobile via flex-wrap:wrap. 10. CRITICAL CSS — Always include these exact overrides as the very last <style> block before </head>: <style>body { flex-direction: column !important; align-items: stretch !important; }</style> — these are required because Framer Embed wraps the iframe document body in display:flex which otherwise stacks all top-level elements (nav, main, footer) horizontally. The primary stylesheet also sets the .wrap utility: width 100%, margin 0 auto, padding 0 80px — this must appear in the main stylesheet, not the override block. Both style blocks must be present and in this order: main styles first, override block second, immediately before </head>. 11. SEMANTIC HTML — Document structure: <header> contains the sticky <nav> with logo, link list <ul class="nl">, and CTA buttons. <main> contains one <section> per content block with descriptive id attributes: id="hero", id="logos", id="features", id="showcase", id="integrations", id="stats", id="pricing", id="cta". <footer> is outside <main>. Exactly one <h1> in the hero section. Subheadings step down: feature grid and showcase H2 → showcase rows H3 → card titles use H3 (18px styled) or strong. SEO: <title> exactly "Metrics — See Everything at a Glance" (38 chars). <meta name="description"> exactly "Metrics turns your product data into live dashboards your whole team can read. Connect a source, get answers in seconds. No SQL, no data team required." (154 chars). og:image should reference a dashboard screenshot at 1200×630px. Every chart and KPI card image/mockup gets descriptive alt text such as alt="Bar chart showing weekly active users by plan: Pro growing from 30% to 68% over 8 weeks". 12. FOOTER STRUCTURE — Four columns in a CSS grid with template "2fr 1fr 1fr 1fr", gap 40px. Column 1 (brand, 2fr): logo mark + "Metrics" wordmark at 18px weight 800, followed by a 14px muted description paragraph (max-width 280px, line-height 1.65). Columns 2–4 (each 1fr): uppercase JetBrains Mono 12px weight 700 letter-spacing 0.04em column header, followed by an unstyled <ul> with 14px links in #5B6472, margin-bottom 10px per item, hover color #0E1116 at 0.2s. Column 2 "Product": Features, Integrations, Pricing, Changelog. Column 3 "Developers": Docs, API, SDKs, Status. Column 4 "Company": About, Blog, Careers, Security. Footer bottom bar: border-top 1px solid #E8EAF0, padding-top 24px, display flex, justify-content space-between. Left: "© 2025 Metrics Inc. · SOC 2 Type II certified" in 12px #5B6472. Right: "Privacy · Terms · Security" same style. No social icons. No newsletter input. 13. UNIQUE INTERACTIVE — The integration cells have a hover interaction: on mouseenter, border-color transitions from #E8EAF0 to #4F46E5 and the cell lifts transform translateY(-3px), both at transition 0.2s ease. Feature cards have the same lift pattern (translateY(-3px) + box-shadow deepens to 0 12px 40px rgba(14,17,22,0.06)) at 0.2s ease. The primary button uses filter brightness(1.08) + translateY(-1px) on hover at 0.15s, and the white CTA button uses translateY(-2px) at 0.1s. There is no accordion, tabs, or modal in this template — the FAQ section from the design system spec is omitted in the HTML reference, so do not add one. The IntersectionObserver scroll reveal is the main "interaction": once an element's bounding box crosses the 12% threshold, class "in-view" is appended and the observer stops watching that element (o.unobserve(e.target)) so the animation only fires once. ARIA: all <button> elements must have descriptive text content (not icon-only), interactive cards should have role="article", and chart panels need aria-label describing the data shown. Focus rings must remain visible — do not set outline: none without a replacement. — Prompt set generated with Claude Sonnet 4.6 —