Nebula

1. COLORS — Use these exact color tokens throughout every element: --bg: #07070B (page background, near-black), --surface: #101018 (cards, panels, showcase and pricing section backgrounds), --glass: rgba(255,255,255,0.04) (frosted glass fills), --text: #EDEDF2 (primary body and heading text), --text-muted: #9A9AB0 (secondary copy, labels, captions), --primary: #6366F1 (brand indigo, active states, open accordion markers), --accent: #22D3EE (cyan signal, checkmark icons, bullet arrows), --gradient: linear-gradient(135deg,#6366F1 0%,#22D3EE 100%) (primary button fill, logo text, metric numbers, hero glow, eyebrow dot), --border: rgba(255,255,255,0.08) (all hairline dividers and card borders). The overall palette mood is: deep-space signal — a void that hums with electric intelligence. 2. TYPOGRAPHY — Load from Google Fonts: "Space Grotesk" (weights 400, 500, 600, 700) for all headings; "Inter" (weights 400, 500) for all body text; "JetBrains Mono" (weights 400, 500) for eyebrow labels, fine print, and code. Type scale: H1 80px / weight 600 / line-height 1.03 / letter-spacing -0.03em; H2 52px / weight 600 / line-height 1.1 / letter-spacing -0.02em; H3 40px / weight 600 / line-height 1.15 / letter-spacing -0.02em; H4 22px / weight 500 / line-height 1.3 / letter-spacing -0.01em; Body-L 19px / weight 400 / line-height 1.6 / letter-spacing 0; Body 16px / weight 400 / line-height 1.6 / letter-spacing 0; Eyebrow 13px / weight 500 / line-height 1.4 / letter-spacing 0.08em — JetBrains Mono, all-caps, preceded by a 6px circular dot with the gradient fill; Caption 12px / weight 400 / line-height 1.5 / letter-spacing 0.06em — JetBrains Mono. Hero H1 contains one word or phrase wrapped in <em> with font-style:normal and the gradient applied via -webkit-background-clip:text. Logo and footer brand name are 20px Space Grotesk weight 700 with gradient clip text. 3. PAGE SECTIONS — Render every section in this exact order: sticky nav → hero (eyebrow + H1 with gradient em + 19px subline + dual CTA + hero-note social proof) → logo cloud (6 brand names: Linear, Vercel, Stripe, Notion, Loom, Figma) → feature grid (2×3 = 6 glass cards, each with a 44px emoji icon, H3 title at 18px, 2-line body at 14px) → product showcase (2 alternating image/text rows: row 1 left-text right-panel, row 2 reversed, each with eyebrow + H3 + paragraph + 3-item bullet list using → cyan arrows) → metrics band (3 big numbers: 3.4×, 99.8%, 840ms with gradient text on gradient-tinted strip) → testimonials (3 glass quote cards using <article>, each with italic quote, opening curly-quote in --primary color, and avatar circle with gradient fill) → pricing (3-tier grid: Starter $0, Pro $49/mo featured, Enterprise Custom; each tier lists 4–5 feature bullets with ✓ in --accent) → FAQ (5 accordion rows with + / − toggle) → final CTA (glass panel centered, 24px border-radius, 80px padding, dual CTA buttons) → footer (4-column grid). Never ship just hero + one feature section + pricing — the full section sequence is mandatory. 4. SIGNATURE ELEMENT — The frosted glass card is the single most distinctive visual: background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); border-radius: 16px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 8px 32px rgba(0,0,0,0.4); position: relative; overflow: hidden. Every glass card also carries a top-edge highlight pseudo-element: .glass-card::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.14),transparent); }. On hover, feature cards transition border-color to rgba(99,102,241,0.4) over 200ms. This element defines the aesthetic because it transforms flat dark panels into physical-feeling surfaces — the translucency suggests depth without heavy shadows, making the UI feel like it floats in zero-gravity space. 5. COMPONENT SPECS — Primary button: background linear-gradient(135deg,#6366F1,#22D3EE); color: #ffffff; padding: 10px 20px (nav size) or 14px 32px (hero/CTA size); border-radius: 999px; font-weight: 500; font-size: 14px (nav) / 16px (hero); hover: opacity 0.9 + transform scale(1.02), transition 150ms ease. Secondary button: background: transparent; border: 1px solid rgba(255,255,255,0.08); color: #EDEDF2; padding: 12px 24px; border-radius: 999px; font-size: 15px; hover: background rgba(255,255,255,0.04), transition 200ms. Ghost button (Sign in): background none; border none; color: #9A9AB0; font-size: 14px; no hover border. Cards: border-radius 16px; padding 32px; border 1px solid rgba(255,255,255,0.10); no heavy shadow — use the 0 8px 32px rgba(0,0,0,0.4) elevation only. Nav: height 64px; position sticky; top 0; z-index 100; starts transparent with border-bottom 1px solid rgba(255,255,255,0.08); on scroll switches to background rgba(7,7,11,0.85) + backdrop-filter blur(16px). 6. COPY VOICE — Audience: founders, engineering leads, and technical decision-makers at high-velocity product companies whose core pain is that AI coding tools don't understand their existing codebase. Example headline: "Ship what you describe in natural language." Example subline: "Describe the feature. Nebula reads your codebase, writes the implementation, runs the tests, and opens the pull request — while you're still on the call." Example metric callout: "3.4× faster feature velocity." Example CTA headline: "Your first PR is 90 seconds away." Banned phrases for this industry: "Everything you need to ship," "Start building today," "All-in-one platform," "Supercharge your workflow," "The future of development." Every claim must be concrete — name a job-to-be-done ("add Stripe webhook handler with idempotency key"), a latency ("840ms median first token"), or a team outcome ("cut sprint planning by 30%"). Never use filler adjectives like "powerful," "robust," or "seamless." 7. BACKGROUND ZONES — Three distinct background levels create depth. Zone 1: #07070B — default page background used by hero, logo cloud, feature grid, testimonials, FAQ, and final CTA sections. Zone 2: #101018 — lifted surface used by the product showcase and pricing sections (set as section background, not a card). Zone 3: linear-gradient(135deg,rgba(99,102,241,0.12),rgba(34,211,238,0.06)) — the metrics band strip, full viewport width, with 1px solid rgba(255,255,255,0.08) borders on top and bottom edges; this is the only section where the gradient bleeds edge-to-edge. Hero has an absolutely positioned radial glow: background: radial-gradient(ellipse,rgba(99,102,241,0.18) 0%,rgba(34,211,238,0.08) 50%,transparent 70%); width 800px; height 600px; centered at 50% / -60%, pointer-events none. The final CTA section has a smaller centered radial glow: width 600px; height 400px; rgba(99,102,241,0.20). No textures or patterns — depth comes from zone levels alone. 8. SCROLL ANIMATIONS — Every section heading, subline, eyebrow, card, and bullet list item carries the class "reveal" (opacity:0; transform:translateY(24px); transition: opacity 550ms cubic-bezier(0.16,1,0.3,1), transform 550ms cubic-bezier(0.16,1,0.3,1)). When an element intersects the viewport at threshold 0.12, add class "in-view" (opacity:1; transform:none). Cards within a grid are staggered using data-delay attributes: data-delay="1" → transition-delay 100ms; data-delay="2" → 200ms; data-delay="3" → 300ms. Use IntersectionObserver — observe each .reveal element once, unobserve after triggering. Logo cloud items and testimonial cards each stagger 100ms. Button hover transitions run at 150ms. 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. Feature grid: 3-col desktop → 2-col tablet → 1-col mobile. Testimonials grid: 3-col desktop → 1-col tablet → 1-col mobile. Metrics grid: 3-col desktop → 1-col tablet. Product showcase rows: side-by-side desktop → single column tablet (direction:ltr on reversed rows). Pricing grid: 3-col desktop → 1-col tablet (max-width 400px, centered). Footer grid: 2fr 1fr 1fr 1fr desktop → 1fr 1fr tablet → 1fr mobile. H1: 80px desktop → 56px tablet → 44px mobile. Section H2 (sec-hd): 52px desktop → 36px tablet → 34px mobile. Nav links (.nl): visible desktop and tablet → display:none on mobile. Hero CTA buttons: flex-row desktop → flex-direction:column, align-items:stretch on mobile (full width). CTA box padding: 80px desktop → 48px 24px mobile. Container padding: 0 80px desktop → 0 40px tablet → 0 24px 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 include in the main stylesheet: *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: #07070B; color: #EDEDF2; font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } Every section must be display:block at 100% width with no inherited flex-child behavior. The max-width container (1200px) lives inside each section's .wrap div, never on the section itself. 11. SEMANTIC HTML — Document structure: one <header> element wrapping <nav> at the top of <body>; <main> containing exactly one <section id="[name]"> per content block (ids: hero, logos, features, showcase, metrics, testimonials, pricing, faq, cta); one <footer> at bottom. Exactly one <h1> in the hero section. Section sub-headings use h2 (section titles) → h3 (card titles) in strict order — no skipping levels. SEO: <title> = "Nebula — Turn Intent Into Shipped Product" (44 chars); <meta name="description" content="Nebula is the AI platform that converts natural-language intent into working code, APIs, and shipped product. Built for founders and product teams who move fast." (max 155 chars); <meta property="og:image"> spec: 1200×630px, gradient background #07070B with indigo→cyan gradient strip, Nebula logotype, and a UI panel mockup. Every <img> gets alt text describing the specific UI shown (e.g., alt="Nebula code panel showing a Stripe webhook handler with diff view and test results"). Testimonial cards use <article>. Pricing cards use <article>. 12. FOOTER STRUCTURE — Four-column grid: column 1 (2fr width) — brand column with Nebula logotype in gradient text at 18px weight 700, followed by a 14px muted tagline paragraph; column 2 (1fr) — "Product" heading in JetBrains Mono 12px uppercase 0.08em tracking, links: Features, Pricing, Changelog, Roadmap; column 3 (1fr) — "Developers" heading, links: Documentation, API Reference, SDKs, Status; column 4 (1fr) — "Company" heading, links: About, Blog, Careers, Security. Column headings use --text-muted color; links use --text-muted at 14px, hover transitions to --text over 200ms. Footer background: #101018; border-top: 1px solid rgba(255,255,255,0.08); padding: 80px 0 48px. Below the grid, a fine print bar with border-top 1px solid rgba(255,255,255,0.08) and padding-top 32px: left side © 2025 Nebula Technologies, Inc.; right side "Privacy · Terms · Security" — both in JetBrains Mono 12px --text-muted. No social icons. No newsletter input. 13. UNIQUE INTERACTIVE — The FAQ section uses a 5-row click-to-expand accordion. Each row is a .faq-item with border-bottom: 1px solid rgba(255,255,255,0.08). The trigger is a full-width <button class="faq-q"> containing the question text in Space Grotesk 17px weight 500 --text, with a ::after pseudo-element showing "+" (22px, --text-muted color) aligned to the right via justify-content:space-between. On click, toggle class "open" on both the button and the sibling .faq-a div. When open: button::after content switches to "−" and color changes to #6366F1; .faq-a changes from display:none to display:block — answer text is 15px Inter, color #9A9AB0, line-height 1.7, padding-bottom 24px. No CSS transition on height — the toggle is instant display:none / display:block for reliability. Multiple items can be open simultaneously (no accordion-close-others behavior). ARIA: each button needs aria-expanded="false/true" toggled on click, and aria-controls pointing to the answer div's id; each answer div needs role="region" and aria-labelledby pointing back to the button's id. — Prompt set generated with Claude Sonnet 4.6 —