Section Frame

The section ground. Sections are full-width with no frame lines, side rules or inset panels: space separates them, and a change of ground marks the odd section that should read as its own zone. SectionFrame paints only the ground; the section inside carries the rhythm (.section-y).

Grounds

'page' (default)

The dark page. Most sections — space alone separates them.

'tint'

A faint lift for the testimonial band.

'hero'

The tint come alive: the navy flowing silk behind every page hero except home (which has its own mesh). Keeps the tint class, so colour and collapse are unchanged.

'silk'

The same navy silk for a slim band lower on a page: edge to edge (no feather), a light even veil under centred controls, and lazy, so the shader mounts only once the band nears the viewport. The blog post share module.

'band'

The cool tonal band, for the odd section that should read as its own zone.

'paper'

Cream light ground (home Case Studies + Services, UX audit tiers).

'white'

The brighter light ground (FAQ sections, the footer).

tsx

// Emits .section-ground plus one of .section-ground-page,
// .section-ground-tint, .section-ground-hero (+ .section-hero-flow),
// .section-ground-silk (+ .section-silk-flow), .section-ground-band, .section-ground-paper,
// .section-ground-white (paper/white also carry the surface-paper classes).
<SectionFrame>                    {/* the dark page */}
<SectionFrame surface="hero">     {/* page heroes (navy silk) */}
<SectionFrame surface="silk">     {/* silk band (blog share, case-study reviews) */}
<SectionFrame surface="tint">     {/* testimonials */}
<SectionFrame surface="band">     {/* a zone of its own */}
<SectionFrame surface="paper">    {/* light: cream */}
<SectionFrame surface="white">    {/* light: brighter */}

Bridge — .section-ground-bridge

A className modifier for a section between two dark bands that should lift out of them — the home page UX audit banner, between the testimonials' tint and “Who I work best with”. A lighter navy (--surface-hover) behind the content, fading in from the tint (--surface-section) and back out to the band (--surface-band) across its own top and bottom padding (88px, 144px from lg), blended in oklab, so neither edge is a seam.

tsx

<SectionFrame className="section-ground-bridge">

Rhythm — .section-y

One section rhythm for the whole site: padding-block: var(--spacing-24) (96px), and var(--spacing-40) (160px) from lg. Every section's inner <section> carries .section-y instead of its own py-* values.

Two neighbouring sections on the same ground would stack both paddings (320px on desktop), so the second one's top collapses — .section-ground-page + .section-ground-page .section-y and the same for every ground. Where the ground changes, both keep their full padding, so content always sits a full rhythm from a band's edges. For that to work, every .section-y sits directly inside a ground — section components that are used bare (CTASection) render their own.

Exceptions: page heroes keep their own top/bottom padding; ToolsIUse and ClientLogoGrid are deliberately slim strips; the home Case Studies pin measures its own inset.

tsx

<SectionFrame>
  <section className="section-y">
    <div className="page-container">…</div>
  </section>
</SectionFrame>

What it no longer does

Earlier versions drew full-width hairlines above and below every section, side rules on the content column and a rounded tinted panel inset 16px — showTop, showBottom, showSides, showBackground, fullBleed and panel. Stacked, they read as a page of boxes, and all of it was removed (Oct 2026). Don't reintroduce section frames or panels: separate sections with space, or with a change of ground.

Props

Prop	Type	Default	Description
`surface`	`'page' \| 'tint' \| 'hero' \| 'silk' \| 'band' \| 'paper' \| 'white'`	`'page'`	The section's ground. 'page' is the dark page itself; 'tint' a faint lift (the testimonial band); 'hero' the tint with the navy flowing silk behind it (MeshCardBackdrop tone='navy', feathered into the flat tint at the bottom) — every page hero except home; 'silk' the same silk edge to edge, unfeathered and lazy, for a slim band lower on a page (the blog post's share module); 'band' the cool tonal band; 'paper' / 'white' the light grounds, which re-point every colour token for the subtree.
`className`	`string`	`—`	Merged onto the ground element.
`children`	`ReactNode`	`—`	The section — normally a <section className="section-y"> holding a .page-container.

Import

tsx

import { SectionFrame } from '@/components/ui/SectionFrame'