F
Fidelitas Creative

ProdX -- Website Design System

Homepage Wireframe -- High-Fidelity Mockup

Prepared by Fidelitas
For Client Review & Development
Date February 2026
Version v1.0
S1 Global Navigation (Sticky)
height:72px
z-index:100
position:sticky, top: 0
bg:rgba(255,255,255,0.95) + backdrop-filter:blur(20px)
Dev Note:Collapses to hamburger menu at 768px. Logo grid icon is inline SVG. "Book a Demo" CTA always visible. Sticky behavior below page hub in wireframe context; in production it sits at top:0.
Platform APIs How It Works About Resources Book a Demo
S2 Hero Section
padding:120px top / 100px bottom
text max-width:720px centered
container:1280px
H1:Inter Black, 56-64px, line-height 1.08
bg:#FFFFFF + radial gradient accent
Dev Note:H1 is the positioning line from brand guidelines. Subheadline and body text are key messaging hierarchy. Diagram uses CSS layers with orange gradient on the infrastructure base. Responsive: 36px H1 at mobile, CTAs stack vertically.

The data infrastructure everything runs on.

Your product data is blocking everything on your roadmap. Search returns the wrong results. Personalization guesses instead of converting. AI initiatives stall before they ship. We fix that, at the infrastructure level, so your team builds growth features, not workarounds.

Battle-tested by top 15 grocers. Billions in transactions processed. What takes 6–9 months to build internally, we deliver in three weeks. At half the cost.

What You Build
Applications
Customer experiences, AI features, commerce tools
APIs
Production-Ready APIs
Search, Recommendations, Substitutes, Merchandising
ProdX Infrastructure
Product Data Infrastructure
Persistent. Continuous. Production-grade.
S3 ROI At a Glance: Before/After
padding:100px top / 100px bottom
grid:2-column, 40px gap, max-width 1000px centered
before card bg:#1A1A1A (Charcoal)
after card bg:#FFFFFF with border
Dev Note:This section creates a stark visual contrast between "before" (dark, painful) and "after" (light, successful). Orange accents on the "After" column reinforce brand. Stacks to single column at 768px.

From Blocked Roadmap to Strategic Advantage

