Camhra Case Study

Wholegrain Digital wholegraindigital.com/work/camhra-case-study/

Design type: Agency case study
Page tags: case study hero stats mockups colour blocks serif long form gradient portfolio editorial
Site tags: agency bold colour serif
Vocabulary: split hero with tilted screenshotserif display headlinecolour-blocked sectionstwo-column overview with sidebareyebrow labels in accent colourstat trio with large serif numeralsnarrow reading columngrainy gradient shapesblurred abstract brand graphicsphone mockup rowframed desktop screenshotsoft drop shadowspill cta buttongenerous whitespace
Prompt: Show prompt
Build a single project case study page for [Agency name] showcasing [Project name]. It should feel calm, editorial and colour-blocked. Palette: deep indigo (#1E0560) hero, petrol teal (#05454F) overview band, white body, sunshine yellow accent (#FFE033) for eyebrows, numbers and buttons; abstract artwork in soft grainy gradients (yellow, lilac-pink, periwinkle blue, orange, sage). Type: light transitional serif for headings and stat numerals; neat grotesque sans for body, lists and labels. Sections: - Hero (indigo, ~460px tall): left column with serif project name (~64px) and a 3–4 line serif strapline "[What we did]"; right side a large browser screenshot of the project rotated ~8° and bleeding off the right and bottom edges. - Overview (teal): two columns. Left (~60%): yellow eyebrow "Project overview", large serif intro paragraph, serif subheading "The Challenge" and a short bulleted list. Right (~25%): yellow eyebrow "Features", small bullet list, and a yellow pill button "Visit the [Project] site ↗". - Stat row: three centred stats with big yellow serif figures ("[A+]", "[100%]", "[0.02g]") and small white captions. - Process (white): narrow centred text column (~420px) with indigo serif H2 and sans body; then a full-width row of 4 blurred, grainy geometric gradient shapes (half circles, stacked ellipses, concentric rings). - Result: more narrow-column text, then a row of three tall phone mockup cards with rounded corners and soft shadows, then one large framed desktop screenshot. - Shared indigo CTA footer. Responsive: hero stacks with the screenshot below; overview columns stack; stats wrap to one column; phone mockups become a horizontal scroll.
Added: 26 Oct 2026

Esc gallery · ← → pages

Full-page screenshot of Camhra Case Study on Wholegrain Digital