The ProdX palette is intentionally restrained. Orange is used exclusively for interactive elements, accents, and data highlights. Never as a large background fill.
Token names: --orange, --black, --charcoal, --gray, --white. All defined in :root. Orange passes AA Large on dark backgrounds only.
ProdX Orange
#FF3900
RGB(255, 57, 0)
CTAs, accents, interactive highlights. Never as background fill.
Deep Black
#0A0A0A
RGB(10, 10, 10)
Headlines, primary text, dark section backgrounds.
Charcoal
#1A1A1A
RGB(26, 26, 26)
Secondary backgrounds, card surfaces, footer.
Light Gray
#E5E5E5
RGB(229, 229, 229)
Borders, dividers, subtle backgrounds.
White
#FFFFFF
RGB(255, 255, 255)
Primary page backgrounds.
Contrast Ratios
Aa
Black on White 19.3 : 1AAA ✓
Aa
White on Charcoal 16.4 : 1AAA ✓
Aa
White on Orange 3.2 : 1AA Large ⚠
Aa
Light Gray on White 1.3 : 1FAILS ✗
02 / Typography
Type Scale
Inter is the sole typeface. Hierarchy is achieved through weight and size, never italic. Fira Code is used for code samples and developer-facing content.
Font loading: Google Fonts, display=swap. Fallback stack: Inter, system-ui, -apple-system, sans-serif. Fira Code for <code> elements only.
The data infrastructure everything runs on.
H1 Inter Black 900 56px / LH 1.1 Letter-spacing: -1px
Product Data Infrastructure
H2 Inter Bold 700 40px / LH 1.2 Letter-spacing: -0.5px
Search That Actually Works
H3 Inter SemiBold 600 26px / LH 1.3
Battle-Tested Reliability
H4 Inter SemiBold 600 20px / LH 1.4
ProdX provides the unified data layer that connects every tool in your product stack. From search to recommendations to analytics, one API handles it all, so your team can ship faster.
Body Inter Regular 400 17px / LH 1.6 Max-width: 680px
Last updated February 2026, Version 2.4.1
Small / Caption Inter Regular 400 14px / LH 1.5
Book a Demo
CTA Label Inter SemiBold 600 17px / LH 1.0 All caps: No
When product data lives in 6 different systems, every feature takes 3x longer to ship. Your team spends more time wrangling data than building product.
99.99%
Guaranteed Uptime SLA
How TechCorp Cut Data Latency by 80%
TechCorp migrated their entire product catalog to ProdX in under two weeks, and immediately saw search response times drop from 400ms to under 50ms.
On screens below 640px, navigation links collapse into a hamburger menu (three horizontal lines). The "Book a Demo" CTA remains visible. Tapping the hamburger reveals a full-screen overlay with vertically stacked links and a close icon.
08 / Footer
Footer
The global footer anchors every page. Four-column layout on desktop, stacking to single column on mobile.
Background: #0A0A0A. Padding: 48px 40px. Link color: #888, hover: #fff. Bottom bar: 1px #222 top border.
09 / Forms
Form Elements
Form inputs follow a consistent pattern: 2px border, 6px radius, 12-16px padding. Focus state uses orange border with a subtle glow.
The ProdX logo is a 3x3 grid with the bottom-right square at reduced opacity, representing modularity and growth potential. Icons use a consistent 24px / stroke-width 2 style.
Logo: SVG only, never rasterized. Minimum size: 24px. Clear space: 1x grid-unit on all sides. Icons: 24px viewBox, stroke-width 2, stroke-linecap round, no fill.
Logo Sizes
24px
40px
60px
120px
Icon Set -- Light Background
Search
Grid
Refresh
Layers
Check
Arrow Right
Menu
Close
Icon Set -- Dark Background
Search
Grid
Refresh
Layers
Check
Arrow Right
Menu
Close
11 / Layout Patterns
Section Patterns
Four reusable layout patterns cover the majority of page sections. All patterns use the 1280px max-width container with responsive breakpoint adaptations.
All patterns: max-width 1280px, margin 0 auto, padding 80px 32px. Patterns collapse to single-column on mobile (<640px). Gap values must be multiples of 8px.