- Index:
- 07
- Industry:
- Organising & Community Economics
- Year:
- 2026
- Status:
- Delivered
Guppi Bola
A greenfield Next.js rebuild that replaced a five-year-old WordPress site, built around a locked brand palette, a typed illustration pipeline, and a WCAG 2.2 AA accessibility bar written into the code rather than the style guide.
Guppi Bola had owned guppibola.com since 2017, and it had sat on the same WordPress theme for over five years. The brief was not a facelift, it was a different kind of site: a calm, illustration-led story of a decade of work rather than a news feed, with no more than four primary navigation pages, imagery carrying more weight than text, and accessibility stated as a priority rather than a checkbox. That last point created a real constraint. A brand guidelines document had just landed (April 2026) with a locked colour palette, and when we checked that palette against WCAG 2.2, not one brand colour passed AA as small body text on the cream page canvas. On top of that, the illustration set at the centre of the whole design direction was being drawn by an external illustrator and would not arrive until well after the build needed to start.
We built the site from scratch in Next.js with the App Router, statically generated end to end, with a single dynamic route for the contact form. We treated both constraints as engineering problems rather than compromises. For the palette, we added one functional colour, Ink, purely to carry body text at AA on the cream canvas, and encoded the rest of the rules in a typed token module: Ochre and Cloud Blue are declared decorative-only, and the allowed foreground and background pairings are an explicit typed allow-list, so an inaccessible colour combination is a compile-time and test-time failure rather than something a reviewer has to catch by eye. For the missing artwork, every illustration is referenced by a key through a typed manifest with a placeholder fallback, so the build proceeded fully on on-brand placeholders and swapping in the real files was a drop-in plus a manifest edit, no code change. Alt text lives in the manifest alongside each asset, which makes it structurally impossible to add an illustration without also declaring how it is described. Content is MDX with Zod-validated frontmatter read through a single typed loader, so case studies are added as files in version control with no CMS, and a malformed entry fails the build instead of shipping. The site went live on the original domain, replacing WordPress entirely.
Brand Translation & the Accessibility Problem
The April 2026 brand guidelines locked a palette and a visual direction, Textile & Earth, tactile and hand-crafted, with paper grain, hand-drawn line motifs and generous calm spacing. Translating that to the web surfaced an immediate conflict: accessibility was a stated priority, and none of the brand colours passed AA as small text on the cream page canvas. Rather than quietly bend the brand or quietly bend the standard, we added one functional colour and wrote the contrast rules into the code.
- →Brand palette translated into design tokens: Heritage Red, Deep Navy, Ochre, Cloud Blue and Pale Cream
- →Ink added as a sixth, functional token to carry body text at AA on the cream canvas
- →Ochre and Cloud Blue formally classified decorative-only, never used as text on any background
- →Allowed foreground and background pairings expressed as a typed allow-list with unit tests
- →Fluid type scale and motion timings tokenised alongside colour, so a design change is a single edit
- →Brand logo option 2 adopted as the primary wordmark, with a compact monogram for favicon and tight spaces
Content Model & the Illustration Manifest
The site is a growable timeline of work, so the content model mattered more than any single page. Case studies are MDX files with typed, Zod-validated frontmatter, read through one loader API that every page calls. The illustrations at the heart of the design were being drawn externally and had not arrived, so we built a typed manifest that resolves every asset by key and falls back to an on-brand placeholder, which let the entire build proceed on schedule.
- →Eight project case studies as MDX with Zod-validated frontmatter, invalid entries fail the build
- →A single typed content loader so a future CMS swap touches one layer, not every page
- →Typed illustration manifest resolving assets by key, with a placeholder fallback for undelivered artwork
- →Alt text stored per asset in the manifest, making a described alternative structurally mandatory
- →Ten-tag taxonomy defined once and shared by the schema, the filter and the tag components
- →Adding a new project is a file plus assets in version control, no CMS and no deploy configuration
The Build
Four primary pages, Home, About, Projects and Offerings, plus a case study template and a contact page. The Projects page carries a multi-select tag filter synced to shareable URL parameters, so a filtered view can be sent to a funder as a link. Motion is deliberate and restrained, entrance fade-rise, staggered card reveals, slow hero parallax and a gentle collaborators marquee, and all of it is wrapped in reduced-motion-aware components.
- →Four primary navigation pages plus case study and contact routes, statically generated
- →Multi-select tag filter synced to shareable ?tag= URL parameters with animated re-flow
- →Reduced-motion-aware motion wrappers, every animation disabled under prefers-reduced-motion
- →Hand-drawn motif section dividers and decorative marks reused from the brand embroidery sketches
- →Per-route metadata, Open Graph images, JSON-LD, sitemap and robots handled at build time
- →Contact form built once and reused on three pages, with server-side Zod validation, honeypot and rate limiting
Testing & Accessibility Verification
Accessibility was the stated priority, so it is tested rather than asserted. Automated axe checks run inside the component suite, the contrast token rules have their own unit tests, and the content loader, filter logic and manifest resolution are covered so that a content error surfaces as a failing test rather than a broken page.
- →Automated axe accessibility assertions running inside the component test suite
- →Unit tests over the contrast token allow-list, content loader, Zod schemas, filter logic and manifest resolution
- →Contact form covered across success, validation-error and server-error states
- →Semantic landmarks, single H1 per page, skip link, visible focus and full keyboard operation
- →Lighthouse audit script committed to the repository for repeatable local runs
Launch & Domain Migration
The new site was reviewed on a preview deployment first, with WordPress left untouched and still serving, then the domain was pointed across in a single deliberate step. Nothing was migrated by halves and there was no window where the site was half-old and half-new. guppibola.com now runs entirely on the new build.
- →Preview deployment used for client review while the WordPress site stayed live and serving
- →Domain cutover executed as a single explicit step, no downtime and no half-migrated state
- →WordPress retired, the domain now served entirely by the statically generated build
- →Remaining external inputs, final illustration set, font families and CV PDF, each ship behind a working fallback so they can be dropped in without redesigning around them
- 01Replaced a five-year-old WordPress install with a statically generated Next.js build on the original domain, cutover completed with no downtime
- 02Ink added to the brand palette specifically to carry body text at WCAG 2.2 AA on the cream canvas, because no existing brand colour did
- 03Accessible colour pairings encoded as a typed allow-list, with Ochre and Cloud Blue declared decorative-only and never permitted as text
- 04Typed illustration manifest with placeholder fallback let the full build proceed before the illustrator had delivered a single asset
- 05Alt text stored per asset in the manifest, so no illustration can be used without a described alternative
- 06Eight project case studies authored as Zod-validated MDX, version-controlled, with no CMS to license or maintain
- 07All motion, including hero parallax and the collaborators marquee, disabled under prefers-reduced-motion
- 08Statically generated throughout, with the contact API route as the only dynamic endpoint
- Framework
- Next.js 16 with React 19, App Router and React Server Components
- Rendering
- Fully static generation, the contact API route is the only dynamic endpoint
- Content
- MDX case studies with Zod-validated frontmatter behind a single typed loader API
- Design Tokens
- Typed colour, type scale and motion module with an explicit accessible-pairing allow-list
- Styling
- Tailwind CSS 4 with brand tokens declared as CSS variables
- Deployment
- Vercel, preview deploy per branch, production on merge
- Resend
- Contact form delivery, credentials in environment variables only
- Illustration Manifest
- Typed asset registry with per-asset alt text and an on-brand placeholder fallback for undelivered artwork
- Motion
- Motion library animations, code-split per section and reduced-motion aware
- Structured Data
- JSON-LD Person and CreativeWork emitted per route alongside Open Graph images
- Build Output
- Static pages generated at build time, no server rendering on request
- Images
- next/image with AVIF and WebP, lazy loading and blur-up placeholders
- Fonts
- Self-hosted and subsetted with font-display: swap, no third-party font requests
- Auditing
- Lighthouse audit script committed to the repository so performance and accessibility can be re-measured on demand
- →TypeScript strict mode throughout
- →Zod validation on content frontmatter and on every contact form submission, client and server
- →Accessible colour pairings enforced as a typed allow-list rather than documentation
- →Automated axe accessibility assertions in the component test suite
- →All motion disabled under prefers-reduced-motion
- →Secrets in environment variables only, with the production build failing fast if they are missing
- Next.js 16
- React 19
- TypeScript
- Tailwind CSS 4
- MDX
- Zod
- Motion
- Resend
- Vitest
- Vercel
Aligné Studio
From brand identity to native mobile apps, a full-service launch for London's first infrared light therapy Pilates studio.
favicon & mat tag
- · Warm, unhurried, encouraging — never shouty
- · Sentence case for headings, no exclamation marks
- · Lead with the feeling, not the workout stats
Have a project?
Web, software and brand work for businesses across the UK. Tell us what you are building.
Glasgow GFX Print Studio
- Visit
- The Pentagon Business Centre
Unit 204b, 36–38 Washington Street
Glasgow G3 8AZ - Call
- 0141 345 5841
- Hours
- Mon–Fri 9:00–18:00
Sat 10:00–18:00
Sun closed - Service area
- Glasgow, Hamilton, Paisley, East Kilbride, Motherwell. Free delivery across Central Scotland on orders over £50.