Section wrapper

Presentational layout only: it paints a tone, pads the section and constrains its content. It renders no heading, eyebrow or copy of its own; you pass those as children and hand their heading id to labelledby. It sets inherited defaults (text colour, and color-scheme on the dark tones) but never overrides colours your content or other components set explicitly.

Suggested location

src/lib/components/section-wrapper-01

Required props

children

Limitations

• Renders no heading. Pass one as a child and give its id to labelledby, or the section stays an unnamed generic container.
• Components placed inside keep their own colour tokens, surfaces included: on the inverse or accent tone, point every colour they paint at the tone (for example surface, ink, muted and hairline to var(--section-tone-surface), var(--section-tone-ink), var(--section-tone-muted) and var(--section-tone-hairline)). usage.md has a worked example.
• The same-tone collapse uses the adjacent-sibling selector, so it only applies when two sections are direct siblings; a wrapper element or a hidden element between them keeps both paddings.
• The header offset defaults to 0. Set --section-wrapper-header-offset to your sticky header's height, and do not also set html { scroll-padding-top }, or the two offsets add up. A section that follows a same-tone neighbour stops 2rem further down, since it has no top padding.
• The offset is scroll-margin on the section, so it covers jumps to the section itself, not focus moving to a link or field inside it; use html { scroll-padding-top } instead if focused controls can land under the header.
• In the neutral palette the accent tone is near-black, close to the inverse tone; the accent tone becomes a brand band once --section-wrapper-accent is set.
• Light appearance by default. The tone tokens retone it for a dark page, but no dark mode is declared or selected automatically.

Example

<script lang="ts">
	import Section from '$lib/components/section-wrapper-01/Section.svelte';
</script>

<Section id="plans" tone="inverse" labelledby="plans-title">
	<h2 id="plans-title" class="text-3xl font-semibold tracking-tight text-[var(--section-tone-ink)]">
		Starter is free for up to three people
	</h2>
	<p class="mt-4 max-w-xl text-lg text-[var(--section-tone-muted)]">
		Team is $12 per seat per month and Business is $24.
	</p>
</Section>

<script lang="ts">
	import Section from '$lib/components/section-wrapper-01/Section.svelte';
</script>

<Section id="timelines" labelledby="timelines-title">
	<h2 id="timelines-title">Every date on the roadmap, and what it waits on</h2>
	<p>Move a date and everything after it moves too.</p>
</Section>

<Section id="plans" tone="inverse" spacing="sm" labelledby="plans-title">
	<h2 id="plans-title">Starter is free for up to three people</h2>
</Section>

<Section tone="inverse" spacing="none" width="full">
	<div
		style="
			--pricing-grid-surface: var(--section-tone-surface);
			--pricing-grid-ink: var(--section-tone-ink);
			--pricing-grid-muted: var(--section-tone-muted);
			--pricing-grid-hairline: var(--section-tone-hairline);
			--pricing-grid-control-border: var(--section-tone-hairline);
			--pricing-grid-accent: var(--section-tone-ink);
			--pricing-grid-on-accent: var(--section-tone-surface);
		"
	>
		<PricingGrid title="Plans and pricing" {plans} />
	</div>
</Section>

:root {
	--section-wrapper-header-offset: 4rem;
}

<div
	class="bg-zinc-950"
	style="
		color-scheme: dark;
		--section-wrapper-surface: #09090b;
		--section-wrapper-muted-surface: #18181b;
		--section-wrapper-ink: #fafafa;
		--section-wrapper-muted: #a1a1aa;
		--section-wrapper-hairline: rgb(255 255 255 / 0.1);
		--section-wrapper-inverse-surface: #fafafa;
		--section-wrapper-on-inverse: #09090b;
		--section-wrapper-inverse-muted: #52525b;
		--section-wrapper-inverse-scheme: light;
	"
>
	<!-- sections -->
</div>

Pick a tone, spacing and width through props. Retone every tone through --section-wrapper-* variables, and read the four --section-tone-* values inside a section so your content follows the band it sits on.

