The website.

The 50% line is the website's main alignment. In the hero, the X in the wordmark lands on that line and the two media panels meet there. Reuse the same split in the sections below so text, media and colour fields share one vertical edge. Use an off-centre division only for the two-thirds layout or the fixed title rail.

Where the data meets the shop floor.

Teams test the forecast against what is happening on site, assign an owner and track the change each week.

centre line · 50%

wordmark Xleft media panelright media panelnext section uses the same split

Measurements are shown from the md breakpoint (768px). At phone width the grid has not split yet, so there is nothing to measure.

The page has one width constraint: --page-max-width at 1728px. Below it, the page follows the viewport. Above it, the whole page centres with equal margins. Apply the cap once, at the page root; never apply it to individual sections.

Every section uses one of two outer-spacing modes. An editorial section uses SiteContainer for the page gutter and adds its own vertical padding. A full-bleed section spans the canvas and adds no outer spacing. The component then owns its internal space: Surface-based blocks use p-10, PostRowBlock uses py-10, and Hero media fills its grid tracks.

Use one of the six layouts shown below. Halves suit text with media; quarters suit card rows; thirds suit three equal cards; the 25/25/50 split adds two supporting tiles; two-thirds creates a main and an aside; the rail keeps a fixed title or filter column beside fluid content. Each row names the implementation and its breakpoint behaviour.

Turnaround, led from the front.

Senior operators work with your team, find the cash and track delivery against the plan each week.

40pxp-10

Measurements are shown from the md breakpoint (768px). At phone width the grid has not split yet, so there is nothing to measure.

the call site, exactly what renders above

<TextAndMedia
  textTileVariant="titleAndText"
  textTile={{
    bgColor: "default",
    sectionTitle: {
      title: "Turnaround, led from the front.",
      description: "Senior operators work with your team, find the cash…",
      align: "start",
    },
    buttonGroup: {},
  }}
  media={{ type: "image", src: cms.image, alt: "" }}
  ratio="16/9"
/>

Article

How CEOs are rethinking growth in a slower market

Leaders are reallocating capital toward resilience.

Insight

Private equity's new value-creation challenge

Returns now come from operational improvement.

Report

Supply-chain resilience is back on the board agenda

Resilience as a capability, not a cost centre.

Article

The first hundred days of a turnaround

Cash first, then capability, then momentum.

1fr · 1⁄4

Measurements are shown from the md breakpoint (768px). At phone width the grid has not split yet, so there is nothing to measure.

the call site, card data straight off a query

<PostRowBlock
  columns={4}
  contentCards={posts.map((p) => ({
    variant: "news",
    alignment: "vertical",
    media: { type: "image", src: p.cover, alt: "" },
    tagline: p.category,
    title: p.title,
    excerpt: p.summary,
    href: p.href,
  }))}
/>

<TextAndText
  contentLeft={{
    bgColor: "primary",
    sectionTitle: {
      title: "The plan becomes weekly actions.",
      description: "Senior teams assign an owner to each action…",
      align: "start",
    },
    buttonGroup: {},
  }}
  contentRight={{
    bgColor: "greyGradient",
    sectionTitle: {
      variant: "largeText",
      description: "Every action has an owner.",
      align: "start",
    },
    buttonGroup: {},
  }}
/>

Write the phone layout first. At md (768px), most sections move from one column to two and the page gutter increases. At lg (1024px), card rows reach three or four columns and the gutter increases again. Grid accepts one to four equal columns and applies those changes for you.

SiteContainer provides the horizontal page gutter: 24px at base, 40px at md and 64px at lg. Use it around editorial content. Do not wrap full-bleed sections in it. Apply the 1728px maximum width to the whole page, not to individual sections.

Editorial sections and CMS blocks use different spacing rules. Give an editorial section py-20 md:py-28 and, when it follows another editorial section, a border-t. Render CMS blocks next to one another with no added outer gap or padding. Each block owns its internal spacing: Surface-based blocks use p-10 and PostRowBlock uses py-10. SectionTitle controls the gap between its own title and content.

