Rejouice — loading0

Agency overview

The multi-client practice site: many projects, a full service list, proof from named clients, and a journal — all on one page. Where studio-landing has one message and silence around it, this one has to stay legible while carrying six competing sections.

Sections, in page order

  1. 01

    This page type has the most sections of any recipe here, so persistent wayfinding stops being a nicety.

  2. 02

    A list of adjectives rather than a sentence — the practice describing its own character. Reads as a manifesto and sets the page's voice in one screen.

  3. 03

    Lets that list arrive line by line, which is what makes a word list feel deliberate rather than lazy.

  4. 04

    A dense project grid. Staggering by viewport entry keeps a large grid from arriving as one flat slab, without the hover cost of an index.

  5. 05

    The service list is the page's densest text. A named grid keeps seven items scannable where a stack of cards would not.

  6. 06

    With this many sections, numbered eyebrows are what let a reader re-locate themselves after scrolling away.

  7. 07

    A client roster is a list whose length is the point. A marquee shows length without spending vertical space on it.

  8. 08

    Turns the roster into a claim a reader can check.

  9. 09

    Article teasers are the only real reading on the page; measure-locked so they stay readable beside the grid.

  10. 10

    One action, after six sections of evidence.

  11. 11

    Holds the contact details this page type is ultimately routing toward.

Build order

  1. 01

    Choose the palette first. This page type usually wants Studio rather than the default Cinematic — one accent cannot keep six sections apart.

  2. 02

    Build the section skeleton with real headings and no motion, and confirm the page is scannable in that state. If it is not, the problem is the content order, not the animation.

  3. 03

    Build the service grid and the project grid next; they set the page's rhythm and are the two hardest things to retrofit.

  4. 04

    Add the hero last among the static work, so its scale is chosen against the page that actually exists below it.

  5. 05

    Layer motion in order of importance: hero reveal, project stagger, stat count, then the client marquee.

  6. 06

    Re-run the whole pass with prefers-reduced-motion forced on, then again with JavaScript disabled.

Acceptance checks

  • Every section is reachable and labelled without JavaScript.
  • With prefers-reduced-motion: reduce, no element is left translated, faded, or hidden.
  • Exactly one h1; heading levels descend without skipping across all six sections.
  • The client marquee is aria-hidden, and the roster is also available as static text.
  • No more than two accents are used on any single screen, even though the palette offers more.
  • Contrast holds at 4.5:1 for body text in both modes of whichever palette is chosen.
  • Every interactive element has a visible focus ring at 3:1 contrast against its background.