Our work

Wholegrain Digital wholegraindigital.com/work/

Design type: Agency portfolio index
Page tags: portfolio filters cards case study list pagination testimonial mockups dark serif pills footer
Site tags: agency bold colour serif
Vocabulary: deep indigo canvascentred serif page titlepill filter chipspill search fieldstacked full-width project cardsper-card brand coloursplit card layouttilted device mockupscropped browser screenshotsserif card headlines with inline arrowcategory pill badgecircular paginationcolour-blocked testimonial bandoversized pull quoteorganic blob shapes
Prompt: Show prompt
Build a portfolio/work index page for [Agency name] with a confident, colour-blocked look on a dark indigo background. Palette: page background deep indigo (#1E0560), accent sunshine yellow (#FFE033), pale mint for pills (#D6EFEA), white text; each project card has its own saturated brand colour (black, petrol teal #05454F, forest green #13533F, chocolate brown #3E2208, royal blue #0B5BB5, navy #0A1A3D). Type: an elegant transitional serif for display and card headlines (light weight, large, tight leading) paired with a clean grotesque sans for UI, labels and body. Sections: - Header: wordmark left with a small location pin + "Find us | [Location]" link; right side a circular outlined menu button and a yellow pill "Contact →" button. - Hero: centred serif H1 "[Page title]" (~80px) with a two-line serif subtitle "[Short positioning line]". - Filter row: centred pill chips (All active in dark teal, others pale mint) plus an outlined pill search input with magnifier icon. - Project list: a single column of full-width rounded cards (~780px wide, 8px radius, ~24px gap). Each card is split ~55/45: left has client logo, 2–4 line serif headline "[Project outcome] →" and a small category pill at the bottom; right shows tilted, overlapping browser/phone mockups bleeding off the card edge. - Pagination: circular numbered buttons, active one filled white, plus a circled arrow. - Testimonial band: full-bleed yellow section, huge indigo serif quote with oversized quote mark, avatar, name and role. - CTA: white section, centred serif "[Like what you see?]", indigo pill button + text link with long arrow. - Footer: indigo with blob-masked portrait, serif invitation line, yellow Contact pill, badges, link columns, and a teal organic-blob newsletter panel with pill email input. Interaction: cards lift slightly and the arrow nudges right on hover; filters update the list without reload. Mobile: cards stack text above the mockup, filters wrap or scroll horizontally.
Added: 26 Oct 2026

Esc gallery · ← → pages

Full-page screenshot of Our work on Wholegrain Digital