Our services

Six practices covering performance improvement, turnaround and restructuring.

80px112pxpy-20 md:py-28

Latest thinking

Practical analysis on working capital, delivery and team capability.

Cash tracked every week.

The team reports each working-capital action against the agreed baseline.

Variance reported against the plan.

0px between blocksflush

Delivery tracked against the plan.

Each week, the team reports the result, owner and next action.

Use Grid for equal columns and gaps from the spacing scale. Use Container to limit the line length of prose inside a section. Use raw Tailwind utilities only for layouts Grid does not support, such as two-thirds. Apply max-w-page once, at the page root.

import { Grid } from "@/components/ui/grid";

// columns step up by breakpoint; gap defaults to "xl" (40px)
//   columns={2} → 1 → md:2          (split sections)
//   columns={4} → 1 → md:2 → lg:4   (card rows)
//   columns={3} → 1 → md:2 → lg:3   (three-card rows)
<Grid columns={4} gap="lg">
  <Card /> <Card /> <Card /> <Card />
</Grid>

import { Container } from "@/components/ui/container";

<Container width="lg">
  <article>Long-form copy, capped for readability.</article>
</Container>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <div className="lg:col-span-2">Main, two of three columns</div>
  <div>Aside, the remaining column</div>
</div>

<div className="flex flex-col gap-8 lg:flex-row lg:items-start">
  <Stack gap="lg" className="lg:w-64 lg:shrink-0">…rail…</Stack>
  <div className="flex-1">…content…</div>
</div>

Apply the page cap at the root. Add the slot-based Hero, then editorial sections with their own gutter and vertical padding. Render CMS blocks separately with no added outer spacing. The navbar and footer exist in Figma but do not yet ship in the registry. SiteContainer is also pending, so use its gutter classes directly.

import { HomepageHeader, HomepageHeaderSlide } from "@/components/homeHeader";
import { SectionTitle } from "@/components/sectionTitle";
import { TextAndMedia } from "@/components/textAndMediaBlock";
import { TextAndText } from "@/components/textAndText";
import PostRowBlock from "@/components/postRowBlock";

export default function Page() {
  return (
    // canvas: full-bleed to --page-max-width, then centres
    <main className="mx-auto w-full max-w-page">
      {/* 0 · Navbar: designed, not yet in the registry (roadmap) */}

      {/* 1 · Hero: slot-based section, media is yours (next/image, video) */}
      <HomepageHeader>
        <HomepageHeaderSlide
          left={<img src={cms.hero.left} alt="" className="size-full object-cover" />}
          right={<video src={cms.hero.loop} autoPlay muted loop playsInline
                   className="size-full object-cover" />}
        />
      </HomepageHeader>

      {/* 2 · Editorial section: vertical padding + page gutter */}
      <section className="border-t border-border py-20 md:py-28">
        <div className="px-6 md:px-10 lg:px-16">
          <SectionTitle headingSize="lg" headingTag="h2" align="start" title="Latest thinking" />
        </div>
      </section>

      {/* 3 · Full-bleed CMS blocks: adjacent, with no added outer spacing */}
      <PostRowBlock columns={4} contentCards={cms.posts} />
      <TextAndMedia {...cms.textAndMedia} />
      <TextAndText {...cms.textAndText} />

      {/* 4 · Footer: designed, not yet in the registry (roadmap) */}
    </main>
  );
}

These studies show how the approved divisions can combine across a page. Use them to check the balance and sequence of a composition, not as fixed page templates. Every study uses only the layouts from W4.

Choose by contract, not folder alone. Components, elements and slot-based patterns use ReactNode slots when engineers need composition. CMS-shaped patterns and most sections take serialisable data for direct CMS mapping. Hero is the deliberate exception: it is a section by scale but uses media slots. The component directory documents the contract for each item.

Most page errors come from applying a valid rule at the wrong layer. Keep 50/50 layouts centred, use SiteContainer only for editorial content, apply the 1728px cap only to the page, and build from the phone layout up.