Before ProdX
× 6–9 months to build
× Engineering firefighting
× Roadmap blocked
× Revenue missed
After ProdX
Three weeks to production
Engineering on growth features
AI strategy executing
5x retail media growth
S4 Proof Points & Trust Bar
padding:80px top / 80px bottom
bg:#F8F8F8
stats grid:4-column, 40px gap
stat number:Inter Black, 48-52px, #FF3900
logo row:60px below stats, grayscale placeholder boxes
Dev Note:Numbers should animate/count up on scroll via IntersectionObserver. Logo row uses gray placeholder boxes with text names for now. 2x2 grid on mobile for stats.
0
Years Battle-Tested
In production. Without interruption.
0
US Grocers
Including Meijer, Hy-Vee, Giant Eagle
0
In Transactions
Processed through our infrastructure
0
Customer Churn
100% retention across eight years
S5 Problem Section
padding:100px top / 100px bottom
bg:#1A1A1A (Charcoal)
card bg:#2A2A2A (Dark Surface)
card grid:3-column, 32px gap
card padding:40px
Dev Note:Dark section creates visual break. Card headlines are orange (#FF3900), body text is white at 80%+ opacity (adjusted for WCAG AA compliance on #2A2A2A). Cards have subtle hover lift + shadow. Single column at mobile.

Your product data is broken.
Everything downstream knows it.

Search blames data. Personalization says attributes are incomplete. AI initiatives die in spreadsheets. The root cause is always the same.

Search fails. Shoppers leave.

A customer searches for “organic whole milk” and gets cookies. That is not a search problem. It is a data problem. Every failed query erodes trust and costs revenue you will never see in a report.

Personalization guesses. Customers notice.

One shopper’s preferences span the entire store (produce, frozen, household, deli). Without whole-store product intelligence, recommendations are random. Engagement drops. Basket size shrinks. The personalization vendor gets blamed for a data problem they cannot solve.

Retail media burns budget on bad taxonomy.

Sponsored product targeting depends on accurate attributes. When taxonomy is inconsistent across your catalog, ad spend misses. Revenue that should be 5x sits at 1x. The targeting technology works. The data feeding it does not.

S6 Solution: Infrastructure Stack Diagram
padding:100px top / 100px bottom
bg:#FFFFFF
diagram max-width:900px centered
layer height:~80px content, 24px gap between
Dev Note:This is the key visual for the ProdX value prop. Three-layer stack: "What You Build" (gray), "APIs" (white bordered), "ProdX Infrastructure" (orange gradient). Orange dashed arrows connect layers. Bottom layer gets the gradient + box-shadow treatment. Tag pills inside each layer. Italic quote below reinforces positioning.

Product Data Infrastructure

The foundation everything else gets built on

Layer 3 What You Build
Customer Experiences AI Applications Commerce Features Retail Media
Layer 2 APIs
Search Recommendations Merchandising Substitutes
Layer 1 -- ProdX ProdX Infrastructure
Persistent Data Structuring Agentic AI Product Taxonomy Continuous Data Delivery
S7 Product APIs Section
padding:100px top / 100px bottom
bg:#F8F8F8
grid:2x2, 32px gap, max-width 1000px
card padding:40px
card bg:#FFFFFF, 1px border #E5E5E5
Dev Note:Cards have subtle hover effect (lift + shadow + orange border hint). Icon areas use orange-tinted background. "Learn More" links have arrow that animates on hover. Single column at mobile.

Your tools are only as good as the data feeding them.

These APIs are built on structured, production-ready product data.

Search API

Search that actually works

Your customers search for what they want and get something else. Our Search API runs on 100,000+ structured attributes per product. It understands that “organic whole milk” is not “organic cookies.” Searches convert because the data behind them is complete.

Learn More

Recommendations API

Personalization that converts

Generic recommendation engines guess. Ours works. The difference is data depth: whole-store product intelligence across every department, not just the categories with clean data. Recommendations are accurate because the attributes are accurate.

Learn More

Substitutes API

Substitutions that make sense

A shopper’s item is out of stock. Your system suggests something irrelevant. Trust drops. Our Substitutes API matches on deep product attributes, not just category proximity, so the replacement a customer sees is one they would actually choose.

Learn More

Merchandising API

Merchandising powered by real data

Category management, retail media targeting, promotional optimization: all of it depends on structured product taxonomy. When the taxonomy is right, retail media drives 5x revenue growth. When it is wrong, you are optimizing noise.

Learn More
S8 How It Works (Brief)
padding:100px top / 100px bottom
bg:#FFFFFF
steps grid:3-column, 40px gap, max-width 1000px
number circles:64px, orange bg, white text, Inter Black 24px
Dev Note:Orange numbered circles connected by a dashed orange line (CSS pseudo-element). Line hidden on mobile; steps stack vertically with more vertical spacing. Circles get subtle box-shadow glow.

Three weeks from integration to production.

1

Connect Your Systems

We integrate with your existing PIM, eComm platform, and data sources. No rip-and-replace required.

2

We Structure Everything

Our infrastructure continuously structures your product data. 350,000+ unique products. 10,000 categories. 1,200+ attributes. The taxonomy your team would spend months building, we maintain in production, every day, without interruption.

3

Everything you have already invested in works.

Clean, structured data flows to every system in your stack. Search returns relevant results. Personalization converts. Retail media targets accurately. AI initiatives ship. Your existing tools perform the way they were supposed to, because the data feeding them is finally right.

S9 Final CTA Block
padding:100px top / 100px bottom
bg:#F8F8F8
text max-width:640px centered
button:btn--primary btn--lg (18px, 18x36 padding)
Dev Note:Simple, high-impact conversion block. Large orange CTA button with hover glow. Reassurance text below button in muted gray to reduce friction. Centered layout.

Stop building workarounds.
Start building what you promised the board.

What takes six to nine months to build internally, we deliver in three weeks. At half the cost.

Book a Demo

See ProdX in action. No commitment required.