• Content colours: inside a section, use var(--section-tone-ink) for headings and body text, var(--section-tone-muted) for secondary text, var(--section-tone-hairline) for dividers and var(--section-tone-surface) for anything that must match the band. They change with the tone.
• Accent: set --section-wrapper-accent and --section-wrapper-on-accent together; the accent tone fills the band with the first and sets text in the second. Keep them at 4.5:1. The accent band's muted text and hairline are mixed from the pair.
• Page tones: --section-wrapper-ink, --section-wrapper-muted and --section-wrapper-hairline are the text and rule colours on the default and muted tones; --section-wrapper-surface is the default tone's background (transparent, so the page shows through) and --section-wrapper-muted-surface the muted band's.
• Inverse: --section-wrapper-inverse-surface, --section-wrapper-on-inverse and --section-wrapper-inverse-muted set the dark band. Its hairline is mixed from on-inverse.
• Native controls: --section-wrapper-inverse-scheme and --section-wrapper-accent-scheme set color-scheme on those bands (dark by default). Set the accent one to light if your accent is pale, so checkboxes and selects are drawn for a light fill.
• Sticky header: set --section-wrapper-header-offset on :root to your header's height (4rem for a 64 px bar). Jumps to a section id then stop below it; a collapsed same-tone section stops 2rem further down.
• Dark page retone: on the page wrapper set color-scheme: dark, then surface #09090b, muted-surface #18181b, ink #fafafa, muted #a1a1aa, hairline rgb(255 255 255 / 0.1), inverse-surface #fafafa, on-inverse #09090b, inverse-muted #52525b, inverse-scheme light (all --section-wrapper-*). usage.md has the snippet.
• Spacing and widths: the padding and measure maps at the top of the script hold the Tailwind classes for each preset; edit them there to change the scale for every section at once.
• Collapse: two direct-sibling sections on the same tone merge. To keep a gap between them, give them different tones or put the second in its own wrapper.
• Catalogue sections: pricing-grid-01, faq-accordion-01 and similar already pad and constrain themselves with the same classes as spacing="md" and width="default". To put one on a tone, wrap it in a Section with spacing="none" and width="full"; it keeps its own padding and gutters and starts on the same edge as the default-width sections around it.

Public CSS variables

• The root is a section element. With labelledby it carries aria-labelledby and is exposed as a named region; without it no aria attribute is rendered, so it stays a generic container rather than an unnamed landmark.
• Point labelledby at the section's own visible heading. Name only the sections a reader would navigate to; a landmark for every band makes the landmark list noisy.
• Contrast (WCAG relative luminance): ink #18181b on white 17.7:1 and on the muted band #f4f4f5 16.1:1; muted #52525b 7.7:1 on white and 7.0:1 on the muted band; on the inverse band #fafafa measures 19.1:1 and #a1a1aa 7.8:1; white on the neutral accent 17.7:1 and on the blue accent 6.7:1.
• Every tone sets the inherited text colour, and the inverse and accent tones also set color-scheme, so unstyled text, links that use currentColor and native controls are drawn for the band. Explicit colours on content inside are left alone.
• With an id, scroll-margin-block-start takes the header offset token, so a jump to the section stops below a sticky header of that height. It does not cover focus moving to a control inside the section; html { scroll-padding-top } does.
• Layout uses logical properties throughout and mirrors under dir="rtl".

Known limitations

• Links inside a band are the consumer's markup: in the inverse and accent tones, make inline links distinguishable by more than colour (an underline) and give focus rings a colour that clears 3:1 against the band, such as var(--section-tone-ink).
• Contrast figures cover the shipped palettes only; re-check any retoned token.

Integration

• Presentational
• Works without client-side JavaScript
• Server-side rendering supported

Dependencies

No additional runtime packages beyond Svelte and Tailwind CSS

License

MIT. Default license approval is pending; see the license status before adopting the source.

Version history

• 1.0.0 (Published) Current release · 30 September 2026

Only the current release is available. Keep downloaded source and its receipt if you need to use it again later.