{"meta":{"schema_version":3,"version":"1.3.1","generated_at":"2026-05-23T12:55:00Z","generated_from_repo_sha":"9630b6e","maintainer":"Sphere web team","notes":"v1.3.1 — adds 5 more tripwires lifted from the SAME /platforms/acumatica session that surfaced violations of v1.3.0 rules (re-audit-after-new-rule-shipped, whatwedeliver-blue-band-both-white, hero-tiles-frosted-glass, case-studies-real-hero-via-payload-api, form-id-override-needs-explicit-ask). The meta-tripwire `re-audit-after-new-rule-shipped` exists because I shipped lora-stranded-article + ScrollCases-with-icon-PNGs violations of rules I had JUST added — the manifest entry needs to enforce itself, not just exist. v1.3 added 7 execution tripwires. v1.2 added nonsense_check tripwires + full typography_best_practices. v1.1 added online sync + content-fit limits + scannability + conversion funnel. v1.0 was the initial baked snapshot."},"online":{"manifest_url":"https://www.sphereinc.com/dev/skills/sphere-design/manifest.json","changelog_url":"https://www.sphereinc.com/dev/skills/sphere-design/changelog.md","version_check_endpoint":"https://www.sphereinc.com/dev/skills/sphere-design/version.json","version_check_endpoint_schema":{"version":"1.1.0","schema_version":2,"released_at":"ISO8601","breaking_changes":"boolean"},"browse_ui":"https://www.sphereinc.com/dev/skills/sphere-design","sync_policy":"On every session start that activates this skill, fetch version.json. If remote.version > local.version, fetch full manifest.json and changelog.md, surface the diff to the user, and replace local manifest on user OK. Cache-Control: short (5min) on version.json, long (immutable per version) on /v/<version>/manifest.json.","offline_fallback":"If version_check_endpoint is unreachable (no network, dev wifi down), continue with local manifest and warn 'sphere-design: offline — using cached vX.Y.Z'."},"project":{"name":"Sphere Partners","site":"https://www.sphereinc.com","repo":"github.com/SphereSoftware/SPW","marker_file":".sphere-design.json","framework":"Next.js 16 App Router + Payload + Tailwind v4","package_manager":"pnpm","dev_port":3000},"tokens":{"colors":{"brand_blue":{"hex":"#1677ff","use":"primary brand color — CTAs, link emphasis, accent strokes, primary buttons"},"brand_blue_hover":{"hex":"#2893ff","use":"hover state for brand-blue surfaces (matches header CTA)"},"brand_blue_soft":{"hex":"#eaf2ff","use":"soft background band for tiles-on-band pattern, light-themed Differentiators sections"},"brand_cyan":{"hex":"#16e3ff","use":"secondary brand accent; Differentiators dark-tile border default"},"purple_accent":{"hex":"#7d6ff7","use":"SERVICES_NAV accent for AI/engineering tiles only"},"lavender_accent":{"hex":"#7f71fb","use":"advisory/talent service accents"},"dark":{"hex":"#1f2025","use":"headings on light bg, default dark text, dark surface band background"},"white":{"hex":"#ffffff"},"off_white":{"hex":"#f4f6fb","use":"alternate page background for sections that want subtle separation"},"slate_400":{"hex":"#94A3B8","use":"subtitle/muted text on dark surfaces"},"slate_500":{"hex":"#64748B","use":"secondary text on dark surfaces"},"blue_light_300":{"hex":"#93C5FD","use":"lighter-blue italic accent on dark surfaces only (CEO quote, hero highlight on dark video bg)"}},"forbidden_colors":[{"hex":"#3B82F6","reason":"Tailwind blue-500 — close to brand but NOT brand; substitute #1677ff"},{"hex":"#185FA5","reason":"navy-ish mockup blue — substitute brand_blue or brand_blue_hover"},{"hex":"#0A1628","reason":"navy mockup token — substitute `dark` (#1f2025) or use video-bg pattern"},{"hex":"#7ab3ff","reason":"ad-hoc lighter blue used in one session — substitute blue_light_300 (#93C5FD)"},{"hex":"#FF0000","reason":"YouTube red — never substitute brand video buttons with raw red"}],"fonts":{"sans":{"family":"DM Sans","css_var":"--font-dm-sans","weights_used":[300,400,500,700,900],"styles_used":["normal"],"source":"Google Fonts via next/font/google","source_url":"https://fonts.google.com/specimen/DM+Sans","self_host_url":"https://github.com/googlefonts/dm-fonts/tree/master/Sans/Variable/Unhinted/WOFF2","install_in_nextjs":"import { DM_Sans } from 'next/font/google'; const dmSans = DM_Sans({ subsets: ['latin'], variable: '--font-dm-sans', display: 'swap' });","install_in_html_mockup":"<link href='https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;700;900&display=swap' rel='stylesheet'>  (HTML mockups only — never in the Next.js codebase)","use":"everything except italic accents","default":true},"serif":{"family":"Lora","css_var":"--font-lora","weights_used":[400,600,700],"styles_used":["normal","italic"],"actually_used":"Lora italic at weights 600 and 700 are the only styles that appear in headings. Normal style is loaded for compatibility but unused in this design system.","source":"Google Fonts via next/font/google","source_url":"https://fonts.google.com/specimen/Lora","install_in_nextjs":"import { Lora } from 'next/font/google'; const lora = Lora({ subsets: ['latin'], weight: ['400','600','700'], style: ['normal','italic'], variable: '--font-lora', display: 'swap' });","install_in_html_mockup":"<link href='https://fonts.googleapis.com/css2?family=Lora:ital,wght@1,600;1,700&display=swap' rel='stylesheet'>  (italic only is enough)","use":"italic-only accents for highlight text in headings, CEO pull-quotes, italic emphasis"},"_mono_note":"Sphere does NOT use a mono font in any user-facing surface. If a future code-block or technical-label use appears, propose a font choice + add it here."},"forbidden_fonts":["Playfair Display","DM Serif Display","Inter","Roboto","Open Sans"],"spacing":{"container":"Tailwind .container — defined in globals.css with site-wide max-width and gutters; ALWAYS use for content width","section_py":["py-10 md:py-14","py-16 md:py-20","py-20 md:py-28","py-20 md:py-28 lg:py-32"],"section_px":["px-6 md:px-8 lg:px-12 (when not using .container)"],"rhythm_note":"Stick to the Tailwind base scale (2/4/6/8/10/12/14/16/20/24/28/32). Use arbitrary [Npx] only when matching an exact mockup measurement."},"radius":{"sm":"rounded-md","md":"rounded-lg","lg":"rounded-xl","xl":"rounded-2xl","panel":"rounded-3xl"}},"typography":{"heading_h1_hero":{"classes":"text-[40px] md:text-[56px] lg:text-[64px] font-black leading-[1.05] tracking-tight","lora_accent_pattern":"<span className='font-bold italic' style={{fontFamily:'var(--font-lora),Lora,serif',color:'#1677ff'}}>highlight</span>","scannability_note":"One H1 per page. Must communicate value prop in <12 words. Italic-Lora accent on the noun/verb that matters most."},"heading_h2_section":{"classes":"text-[28px] md:text-[40px] font-black leading-[1.15]","lora_accent_pattern":"same italic-Lora-blue rule","examples_from_site":["Six principles. *No exceptions.*","Trust built over *two decades.*","From *CTOs, CIOs & product leaders.*"],"scannability_note":"5-8 H2s per page typical. Each H2 must answer 'what's in this section?' in scannable form. Italic-Lora accent on the value-noun."},"eyebrow":{"classes":"text-xs font-extrabold uppercase tracking-widest text-blue-600","use":"small uppercase label above H2/H3"},"body":{"classes":"text-base md:text-lg leading-relaxed text-[#1f2025]/80","use":"default paragraph text","scannability_note":"Max 4 lines per paragraph. Bold the noun-phrase that matters. If you need >4 lines, split into a list."}},"typography_best_practices":{"principle":"Typography on Sphere is a quiet design system — DM Sans for content, Lora italic for one accent per heading. Hierarchy comes from weight + size, never from font swap.","weight_hierarchy":{"900_black":"H1 / H2 / H3 headings. Default heading weight on Sphere is black, not bold.","700_bold":"strong inline emphasis in body text; tile titles; nav active state; Lora 700 italic for hero accents","600_semibold":"Lora italic accents within headings (reads better than 700 at smaller sizes)","500_medium":"buttons, eyebrow labels, UI chrome, tile metadata","400_regular":"default body text","300_light":"hero subtitle only — sparingly, never below 14px"},"line_heights":{"hero_h1":"leading-[1.05] — tight for impact","section_h2":"leading-[1.15] — slightly tighter than body","subhead_h3":"leading-[1.3]","body":"leading-relaxed (≈1.625) for reading comfort","italic_accent":"leading-[1.5] for Lora pull-quotes","ui_labels":"leading-tight"},"letter_spacing":{"hero_h1":"tracking-tight (-0.025em) at 64px","section_h2":"tracking-[-0.01em]","eyebrow":"tracking-widest (0.1em / uppercase, 11–12px)","body":"tracking-normal (0)","buttons":"tracking-[0.01em]"},"max_line_width":{"hero_h1":"12–20 characters per line — never more than 2 lines","hero_subtitle":"max-w-[480px] (~60ch)","body_paragraph":"max-w-[65ch] (~640px) — never wider than 75ch","tile_title":"max 6 words / 1 line","tile_description":"max 3 lines / ~220 characters","blockquote":"max-w-3xl"},"responsive_scale":{"ratio":"perfect-fourth (≈1.333×) at each breakpoint","hero_h1":"40 → 56 → 64 (mobile / md / lg)","section_h2":"28 → 40 (mobile / md)","h3":"20 → 24","body":"16 → 18 (mobile / md+)","rules":"Body never below 16px. H1 never above 64px (96px is marketing splash only — outside this design system)."},"italic_lora_rules":["Exactly ONE Lora-italic accent per heading.","Always colored brand-blue (#1677ff) on light bg, blue_light_300 (#93C5FD) on dark bg.","Apply to the value-noun or value-verb in the heading — never to filler words ('the', 'and', 'with').","Never use italic Lora for body text — body is sans only.","Never use Lora roman (non-italic) — only the italic style.","Pull-quotes are the exception: full Lora italic body allowed, with brand-blue left border."],"anti_patterns":["Mixing 3+ font weights within a single H2","Italic for emphasis in body text — use bold instead","Underline for emphasis anywhere — reserved for links only","ALL CAPS body text — eyebrows only (~30 chars max)","Bolding a long phrase (>3 words) — pick the single load-bearing word","Multiple Lora accents in one heading","Body text below 16px on any breakpoint","Headings that describe the COMPANY ('We are…') instead of describing the READER OUTCOME"]},"icons":{"primary_source":"src/design-system/icons.ts","total_keys":288,"secondary_source":"lucide-react (0.563.0) — used in newer surfaces (e.g. software-development-reviews)","common_keys":["users","users-alt","chart","chart-growth","graph-bar","schedule","briefcase","compass","brain","rocket","shield-plus","lock","lock-alt","bolt","eye","target","cube","processor","message","building","cloud","code-branch","database","file-check-alt","head-side","layer-group-ds","lightbulb","microscope","process","refresh","server","setting"],"rule":"Always grep src/design-system/icons.ts before using a key. If the key isn't there, use lucide-react instead — but be consistent within a single section."},"components":{"_top_used":{"Reveal":{"uses":142,"role":"animation wrapper","suitable_for":"any block that benefits from fade-in-up on scroll","content_limits":{"scope":"wrapper"},"overflow_strategy":"don't wrap every paragraph — reserve for section-level reveal"},"ContactForm":{"uses":138,"role":"contact-form section","suitable_for":"default site contact band; renders with #contact-form anchor","content_limits":{"scope":"one per page"},"overflow_strategy":"use HubspotForm directly for page-specific marketing routing"},"CtaBanner":{"uses":120,"role":"mid-page CTA strip","suitable_for":"secondary CTA placement between sections","content_limits":{"scope":"max 1 mid-page"},"overflow_strategy":"if you need >1 mid-page CTA, the page is too long — split into 2 pages"},"TrustedBy":{"uses":82,"role":"client-logo marquee","suitable_for":"social proof via real client logos; appears 1× per page typically right after hero","content_limits":{"logos_min":8,"logos_max":20,"ideal":11},"overflow_strategy":"marquee scales to N logos — but >20 looks bloated; if you have more, switch to grid or categorize"},"NumbersSection":{"uses":76,"role":"canonical stats strip","suitable_for":"site-canonical stats only (21yr / 600+ / 28 / 300+)","content_limits":{"stats_min":4,"stats_max":4,"ideal":4},"overflow_strategy":"DO NOT statsOverride past 4 — use ImpactMetrics or Differentiators metric-tile pattern for 5-9 stats"},"FAQAccordion":{"uses":76,"role":"FAQ section","suitable_for":"Q&A patterns where each answer is 1-4 sentences","content_limits":{"items_min":4,"items_max":12,"ideal":8},"overflow_strategy":"if >12 FAQs, split into thematic groups OR move to a dedicated /faq page with category filter"},"GetStartedBanner":{"uses":65,"role":"end-of-page CTA strip","suitable_for":"final CTA before footer","content_limits":{"scope":"one per page, at the end"},"overflow_strategy":"always last conversion section; never duplicate"},"TestimonialsCarousel":{"uses":63,"role":"infinite-loop testimonial carousel","suitable_for":"client testimonials WITH photos; single-quote-per-slide social proof","content_limits":{"items_min":3,"items_max":9,"ideal":5,"requires":["photo per item"]},"overflow_strategy":"if >9 items, split into Featured (Differentiators with quote+author tile) + Written list (inline cards). If items have NO photo, use Differentiators or inline cards — NOT this component"},"WhatWeDeliver":{"uses":61,"role":"service-page deliverables grid","suitable_for":"list of concrete deliverables for a service engagement","content_limits":{"items_min":3,"items_max":8,"ideal":6},"overflow_strategy":"if >8 deliverables, you're probably describing multiple services — split the page"},"LatestInsights":{"uses":59,"role":"blog-teaser grid","suitable_for":"3-card grid of latest blog posts (auto-pulled or override)","content_limits":{"cards":3},"overflow_strategy":"only ever 3 cards in this block — link to /blogs for more"}},"_heroes":{"SolutionHero":{"uses":38,"role":"CANONICAL hero","suitable_for":"default hero for solutions / services / accelerators / generic landings","content_limits":{"headline_words":[4,10],"subtitle_chars":[80,200],"ctas":[1,2]},"overflow_strategy":"if you need 3+ CTAs, you don't have a clear primary — pick one. If subtitle > 200 chars, move detail below fold"},"ServiceHero":{"uses":30,"role":"alternate hero — older service-page pattern","suitable_for":"migrated WP service pages; new pages should prefer SolutionHero","content_limits":{"metrics":[0,4],"tiles":[0,3]},"overflow_strategy":"supports rich right-column (metrics OR tiles OR rightLogo OR rightImage — mutually exclusive)"},"SphereIQHero":{"uses":5,"role":"SphereIQ-specific hero","suitable_for":"ONLY SphereIQ / AI / GenAI landings","content_limits":{"tiles":[0,4]},"overflow_strategy":"don't use on non-SphereIQ pages — visually mismatches site palette"},"SphereHero":{"uses":4,"role":"homepage hero","suitable_for":"homepage only","overflow_strategy":"do not reuse elsewhere"},"IndustryHero":{"uses":3,"role":"industry/about/testimonials hero (post 2026-05-22 rebuild)","suitable_for":"industries/* AND /about-us AND /about-us/software-development-reviews","content_limits":{"headline_words":[4,10],"subtitle_chars":[80,200],"ctas":[0,1]},"props_unique":["backgroundVideoUrl","compactHeight","inlineHeading","variant: overlay|split"],"overflow_strategy":"supports ONE CTA — if you need 2, use SolutionHero"},"EventHero":{"uses":1,"role":"events-page hero","suitable_for":"events/* only","overflow_strategy":"do not reuse outside events"}},"_grids":{"Differentiators":{"uses":7,"role":"icon+title+description tile grid","suitable_for":"value props / principles / highlights / outcome tiles","content_limits":{"tiles_min":3,"tiles_max":6,"ideal":6,"grid_options":[2,3],"title_words":[2,6],"description_chars":[80,220]},"overflow_strategy":"for 7-9 items, split into 2 Differentiators blocks (3+3 or 3+6). For 10+, use WhatWeDeliver list or split across pages"},"ServicesGrid":{"uses":4,"role":"services index grid","suitable_for":"directory pages listing service offerings","content_limits":{"cards_min":6,"cards_max":12,"ideal":8},"overflow_strategy":"for >12, paginate or categorize"},"CaseStudiesGrid":{"uses":26,"role":"case studies grid","suitable_for":"filtered set of case studies (industry, service)","content_limits":{"cards_min":3,"cards_max":9,"ideal":6},"overflow_strategy":"for >9, use PortfolioBrowser with filters"},"IndustriesGrid":{"uses":5,"role":"industries index grid","content_limits":{"cards":[8,16],"ideal":12}},"TilesGrid":{"uses":2,"role":"generic content tile grid","content_limits":{"tiles":[3,9]}},"TilesCarousel":{"uses":5,"role":"horizontal-scroll tile carousel","suitable_for":"5+ items where you want browse not all-at-once","content_limits":{"tiles_min":4,"tiles_max":20,"ideal":8}}},"_process":{"ProcessSteps":{"uses":36,"role":"numbered process steps (horizontal)","suitable_for":"4-6 step engagement / workflow flows","content_limits":{"steps_min":3,"steps_max":6,"ideal":4},"overflow_strategy":"for 7+ steps, use StepsTimeline (vertical) — horizontal breaks visually past 6"},"StepsTimeline":{"role":"vertical timeline","suitable_for":"7+ step sequences, project lifecycles","content_limits":{"steps_min":5,"steps_max":12,"ideal":8}},"WorkflowStepsSection":{"uses":1,"role":"specific workflow steps for one use case","overflow_strategy":"single-page usage — prefer ProcessSteps for reuse"}},"_proof_metrics":{"ImpactMetrics":{"uses":4,"role":"outcome metric tiles (5-9 stats)","suitable_for":"5-9 outcome stats that DON'T fit NumbersSection's 4-stat layout","content_limits":{"metrics_min":4,"metrics_max":9,"ideal":6},"overflow_strategy":"for stats >9, you're showing too much — pick the 6 strongest"},"IntroMetricsSection":{"uses":2,"role":"intro stats below hero","content_limits":{"metrics":[3,4]}}},"_forms_cta":{"HubspotForm":{"uses":36,"role":"embedded HubSpot form","suitable_for":"page-specific marketing forms (different portalId/formId routing per page)","content_limits":{"scope":"one per CTA section"},"rules":["lazy-loaded by default","NEVER preload globally"]},"CtaQuote":{"uses":4,"role":"fixed CTA quote block (no props)","suitable_for":"specific marketing CTA — already content-locked"},"InlineCta":{"role":"inline link-style CTA","suitable_for":"mid-paragraph CTAs in long-form content"}},"_video":{"VideoTestimonials":{"uses":2,"role":"YouTube-facade video testimonial grid","suitable_for":"client video testimonials with captions","content_limits":{"videos_min":3,"videos_max":9,"ideal":6,"requires":["YouTube videoId per video"]},"overflow_strategy":"supports multi-row layouts (featured-with-list, split-with-list, grid) — match to count: 3 → single grid row, 6 → grid 3×2, 9+ → multi-row mix"},"VideoCta":{"role":"video CTA section","suitable_for":"one focal video with adjacent CTA"}},"_meta_blocks":{"Reveal":"wrap any content for fade-in-up. Use sparingly — don't wrap every paragraph.","TableOfContents":"auto-generated TOC for long content pages.","Breadcrumbs":"auto-rendered breadcrumb trail.","Link":"wrapper around next/link with site conventions.","SafeImage":"filters sphere.local URLs to null; use anywhere CMS data might leak dev hostnames."},"_additional":"120+ more reusables exist (TwoColumns, UseCases, WhatWeDoTabs, RoiCalculator, EuAiActRiskGauge, ManagedServicesSection, ModernizeStacks, NumberedBenefitsSplit, OutcomeGoals, PodPackages, StrategySection, TechPartners, TechStackTable, ValueProposition, WebinarLeadSection, WhatWeDeliver, WhitepaperDownloadSection, ...). Before inlining anything, grep `src/components/` for matching shapes. Long-tail content-fit docs land in v1.2."},"scannability":{"principle":"A Sphere page must be readable as a scrolled outline of headings + bolded key phrases + scannable tiles. A user who reads NOTHING but the H1, H2s, and tile titles must still understand the value prop and know how to convert.","F_pattern":"Western reading is F-shaped. First two lines of every section carry the most weight. Pictures + tile titles draw eye stops down the left edge.","reading_time":"Target: hero + first H2 readable in <8s on first scroll. Full page scannable in <60s.","page_design_rules":["Hero primary CTA + final CTA must agree (same destination — usually #contact-form). Never split user attention.","No competing CTAs within 1 viewport. Pick one primary action per scroll-screen.","Heading hierarchy must scan: 1 H1, 5-8 H2s, H3s only inside complex sections.","Every section must answer 'what does this give me?' in its H2.","If a page has no clear next step at the bottom, it's broken — add GetStartedBanner.","Tile/card grids: titles must be 2-6 words. If your tiles need 10-word titles, the tiles are wrong — use a list with sub-headings instead.","Body paragraphs: max 4 lines on desktop. If you need more, split into a list or sub-section.","Bold the noun-phrase that converts. One bold phrase per paragraph max.","Trust signals (TrustedBy, NumbersSection, Testimonials) should appear within first 2 scrolls — not buried at the bottom."]},"conversion_funnel":{"principle":"Every Sphere page follows a 7-step trajectory: Hook → Trust → Value → Proof → Process → Social → Conversion. Skip steps at your peril — readers fall out at each gap.","steps":[{"step":1,"role":"Hook","what":"value prop in <12 words + primary CTA","components":["SolutionHero","ServiceHero","IndustryHero","SphereIQHero","SphereHero"],"anti_pattern":"headline that describes WHO YOU ARE instead of WHAT THE READER GETS"},{"step":2,"role":"Trust","what":"social proof via real client logos","components":["TrustedBy"],"anti_pattern":"no logo strip, OR generic stock imagery instead of real clients"},{"step":3,"role":"Value","what":"3-6 concrete value propositions","components":["ValueProposition","Differentiators","BenefitsList","WhatWeDeliver"],"anti_pattern":"9+ value props in one grid (decision paralysis); features instead of benefits"},{"step":4,"role":"Proof","what":"real outcomes with real numbers and named clients","components":["CaseStudiesGrid","ScrollCases","ImpactMetrics","NumbersSection"],"anti_pattern":"stock-photo case studies; vanity metrics with no context; 'enterprise client' instead of named brand"},{"step":5,"role":"Process","what":"how engagement works — removes fear-of-unknown","components":["ProcessSteps","StepsTimeline"],"anti_pattern":"skipping this — readers stall when they don't know what happens after they click CTA"},{"step":6,"role":"Social","what":"named-person testimonials with role + company","components":["TestimonialsCarousel","VideoTestimonials"],"anti_pattern":"first-name-only quotes; no company; no role; star ratings without source"},{"step":7,"role":"Conversion","what":"single low-friction CTA matching hero CTA","components":["ContactForm","HubspotForm","GetStartedBanner"],"anti_pattern":"multiple competing CTAs; long form fields above ask; CTA href that doesn't match hero"}],"optional_steps":[{"between":[2,3],"role":"Mission","components":["Inline narrative blocks"],"when":"About / Story pages where 'why we exist' is the differentiator"},{"between":[4,5],"role":"FAQ","components":["FAQAccordion"],"when":"complex offerings, regulated industries, high-consideration purchases"},{"between":[6,7],"role":"Latest insights","components":["LatestInsights"],"when":"content-marketing-driven pages, blog-linked services"}],"rule":"Map every page through this funnel before approving the section list. If a step is missing, ask: is it actually optional for this page, or did we forget it? Missing Trust step = bounce. Missing Process step = drop-off. Missing Social step = no conversion confidence."},"recipes":{"service_landing":{"use_for":"any /services/<slug> page","funnel_mapping":[1,2,3,3,5,4,6,7,7],"section_order":["SolutionHero (or ServiceHero for migrated WP pages)","TrustedBy","ValueProposition or Differentiators (3-6 tiles)","ServicesGrid or WhatWeDeliver","ProcessSteps","CaseStudiesGrid (filter by service)","TestimonialsCarousel","FAQAccordion","ContactForm","GetStartedBanner"]},"about":{"use_for":"/about-us and variants","funnel_mapping":[1,2,3,3,3,4,3,5,6,7,7],"section_order":["IndustryHero (theme=dark, compactHeight, backgroundVideoUrl=sphere-events.mp4) OR SolutionHero","TrustedBy","Mission narrative (inline 2-col: 'Our Mission' eyebrow + H2 with Lora accent + body paragraphs)","Differentiators (3 mission-pillar tiles, soft-blue band)","Differentiators (6 trust-highlight tiles, white band)","NumbersSection variant='sphere'","Differentiators (6 principles, COMPANY_VALUES, soft-blue band)","ProcessSteps (engagement model)","CEO quote band (inline blockquote on #1f2025, Lora italic)","ContactForm","GetStartedBanner"],"anchor":"#contact-form must exist; both ContactForm and GetStartedBanner CTAs target it.","scannability_audit":"v1.0 currently has 3 stacked Differentiators blocks (mission pillars + highlights + principles) — visually monotonous. v1.2 candidate: collapse highlights+principles into single 6-tile block, lift mission pillars into ValueProposition variant."},"testimonials":{"use_for":"/about-us/software-development-reviews","funnel_mapping":[1,2,6,6,6,7],"section_order":["IndustryHero (theme=dark, compactHeight, inlineHeading, video bg) OR SolutionHero","TrustedBy (heading='Clients include')","Differentiators (4 featured outcomes, 2-col, soft-blue band) — quote-as-description with bold attribution","VideoTestimonials (single grid row, 6 videos)","Written reviews section (inline cards: Lora italic body, brand-blue accent border, eaf2ff/50 surface)","Page-specific HubSpot CTA section with id='contact-form' (NOT global ContactForm — preserves marketing routing)"],"json_ld":"AggregateRating + Review schema generated from the WRITTEN_REVIEWS array. Required for SERP rich-result eligibility.","scannability_audit":"Featured outcomes Differentiators currently uses long quote-as-description — tile titles are scannable but description text overflows the visual-density target. Candidate: shorter outcome summaries in tiles, full quotes only in the inline list below."},"industry_page":{"use_for":"/industries/<slug>","funnel_mapping":[1,2,3,4,5,6,3,7,7],"section_order":["IndustryHero (overlay or split variant, optional backgroundVideoUrl)","TrustedBy theme='light'","WhatWeDeliver or Differentiators","CaseStudiesGrid (filter by industry)","ProcessSteps","TestimonialsCarousel","FAQAccordion","ContactForm","GetStartedBanner"]},"solution_landing":{"use_for":"/solution/<slug> + /accelerators/<slug>","funnel_mapping":[1,2,3,3,4,5,4,6,3,7,7],"section_order":["SolutionHero","TrustedBy","ValueProposition","Differentiators or BenefitsList","UseCases or ScrollCases","ProcessSteps","CaseStudiesGrid","TestimonialsCarousel","FAQAccordion","ContactForm","GetStartedBanner"]},"blog_post":{"use_for":"/blogs/<slug>","funnel_mapping":[1,3,6,7],"section_order":["Article hero (slug-aware H1 + meta)","TableOfContents","Article body (RichText)","Author byline","RelatedCaseStudies or BlogPostsGrid (3 related)","GetStartedBanner"]}},"reality_check":{"principle":"Every section choice is reality-checked against (a) content fit, (b) scannability, (c) funnel role. If the content exceeds the component's design intent, the answer is a DIFFERENT component, not stretching the current one.","checks":[{"name":"content-fit","rule":"for each section, count the items/words/chars in your content; cross-check against the component's content_limits; if you're over the ideal, list 2 alternative components that fit better and recommend the best."},{"name":"scannability","rule":"after composing the page, list the H1 + all H2s + all tile titles. If that outline reads as gibberish or a non-sequitur, the page fails — redesign before shipping."},{"name":"funnel-completeness","rule":"map every section to a funnel step (1-7). Steps missing from your page are bounce risks — confirm with user before omitting."},{"name":"duplicate-purpose","rule":"if two consecutive sections serve the same funnel step (e.g. two 'value' grids back-to-back), one is redundant — collapse."},{"name":"CTA-coherence","rule":"hero CTA destination MUST match final CTA destination. Mid-page CTAs (CtaBanner) MUST match too. Inconsistent CTAs split user intent."}]},"nonsense_check":{"principle":"Most copy that reads 'fine' on first pass is in fact nonsense — buzzword chains, unsourced numbers, broken promises, vague verbs. The nonsense-check pass scans for grammatically-fine-but-meaningless output BEFORE it ships. Run after content provenance, before final preflight.","execution":"Walk the page's section text (titles + descriptions + body). For each tripwire, fire warnings; surface to user; only ship when each is resolved (fixed OR explicitly waived with reason).","tripwires":[{"id":"meaningless-filler","rule":"no buzzword chains without concrete subject — 'synergize cross-functional solutions', 'leverage best-in-class capabilities', 'unlock value', 'drive innovation'. Every clause must have a real noun + a real verb.","fix":"ask user to name the actual thing being claimed; replace with concrete example"},{"id":"unsourced-stat","rule":"every number ($, %, ★, years, headcount, ratio) must trace to canonical_facts, a mockup citation, or a named primary URL. No source = remove the number or convert to qualitative claim.","fix":"find source or remove"},{"id":"canonical-drift","rule":"if a stat appears in canonical_facts.SPHERE_NUMBERS_STATS, use the canonical value verbatim. Mockup numbers that diverge are surfaced for explicit user OK before publishing.","fix":"default to canonical; require explicit OK to override"},{"id":"title-content-mismatch","rule":"a tile title must accurately summarize its description. Title '79% cost reduction' demands that number with context in the description.","fix":"rewrite title OR rewrite description until they agree"},{"id":"broken-promise","rule":"if hero promises X ('guarantee in 2 weeks', 'days to production', 'measurable ROI'), the page body must demonstrate X with a proof block (CaseStudiesGrid, ImpactMetrics, Testimonial). Promise without proof = lie.","fix":"add proof OR soften promise to factual claim"},{"id":"audience-mismatch","rule":"TOFU pages avoid jargon (PDE™, MLOps, RAG, MCP, vector store). MOFU/BOFU pages can use it. Eyebrow text signals the audience — match jargon density to the eyebrow.","fix":"translate jargon to plain language OR move deeper-funnel"},{"id":"duplicate-idea","rule":"no two sections may make the same claim in different words. 'We move fast' as mission + 'Velocity with discipline' as principle + 'Days to production' as stat = pick the single best expression.","fix":"collapse to single expression in the strongest position"},{"id":"unsupported-superlative","rule":"no 'world's best', 'industry-leading', 'unmatched', 'premium', 'cutting-edge' without a citation. Brand voice is 'measurable outcome', not 'we are great'.","fix":"replace with a concrete metric, or cut entirely"},{"id":"vague-verb","rule":"flag every use of 'help', 'enable', 'empower', 'leverage', 'utilize', 'facilitate'. Each must be replaced with a concrete verb describing the actual action ('ship', 'cut', 'rebuild', 'integrate', 'audit', 'migrate').","fix":"ask 'specifically, what do you do?' until you get a concrete verb"},{"id":"undefined-acronym","rule":"first body-text use of any acronym must spell it out in parens. AI is exempt. PDE™, MLOps, RAG, MCP, OWASP, STRIDE, ITSM, OKR — all require expansion on first use.","fix":"expand on first use"},{"id":"headline-about-us","rule":"H1 must describe what the READER gets, not what WE are. 'Engineering partners for ambitious companies' = OK ('partners for [reader]' = value to reader). 'We are a global tech firm' = NOT OK.","fix":"rewrite from reader's point of view"},{"id":"filler-sentence","rule":"any sentence that can be deleted without losing meaning IS deletable. 'In today's fast-paced world', 'It is important to note that', 'At Sphere, we believe…' — cut all of these.","fix":"delete OR absorb into the next concrete sentence"},{"id":"dead-cta","rule":"every CTA href must resolve to a real route OR a real in-page anchor. #contact-form requires a ContactForm/HubspotForm element with that id elsewhere on the page.","fix":"verify with curl OR grep before declaring done"},{"id":"trademark-misuse","rule":"PDE™ / SphereIQ — use trademark symbol on FIRST mention per page only, not every mention. Third-party brands (ChatGPT, Claude, Salesforce) — never invent symbols; use the brand's own convention.","fix":"first-only ™; never invent"},{"id":"hero-must-show-clients","rule":"The hero strategy is to surface a hero message AND client logos in the same first viewport. Default pattern: SolutionHero with `compact: true` + `tiles` (3-4 credibility chips) immediately followed by <TrustedBy/> so the logo strip joins the hero visually. A tall full-bleed SolutionHero with a stock background and no logos visible above the first scroll = bounce risk. Exception: a specific service with strong stats may use SolutionHero `metrics` instead of logos, but the principle stands — first viewport must communicate WHO else trusted us.","fix":"add `compact` + `tiles` to SolutionHero AND mount <TrustedBy/> directly below with no large `py-` band between; OR use SolutionHero `metrics` for stat-led heroes"},{"id":"contrast-check","rule":"Before declaring done, audit every (text color × surface color) pair against WCAG AA (4.5:1 body, 3:1 large text). Hot zones: `ValueProposition` default `text-white` headingPrefix is INVISIBLE on light backgrounds — only valid on the component's default dark/cyan bg. `WhatWeDeliver` defaults to `bg-blue-600` — never pass `textColor: '#1f2025'` (dark) without ALSO overriding `backgroundColor`. After any `backgroundColor` override on a reusable component, re-check the heading + body + tile text contrast in the rendered DOM.","fix":"swap to a component whose default text color suits the new bg, OR pass an explicit text-color override (where supported), OR revert to the component's default bg"},{"id":"no-png-icons-as-background","rule":"`WhatWeDeliver` with the `image` field renders the image as a FULL-BLEED tile background with a darkening gradient overlay — designed for photographic case-card imagery. NEVER feed it icon PNGs: a small product/industry icon at tile-fill scale looks horrible, the gradient eats the icon, and the pattern reads as low-quality WP migration. For icon tiles use `Differentiators` with `icon` as a design-system key (`factory`, `truck`, `cube`, `briefcase`, `building`, etc.) or a small SVG path — Differentiators renders the icon as a 44px foreground glyph.","fix":"swap `WhatWeDeliver` → `Differentiators`; map each image PNG to the closest design-system icon key or a hosted small SVG"},{"id":"dark-text-on-blue-default","rule":"`WhatWeDeliver` defaults to `bg-blue-600`. Passing `textColor: '#1f2025'` (dark) without overriding `backgroundColor` produces black-on-blue heading — unreadable. Correct pattern on default blue: no `textColor`, white heading via `headingStart` + `headingHighlight` (Lora italic, default white tone). The double-font white heading reads cleanly on the brand-blue surface.","fix":"remove `textColor` override on default WhatWeDeliver; use `headingStart` + `headingHighlight` so the heading renders as the canonical double-font white"},{"id":"case-studies-default-scrollcases","rule":"`ScrollCases` (introduced May 2026) is the canonical case-studies component for new pages — categories filter, large per-story imagery, draggable horizontal scroll. `CaseStudiesGrid` is the legacy migrated-WP block (text-only tag chips, no imagery). Default to ScrollCases. Only use CaseStudiesGrid when explicitly preserving an exact 1:1 WP port. ScrollCases requires `image` per story; pass real case-study hero images, not industry-icon PNGs.","fix":"swap `<CaseStudiesGrid>` → `<ScrollCases categories=… stories=… theme activeTitleColor>` and add `image` per story"},{"id":"lora-highlight-no-stranded-article","rule":"Lora italic highlight must be a meaningful 2+ word phrase. NEVER leave an article ('An', 'The', 'A'), preposition ('Of', 'With', 'For'), or conjunction ('And', 'But', 'Or') OUTSIDE the italic span — the stranded short word looks like a lexical orphan and screams bad design. Either include the small word IN the italic ('An alternate assessment' wholly italic) or restructure: move the small word into an eyebrow above the H2, or pick a different value-noun to italicize.","fix":"extend the italic span to include the stranded article, OR move the article into an eyebrow, OR repick the highlight phrase"},{"id":"contact-form-canonical","rule":"The reusable `<ContactForm>` component is the canonical site contact band. Pages MUST default to it. A custom inline HubSpot section (full-bleed blue band + custom heading + raw `<HubspotForm>`) is forbidden as the page's main conversion unless the user explicitly asks for a one-off layout. ContactForm supports `sectionId` (for anchor targeting), `hubspotPortalId` + `hubspotFormId` (page-specific form routing), `headingStart` + `headingHighlight` (custom copy), and `theme: 'dark' | 'light'` — so you keep the canonical design while overriding what's needed.","fix":"replace custom inline HubSpot section with `<ContactForm sectionId=… headingStart=… headingHighlight=… hubspotPortalId=… hubspotFormId=… />`"},{"id":"re-audit-after-new-rule-shipped","rule":"META-tripwire: when a NEW rule is added to this manifest mid-session, the LAST 100 lines of code or copy I just wrote must be re-audited against the new rule BEFORE declaring done. Twice in the v1.3.0 acumatica session I shipped violations of tripwires I had JUST authored — `lora-highlight-no-stranded-article` on the 'An / alternate assessment' H2, and `case-studies-default-scrollcases` on the ScrollCases call where I passed industry-icon PNGs as the per-story image. The rule existed in the manifest but I never grep'd my own page against it. Adding a tripwire and shipping a violation of it in the same session = the tripwire was theatre, not enforcement.","fix":"after every nonsense_check.tripwires append, grep the page diff for the anti-pattern; restate the rule out loud before saying 'done'; if any violation is found, fix it in the same turn"},{"id":"whatwedeliver-blue-band-both-white","rule":"Extends `dark-text-on-blue-default`. When `<WhatWeDeliver>` renders on its default `bg-blue-600` and uses the `headingStart` + `headingHighlight` split, you MUST also pass `headingHighlightColor=\"#ffffff\"`. The component's default highlight color is brand-blue (`#1677ff`) — which on a brand-blue band reads as INVISIBLE italic. Both halves of the double-font heading must be explicitly white on the blue surface. The skill of 'use white text on blue' applies to the WHOLE heading, not just headingStart.","fix":"on default-blue `<WhatWeDeliver>`, always pass `headingHighlightColor=\"#ffffff\"`"},{"id":"hero-tiles-frosted-glass","rule":"`SolutionHero` `tiles` MUST render as frosted glass over the hero image — NOT as opaque dark cards. The canonical class set is `border border-white/10 bg-white/5 backdrop-blur-3xl shadow-2xl`. Anti-patterns: `bg-black/40 backdrop-blur-md` (dark card, weak blur, no glass feel), missing border (tiles dissolve into bg), `backdrop-blur-xl` or weaker (Andrii flagged 'much stronger' twice — `3xl` = 64px is the canonical strength). The component itself enforces this since v1.3.1; pages just need to pass `tiles`.","fix":"keep the canonical SolutionHero tile classes; if a page needs custom tile styling, surface for explicit user OK first"},{"id":"case-studies-real-hero-via-payload-api","rule":"Extends `case-studies-default-scrollcases`. ScrollCases `image` per story MUST come from each case study's actual `heroImage.url` in the Payload `case_studies` collection. Fetch with `curl 'http://localhost:3001/api/case-studies?where%5Bslug%5D%5Bequals%5D=<slug>&depth=2&limit=1' | python3 -c 'import json,sys; print(json.load(sys.stdin)[\"docs\"][0][\"heroImage\"][\"url\"])'`. NEVER use industry-icon PNGs (the per-edition icons on the same page), NEVER guess the image filename from the slug, NEVER reuse a tile image. Returned URL is `/api/media/file/<name>.png` — pass that verbatim as `image`; next/image resolves it.","fix":"query Payload's case_studies API per slug, lift heroImage.url, paste into ScrollCases `image` field"},{"id":"form-id-override-needs-explicit-ask","rule":"Extends `contact-form-canonical`. Do NOT override `hubspotPortalId` / `hubspotFormId` on `<ContactForm>` unless the user EXPLICITLY asked for page-specific form routing. The component's defaults (`portal 5257433`, `form 26e96821-97e4-4e6f-a705-4b31b54abac6` — the inline-HTML generic Sphere contact form) are what most pages should use. Lifting per-page form IDs from a WP migration is the wrong default — the WP page used a per-segment HubSpot pipeline, but on the new site the canonical contact form is the right CRM destination unless marketing says otherwise.","fix":"drop `hubspotPortalId` + `hubspotFormId` props from `<ContactForm>` calls unless the user explicitly named the override"}]},"canonical_facts":{"SPHERE_NUMBERS_STATS":[{"value":"21","label":"Years of Excellence"},{"value":"600+","label":"Projects Delivered"},{"value":"28","label":"Countries","description":"Globally diverse, community-focused"},{"value":"300+","label":"Clients","description":"top 20 average 8+ years"}],"source":"src/components/NumbersSection/index.tsx — SPHERE_NUMBERS_STATS export. Single source of truth.","rule":"Mockups often propose drift numbers ('18+ years'). Default to canonical; only override with explicit user OK + a doc update.","extras_observed_in_mockups":["4.8★ avg client rating","$2B+ revenue impacted","93% on-time delivery","75 NPS (2026, 150+ surveyed)","88% employee retention","Certified Great Place to Work"],"extras_rule":"These are USED in mockups but not yet in canonical stats. Treat as 'document trust signals' rather than 'site-wide stat-strip numbers'. Fine to use inside Differentiators tiles or ImpactMetrics, NOT inside NumbersSection."},"content_rules":{"preserve_verbatim":"When a mockup provides copy, preserve byte-for-byte. Do NOT paraphrase, condense, or 'improve' unless user explicitly asks.","no_invented_quotes":"Never fabricate a testimonial, person name, role, or company. Every quote must trace to WRITTEN_TESTIMONIALS, a monday item, or a mockup file with a citation.","monday_voice":"When posting on monday: lowercase 'i', no headers, no bullets, often one sentence or just a link. Write like Andrii, not like Claude.","changelog_required":"Before any push to origin/main, append entry to src/app/(frontend)/changelog/changelog-data.ts.","no_local_urls":"Never publish sphere.local URLs to the public site. SafeImage filters them; raw <img> + dangerouslySetInnerHTML can still leak — audit.","query_param_safe":"Every (frontend) route must serve valid HTML for any query string (utm_*, fbclid, gclid, HubSpot submissionGuid). Verify with junk-param curl."},"forbidden":{"img_tag":"Never <img>. Always next/image. @next/next/no-img-element rule must not be silenced.","google_fonts_link":"Never <link rel='stylesheet' href='https://fonts.googleapis.com/...'>. Use next/font.","playfair":"Never substitute Lora with Playfair Display, DM Serif Display, or any other serif.","raw_a_internal":"Never <a href='/internal'>. Use next/link.","killall_node":"Never kill/start dev servers. The user keeps multiple servers running; scope-killing breaks parallel work.","stray_hex":"No off-palette hex colors. If a mockup gives one, propose a translation to the palette and surface to user.","off_brand_blue":"#3B82F6, #185FA5, #0A1628, #7ab3ff — all forbidden as 'brand blue'. Use #1677ff.","stretch_component_past_limits":"Never push a component past its content_limits (e.g. 6+ stats into NumbersSection, 10+ tiles into Differentiators, no-photo testimonials into TestimonialsCarousel). Pick a different component."},"preflight":{"checks":["pnpm tsc --noEmit (or equivalent typecheck)","curl -s http://localhost:3000/<route> | grep -oE '<signature copy>' — confirm rendered HTML matches claims","If src/data/* touched — explicitly warn user dev restart needed (Next 16 cache)","Shared-component edit — list other consumers","Reality-check pass: every section content_limits-OK, scannability-OK, funnel-step-mapped","Nonsense-check pass: every tripwire green (no meaningless filler, unsourced stats, broken promises, vague verbs, dead CTAs, etc.)","Typography spot-check: at most ONE Lora-italic accent per heading; body never below 16px; bolded phrase ≤ 3 words"],"rule":"tsc clean is necessary but not sufficient. Must curl-verify rendered output AND pass reality-check AND pass nonsense-check before declaring DONE."}}