Conduit

1. COLORS — Set the page background to #0D1117 (terminal-dark GitHub canvas), card and code-block surfaces to #161B22, raised panels and tab bars to #21262D, hairline borders to rgba(48,54,61,1) (#30363D). Primary text is #E6EDF3, secondary/muted text is #7D8590. The single CTA and success color is terminal green #2EA043; brighter green #39D353 is used for em highlights, stat numbers, and the blinking eyebrow dot. Inside code blocks only: keyword red #FF7B72, string blue #A5D6FF, function purple #D2A8FF, number/constant green #39D353, comment/muted #8B949E, string-literal yellow #E3B341. No gradients on backgrounds — the palette mood is "3am terminal session: calm, precise, monochrome with one pulse of green." 2. TYPOGRAPHY — Load Inter (Google Fonts, weights 400 500 600 700) for all headings and body copy; load JetBrains Mono (Google Fonts, weights 400 500) for all code blocks, terminal output, API method tags, the logo, eyebrow labels, and fine-print lines. Type scale: H1 56px / weight 700 / line-height 1.06 / letter-spacing -0.025em; H2 44px / 700 / 1.1 / -0.025em; H3 30px / 600 / 1.15 / -0.02em; H4 20px / 500 / 1.3 / -0.01em; Body-L 18px / 400 / 1.65 / 0; Body 16px / 400 / 1.6 / 0; Eyebrow/label 12px JetBrains Mono / 500 / 1.4 / 0.08em UPPERCASE; Code/mono 13px JetBrains Mono / 400 / 1.7 / 0; Caption/fine-print 11px JetBrains Mono / 400 / 1.4 / 0.06em. H1 gets one <em> word in color #39D353 (font-style: normal). The logo renders as JetBrains Mono 16px weight 500, with the "▶" symbol in #2EA043 followed by " conduit" in #E6EDF3. Eyebrow labels render inline-flex with an 8px blinking green dot (keyframe: 0%/100% opacity 1, 50% opacity 0.3, 2s ease-in-out infinite). 3. PAGE SECTIONS — Build exactly these sections in order: sticky nav → hero (copy + code panel side-by-side) → logo cloud ("Handling traffic for teams at" + 6 dev-company wordmarks) → feature rows section (eyebrow "What it does", H2, 2 alternating copy+code-panel rows: row 1 "Observability" with trace log panel + 4 tool tags, row 2 reversed "Schema validation" with JSON error panel + 3 schema tags) → stats band (4 metrics on slate surface strip: "89ms P99 proxy overhead", "12.4k GitHub stars", "99.99% Cloud uptime 12mo", "3.2B Requests proxied/month") → pricing section (centered H2, 2-column grid: Open Source $0/forever + 4 features, Cloud Managed $49/mo featured green border + 4 features) → terminal CTA section (slate bg, centered H2 "One command from production-ready APIs", copyable npx mono block, 2 CTA buttons) → footer. Never ship just hero + one feature section + pricing — the full section sequence is mandatory. 4. SIGNATURE ELEMENT — The hero code panel is the single most visually distinctive element. It is a <div> with background: #161B22, border: 1px solid rgba(48,54,61,1), border-radius: 12px, overflow: hidden. Its title bar has background: #21262D, padding: 12px 16px, border-bottom: 1px solid rgba(48,54,61,1), and displays three mac-style traffic-light dots: red #FF5F57, yellow #FFBD2E, green #28C840, each 12px × 12px border-radius 50%, followed by a centered filename "conduit.config.ts" in JetBrains Mono 12px color #7D8590. The panel body has padding: 20px, font-family JetBrains Mono, font-size 13px, line-height 1.7, with full syntax highlighting using the color tokens above. The nav also always renders as a frosted-glass bar: background rgba(13,17,23,0.88), backdrop-filter blur(12px), border-bottom 1px solid rgba(48,54,61,1), height 60px — this is what defines the aesthetic as "terminal dark but polished." 5. COMPONENT SPECS — Primary button: background #2EA043, color #0D1117 (not white), font-weight 600, font-size 13px nav / 15px hero / 14px pricing, padding 7px 14px nav / 10px 20px hero / 12px 24px CTA, border-radius 6px, border none; hover: filter brightness(1.1), transition 0.2s. Secondary/ghost button ("btn-gh"): background #21262D, color #E6EDF3, border 1px solid rgba(48,54,61,1), same radius and padding as primary sibling; hover: border-color #7D8590, transition 0.2s. Feature panels: background #161B22, border 1px solid rgba(48,54,61,1), border-radius 10px, overflow hidden; panel title bar background #21262D, padding 10px 14px, border-bottom 1px solid rgba(48,54,61,1); panel body padding 18px, font-family JetBrains Mono, font-size 12px, line-height 1.8. Pricing cards: background #161B22, border 1px solid rgba(48,54,61,1), border-radius 12px, padding 36px 32px; featured card: border-color #2EA043. Nav: height 60px, sticky top 0, z-index 100, frosted glass always (not on-scroll — it is always blurred). 6. COPY VOICE — The audience is backend and full-stack developers and DevOps teams who are tired of rebuilding observability, rate limiting, and schema validation in every project. Their core pain: "We spend six months building the operational layer instead of the product." Headline examples: "The API layer that never gets in your way" (H1 hero), "One proxy. Every edge case handled." (features H2), "Open source core. Cloud when you want it." (pricing H2), "One command from production-ready APIs" (CTA H2). Subline examples: "Conduit is a programmable HTTP proxy with observability, rate limiting, and schema validation built in. One npm install. Works with any framework. Zero lock-in." Banned generic phrases for this industry: "Build faster", "Developer-first", "Everything you need", "All-in-one solution", "Start building today". Metric copy must include real numbers: "89ms p99", "3.2B requests/month", "12.4k GitHub stars", "99.99% uptime". 7. BACKGROUND ZONES — There are 3 distinct background levels. Zone 1 (page base): #0D1117 — used for hero, logo cloud, features, pricing, and footer. Zone 2 (elevated surface): #161B22 — used for stats band (full-width, edge-to-edge with 1px top and bottom border rgba(48,54,61,1)), terminal CTA section (full-width, edge-to-edge with 1px top border), all cards, code panels, and pricing cards. Zone 3 (raised ui chrome): #21262D — used only inside components: panel title bars, tab bars, secondary buttons. No CSS gradients on any background — the only gradient-like effect is the logo cloud company names rendered at color rgba(230,237,243,0.2) (ghosted at 20% opacity). No textures or patterns. The stats section uses background: #161B22 with padding: 100px 0 and full-bleed edge to edge within the page width. The CTA section uses background: #161B22 with padding: 160px 0. 8. SCROLL ANIMATIONS — All .reveal elements start at opacity: 0 and transform: translateY(20px). On intersection (threshold 0.12), add class "in-view" which sets opacity: 1 and transform: none. Transition: opacity 0.5s cubic-bezier(0.16,1,0.3,1), transform 0.5s cubic-bezier(0.16,1,0.3,1). Stagger delays via data-delay attribute: data-delay="1" → transition-delay 0.08s, data-delay="2" → 0.16s, data-delay="3" → 0.24s. Elements that animate: eyebrow labels, h1, hero paragraph, hero CTA buttons, install box, hero code panel, logo-cloud company names (staggered), section headings, feature rows, each stat number independently, each pricing card, CTA block elements. Use IntersectionObserver; once an element enters view, unobserve it (one-shot). Honor prefers-reduced-motion: @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } 9. RESPONSIVE — Breakpoints: desktop ≥1024px, tablet 768–1023px, mobile ≤767px. Hero: desktop = 2-column grid (1fr 1fr) gap 64px; tablet = 1-column, hero code panel hidden (display: none); mobile = 1-column, hero code panel hidden. H1: desktop 56px, tablet 48px, mobile 36px. H2: desktop 44px, tablet 34px, mobile 32px. Feature rows: desktop 2-column 1fr 1fr gap 64px; tablet 1-column gap 40px, reversed rows lose their reversal (order: unset); mobile same as tablet. Stats grid: desktop 4-column; tablet 2-column; mobile 1-column. Pricing grid: desktop 2-column; tablet 1-column; mobile 1-column. Footer grid: desktop 4-column (2fr 1fr 1fr 1fr) gap 40px; tablet 2-column; mobile 1-column. Nav links (.nl): hidden on mobile (display: none). Both primary and ghost buttons in the CTA section stack to full-width column on mobile with flex-wrap. Container .wrap padding: 0 80px desktop, collapse to 0 24px on mobile. 10. CRITICAL CSS — Always include these exact overrides: Add a <style> tag before </head> containing: body { flex-direction: column !important; align-items: stretch !important; } .wrap { width: 100%; margin: 0 auto; padding: 0 80px; } — 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. Additionally add to the same style tag: *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } and html { scroll-behavior: smooth; } and body { background: #0D1117; color: #E6EDF3; font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; font-size: 16px; line-height: 1.6; } The .wrap max container relies on sections setting their own max-width: 1160px margin: 0 auto inside the wrap div. 11. SEMANTIC HTML — Document structure: <header> wrapping <nav> with .ni inner div; <main> containing: <section class="hero">, <section class="logos">, <section class="feat-sec">, <section class="stats-sec">, <section class="price-sec">, <section class="cta-sec">; then <footer>. Pricing cards use <article class="p-card">. Exactly one <h1> in the hero. Heading hierarchy: h1 hero → h2 per section → h3 per feature row. All code rendered as real <pre><code> (not images) for crawlability. SEO: <title>Conduit — The API Layer That Never Gets in Your Way</title> (57 chars), <meta name="description" content="Conduit is a programmable HTTP proxy with observability, rate limiting, and schema validation built in. Ship APIs with confidence. Zero config." /> (148 chars). OG image: 1200×630 showing the code panel with syntax highlighting and green "200 OK" response. Every diagram and logo gets descriptive alt text. Accessible: copy button aria-label="Copy install command", focus rings use outline: 2px solid #2EA043, pricing feature list items use <ul> with <li>. 12. FOOTER STRUCTURE — Four columns in a grid (2fr 1fr 1fr 1fr) with 40px gap, margin-bottom 48px. Column 1 (brand, 2fr): logo mark "▶ conduit" in JetBrains Mono 16px with ▶ in #2EA043, followed by a 13px #7D8590 description paragraph "An open-source API proxy with observability, rate limiting, and schema validation built in. MIT licensed. Self-host or deploy on Conduit Cloud." Columns 2–4 (1fr each): each has an uppercase JetBrains Mono 11px letter-spacing 0.06em #7D8590 column heading, followed by a <ul> of 4 <a> links in 14px #7D8590, hover #E6EDF3. Column headings and links: "Product" → Features, Pricing, Changelog, Roadmap; "Docs" → Quickstart, API Reference, Plugins, Self-hosting; "Community" → GitHub, Discord, Blog, Status. Bottom bar: 1px solid rgba(48,54,61,1) border-top, padding-top 24px, flex justify-content space-between. Left: JetBrains Mono 11px "© 2025 Conduit Software, Inc. · MIT Licensed". Right: JetBrains Mono 11px "12,400 ⭐ on GitHub · 3.2B requests/month". No newsletter input. No social icons beyond the Community column links. 13. UNIQUE INTERACTIVE — The install command box in the hero contains a copy button ("copy" text, JetBrains Mono 12px, color #7D8590) that on click: calls navigator.clipboard.writeText('npm install conduit-proxy'), changes its own textContent to "copied!", then after 2000ms reverts to "copy". Transition on color: 0.2s. ARIA: aria-label="Copy install command" on the button. The eyebrow dot blinks via CSS animation: @keyframes blink { 0%, 100% { opacity: 1 } 50% { opacity: 0.3 } } with animation: blink 2s ease-in-out infinite — this is not interactive but must run on page load and stop under prefers-reduced-motion. The nav GitHub star count button ("⭐ 12.4k") is a ghost button using btn-gh styles — clicking it should open the GitHub repo. On the pricing section, the featured "Cloud · Managed" card has border-color #2EA043 instead of rgba(48,54,61,1); no additional glow or box-shadow. The CTA terminal command block (background #0D1117, border 1px solid rgba(48,54,61,1), border-radius 8px, padding 18px 28px, JetBrains Mono 18px, color #39D353) displays "$ npx create-conduit-app my-api" with the "$" prompt rendered in #7D8590; clicking it should also copy to clipboard with the same pattern as the install box. — Prompt set generated with Claude Sonnet 4.6 —