Case Studies

P Purpose

Primary social proof section for high-intent pages. A single featured case study occupies the full width — content left, hover-to-play video right — with client logo tabs below for switching between studies. The video play button and progress-bar tabs make the interactivity self-evident.

W When to Use

• Homepage: below hero or after the services section, to ground claims with proof
• Services pages: after the methodology/process section, before the final CTA
• Industry pages: as the anchor social proof for a vertical audience
• Not for listing pages (use a grid of cards instead) or for blog sidebars

I Required Inputs

• Section overline — e.g. "Case Studies" or "Client Results"
• Section title — max 60 chars. Outcome-focused, not generic
• Client logo — SVG or transparent PNG, max 24px tall
• Headline — result-first, 10–15 words. e.g. "Automated 80% of order processing for a $90M distributor"
• Description — 2–3 sentences. What they had, what we did, what changed
• Stats — 1 or 2 max. Number + unit + short label
• CTA — "Read full case study" linking to the dedicated page
• Video — 10s muted MP4 loop + poster JPG. Plays on hover, pauses on leave

V Variants

• White — default. Card on white background, subtle border + shadow
• Grey — snow background. Use when preceded by a white section for contrast
• Dark — ink background. Card in dark ink, stats + titles flip to white. Use as a dramatic mid-page break

F Typical Page Flow

• After: services section, methodology/TriStorm section, or client logos strip
• Before: final CTA ending (Bold or Soft) or FAQ section
• Pairs well with Supportive Case Study as a secondary proof point further down
• Do not place two Main Case Study sections on the same page — one is enough

P Purpose

Same content-left / media-right layout as the video variant, but with a static image (product screenshot, branded graphic, team photo). Use when no video is available or when visual simplicity is preferred. Can mix with video cards in a tabbed set.

W When to Use

• When no client video is available but you still need the featured layout
• When the case study is better represented by a product screenshot or dashboard UI
• Can be mixed with video variants inside the same logo-tab set

I Required Inputs

• Same as Video variant, minus the video file
• Image — JPG/PNG, at least 1200px wide. Product UI, team photo, or client environment. Object-fit: cover
• Use branded gradient placeholders (gradient-a/b/c) when no real image is ready

V Variants

• White — default, same as video variant
• Grey — snow background for contrast
• Dark variant also available (shares CSS with video variant)

F Typical Page Flow

• Same placement as the video variant — after services, before final CTA
• Interchangeable with the video variant; choose based on available assets

P Purpose

Lightweight social proof block designed as a conversion nudge. Small enough to embed between any two content sections — it breaks up the page while reinforcing credibility with a real client quote, a single stat, and a CTA.

W When to Use

• Between content sections on long pages (services, about, methodology) to break monotony with proof
• Above the footer as a final social proof nudge before the CTA ending
• On pages where the Main Case Study is too heavy but you still need proof
• Limit to one per page region — don't stack multiple adjacent

I Required Inputs

• Inline variant: client quote (2 sentences max), client logo, attribution (name + title + company), 1 stat (number + label), CTA button
• Card variant: image/gradient, client logo, headline (1 line), 1 stat, "Read case study" link

V Variants

• Inline (White) — no card frame. Quote left, stat + CTA right. Lightest option, blends into content
• Inline (Grey) — same on snow background. Good for contrast between white sections
• Inline (Dark) — ink background. Use as a dramatic divider
• Card (White/Grey) — horizontal card with image left, content right. More visual weight for higher-intent pages
• Card (Dark) — dark card variant for dark page contexts

F Typical Page Flow

• After: services list, FAQ section, thought leadership content, or methodology section
• Before: CTA ending section, contact form, or footer
• Pairs well with the Main Case Study earlier on the page — this acts as a lighter reminder