Documentation Index
Fetch the complete documentation index at: https://fieldpulse.mintlify.app/llms.txt
Use this file to discover all available pages before exploring further.
Help Center Redesign — Specification
Status: Draft
Source mockups: design/fieldpulse-help-center (1).html, design/fieldpulse-release-notes (12).html
Target: FieldPulse Mintlify site (https://fieldpulse.mintlify.app)
Last updated: 2026-05-18
1. Design Tokens
Every color, font, spacing, radius, shadow, and breakpoint extracted from both mockups.
1.1 Colors
| Token | Value | Role | Source |
|---|
--navy | #00034D | Primary brand color, navbar, footer, headings, card headers | Both |
--cobalt | #253E9A | Secondary — depth, eyebrow text, topic labels, chip backgrounds | Both |
--sky | #6183D8 | Secondary lighter — icon bg (core section), hover accents, sidebar borders | Both |
--fog | #E2E2E2 | Neutral background, code inline bg | Both |
--aqua | #6CB4E4 | Accent — CTA button, highlight borders, icon bg (onboarding), “New” indicator | Both |
--quartz | #8B8ED6 | Accent — icon bg (features/integrations sections) | Both |
--electric | #53B7EC | Sparingly on dark backgrounds — vibrant accent | Release notes only |
--paper | #F5F5F1 | Main page background (replaces current #F7F8FC) | Both |
--rule | rgba(0, 3, 77, 0.12) | Subtle borders, dividers | Both |
--rule-strong | rgba(0, 3, 77, 0.35) | Stronger borders, hover states | Both |
--muted | rgba(0, 3, 77, 0.58) | Muted text, secondary labels | Both |
--code-bg | rgba(0, 3, 77, 0.05) | Code block backgrounds | Help center only |
1.2 Typography
| Property | Value | Source |
|---|
| Font family | Montserrat (Google Fonts) | Both |
| Body weight | 500 | Both |
| Body size | 15.5px (article), 16px (hero lede), 14px (descriptions) | Both |
| Body line-height | 1.5 (general), 1.55 (lede/descriptions), 1.65 (article body) | Both |
| Heading weights | 600 (h1), 700 (h2/h3/labels), 800 (stat numbers, release day) | Both |
| h1 size | 52px (landing hero), 48px (release hero), 40px (topic/article title) | Both |
| h2 size | 24px | Help center |
| h3 size | 17px | Help center |
| Letter-spacing (headings) | -0.025em (h1), -0.02em (topic title), -0.015em (h2), -0.005em (h3) | Both |
| Eyebrow | 11px, weight 500, letter-spacing 0.12em, uppercase | Both |
| Label/tag | 10-11px, weight 600-700, letter-spacing 0.08-0.14em, uppercase | Both |
| Monospace | Consolas, Monaco, Courier New, monospace | Both |
| Code inline size | 13px, weight 600 | Help center |
| Anti-aliasing | -webkit-font-smoothing: antialiased | Both |
1.3 Spacing
| Token | Value | Usage | Source |
|---|
| Max-width (main) | 1400px | Main content container | Both |
| Max-width (hero) | 960px | Landing hero centering | Help center |
| Max-width (article) | 720px | Article body | Help center |
| Max-width (search) | 640px | Big search button | Help center |
| Max-width (search modal) | 720px | Search overlay panel | Help center |
| Page padding | 40px horizontal | Main containers | Both |
| Hero padding | 88px top, 64px bottom (landing); 72px top, 56px bottom (release) | Hero sections | Both |
| Main grid gap | 48px (help center), 64px (release notes) | Sidebar-to-content | Both |
| Section gap | 48px | Between landing sections | Help center |
| Card gap | 12-14px | Grid gutters | Both |
| Release margin-bottom | 96px | Between release blocks | Release notes |
1.4 Border Radii
| Value | Usage | Source |
|---|
| 2px | Badges, labels, resolved panel | Both |
| 3px | Chips, inline code, search mark highlight | Both |
| 4px | Cards (main), category cards, entries, resolved panel | Both |
| 6px | Inputs, buttons, article cards, trending cards, video wrap, subscribe input | Both |
| 8px | Icon containers | Both |
| 10px | Large icon containers (trending card) | Help center |
| 12px | Search modal panel | Help center |
| 999px | Pill buttons (CTA, feedback, filters) | Both |
1.5 Shadows
| Usage | Value | Source |
|---|
| Big search resting | 0 4px 24px -8px rgba(0,3,77,0.08) | Help center |
| Big search hover | 0 4px 24px -4px rgba(0,3,77,0.15) | Help center |
| Trending card hover | 0 18px 36px -18px rgba(0,3,77,0.30) | Help center |
| Article card hover | 0 10px 24px -14px rgba(0,3,77,0.22) | Help center |
| Latest card | 0 40px 80px -40px rgba(0,3,77,0.4) | Release notes |
| Video wrap | 0 20px 50px -20px rgba(0,3,77,0.4) | Help center |
| Search modal | 0 24px 60px -12px rgba(0,3,77,0.4) | Help center |
| Entry media | 0 4px 14px -6px rgba(0,3,77,0.25) | Release notes |
1.6 Breakpoints
| Breakpoint | Changes | Source |
|---|
| 1080px | Grid collapses to single column; sidebar becomes static; TOC hidden; trending grid 2-col; timeline goes horizontal | Both |
| 860px | Media-highlight entries collapse to single column | Release notes |
| 680px | Topbar nav hidden; padding reduces to 20px; h1 to 36px (landing) / 30px (topic/article); trending grid 1-col; categories grid 2-col; release day to 42px | Both |
2. Page Inventory
| # | Page | File | Mode | Description | Source |
|---|
| 1 | Help Center Landing (Hub) | index.mdx | custom | Hero + sidebar nav + trending articles + categories grid | Help center mockup |
| 2 | Release Notes | changelog/index.mdx | custom | Hero with Latest card + controls bar + timeline sidebar + release entries + subscribe | Release notes mockup |
| 3 | Topic View | Various category index pages | default | Breadcrumb + topic header + 2-column article card grid | Help center mockup |
| 4 | Article View | Individual article .mdx files | default | 3-column layout (sidebar + article + TOC), overview block, video, feedback widget, contact block | Help center mockup |
| 5 | Search | N/A (overlay) | Mintlify native | Triggered from custom buttons; native Cmd+K search | Help center mockup |
3. Component Inventory
3.1 Global Components
| Component | Description | Where Used | Variants/Props |
|---|
| Topbar | Sticky navy bar with logo, nav links, CTA pill | All pages | Active link has aqua underline |
| Topbar CTA | Aqua pill button “Get a Demo” | All pages (navbar) | Hover: white bg, translateY(-1px) |
| Active tab indicator | 2px aqua underline on active nav tab | All pages | — |
| Footer (custom) | Centered navy footer: logo, 40px divider, inline links, copyright | Custom-mode pages (landing, changelog) | Links: Product, Pricing, Login, Help Center |
| Footer (native) | Mintlify native footer with link columns + social icons | Standard doc pages | Configured in docs.json |
3.2 Help Center Landing Components
| Component | Description | Where Used | Variants/Props |
|---|
| Landing hero | Centered: eyebrow, 52px title, subtitle, big search button. Dot-pattern bg decoration (right side, fading left). | Landing page, above main grid | — |
| Big search button | 640px max-width, search icon left, label text, keyboard shortcut hint. Opens native Mintlify search on click. | Landing hero | Hover: cobalt border, stronger shadow |
| Sidebar nav | 260px sticky left sidebar with search trigger + collapsible nav groups. | Landing page, topic view | Groups: Getting Started, Using FieldPulse, Features & Add-Ons, Integrations |
| Sidebar search trigger | Compact search button in sidebar that opens native search. | Sidebar | — |
| Nav group | Collapsible section with header (label + chevron) and item list. | Sidebar | collapsed variant hides items |
| Nav topic | Sidebar link item with left-border highlight on hover/active. | Sidebar | current variant: bold, navy border |
| Trending card | Navy header section with icon (colored by section) + radial gradient glow. White body with title, description, meta (read time + updated). | Landing page, “Trending Articles” section | data-section: onboarding (aqua icon), core (sky icon), features/integrations (quartz icon). Hover: translateY(-2px), strong shadow, icon rotate -4deg scale 1.05 |
| Category card | Compact card: 44px icon (left) + label + title + article count (right). CSS grid layout. | Landing page, “Categories” section | Same section color variants as trending card |
3.3 Article View Components
| Component | Description | Where Used | Variants/Props |
|---|
| Breadcrumb | Horizontal path: Home > Category > Current | Topic view, article view | Native on default-mode pages |
| Topic header | 40px title + description, 2px navy bottom border | Topic view | — |
| Article card | 2-column card: 48px icon + body (topic label, 14.5px title, meta with read time). | Topic view article grid | Section color variants for icon |
| Overview block | White box with 3px aqua left border. Label “Overview” + descriptive text. Optional prereq sub-block with dotted top border. | Article pages | — |
| Video placeholder | 16:9 aspect ratio navy box with radial gradient overlay and centered aqua play button (72px circle). | Article pages | — |
| Feedback widget | Card with “Was this helpful?” question, Yes/No pill buttons. On click: locks buttons, reveals textarea form with Submit/Cancel. Thank-you message after submit. | Article pages | States: initial, form-open, submitted |
| Contact block | Blue-tinted callout with sky left border. “Still need help?” with support link. | Article pages | — |
| Meta chips | Inline chips: topic tag (cobalt bg), platform badge, read time. | Article meta section | — |
| Right TOC | Sticky 220px right column. Uppercase “On this page” label, left-border links for h2 headings. | Article pages (3-column layout) | current variant: navy border, bold |
3.4 Release Notes Components
| Component | Description | Where Used | Variants/Props | |
|---|
| Release hero | Two-column grid on paper bg: left = eyebrow + 48px title + lede + action buttons; right = Latest card (navy bg, aqua “LATEST” label, date, title, stats grid). Dot-pattern bg right side. | Changelog page | — | |
| Latest card | Navy bg card with aqua “LATEST” badge, date, title, 2-column stats (new count aqua, resolved count sky). Strong shadow. | Release hero | — | |
| Controls bar | Sticky bar below topbar: search input (flex 1), filter group (All/New/Resolved segmented control), Highlights toggle (navy pill, aqua when active). Frosted-glass bg. | Changelog page | — | |
| Filter group | Segmented button group: 3 options with active state (navy bg, white text). | Controls bar | active variant per button | |
| Highlights toggle | Pill button with star icon. Toggles to show only highlight entries. | Controls bar + hero button | active variant: aqua bg, navy text | |
| Timeline sidebar | 220px sticky left sidebar with “Release Timeline” label. Vertical list of timeline links with left border. | Changelog page | — | |
| Timeline link | Date + summary, 2px left border. Hover: sky border, blue tint bg. | Timeline sidebar | current variant: 3px navy border, dot indicator | |
| Release header | Large day number (56px, weight 800) + month/week label + chip badges (new count, resolved count). 2px navy bottom border. | Each release block | — | |
| Feature entry | Card with title, topic tag, description, platform label. 3px left border (aqua for new section). | Release feature sections | Default, highlight, highlight has-media | |
| Highlight entry | Feature entry with aqua left border (4px), gradient bg (aqua tint fading right). Star badge “Highlight”. | Release feature sections | Optional has-media variant | |
| Media-highlight entry | 3-column grid: 280px media image + body + platform. Extended aqua gradient. | Release feature sections (first highlight) | — | |
| Star badge | Tiny aqua badge with star icon + “Highlight” text. 9px, uppercase. | Highlight entries | — | |
| Topic tag | Cobalt bg chip with section label (Sales, Scheduling, Mobile, API, etc.). | Feature entries | — | |
| Resolved issues panel | Fog-tinted card with 3px muted left border. Contains compact monospace list. | Release resolved sections | — | |
| Resolved item | Monospace row: bullet (>) + text + platform. Dashed bottom border. | Resolved panel | — | |
| Subscribe section | Navy card: two-column grid (title + lede | email input + subscribe button). Radial gradient decoration. | Changelog page bottom | — |
4. Mintlify Feasibility Matrix
4.1 Pages
| Page | Approach | Notes |
|---|
| Help Center Landing | Custom MDX + CSS (mode: "custom") | Full rewrite of index.mdx. Sidebar, hero, grids all hand-built. |
| Release Notes | Custom MDX + CSS + JS (mode: "custom") | Incremental additions to existing changelog/index.mdx. Controls bar and timeline sidebar are new. |
| Topic View | CSS override on default-mode pages | Mintlify’s auto-generated sidebar + content layout matches mockup structure. CSS tweaks for typography and card grid. |
| Article View | CSS override + Custom MDX components | Standard layout works. Overview block, feedback widget, contact block are new MDX patterns. |
| Search | Native (Mintlify Cmd+K) | Custom buttons trigger native search via JS. |
4.2 Components
| Component | Classification | Implementation |
|---|
| Topbar | Native | Already navy via CSS override. No changes needed. |
| Topbar CTA | Native + CSS | topbarCtaButton in docs.json + CSS for aqua styling |
| Active tab indicator | CSS override | Change underline color to aqua |
| Footer (custom) | Custom MDX + CSS | Inline HTML in custom-mode pages |
| Footer (native) | Native + CSS | Simplify footer.links in docs.json + CSS override |
| Landing hero | Custom MDX + CSS | Dot pattern via ::before pseudo-element |
| Big search button | Custom MDX + CSS + JS | JS triggers #search-bar-entry?.click() |
| Sidebar nav | Custom MDX + CSS + JS | Hand-built collapsible groups. JS for expand/collapse. |
| Trending card | Custom MDX + CSS | Static content, section color via data-section attribute |
| Category card | Custom MDX + CSS | Static content, CSS grid layout |
| Breadcrumb | Native | Auto-generated on default-mode pages |
| Topic header | CSS override | Style existing Mintlify page title |
| Article card | Custom MDX + CSS | In topic index pages |
| Overview block | Custom MDX + CSS | New hc-overview-block class. Could also restyle <Note>. |
| Video placeholder | Custom MDX + CSS | Inline HTML |
| Feedback widget | Custom MDX + CSS + JS | New feedback.js for state management |
| Contact block | Custom MDX + CSS | Simple callout variant |
| Meta chips | Custom MDX + CSS | Per-article inline HTML |
| Right TOC | Native + CSS | Auto-generated from headings. CSS for mockup style. |
| Release hero | Custom MDX + CSS | Rework existing cl-hero |
| Latest card | Custom MDX + CSS | Part of hero rework |
| Controls bar | Custom MDX + CSS + JS | New addition. JS for search/filter/highlights. |
| Filter group | Custom MDX + CSS + JS | Part of controls bar |
| Highlights toggle | Custom MDX + CSS + JS | Part of controls bar |
| Timeline sidebar | Custom MDX + CSS + JS | New addition. JS for scroll-spy. |
| Timeline link | Custom MDX + CSS | Part of timeline sidebar |
| Release header | Custom MDX + CSS | Already exists as cl-release-header. Refinement only. |
| Feature entry | Custom MDX + CSS | Already exists as cl-entry. Refinement only. |
| Highlight entry | Custom MDX + CSS | Already exists as cl-entry highlight. Refinement only. |
| Media-highlight entry | Custom MDX + CSS | New has-media variant |
| Star badge | Custom MDX + CSS | Already exists as cl-star. Refinement only. |
| Topic tag | Custom MDX + CSS | Already exists as cl-tag. Refinement only. |
| Resolved panel | Custom MDX + CSS | Already exists as cl-resolved. Refinement only. |
| Subscribe section | Custom MDX + CSS | New addition. Email backend TBD. |
| Search modal | Not feasible | Cannot replicate scope pills or custom result styling. Use native Mintlify search. |
| Search scope pills | Not feasible | Mintlify search is global, cannot scope to categories. |
5. Accepted Compromises
| # | Element | Mockup Intent | Accepted Implementation | Rationale |
|---|
| 1 | Custom search modal | Full overlay with scope pills, styled results, category filtering | Trigger Mintlify’s native Cmd+K search from custom buttons | Building a custom search requires a search API, indexing pipeline, and ongoing maintenance. Mintlify’s native search already indexes all content and provides good UX. |
| 2 | Search scope pills | Filter search by category (Getting Started, Features, etc.) | Omit scope filtering; native search returns all results | Mintlify does not expose search API for custom filtering. |
| 3 | Custom sidebar on landing page | Auto-updating sidebar matching docs.json navigation | Manually maintained sidebar in MDX (or JS-generated from data array) | Custom-mode pages do not have access to Mintlify’s auto-generated sidebar. A build script could be added later to auto-generate from docs.json. |
<circle>, <line>, <polyline>) in MDX | CSS-only icons using ::before/::after pseudo-elements with border shapes | Mintlify’s MDX compiler strips SVG child elements during React hydration. CSS border-based icons render reliably. |
(Additional compromises will be appended during implementation.)
6. Out of Scope
- Live Jira-pulled release data — release notes content is manually authored in MDX, not pulled from Jira. Handled separately if needed.
- Custom search backend — no custom search indexing or API. Native Mintlify search is used.
- Subscribe section email integration — the email input and subscribe button will be UI-only. Integration with HubSpot is planned but out of scope for this phase.
- Topic view page rewrites — individual category index pages (e.g.,
/core-platform/customers) will receive CSS refinements but are not fully rewritten to match the mockup’s topic view template.
- Article view full rewrite — individual articles receive CSS refinements and optional new components (overview block, feedback widget), but existing content is not rewritten.
- Webinars content — the “Webinars” nav link is a placeholder; no webinars content is created in this phase.
7. Resolved Questions
All questions resolved 2026-05-18. Decisions recorded here for traceability.
| # | Question | Resolution | Impact |
|---|
| 1 | Footer content | Keep the existing footer as-is. No simplification. Custom-mode pages (landing, changelog) get a matching custom footer; standard pages keep the native Mintlify footer unchanged. | Issue 18 is now a “match existing” task, no longer blocked. |
| 2 | OpAI stats screenshot | Not relevant to this project. Removed from scope. | No impact. |
| 3 | Navigation restructuring scope | Merge tabs to match Zach’s designs. Consolidate Core Platform + Accounting + Growth into a single “Help Center” tab. | Issue 13 proceeds as planned. |
| 4 | Webinars tab destination | Placeholder for now. Include in topbar nav as a link/tab but no content behind it yet. | Minor — topbar config only. |
| 5 | Subscribe section backend | UI-only for now. HubSpot integration planned for later. | No functional backend in this phase. |
| 6 | Feedback widget backend | Use Mintlify’s built-in feedback.thumbsRating config in docs.json. No custom widget needed — issue 16 scope reduced to overview block + contact block only. | Issue 16 simplified. |
| 7 | Trending articles curation | Static editorial for now. Future option for analytics-based curation to be explored separately. | Landing page content is manually maintained. |
| 8 | Category article counts | Live counts via a build script that counts articles per category. | Issue 11 needs a script or pre-build step to generate counts. |
| 9 | Dark mode priority | Launch requirement. Dark mode must work for all new styles. | Issue 19 is not optional — must ship before launch. |
| 10 | Montserrat font | Use Montserrat as specified in Zach’s designs. No special audit — implement and QA as part of issue 01. | Standard QA in issue 01 covers font impact. |
