Sentinel

1. COLORS — Use this exact color palette, a pure-black terminal canvas with one rare matrix-green signal: --bg #05080A (page background, near-black), --surface #0A0F12 (cards, panels, feed container), --layer #111A1E (nav background on scroll, terminal bar, table header rows), --text #D6E4DE (primary body text), --muted #637A70 (secondary text, labels, nav links at rest), --green #22C55E (matrix-green: primary CTA button fill, live-status pulse dots, stat numbers, eyebrow text, severity BLOCKED badge), --mint #34D399 (feed status column, secondary green-mint highlight), --red #EF4444 (CRITICAL severity badge, terminal error lines), --amber #F59E0B (HIGH severity badge, terminal warning lines), --border rgba(34,197,94,0.15) (all hairline dividers, card borders, input borders). Global scanline overlay on body::before: repeating-linear-gradient(0deg, rgba(34,197,94,0.015) 0px, rgba(34,197,94,0.015) 1px, transparent 1px, transparent 4px), fixed, pointer-events:none, z-index:1. Palette mood: a cold server room at 3 a.m. — one green LED blinking on a wall of black. 2. TYPOGRAPHY — Load "JetBrains Mono" (weights 400, 500, 700) and "Inter" (weights 400, 500, 600, 700) from Google Fonts. JetBrains Mono is used for all headings, the logo, eyebrow labels, terminal body text, log lines, feed timestamps, footer column headers, and the bottom fine-print. Inter is used for all body paragraphs, button text, and nav links. Type scale: H1 60px / weight 700 / line-height 1.04 / letter-spacing -0.03em (JetBrains Mono); H2 44px / weight 700 / line-height 1.08 / letter-spacing -0.03em (JetBrains Mono); H3 18px / weight 700 / line-height 1.3 / letter-spacing -0.01em (JetBrains Mono, used for feature card titles); H4 — not used independently; Body-L 18px / weight 400 / line-height 1.65 / letter-spacing 0 (Inter, hero sub and CTA sub); Body 16px / weight 400 / line-height 1.6 / letter-spacing 0 (Inter); Eyebrow 12px / weight 600 / line-height 1.4 / letter-spacing 0.06em / UPPERCASE / JetBrains Mono / color #22C55E — always preceded by a pulsing green dot; Terminal/log 13px / weight 400 / line-height 1.8 / letter-spacing 0 (JetBrains Mono); Caption/stat label 13px / weight 400 / line-height 1.5 / color #637A70 (Inter). Apply a green color (#22C55E) to key words inside H1 and H2 using <em font-style:normal> — examples: "perimeter" in H1, "triaged in real time" in the feed H2, "audit" in the compliance H2, "inside your network" in the CTA H2. 3. PAGE SECTIONS — Build the page in this exact order: sticky nav → hero (two-column: copy left + terminal panel right) → live threat feed (full-width log table) → stat band (4 numbers on surface bg) → feature grid (2×3 cards) → compliance (two-column: copy + compliance badges) → testimonials (3 quote cards) → final CTA (centered dark panel) → footer. The nav must contain: logo "[sentinel]" in JetBrains Mono with the word "sentinel" in #22C55E, four links (Platform, Threat Intel, Compliance, Docs), a ghost "Sign in" button, and a green "Request demo" primary button. The hero must contain: eyebrow with pulse dot reading "LIVE · 4.2B events analyzed today", H1 "Threat detection that watches the perimeter" with "perimeter" in green, 18px sub, dual CTA ("Request a demo" primary + "View threat report →" secondary), mono note "// SOC 2 Type II · ISO 27001 · FedRAMP ready", and the terminal panel. The live threat feed must show 5 log rows with severity badges (BLOCKED, CRITICAL, HIGH, BLOCKED, HIGH), source IP, description, and response-time status column. The stat band must display exactly 4 metrics: "0.8s" median response, "4.2B" events daily, "99.7%" auto-resolved, "0" breaches. The feature grid must show 6 cards: Continuous discovery, Behavioral detection, Autonomous response, Forensic timeline, Threat intel feed, Deploys in an hour. The compliance section must show 4 badge tiles (SOC 2, ISO 27001, FedRAMP, HIPAA). Testimonials must show 3 quote cards with CISO/VP-level authors and company names. Never ship just hero + one feature section + pricing — the full section sequence is mandatory. 4. SIGNATURE ELEMENT — The hero terminal panel is the single most visually distinctive element of this template. It is a dark frame rendered with: background #080C0E, border 1px solid rgba(34,197,94,0.15), border-radius 10px, overflow hidden, box-shadow 0 24px 70px rgba(0,0,0,0.5). The terminal title bar uses background #111A1E, padding 11px 14px, border-bottom 1px solid rgba(34,197,94,0.15), and displays three macOS-style traffic-light dots (11px circles: #FF5F57, #FFBD2E, #28C840) plus the centered mono title "sentinel@perimeter ~ monitor" in #637A70 at 11px. The terminal body uses padding 18px, font JetBrains Mono 13px, line-height 1.8. Lines are color-coded: prompt $ in #22C55E, command text in #D6E4DE, dim/info in #637A70, success in #34D399, warning in #F59E0B, error in #EF4444. A blinking block cursor (8px×15px, background #22C55E, animation: blink 1s step-end infinite) sits at the last prompt line. A global body::before scanline overlay (fixed, repeating-linear-gradient of rgba(34,197,94,0.015) lines every 4px) reinforces the CRT terminal aesthetic across the entire page. This element defines the aesthetic because it transforms abstract security claims into a live, legible machine — the user viscerally feels the platform's real-time authority. 5. COMPONENT SPECS — Primary button (.btn-p): background #22C55E, color #05080A, font-size 14px (15px in hero/CTA), font-weight 700, padding 9px 18px (13px 24px in hero, 16px 32px in CTA), border-radius 6px, border none, transition box-shadow 0.2s and transform 0.1s; hover: box-shadow 0 0 20px rgba(34,197,94,0.4) and transform translateY(-1px). Secondary button (.btn-s): background #111A1E, border 1px solid rgba(34,197,94,0.15), color #D6E4DE, font-size 15px, font-weight 500, padding 13px 24px, border-radius 6px; hover: border-color #22C55E. Ghost button (.btn-ghost): background none, border none, color #637A70, font-size 14px; hover: color #D6E4DE. Feature cards (.feat-card): background #0A0F12, border 1px solid rgba(34,197,94,0.15), border-radius 10px, padding 28px, transition border-color 0.2s; hover: border-color #22C55E. Feature icon container: width 42px, height 42px, border-radius 8px, background rgba(34,197,94,0.1), border 1px solid rgba(34,197,94,0.15). Testimonial cards (.t-card): same surface/border/radius as feature cards, padding 28px; avatar initials box is 36px×36px, border-radius 8px, background rgba(34,197,94,0.12), border 1px solid rgba(34,197,94,0.15), color #22C55E, JetBrains Mono 14px 700. Nav height 62px, starts fully transparent, becomes background rgba(5,8,10,0.88) with backdrop-filter blur(14px) and border-bottom 1px solid rgba(34,197,94,0.15) on scroll. 6. COPY VOICE — The audience is security engineers, CISOs, and SRE/platform teams whose core pain point is the 280-day industry-average dwell time for undetected intrusions. The voice is calm, exact, and technical — it names real threats and gives specific numbers instead of vague promises. Four example headlines: "Threat detection that watches the perimeter" (H1), "Every event, triaged in real time" (feed section H2), "Built to pass the audit" (compliance H2), "Find out what's already inside your network" (CTA H2). Five banned generic phrases specific to this industry: "Keep your data safe", "Enterprise-grade security", "Protect your business", "Peace of mind for your team", "Security made simple". Sub-copy must reference real attack vectors (brute force, privilege escalation, data exfil, phishing, CVEs), specific response times in seconds, and concrete compliance frameworks by name (SOC 2 Type II, ISO 27001, FedRAMP, HIPAA, GDPR). The hero note must read as a mono comment: "// SOC 2 Type II · ISO 27001 · FedRAMP ready". 7. BACKGROUND ZONES — There are three distinct background levels in this template. Zone 1 (#05080A): used for the page base, the hero section, the live threat feed section, the feature grid section, the testimonials section, and the footer — the darkest layer, near-black. Zone 2 (#0A0F12): used as the card and panel surface throughout (threat feed container, feature cards, compliance badge tiles, testimonial cards, CTA section background). Zone 3 (#111A1E): used for the stat band section (full-width background on its own row), the terminal title bar, the feed table header row, the compliance section wrapper background, and nav-on-scroll. All three zones are separated by 1px hairline borders using rgba(34,197,94,0.15). The global scan-line overlay (body::before, position fixed, z-index 1) sits above all zones: repeating-linear-gradient(0deg, rgba(34,197,94,0.015) 0px, rgba(34,197,94,0.015) 1px, transparent 1px, transparent 4px) — it bleeds edge-to-edge across every section at all times. No photographic textures; the scanline pattern is the only texture. 8. SCROLL ANIMATIONS — Assign class "reveal" to every section heading, subheading, eyebrow, card, and stat block. Initial state: opacity 0, transform translateY(22px). Transition: opacity 0.5s cubic-bezier(0.16,1,0.3,1), transform 0.5s cubic-bezier(0.16,1,0.3,1). When the element intersects at 12% threshold (IntersectionObserver threshold 0.12), add class "in-view" which sets opacity 1 and transform none. Card stagger within grids uses data-delay attributes: data-delay="1" → transition-delay 0.08s, data-delay="2" → transition-delay 0.16s, data-delay="3" → transition-delay 0.24s. Eyebrows and headings get no delay (fire first); cards in the same row stagger by 80ms each. The terminal types its command lines on scroll-entry. The pulsing green dot on eyebrows uses keyframe animation: 0% box-shadow 0 0 0 0 rgba(34,197,94,0.5), 70% box-shadow 0 0 0 8px rgba(34,197,94,0), 100% box-shadow 0 0 0 0 rgba(34,197,94,0), period 2s infinite. 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 section: desktop two-column grid (1fr 1fr, gap 56px) → tablet single column (terminal panel stacks below copy) → mobile single column. Feature grid: desktop 3-column → tablet 1-column → mobile 1-column. Testimonials grid: desktop 3-column → tablet 1-column → mobile 1-column. Stat band: desktop 4-column → tablet 2-column → mobile 1-column. Compliance section: desktop two-column (1fr 1fr, gap 72px) → tablet single column → mobile single column. Footer grid: desktop 4-column (2fr 1fr 1fr 1fr) → tablet 2-column → mobile 1-column. H1 size: 60px desktop → 44px tablet → 34px mobile. H2 (section): 44px desktop → 30px tablet → 30px mobile. H2 in CTA box: 52px desktop → 34px mobile. Nav links (.nl): hidden on mobile (display:none). Feed table on tablet: drop the status column (display:none); on mobile also drop the source column. Both primary and secondary CTA buttons should stack to full-width on mobile using flex-wrap:wrap and width 100%. 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 on body: position relative, background #05080A, color #D6E4DE, font-family 'Inter' sans-serif, -webkit-font-smoothing antialiased, font-size 16px, line-height 1.6. The scanline body::before must be position:fixed (not absolute) so it persists during scroll. Set z-index:1 on body::before (scanline) and z-index:2 on .wrap so content always renders above the scanline overlay. Nav must use z-index:100. All sections must set position:relative and z-index:2 to avoid being obscured by the fixed scanline layer. 11. SEMANTIC HTML — Document structure: one <header> element wrapping the <nav>, then <main> containing one <section> per content block with descriptive id attributes (id="hero", id="threat-feed", id="stats", id="features", id="compliance", id="testimonials", id="cta"), then <footer>. Use <article> for each feature card, testimonial card, and compliance badge. Exactly one <h1> in the hero section. Section headings use <h2>; feature card titles and compliance sub-headings use <h3>. SEO: <title> must be "Sentinel — Threat Detection That Watches the Perimeter" (55 characters). <meta name="description"> must be "Sentinel is an autonomous threat detection platform that monitors your entire attack surface in real time. Catch intrusions in seconds, not days. SOC 2, ISO 27001, FedRAMP ready." (180 chars — trim to ≤155 if required). og:image should depict the terminal panel with green command output against a black background, dimensions 1200×630px. Every <img> used for dashboard screenshots must have descriptive alt text (example: alt="Sentinel dashboard showing live threat feed with severity classification and automated response times"). Severity indicators in the feed must pair a color-coded badge with a text label (BLOCKED, CRITICAL, HIGH) — never rely on color alone. 12. FOOTER STRUCTURE — The footer uses background #05080A, border-top 1px solid rgba(34,197,94,0.15), padding 64px 0 40px. Internal grid is 4 columns: column 1 (2fr) is the brand column containing the "[sentinel]" logo in JetBrains Mono 16px (with "sentinel" in #22C55E), followed by a 14px Inter paragraph in #637A70 (max-width 280px) describing the platform in one sentence. Columns 2–4 (each 1fr) are link columns with uppercase JetBrains Mono 11px letter-spacing 0.06em column headers in #637A70, followed by <ul> link lists: column 2 header "Platform" with links Detection, Response, Compliance, Threat Intel; column 3 header "Resources" with links Docs, Threat reports, Status, API; column 4 header "Company" with links About, Security, Careers, Contact. All footer links are 14px Inter color #637A70, hover color #D6E4DE, transition 0.2s. The footer bottom bar uses border-top 1px solid rgba(34,197,94,0.15), padding-top 24px, display flex, justify-content space-between. Left fine print: "© 2025 Sentinel Security Inc. · SOC 2 Type II · ISO 27001" in JetBrains Mono 11px #637A70. Right fine print: "Privacy · Terms · Trust Center" in JetBrains Mono 11px #637A70. No social icons. No newsletter input. 13. UNIQUE INTERACTIVE — The live threat feed table rows have a hover interaction: each .feed-row transitions background from transparent to rgba(34,197,94,0.03) over 0.2s ease, giving a faint green wash to the active row without disrupting the severity badge colors. No row opens an accordion or expands — the hover is purely a background tint. The severity badges (.sev) are non-interactive color+label chips: BLOCKED uses background rgba(34,197,94,0.15) color #22C55E; CRITICAL uses background rgba(239,68,68,0.15) color #EF4444; HIGH uses background rgba(245,158,11,0.15) color #F59E0B — all at font-size 10px, font-weight 700, letter-spacing 0.04em, padding 3px 8px, border-radius 4px. The blinking cursor in the terminal uses @keyframes blink { 50% { opacity: 0 } } at 1s step-end infinite and must be frozen when prefers-reduced-motion is set. The pulsing eyebrow dot uses @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.5) } 70% { box-shadow: 0 0 0 8px rgba(34,197,94,0) } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0) } } at 2s infinite — also frozen under prefers-reduced-motion. All interactive elements require visible focus rings (outline: 2px solid #22C55E, outline-offset: 2px) for keyboard accessibility. ARIA: the threat feed table should use role="table" with role="row" and role="cell" on its children, and the severity badges should include aria-label describing the severity level in words. — Prompt set generated with Claude Sonnet 4.6 —