diff --git a/.specs/frame-box.md b/.specs/frame-box.md
new file mode 100644
index 000000000..204d3a3f2
--- /dev/null
+++ b/.specs/frame-box.md
@@ -0,0 +1,150 @@
+---
+name: frame-box
+category: layout
+structure: monolithic
+status: approved
+spec_version: 1
+checksum: 05c784a5f4f1bc876b5bbe5794d8946d7dc8e50b5842a37c64b0019d67ceed3a
+style_seam: true
+created: 2026-08-11
+last_updated: 2026-08-12
+---
+
+# Frame Box — Component Spec
+
+## Purpose
+
+The registration frame: a hairline box with a small square set inside each corner and an optional linear hatch texture behind its content. Every side and every corner is addressable on its own, so frames stack and abut without doubling a rule or a mark. It is the container every framed page section is built from — a section title, the gap between two sections, a cell of a divider grid — so a page's rules and corner marks come from one component instead of from per-screen borders.
+
+## When to use
+
+- Wrapping a page section, band, or grid cell that should read as a framed module.
+- Building a page whose vertical rhythm is drawn by rules rather than by margins: stack frames and let `flush` collapse each junction to a single hairline.
+- Adding the corner registration marks (and optionally the hatch texture) to an area that already has its rules drawn by a surrounding grid — set `borders="none"` and keep `marks`.
+
+## When NOT to use
+
+- For a card-shaped surface with padding, a header and a footer → use `card-box` instead.
+- For a single separating line between two blocks → use `divider` instead.
+- For the empty framed band that separates two sections → use `section-gap`, which is this frame configured for that one job.
+
+## Related
+
+- `section-gap` — an empty `frame-box` that holds the air between two sections.
+- `section-title` — a `frame-box` around a centered section header.
+- `card-box` — a padded surface with header/content/footer regions; a card, not a frame.
+- `divider` — one hairline with optional centered label; no corners, no content.
+
+## Best practices
+
+- Stack or abut frames with `flush` so a shared edge reads as one hairline instead of two. It subtracts the named sides from this frame's own set, so it works vertically (`flush`, i.e. `top`) and horizontally (`flush="left"`) with the same mechanic.
+- Use `borders` rather than overriding the border utilities from the call site: `y` for a full-bleed band that keeps only its top and bottom rules, `none` for a cell of a `gap-px` divider grid whose edges are already drawn by the grid's seams.
+- Keep `marks` on: the corner squares are the frame's identity, and they cost nothing when the rules are handed over to a grid. On a shared edge, pair `flush` with the opposite `marks` keyword (`flush` + `marks="bottom"`, `flush="left"` + `marks="right"`) so the junction carries one rule and one mark per corner.
+- Reach for `hatch` sparingly — one hatched frame per view reads as texture; several read as noise.
+
+## Usage
+
+```vue
+<script setup>
+import FrameBox from '@aziontech/webkit/frame-box'
+</script>
+
+<template>
+  <FrameBox hatch>
+    <div class="p-(--spacing-xl) text-center">Framed content</div>
+  </FrameBox>
+</template>
+```
+
+## Props
+
+| Prop | Type | Default | Required | JSDoc |
+|---|---|---|---|---|
+| `borders` | `'all' \| 'none' \| 'x' \| 'y' \| Side \| Side[]` | `'all'` | false | Which of the frame's own rules to draw. Takes a keyword, one side, or a list of sides. |
+| `marks` | `'all' \| 'none' \| Edge \| Corner \| Corner[]` | `'all'` | false | Which corner registration squares to draw. Takes a keyword (`all`, `none`, `top`, `bottom`, `left`, `right`), one corner, or a list of corners. |
+| `hatch` | `boolean` | `false` | false | Show the linear hatch texture behind the content, faded toward the edges. Reserved for `section-gap`, whose identity it is. |
+| `flush` | `boolean \| Side \| Side[]` | `false` | false | Which sides a neighbouring frame already draws, so this one does not draw them again. `true` is shorthand for `top`; use `left` for a horizontal row, or a list for a grid cell. |
+
+## Events
+
+| _none_ | — | — |
+
+## Slots
+
+| Slot | Scope | Notes |
+|---|---|---|
+| `default` | — | Frame content; rendered above the hatch texture and stretched to the frame height. |
+
+## States
+
+- Visual states: `default`
+- `data-borders` carries the RESOLVED, space-separated side list (`flush` already subtracted), or `none`
+- `data-marks` carries the RESOLVED, space-separated corner list, or `none`
+- `data-hatch` present when the hatch texture is drawn
+- `data-flush` carries the space-separated list of sides a neighbour draws; absent when none do
+
+## Motion & Animations
+
+_none_
+
+## Tokens
+
+| Region | Token (DESIGN.md) |
+|---|---|
+| frame rule | `var(--border-default)` |
+| corner mark | `var(--border-default)` |
+| hatch line | `var(--border-default)` |
+| hatch pitch | `var(--spacing-lg)` |
+
+## Theme gaps
+
+<!-- The frame uses the theme's own border tokens with no local override, so it inherits whatever
+     they resolve to. While those tokens are alpha, a rule paints a different colour on every
+     backdrop and the hatch reads faint; `flush` already keeps a shared edge to one rule, so
+     nothing doubles either way. Making them opaque is a theme concern, tracked separately. -->
+
+| Figma variable | Temporary primitive | Follow-up |
+|---|---|---|
+| opaque neutral rule | `var(--border-default)` / `var(--border-muted)` as they resolve today | The neutral border tokens are semi-transparent, so a frame rule has no fixed identity — it paints one colour on `--bg-canvas` and a brighter one on `--bg-surface-overlay` — and the hatch inherits that faintness. Making both opaque steps of the surface palette is [#889](https://github.com/aziontech/webkit/pull/889); the frame needs no change when it lands. |
+
+## Accessibility (WCAG 2.1 AA)
+
+- Visible focus: not applicable — the frame is a container and holds no interactive surface of its own; focusable content composed into it keeps its own `focus-visible:ring-2 focus-visible:ring-(--ring-color)` ring.
+- Keyboard map: none — the frame is not focusable and traps nothing; `Tab` order is decided entirely by the slotted content.
+- ARIA: the hatch texture and the four corner squares are decorative and carry `aria-hidden="true"`; the root adds no role, so the slotted content's semantics reach the accessibility tree unchanged.
+- Contrast ≥4.5:1 (text) / ≥3:1 (large + icons) — the rules and marks are non-informational decoration, and the slotted content owns its own contrast.
+- `motion-reduce:transition-none motion-reduce:transform-none` — not applicable, the component is static.
+- Touch target ≥40×40 px — not applicable, no interactive control.
+
+## Stories (Storybook)
+
+- Default
+- Borders — composite story rendering every `borders` value side-by-side (justified: the difference between `all`/`x`/`y`/`none` is only legible when the four are compared in one frame)
+- Marks — composite story rendering the `marks` keywords, a single corner and an explicit list side-by-side (justified: which corners are drawn is the axis a stack depends on, and the forms are only readable in comparison)
+- Hatch — the `hatch` texture on (mutually-exclusive boolean state of the `hatch` prop)
+- Flush — a vertical stack and a horizontal row, each with the second frame flushed against the first (justified: a shared edge is invisible on a single frame, and the story is what proves `flush` works on both axes)
+
+## Constraints — DO NOT
+
+<!-- This block is injected VERBATIM into every sub-agent prompt.
+     spec-validator rejects the spec if this block is missing or shorter than the template. -->
+
+- Do not add props beyond the Props table above. If you need a prop that is not listed, emit `BLOCKED: missing prop <name>` and stop — do not invent.
+- Do not add events beyond the Events table above. Same rule for slots and sub-components.
+- Do not invent imports. Every `@aziontech/webkit/*` path must exist in `packages/webkit/package.json#exports`. Every relative import must resolve to a real file. Every npm package must be installed.
+- Do not use HEX/RGB/HSL colors, Tailwind palette names (e.g. `bg-blue-500`), raw typography classes (e.g. `text-sm`), `any`, `@ts-ignore`, or `class` inside `defineProps`.
+- Do not install or import positioning/animation libraries (`@floating-ui/*`, `popper.js`, `tippy.js`, `gsap`, `framer-motion`, `motion`, `@vueuse/motion`, `@formkit/auto-animate`, drag-drop runtimes, scroll virtualization libs). Use CSS + Vue primitives (`<Teleport>`, `<Transition>`). See `.claude/rules/dependencies.md`.
+- Do not improvise animations. Every `animate-*` / `transition-*` class must come from `packages/theme/src/tokens/semantic/animations.js`; every motion-bearing class pairs with `motion-reduce:*` on the same class string; no component-local `@keyframes`.
+- Do not create class presets in JavaScript (`const kindClasses = {...}`, `const sharedClasses = [...]`, `const sizeClasses = {...}`, `const rootClasses = computed(...)`). Variants live on `data-*` attributes consumed by Tailwind `data-[attr=value]:`. All utilities live inline on the root element's `class` attribute. No `<style>` block, no component-local `.css`/`.scss`. See `.claude/rules/styling.md`.
+- Do not inherit artifacts as-is from another design system, Figma file, library, or pre-existing `CONTRACT.md` / `README.md`. Rewrite to our conventions. See `.claude/rules/migration.md`.
+- Do not add Figma references to Storybook stories. No `parameters.design`, no `parameters.figma`, no Figma URLs in `docs.description.*`, no `@storybook/addon-designs` import. The Figma link is owned by `<name>.figma.ts` (Code Connect). See `.claude/docs/COMPONENT_REQUIREMENTS.md`.
+- Do not use `parameters.actions.argTypesRegex` (deprecated in Storybook 8 and silently misroutes Vue 3 emits) or `parameters.actions.handles` (DOM-only). Declare every event explicitly in `argTypes` with a camelCase `on<Event>` key and `{ action: '<emitted-name>' }`. Do not use the legacy CSF2 `Name.args = {...}` form — always object-style CSF3.
+- Do not add bespoke Storybook stories beyond Default + Types + Sizes + state stories (`Loading`, `Disabled`) for the props the component actually declares, unless the spec's "Stories (Storybook)" section explicitly justifies the addition. Do not split Types/Sizes into one-story-per-variant — the composite stories are the canonical pattern.
+- Do not duplicate the `## Usage` block from the spec inside the Storybook story body. The block is injected once into `parameters.docs.description.component` by the storybook-write skill; copy it nowhere else.
+- Do not edit `.claude/docs/DESIGN.md`, `.claude/docs/COMPONENT_REQUIREMENTS.md`, or `.claude/docs/PRIMEVUE_ABSTRACTION.md`.
+- Do not edit the root `package.json` or `.github/workflows/*`.
+- Do not export composition sub-components without attaching them to the root compound (`index.ts` via `Object.assign`; vue-tsc generates `index.d.ts` — never hand-write it); the root export points at `index.ts`, and a standalone `./<name>-root` export points at the root `.vue` (tree-shaking). Do not invent overlay part names (`Trigger` / `Content`) on a component with no `data-state=open|closed`, and do not collapse a slot-shaped concern into a config-array prop. See `.claude/rules/compound-api.md`.
+- Do not change `structure` after `status: approved`. To change structure, bump `spec_version` and re-author the spec.
+- Do not create files outside the paths declared by your task (the orchestrator tells you exactly which files to write).
+- Do not run `git` commands, `pnpm install`, or any command that changes the lockfile.
+- If anything in the spec is ambiguous or contradicts the rules, emit `BLOCKED: <one-sentence reason>` and write nothing.
diff --git a/.specs/hero-title.md b/.specs/hero-title.md
new file mode 100644
index 000000000..f3f135bb7
--- /dev/null
+++ b/.specs/hero-title.md
@@ -0,0 +1,156 @@
+---
+name: hero-title
+category: content
+structure: monolithic
+status: approved
+spec_version: 1
+checksum: 2bf7588d5512270821d350b648f33dcd7e8ec6a53df6946bf04d21e7a94ab3b7
+created: 2026-08-11
+last_updated: 2026-08-11
+---
+
+# Hero Title — Component Spec
+
+## Purpose
+
+The copy block of a hero band: an optional overline, the page's `h1` (with an optional opening phrase painted in the brand accent), a description and a row of leading calls to action, at hero scale. It is the hero counterpart of `section-title` and is meant to sit above a hero backdrop rather than to draw a frame of its own.
+
+## When to use
+
+- As the leading copy of a landing or marketing page, inside the hero band's container.
+- Whenever a page needs one accented statement, one supporting sentence and up to a couple of primary CTAs.
+
+## When NOT to use
+
+- For a section header further down the page → use `section-title`, which renders an `h2` inside a frame.
+- For the top bar of an application shell → use `global-header` instead.
+- For a bordered, centered band with no `h1` → use `frame-box` instead.
+
+## Related
+
+- `section-title` — the same anatomy at section scale, framed and centered, rendering an `h2`.
+- `overline` — the eyebrow treatment above the headline.
+- `frame-box` — the frame a hero band is usually built from.
+
+## Best practices
+
+- Use exactly one `hero-title` per page — it owns the `h1`, and a second one breaks the document outline.
+- Keep `highlight` to the opening phrase of the headline: it is part of the same sentence and the same accessible name, only painted differently.
+- Leave the block left-aligned (the default) when the backdrop is weighted to one side; `centered` is for a symmetric backdrop or a single statement.
+- Put the CTAs in the `actions` slot — it stacks them full-width below `sm`, which is what makes a hero button a comfortable thumb target.
+
+## Usage
+
+```vue
+<script setup>
+import HeroTitle from '@aziontech/webkit/hero-title'
+import Button from '@aziontech/webkit/button'
+</script>
+
+<template>
+  <HeroTitle
+    eyebrow="Edge platform"
+    highlight="Build anything."
+    title="Run it everywhere."
+    description="Ship applications, security and observability from one platform."
+  >
+    <template #actions>
+      <Button label="Start for free" />
+      <Button
+        kind="outlined"
+        label="Talk to sales"
+      />
+    </template>
+  </HeroTitle>
+</template>
+```
+
+## Props
+
+| Prop | Type | Default | Required | JSDoc |
+|---|---|---|---|---|
+| `title` | `string` | `—` | true | Headline of the page, rendered as the page's `h1`. |
+| `highlight` | `string` | `''` | false | Opening phrase of the headline, painted in the brand accent; reads as one sentence with `title`. |
+| `description` | `string` | `''` | false | Supporting sentence under the headline; overridden by the default slot. |
+| `eyebrow` | `string` | `''` | false | Short uppercase overline rendered above the headline. |
+| `centered` | `boolean` | `false` | false | Center the whole block — copy, headline and actions — instead of aligning it to the start. |
+
+## Events
+
+| _none_ | — | — |
+
+## Slots
+
+| Slot | Scope | Notes |
+|---|---|---|
+| `default` | — | Description body; replaces the `description` prop when provided. |
+| `actions` | — | Leading call-to-action row under the copy. |
+
+## States
+
+- Visual states: `default`
+- `data-centered` present when the block is centered
+
+## Motion & Animations
+
+_none_
+
+## Tokens
+
+| Region | Token (DESIGN.md) |
+|---|---|
+| typography (headline) | `.text-heading-2xl` |
+| typography (description) | `.text-body-lg` |
+| headline text | `var(--text-default)` |
+| description text | `var(--text-muted)` |
+| highlight accent | `var(--primary)` |
+| spacing (stack) | `var(--spacing-md)` |
+| headline max width | `var(--container-4xl)` |
+| description max width | `var(--container-2xl)` |
+
+## Theme gaps
+
+| Figma variable | Temporary primitive | Follow-up |
+|---|---|---|
+| highlight gradient stops | `var(--color-orange-400)` / `var(--color-orange-600)` (primitives) | TODO: tokenize a semantic `--primary-gradient-from` / `--primary-gradient-to` pair so the accent phrase stops referencing palette primitives. |
+
+## Accessibility (WCAG 2.1 AA)
+
+- Visible focus: not applicable to the copy block; controls composed into the `actions` slot keep their own `focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)` ring.
+- Keyboard map: none of its own — `Tab` reaches only the controls placed in the `actions` slot, in DOM order.
+- ARIA: the headline is a real `h1` and `highlight` is a `span` inside it, so the accessible name is the full sentence; no `role` and no `aria-label` are added.
+- Contrast ≥4.5:1 (text) / ≥3:1 (large + icons): headline on `var(--text-default)`, description on `var(--text-muted)`; the accent phrase is large text over the page canvas and stays ≥3:1.
+- `motion-reduce:transition-none motion-reduce:transform-none` — not applicable, the component is static.
+- Touch target ≥40×40 px — the `actions` row stretches its children to full width below `sm`, so slotted buttons keep their own target size.
+
+## Stories (Storybook)
+
+- Default
+- Highlight — the accented opening phrase (justified: the gradient-painted `highlight` is the component's signature treatment and is absent from the default args)
+- Centered — the `centered` layout (mutually-exclusive boolean state of the `centered` prop)
+- WithActions — a CTA row under the copy (justified: the slot owns its own responsive layout, which no prop-driven story shows)
+
+## Constraints — DO NOT
+
+<!-- This block is injected VERBATIM into every sub-agent prompt.
+     spec-validator rejects the spec if this block is missing or shorter than the template. -->
+
+- Do not add props beyond the Props table above. If you need a prop that is not listed, emit `BLOCKED: missing prop <name>` and stop — do not invent.
+- Do not add events beyond the Events table above. Same rule for slots and sub-components.
+- Do not invent imports. Every `@aziontech/webkit/*` path must exist in `packages/webkit/package.json#exports`. Every relative import must resolve to a real file. Every npm package must be installed.
+- Do not use HEX/RGB/HSL colors, Tailwind palette names (e.g. `bg-blue-500`), raw typography classes (e.g. `text-sm`), `any`, `@ts-ignore`, or `class` inside `defineProps`.
+- Do not install or import positioning/animation libraries (`@floating-ui/*`, `popper.js`, `tippy.js`, `gsap`, `framer-motion`, `motion`, `@vueuse/motion`, `@formkit/auto-animate`, drag-drop runtimes, scroll virtualization libs). Use CSS + Vue primitives (`<Teleport>`, `<Transition>`). See `.claude/rules/dependencies.md`.
+- Do not improvise animations. Every `animate-*` / `transition-*` class must come from `packages/theme/src/tokens/semantic/animations.js`; every motion-bearing class pairs with `motion-reduce:*` on the same class string; no component-local `@keyframes`.
+- Do not create class presets in JavaScript (`const kindClasses = {...}`, `const sharedClasses = [...]`, `const sizeClasses = {...}`, `const rootClasses = computed(...)`). Variants live on `data-*` attributes consumed by Tailwind `data-[attr=value]:`. All utilities live inline on the root element's `class` attribute. No `<style>` block, no component-local `.css`/`.scss`. See `.claude/rules/styling.md`.
+- Do not inherit artifacts as-is from another design system, Figma file, library, or pre-existing `CONTRACT.md` / `README.md`. Rewrite to our conventions. See `.claude/rules/migration.md`.
+- Do not add Figma references to Storybook stories. No `parameters.design`, no `parameters.figma`, no Figma URLs in `docs.description.*`, no `@storybook/addon-designs` import. The Figma link is owned by `<name>.figma.ts` (Code Connect). See `.claude/docs/COMPONENT_REQUIREMENTS.md`.
+- Do not use `parameters.actions.argTypesRegex` (deprecated in Storybook 8 and silently misroutes Vue 3 emits) or `parameters.actions.handles` (DOM-only). Declare every event explicitly in `argTypes` with a camelCase `on<Event>` key and `{ action: '<emitted-name>' }`. Do not use the legacy CSF2 `Name.args = {...}` form — always object-style CSF3.
+- Do not add bespoke Storybook stories beyond Default + Types + Sizes + state stories (`Loading`, `Disabled`) for the props the component actually declares, unless the spec's "Stories (Storybook)" section explicitly justifies the addition. Do not split Types/Sizes into one-story-per-variant — the composite stories are the canonical pattern.
+- Do not duplicate the `## Usage` block from the spec inside the Storybook story body. The block is injected once into `parameters.docs.description.component` by the storybook-write skill; copy it nowhere else.
+- Do not edit `.claude/docs/DESIGN.md`, `.claude/docs/COMPONENT_REQUIREMENTS.md`, or `.claude/docs/PRIMEVUE_ABSTRACTION.md`.
+- Do not edit the root `package.json` or `.github/workflows/*`.
+- Do not export composition sub-components without attaching them to the root compound (`index.ts` via `Object.assign`; vue-tsc generates `index.d.ts` — never hand-write it); the root export points at `index.ts`, and a standalone `./<name>-root` export points at the root `.vue` (tree-shaking). Do not invent overlay part names (`Trigger` / `Content`) on a component with no `data-state=open|closed`, and do not collapse a slot-shaped concern into a config-array prop. See `.claude/rules/compound-api.md`.
+- Do not change `structure` after `status: approved`. To change structure, bump `spec_version` and re-author the spec.
+- Do not create files outside the paths declared by your task (the orchestrator tells you exactly which files to write).
+- Do not run `git` commands, `pnpm install`, or any command that changes the lockfile.
+- If anything in the spec is ambiguous or contradicts the rules, emit `BLOCKED: <one-sentence reason>` and write nothing.
diff --git a/.specs/section-gap.md b/.specs/section-gap.md
new file mode 100644
index 000000000..25140d209
--- /dev/null
+++ b/.specs/section-gap.md
@@ -0,0 +1,145 @@
+---
+name: section-gap
+category: layout
+structure: monolithic
+status: approved
+spec_version: 3
+checksum: 3a29d07981a70d43fb124c6743d21c4bae6585baa1fedd8036cfd4249c16dfb7
+figma:
+  url: https://www.figma.com/design/QEbHSTFDWfh4VHkBp6NWN3/Azion.com?node-id=8869-10008
+  node_id: 8869:10008
+created: 2026-08-11
+last_updated: 2026-08-12
+---
+
+# Section Gap — Component Spec
+
+## Purpose
+
+The empty registration frame that divides two page sections. On a page with no margins between sections, this frame *is* the gap: it holds the vertical air, and its own two rules are what separate the sections it sits between — which is why it is a frame and not a spacer `div`. `size` picks how much air, on a three-step scale built from the theme's own spacing tokens.
+
+## When to use
+
+- Between two stacked page sections on a full-bleed, framed layout.
+- Wherever a page needs breathing room that still reads as part of the frame instead of as empty margin.
+- To change the weight of one break without touching its neighbours — a `large` gap before a new part of the page, `small` between two bands that belong together.
+
+## When NOT to use
+
+- To space two elements inside a section → use the layout's own `gap-(--spacing-*)` utility.
+- To draw a single separating line with no air → use `divider` instead.
+- When the gap must hold content (a headline, a CTA) → use `section-title`, or a `frame-box` you fill yourself.
+
+## Related
+
+- `frame-box` — the frame this component configures; reach for it directly when the gap needs content or different rules.
+- `section-title` — the framed header that usually follows a gap; it owns no vertical air of its own beyond its padding, so the gaps around it are what set the page's rhythm.
+- `divider` — a hairline with no vertical air.
+
+## Best practices
+
+- Pick the step by what the break means, not by how the page happens to look: `medium` is the ordinary break between sections, `large` opens a new part of the page, `small` keeps two related bands close.
+- Do not override the height from the call site. The steps are multiples of `--spacing-xxl`, so they already scale with the viewport; a hand-set height freezes one break out of the page rhythm.
+- Keep one step per break — stacking two gaps to reach a bigger one draws an extra pair of rules.
+- Let it carry the shared rule: it renders `flush` and `marks="bottom"`, so its top rule and top ticks are subtracted and the section above supplies them instead of doubling them.
+- Reach for `hatch` here rather than on a section header: the gap is the one band with no copy of its own, so the texture gives the break identity without sitting behind a headline.
+- Do not wrap it in a padded container; the gap is the padding.
+
+## Usage
+
+```vue
+<script setup>
+import SectionGap from '@aziontech/webkit/section-gap'
+</script>
+
+<template>
+  <SectionGap size="large" />
+</template>
+```
+
+## Props
+
+| Prop | Type | Default | Required | JSDoc |
+|---|---|---|---|---|
+| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | false | How much vertical air the gap holds, as a multiple of `--spacing-xxl`: `small` is 1× (keeps two related bands close), `medium` 2× (the ordinary break), `large` 3× (opens a new part of the page). The token is responsive, so every step scales with the viewport. |
+| `hatch` | `boolean` | `false` | false | Draw the frame's linear hatch texture in the gap. |
+
+## Events
+
+| _none_ | — | — |
+
+## Slots
+
+| _none_ | — | — |
+
+## States
+
+- Visual states: `default`
+- `data-size` mirrors the `size` prop: `small` | `medium` | `large`
+- `data-hatch` present when the hatch texture is drawn
+
+## Motion & Animations
+
+_none_
+
+## Tokens
+
+| Region | Token (DESIGN.md) |
+|---|---|
+| frame rule | `var(--border-default)` |
+| corner mark | `var(--border-default)` |
+| hatch line | `var(--border-default)` |
+| height (small) | `var(--spacing-xxl)` — 1× |
+| height (medium) | `var(--spacing-xxl)` — 2× |
+| height (large) | `var(--spacing-xxl)` — 3× |
+
+## Theme gaps
+
+<!-- No new token group: the steps are multiples of `--spacing-xxl`, the largest step of the
+     existing semantic scale in `packages/theme/src/tokens/semantic/spacings.data.js`. That
+     token is already responsive (2rem / 4rem / 6rem across breakpoints), so the gap inherits
+     the responsiveness instead of declaring a scale of its own. -->
+
+| Figma variable | Temporary primitive | Follow-up |
+|---|---|---|
+| `--spacing-spacer-spacer-{sm,md,lg,xl}` (80 / 128 / 160 / 240) | `var(--spacing-xxl)` × 1 / 2 / 3 | The Figma spacer family is deliberately **not** ported as its own token group: the theme's existing spacing scale already carries the page's rhythm, and a second family would be a parallel source of truth for the same decision. The multiples land on the Figma weights in the middle of the responsive range (64/128/192 at `sm`) and scale past them on a wide screen. Revisit only if the design needs a step the existing scale cannot express. |
+
+## Accessibility (WCAG 2.1 AA)
+
+- Visible focus: not applicable — the gap holds no content and no interactive surface.
+- Keyboard map: none — the gap is not focusable and is skipped by `Tab`.
+- ARIA: no role and no accessible name; the frame's rules and corner marks are decoration inherited from `frame-box`, which marks them `aria-hidden="true"`.
+- Contrast ≥4.5:1 (text) / ≥3:1 (large + icons) — no text; the rules are non-informational decoration.
+- `motion-reduce:transition-none motion-reduce:transform-none` — not applicable, the component is static.
+- Touch target ≥40×40 px — not applicable, no interactive control.
+
+## Stories (Storybook)
+
+- Default — one gap between two stub sections, so the shared rules and the vertical air are both visible (justified: an empty frame rendered alone shows nothing; the neighbours are what the story is about)
+- Sizes — composite story rendering every `size` value between stub sections
+- Hatch — the `hatch` texture on (mutually-exclusive boolean state of the `hatch` prop)
+
+## Constraints — DO NOT
+
+<!-- This block is injected VERBATIM into every sub-agent prompt.
+     spec-validator rejects the spec if this block is missing or shorter than the template. -->
+
+- Do not add props beyond the Props table above. If you need a prop that is not listed, emit `BLOCKED: missing prop <name>` and stop — do not invent.
+- Do not add events beyond the Events table above. Same rule for slots and sub-components.
+- Do not invent imports. Every `@aziontech/webkit/*` path must exist in `packages/webkit/package.json#exports`. Every relative import must resolve to a real file. Every npm package must be installed.
+- Do not use HEX/RGB/HSL colors, Tailwind palette names (e.g. `bg-blue-500`), raw typography classes (e.g. `text-sm`), `any`, `@ts-ignore`, or `class` inside `defineProps`.
+- Do not install or import positioning/animation libraries (`@floating-ui/*`, `popper.js`, `tippy.js`, `gsap`, `framer-motion`, `motion`, `@vueuse/motion`, `@formkit/auto-animate`, drag-drop runtimes, scroll virtualization libs). Use CSS + Vue primitives (`<Teleport>`, `<Transition>`). See `.claude/rules/dependencies.md`.
+- Do not improvise animations. Every `animate-*` / `transition-*` class must come from `packages/theme/src/tokens/semantic/animations.js`; every motion-bearing class pairs with `motion-reduce:*` on the same class string; no component-local `@keyframes`.
+- Do not create class presets in JavaScript (`const kindClasses = {...}`, `const sharedClasses = [...]`, `const sizeClasses = {...}`, `const rootClasses = computed(...)`). Variants live on `data-*` attributes consumed by Tailwind `data-[attr=value]:`. All utilities live inline on the root element's `class` attribute. No `<style>` block, no component-local `.css`/`.scss`. See `.claude/rules/styling.md`.
+- Do not inherit artifacts as-is from another design system, Figma file, library, or pre-existing `CONTRACT.md` / `README.md`. Rewrite to our conventions. See `.claude/rules/migration.md`.
+- Do not add Figma references to Storybook stories. No `parameters.design`, no `parameters.figma`, no Figma URLs in `docs.description.*`, no `@storybook/addon-designs` import. The Figma link is owned by `<name>.figma.ts` (Code Connect). See `.claude/docs/COMPONENT_REQUIREMENTS.md`.
+- Do not use `parameters.actions.argTypesRegex` (deprecated in Storybook 8 and silently misroutes Vue 3 emits) or `parameters.actions.handles` (DOM-only). Declare every event explicitly in `argTypes` with a camelCase `on<Event>` key and `{ action: '<emitted-name>' }`. Do not use the legacy CSF2 `Name.args = {...}` form — always object-style CSF3.
+- Do not add bespoke Storybook stories beyond Default + Types + Sizes + state stories (`Loading`, `Disabled`) for the props the component actually declares, unless the spec's "Stories (Storybook)" section explicitly justifies the addition. Do not split Types/Sizes into one-story-per-variant — the composite stories are the canonical pattern.
+- Do not duplicate the `## Usage` block from the spec inside the Storybook story body. The block is injected once into `parameters.docs.description.component` by the storybook-write skill; copy it nowhere else.
+- Do not edit `.claude/docs/DESIGN.md`, `.claude/docs/COMPONENT_REQUIREMENTS.md`, or `.claude/docs/PRIMEVUE_ABSTRACTION.md`.
+- Do not edit the root `package.json` or `.github/workflows/*`.
+- Do not export composition sub-components without attaching them to the root compound (`index.ts` via `Object.assign`; vue-tsc generates `index.d.ts` — never hand-write it); the root export points at `index.ts`, and a standalone `./<name>-root` export points at the root `.vue` (tree-shaking). Do not invent overlay part names (`Trigger` / `Content`) on a component with no `data-state=open|closed`, and do not collapse a slot-shaped concern into a config-array prop. See `.claude/rules/compound-api.md`.
+- Do not change `structure` after `status: approved`. To change structure, bump `spec_version` and re-author the spec.
+- Do not create files outside the paths declared by your task (the orchestrator tells you exactly which files to write).
+- Do not run `git` commands, `pnpm install`, or any command that changes the lockfile.
+- If anything in the spec is ambiguous or contradicts the rules, emit `BLOCKED: <one-sentence reason>` and write nothing.
diff --git a/.specs/section-title.md b/.specs/section-title.md
new file mode 100644
index 000000000..3d6189a2f
--- /dev/null
+++ b/.specs/section-title.md
@@ -0,0 +1,157 @@
+---
+name: section-title
+category: content
+structure: monolithic
+status: approved
+spec_version: 2
+checksum: 3a4b15c27d3dda6af9bda55a10bb9e9db13df6865900f9ef805ae97589696e55
+figma:
+  url: https://www.figma.com/design/QEbHSTFDWfh4VHkBp6NWN3/Azion.com?node-id=7495-24338
+  node_id: 7495:24338
+created: 2026-08-11
+last_updated: 2026-08-11
+---
+
+# Section Title — Component Spec
+
+## Purpose
+
+The framed header row that opens a page section: an optional overline, the section's `h2`, an optional description and an optional row of actions, held inside a registration frame whose bottom rule is what divides the header from the section body. `kind` picks the layout — `centered` for a symmetric opener, `left` for a reading-order one, and `horizontal` for a wide row that sets the headline against its description.
+
+## When to use
+
+- Opening a marketing or landing page section that needs a framed header.
+- Whenever the header itself should carry the rule that separates it from the content below, with no extra margin.
+- For a wide band whose headline and supporting sentence should sit side by side rather than stacked — `kind="horizontal"`.
+
+## When NOT to use
+
+- For the page's leading band and its `h1` → use `hero-title` instead.
+- For the top bar of an application shell → use `global-header` instead.
+- For a plain framed container with arbitrary content → use `frame-box` instead.
+
+## Related
+
+- `hero-title` — the hero counterpart; renders the page's `h1` at hero scale.
+- `frame-box` — the frame this component composes.
+- `section-gap` — the empty frame that sets the air before and after a section header; this component holds no vertical air of its own beyond its padding.
+- `overline` — the eyebrow treatment rendered above the headline.
+
+## Best practices
+
+- Keep one `section-title` per section, and let it own the section's `h2` so the page keeps one document outline.
+- Write the eyebrow as one or two words: it is set uppercase and prefixed with `//`, so a sentence in it reads as noise.
+- Reach for `horizontal` when the description is long enough to earn its own column — on a narrow viewport it stacks back under the headline.
+- Put the section's CTAs in the `actions` slot rather than in the body; the slot already stacks them fluid below `sm` and aligns them with the chosen `kind` above it.
+- The vertical rhythm around the header belongs to the `section-gap` frames on either side, not to this component.
+
+## Usage
+
+```vue
+<script setup>
+import SectionTitle from '@aziontech/webkit/section-title'
+import Button from '@aziontech/webkit/button'
+</script>
+
+<template>
+  <SectionTitle
+    eyebrow="Platform"
+    title="Everything runs at the edge"
+    description="One platform for applications, security and observability."
+  >
+    <template #actions>
+      <Button label="Start building" />
+    </template>
+  </SectionTitle>
+</template>
+```
+
+## Props
+
+| Prop | Type | Default | Required | JSDoc |
+|---|---|---|---|---|
+| `title` | `string` | `—` | true | Headline of the section, rendered as the section's `h2`. |
+| `description` | `string` | `''` | false | Supporting sentence under the headline; overridden by the default slot. |
+| `eyebrow` | `string` | `''` | false | Short uppercase overline rendered above the headline. |
+| `kind` | `'centered' \| 'left' \| 'horizontal'` | `'centered'` | false | Layout of the header: `centered` stacks and centers the copy, `left` stacks it at the start edge, `horizontal` sets the headline and its description in two columns. |
+
+## Events
+
+| _none_ | — | — |
+
+## Slots
+
+| Slot | Scope | Notes |
+|---|---|---|
+| `default` | — | Description body; replaces the `description` prop when provided. |
+| `actions` | — | Call-to-action row under the copy, aligned with the chosen `kind`. |
+
+## States
+
+- Visual states: `default`
+- `data-kind` mirrors the `kind` prop: `centered` | `left` | `horizontal`
+
+## Motion & Animations
+
+_none_
+
+## Tokens
+
+| Region | Token (DESIGN.md) |
+|---|---|
+| typography (headline) | `.text-heading-xl` |
+| typography (description) | `.text-heading-sm` |
+| headline text | `var(--text-default)` |
+| description text | `var(--text-muted)` |
+| spacing (copy stack) | `var(--spacing-lg)` |
+| spacing (copy → actions) | `var(--spacing-xl)` |
+| spacing (actions gap) | `var(--spacing-md)` |
+| spacing (padding) | `var(--spacing-xl)` / `var(--spacing-xxl)` |
+| copy max width | `var(--container-2xl)` |
+
+## Theme gaps
+
+| Figma variable | Temporary primitive | Follow-up |
+|---|---|---|
+| `spacing/elements/gap-elements-base` (48) | `var(--spacing-xl)` | The theme's named spacing scale has no 48px step of its own; `--spacing-xl` resolves to 3rem at the large breakpoint. TODO: confirm whether the theme should carry the Figma element-gap family. |
+| `sizing/max-width/max-w-3xl` (768) | `var(--container-2xl)` (752) | Closest step on the theme's own container scale; no follow-up expected. |
+
+## Accessibility (WCAG 2.1 AA)
+
+- Visible focus: not applicable to the header itself; controls composed into the `actions` slot keep their own `focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)` ring.
+- Keyboard map: none of its own — `Tab` reaches only the controls placed in the `actions` slot, in DOM order.
+- ARIA: the headline is a real `h2` (the page's `h1` belongs to `hero-title`), so no `role` or `aria-label` is added; the frame's rules and corner marks stay `aria-hidden="true"`. In `horizontal` the headline precedes its description in DOM order, so the reading order matches the visual one.
+- Contrast ≥4.5:1 (text) / ≥3:1 (large + icons): headline on `var(--text-default)`, description on `var(--text-muted)`, both over the page canvas.
+- `motion-reduce:transition-none motion-reduce:transform-none` — not applicable, the component is static.
+- Touch target ≥40×40 px — the `actions` row stretches its children to full width below `sm`, so slotted buttons keep their own target size.
+
+## Stories (Storybook)
+
+- Default
+- Kinds — composite story rendering every `kind` value stacked, so the three layouts can be compared (justified: `kind` is the component's only enum axis and the difference is structural)
+- WithActions — an `actions` row under the description (justified: the slot owns its own responsive layout, which no prop-driven story shows)
+
+## Constraints — DO NOT
+
+<!-- This block is injected VERBATIM into every sub-agent prompt.
+     spec-validator rejects the spec if this block is missing or shorter than the template. -->
+
+- Do not add props beyond the Props table above. If you need a prop that is not listed, emit `BLOCKED: missing prop <name>` and stop — do not invent.
+- Do not add events beyond the Events table above. Same rule for slots and sub-components.
+- Do not invent imports. Every `@aziontech/webkit/*` path must exist in `packages/webkit/package.json#exports`. Every relative import must resolve to a real file. Every npm package must be installed.
+- Do not use HEX/RGB/HSL colors, Tailwind palette names (e.g. `bg-blue-500`), raw typography classes (e.g. `text-sm`), `any`, `@ts-ignore`, or `class` inside `defineProps`.
+- Do not install or import positioning/animation libraries (`@floating-ui/*`, `popper.js`, `tippy.js`, `gsap`, `framer-motion`, `motion`, `@vueuse/motion`, `@formkit/auto-animate`, drag-drop runtimes, scroll virtualization libs). Use CSS + Vue primitives (`<Teleport>`, `<Transition>`). See `.claude/rules/dependencies.md`.
+- Do not improvise animations. Every `animate-*` / `transition-*` class must come from `packages/theme/src/tokens/semantic/animations.js`; every motion-bearing class pairs with `motion-reduce:*` on the same class string; no component-local `@keyframes`.
+- Do not create class presets in JavaScript (`const kindClasses = {...}`, `const sharedClasses = [...]`, `const sizeClasses = {...}`, `const rootClasses = computed(...)`). Variants live on `data-*` attributes consumed by Tailwind `data-[attr=value]:`. All utilities live inline on the root element's `class` attribute. No `<style>` block, no component-local `.css`/`.scss`. See `.claude/rules/styling.md`.
+- Do not inherit artifacts as-is from another design system, Figma file, library, or pre-existing `CONTRACT.md` / `README.md`. Rewrite to our conventions. See `.claude/rules/migration.md`.
+- Do not add Figma references to Storybook stories. No `parameters.design`, no `parameters.figma`, no Figma URLs in `docs.description.*`, no `@storybook/addon-designs` import. The Figma link is owned by `<name>.figma.ts` (Code Connect). See `.claude/docs/COMPONENT_REQUIREMENTS.md`.
+- Do not use `parameters.actions.argTypesRegex` (deprecated in Storybook 8 and silently misroutes Vue 3 emits) or `parameters.actions.handles` (DOM-only). Declare every event explicitly in `argTypes` with a camelCase `on<Event>` key and `{ action: '<emitted-name>' }`. Do not use the legacy CSF2 `Name.args = {...}` form — always object-style CSF3.
+- Do not add bespoke Storybook stories beyond Default + Types + Sizes + state stories (`Loading`, `Disabled`) for the props the component actually declares, unless the spec's "Stories (Storybook)" section explicitly justifies the addition. Do not split Types/Sizes into one-story-per-variant — the composite stories are the canonical pattern.
+- Do not duplicate the `## Usage` block from the spec inside the Storybook story body. The block is injected once into `parameters.docs.description.component` by the storybook-write skill; copy it nowhere else.
+- Do not edit `.claude/docs/DESIGN.md`, `.claude/docs/COMPONENT_REQUIREMENTS.md`, or `.claude/docs/PRIMEVUE_ABSTRACTION.md`.
+- Do not edit the root `package.json` or `.github/workflows/*`.
+- Do not export composition sub-components without attaching them to the root compound (`index.ts` via `Object.assign`; vue-tsc generates `index.d.ts` — never hand-write it); the root export points at `index.ts`, and a standalone `./<name>-root` export points at the root `.vue` (tree-shaking). Do not invent overlay part names (`Trigger` / `Content`) on a component with no `data-state=open|closed`, and do not collapse a slot-shaped concern into a config-array prop. See `.claude/rules/compound-api.md`.
+- Do not change `structure` after `status: approved`. To change structure, bump `spec_version` and re-author the spec.
+- Do not create files outside the paths declared by your task (the orchestrator tells you exactly which files to write).
+- Do not run `git` commands, `pnpm install`, or any command that changes the lockfile.
+- If anything in the spec is ambiguous or contradicts the rules, emit `BLOCKED: <one-sentence reason>` and write nothing.
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--centered--dark-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--centered--dark-mobile.png
new file mode 100644
index 000000000..dd17d4bca
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--centered--dark-mobile.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--centered--dark-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--centered--dark-tablet.png
new file mode 100644
index 000000000..826fd9a0a
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--centered--dark-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--centered--light-desktop.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--centered--light-desktop.png
new file mode 100644
index 000000000..297a27d4e
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--centered--light-desktop.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--centered--light-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--centered--light-mobile.png
new file mode 100644
index 000000000..404dc3894
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--centered--light-mobile.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--centered--light-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--centered--light-tablet.png
new file mode 100644
index 000000000..bc73413ca
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--centered--light-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--centered.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--centered.png
new file mode 100644
index 000000000..40ad364ec
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--centered.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--default--dark-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--default--dark-mobile.png
new file mode 100644
index 000000000..a3149c7e5
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--default--dark-mobile.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--default--dark-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--default--dark-tablet.png
new file mode 100644
index 000000000..737f3d8da
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--default--dark-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--default--light-desktop.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--default--light-desktop.png
new file mode 100644
index 000000000..11de6dde5
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--default--light-desktop.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--default--light-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--default--light-mobile.png
new file mode 100644
index 000000000..2909c3c68
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--default--light-mobile.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--default--light-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--default--light-tablet.png
new file mode 100644
index 000000000..b4c47ec08
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--default--light-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--default.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--default.png
new file mode 100644
index 000000000..98f306900
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--default.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--highlight--dark-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--highlight--dark-mobile.png
new file mode 100644
index 000000000..bf8dd8a29
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--highlight--dark-mobile.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--highlight--dark-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--highlight--dark-tablet.png
new file mode 100644
index 000000000..f90e68adb
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--highlight--dark-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--highlight--light-desktop.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--highlight--light-desktop.png
new file mode 100644
index 000000000..bcf3a7860
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--highlight--light-desktop.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--highlight--light-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--highlight--light-mobile.png
new file mode 100644
index 000000000..706cadae5
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--highlight--light-mobile.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--highlight--light-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--highlight--light-tablet.png
new file mode 100644
index 000000000..f1e0d3370
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--highlight--light-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--highlight.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--highlight.png
new file mode 100644
index 000000000..352aef570
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--highlight.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--with-actions--dark-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--with-actions--dark-mobile.png
new file mode 100644
index 000000000..f181b375a
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--with-actions--dark-mobile.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--with-actions--dark-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--with-actions--dark-tablet.png
new file mode 100644
index 000000000..9e02af000
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--with-actions--dark-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--with-actions--light-desktop.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--with-actions--light-desktop.png
new file mode 100644
index 000000000..30f0a9f1d
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--with-actions--light-desktop.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--with-actions--light-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--with-actions--light-mobile.png
new file mode 100644
index 000000000..777db633d
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--with-actions--light-mobile.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--with-actions--light-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--with-actions--light-tablet.png
new file mode 100644
index 000000000..7fb212272
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--with-actions--light-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--with-actions.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--with-actions.png
new file mode 100644
index 000000000..3af5092ef
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-herotitle--with-actions.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-sectiontitle--default--dark-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-sectiontitle--default--dark-mobile.png
new file mode 100644
index 000000000..56d9566dd
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-sectiontitle--default--dark-mobile.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-sectiontitle--default--dark-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-sectiontitle--default--dark-tablet.png
new file mode 100644
index 000000000..7093772dd
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-sectiontitle--default--dark-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-sectiontitle--default--light-desktop.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-sectiontitle--default--light-desktop.png
new file mode 100644
index 000000000..716b67e60
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-sectiontitle--default--light-desktop.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-sectiontitle--default--light-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-sectiontitle--default--light-mobile.png
new file mode 100644
index 000000000..d6967f8fa
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-sectiontitle--default--light-mobile.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-sectiontitle--default--light-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-sectiontitle--default--light-tablet.png
new file mode 100644
index 000000000..bae7059df
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-sectiontitle--default--light-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-sectiontitle--default.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-sectiontitle--default.png
new file mode 100644
index 000000000..b61c2dbae
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-sectiontitle--default.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-sectiontitle--kinds--dark-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-sectiontitle--kinds--dark-mobile.png
new file mode 100644
index 000000000..571cf2a21
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-sectiontitle--kinds--dark-mobile.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-sectiontitle--kinds--dark-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-sectiontitle--kinds--dark-tablet.png
new file mode 100644
index 000000000..a51263a2f
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-sectiontitle--kinds--dark-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-sectiontitle--kinds--light-desktop.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-sectiontitle--kinds--light-desktop.png
new file mode 100644
index 000000000..8afd8936d
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-sectiontitle--kinds--light-desktop.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-sectiontitle--kinds--light-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-sectiontitle--kinds--light-mobile.png
new file mode 100644
index 000000000..7bbe44c1e
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-sectiontitle--kinds--light-mobile.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-sectiontitle--kinds--light-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-sectiontitle--kinds--light-tablet.png
new file mode 100644
index 000000000..03f051df2
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-sectiontitle--kinds--light-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-sectiontitle--kinds.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-sectiontitle--kinds.png
new file mode 100644
index 000000000..920d42641
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-sectiontitle--kinds.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-sectiontitle--with-actions--dark-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-sectiontitle--with-actions--dark-mobile.png
new file mode 100644
index 000000000..92e7859ac
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-sectiontitle--with-actions--dark-mobile.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-sectiontitle--with-actions--dark-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-sectiontitle--with-actions--dark-tablet.png
new file mode 100644
index 000000000..9d69f9ff8
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-sectiontitle--with-actions--dark-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-sectiontitle--with-actions--light-desktop.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-sectiontitle--with-actions--light-desktop.png
new file mode 100644
index 000000000..c26943a81
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-sectiontitle--with-actions--light-desktop.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-sectiontitle--with-actions--light-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-sectiontitle--with-actions--light-mobile.png
new file mode 100644
index 000000000..2b707fef2
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-sectiontitle--with-actions--light-mobile.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-sectiontitle--with-actions--light-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-sectiontitle--with-actions--light-tablet.png
new file mode 100644
index 000000000..d72b5b6e6
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-sectiontitle--with-actions--light-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-sectiontitle--with-actions.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-sectiontitle--with-actions.png
new file mode 100644
index 000000000..51b21155c
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-sectiontitle--with-actions.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--borders--dark-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--borders--dark-mobile.png
new file mode 100644
index 000000000..519695038
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--borders--dark-mobile.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--borders--dark-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--borders--dark-tablet.png
new file mode 100644
index 000000000..8bd907643
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--borders--dark-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--borders--light-desktop.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--borders--light-desktop.png
new file mode 100644
index 000000000..368ec1941
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--borders--light-desktop.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--borders--light-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--borders--light-mobile.png
new file mode 100644
index 000000000..9489a5997
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--borders--light-mobile.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--borders--light-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--borders--light-tablet.png
new file mode 100644
index 000000000..87b6659be
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--borders--light-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--borders.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--borders.png
new file mode 100644
index 000000000..324bb1397
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--borders.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--default--dark-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--default--dark-mobile.png
new file mode 100644
index 000000000..6f0aaf654
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--default--dark-mobile.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--default--dark-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--default--dark-tablet.png
new file mode 100644
index 000000000..8c15fc621
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--default--dark-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--default--light-desktop.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--default--light-desktop.png
new file mode 100644
index 000000000..5fb70895b
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--default--light-desktop.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--default--light-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--default--light-mobile.png
new file mode 100644
index 000000000..2e6ceedf8
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--default--light-mobile.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--default--light-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--default--light-tablet.png
new file mode 100644
index 000000000..1a259f5ba
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--default--light-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--default.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--default.png
new file mode 100644
index 000000000..2f6de0dc8
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--default.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--flush--dark-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--flush--dark-mobile.png
new file mode 100644
index 000000000..710208ff1
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--flush--dark-mobile.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--flush--dark-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--flush--dark-tablet.png
new file mode 100644
index 000000000..e70f7cce4
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--flush--dark-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--flush--light-desktop.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--flush--light-desktop.png
new file mode 100644
index 000000000..5fbd3fecc
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--flush--light-desktop.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--flush--light-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--flush--light-mobile.png
new file mode 100644
index 000000000..a78c17fea
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--flush--light-mobile.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--flush--light-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--flush--light-tablet.png
new file mode 100644
index 000000000..bbbe1b57f
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--flush--light-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--flush.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--flush.png
new file mode 100644
index 000000000..978028ae8
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--flush.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--hatch--dark-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--hatch--dark-mobile.png
new file mode 100644
index 000000000..63f3edf72
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--hatch--dark-mobile.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--hatch--dark-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--hatch--dark-tablet.png
new file mode 100644
index 000000000..cc8d2450f
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--hatch--dark-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--hatch--light-desktop.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--hatch--light-desktop.png
new file mode 100644
index 000000000..c4b48cb60
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--hatch--light-desktop.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--hatch--light-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--hatch--light-mobile.png
new file mode 100644
index 000000000..9c8170b08
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--hatch--light-mobile.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--hatch--light-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--hatch--light-tablet.png
new file mode 100644
index 000000000..2386c63b3
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--hatch--light-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--hatch.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--hatch.png
new file mode 100644
index 000000000..d2d741fd6
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--hatch.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--marks--dark-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--marks--dark-mobile.png
new file mode 100644
index 000000000..007ccdfdf
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--marks--dark-mobile.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--marks--dark-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--marks--dark-tablet.png
new file mode 100644
index 000000000..12ac7ed02
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--marks--dark-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--marks--light-desktop.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--marks--light-desktop.png
new file mode 100644
index 000000000..8c444540b
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--marks--light-desktop.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--marks--light-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--marks--light-mobile.png
new file mode 100644
index 000000000..d9a0770c7
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--marks--light-mobile.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--marks--light-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--marks--light-tablet.png
new file mode 100644
index 000000000..2b739d09b
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--marks--light-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--marks.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--marks.png
new file mode 100644
index 000000000..144f3670c
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-framebox--marks.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sectiongap--default--dark-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sectiongap--default--dark-mobile.png
new file mode 100644
index 000000000..d71833321
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sectiongap--default--dark-mobile.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sectiongap--default--dark-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sectiongap--default--dark-tablet.png
new file mode 100644
index 000000000..6ad9efcfb
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sectiongap--default--dark-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sectiongap--default--light-desktop.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sectiongap--default--light-desktop.png
new file mode 100644
index 000000000..ee3388584
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sectiongap--default--light-desktop.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sectiongap--default--light-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sectiongap--default--light-mobile.png
new file mode 100644
index 000000000..2364997f3
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sectiongap--default--light-mobile.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sectiongap--default--light-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sectiongap--default--light-tablet.png
new file mode 100644
index 000000000..9c78b06d9
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sectiongap--default--light-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sectiongap--default.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sectiongap--default.png
new file mode 100644
index 000000000..964bf0f9f
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sectiongap--default.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sectiongap--hatch--dark-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sectiongap--hatch--dark-mobile.png
new file mode 100644
index 000000000..23d996247
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sectiongap--hatch--dark-mobile.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sectiongap--hatch--dark-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sectiongap--hatch--dark-tablet.png
new file mode 100644
index 000000000..dcdb6c328
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sectiongap--hatch--dark-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sectiongap--hatch--light-desktop.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sectiongap--hatch--light-desktop.png
new file mode 100644
index 000000000..da6c220c8
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sectiongap--hatch--light-desktop.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sectiongap--hatch--light-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sectiongap--hatch--light-mobile.png
new file mode 100644
index 000000000..12c3b9125
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sectiongap--hatch--light-mobile.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sectiongap--hatch--light-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sectiongap--hatch--light-tablet.png
new file mode 100644
index 000000000..760e0a74f
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sectiongap--hatch--light-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sectiongap--hatch.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sectiongap--hatch.png
new file mode 100644
index 000000000..9e00205fd
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sectiongap--hatch.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sectiongap--sizes--dark-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sectiongap--sizes--dark-mobile.png
new file mode 100644
index 000000000..03ac6b2f4
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sectiongap--sizes--dark-mobile.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sectiongap--sizes--dark-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sectiongap--sizes--dark-tablet.png
new file mode 100644
index 000000000..d0fb16123
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sectiongap--sizes--dark-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sectiongap--sizes--light-desktop.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sectiongap--sizes--light-desktop.png
new file mode 100644
index 000000000..820542463
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sectiongap--sizes--light-desktop.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sectiongap--sizes--light-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sectiongap--sizes--light-mobile.png
new file mode 100644
index 000000000..2c52ef49f
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sectiongap--sizes--light-mobile.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sectiongap--sizes--light-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sectiongap--sizes--light-tablet.png
new file mode 100644
index 000000000..515c8f3ea
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sectiongap--sizes--light-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sectiongap--sizes.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sectiongap--sizes.png
new file mode 100644
index 000000000..654b48a85
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sectiongap--sizes.png differ
diff --git a/apps/storybook/src/stories/components/content/hero-title/HeroTitle.stories.js b/apps/storybook/src/stories/components/content/hero-title/HeroTitle.stories.js
new file mode 100644
index 000000000..808d3809f
--- /dev/null
+++ b/apps/storybook/src/stories/components/content/hero-title/HeroTitle.stories.js
@@ -0,0 +1,184 @@
+import Button from '@aziontech/webkit/button'
+import HeroTitle from '@aziontech/webkit/hero-title'
+
+import { toSfc } from '../../../_shared/story-source'
+
+const IMPORT = "import HeroTitle from '@aziontech/webkit/hero-title'"
+const IMPORT_WITH_BUTTON = [IMPORT, "import Button from '@aziontech/webkit/button'"]
+
+/** @type {import('@storybook/vue3').Meta<typeof HeroTitle>} */
+const meta = {
+  title: 'Components/Content/HeroTitle',
+  component: HeroTitle,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    backgrounds: {
+      default: 'dark'
+    },
+    a11y: {
+      config: {
+        rules: [{ id: 'color-contrast', enabled: true }]
+      }
+    },
+    docs: {
+      description: {
+        component:
+          'The copy block of a hero band: an optional overline, the page’s `h1` (with an optional opening phrase painted in the brand accent), a description and a row of leading calls to action, at hero scale. It is the hero counterpart of `SectionTitle` and sits above a hero backdrop rather than drawing a frame of its own.'
+      },
+      canvas: { sourceState: 'shown' }
+    }
+  },
+  argTypes: {
+    title: {
+      control: 'text',
+      description: 'Headline of the page, rendered as the page’s `h1`.',
+      table: { category: 'props', type: { summary: 'string' } }
+    },
+    highlight: {
+      control: 'text',
+      description:
+        'Opening phrase of the headline, painted in the brand accent; reads as one sentence with `title`.',
+      table: { category: 'props', type: { summary: 'string' }, defaultValue: { summary: "''" } }
+    },
+    description: {
+      control: 'text',
+      description: 'Supporting sentence under the headline; overridden by the default slot.',
+      table: { category: 'props', type: { summary: 'string' }, defaultValue: { summary: "''" } }
+    },
+    eyebrow: {
+      control: 'text',
+      description: 'Short uppercase overline rendered above the headline.',
+      table: { category: 'props', type: { summary: 'string' }, defaultValue: { summary: "''" } }
+    },
+    centered: {
+      control: 'boolean',
+      description:
+        'Center the whole block — copy, headline and actions — instead of aligning it to the start.',
+      table: { category: 'props', type: { summary: 'boolean' }, defaultValue: { summary: 'false' } }
+    },
+    default: {
+      control: false,
+      description: 'Description body; replaces the `description` prop when provided.',
+      table: { category: 'slots', type: { summary: 'VNode | string' } }
+    },
+    actions: {
+      control: false,
+      description: 'Leading call-to-action row under the copy.',
+      table: { category: 'slots', type: { summary: 'VNode' } }
+    }
+  },
+  args: {
+    title: 'Run it everywhere.',
+    highlight: '',
+    description: 'Ship applications, security and observability from one platform.',
+    eyebrow: 'Edge platform',
+    centered: false
+  }
+}
+
+export default meta
+
+// One reactive render for the arg-driven story: every control updates the canvas live.
+const Template = (args) => ({
+  components: { HeroTitle },
+  setup() {
+    return { args }
+  },
+  template: '<HeroTitle v-bind="args" />'
+})
+
+const DEFAULT_MARKUP = `<HeroTitle
+  eyebrow="Edge platform"
+  title="Run it everywhere."
+  description="Ship applications, security and observability from one platform."
+/>`
+
+/** @type {import('@storybook/vue3').StoryObj<typeof HeroTitle>} */
+export const Default = {
+  render: Template,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Overline, `h1` and description, aligned to the start — the alignment that pairs with a backdrop weighted to one side.'
+      },
+      source: { code: toSfc(IMPORT, DEFAULT_MARKUP) }
+    }
+  }
+}
+
+const HIGHLIGHT_TEMPLATE = `<HeroTitle
+  eyebrow="Edge platform"
+  highlight="Build anything."
+  title="Run it everywhere."
+  description="Ship applications, security and observability from one platform."
+/>`
+
+/** @type {import('@storybook/vue3').StoryObj<typeof HeroTitle>} */
+export const Highlight = {
+  render: () => ({ components: { HeroTitle }, template: HIGHLIGHT_TEMPLATE }),
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      controls: { disable: true },
+      description: {
+        story:
+          'The opening phrase painted in the brand accent. It is a `span` inside the same `h1`, so the accessible name is still the full sentence — only the paint differs.'
+      },
+      source: { code: toSfc(IMPORT, HIGHLIGHT_TEMPLATE) }
+    }
+  }
+}
+
+const CENTERED_TEMPLATE = `<HeroTitle
+  centered
+  eyebrow="Edge platform"
+  highlight="Build anything."
+  title="Run it everywhere."
+  description="Ship applications, security and observability from one platform."
+/>`
+
+/** @type {import('@storybook/vue3').StoryObj<typeof HeroTitle>} */
+export const Centered = {
+  render: () => ({ components: { HeroTitle }, template: CENTERED_TEMPLATE }),
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      controls: { disable: true },
+      description: {
+        story:
+          'The whole block centered — for a hero whose backdrop is symmetric or that leads with one statement.'
+      },
+      source: { code: toSfc(IMPORT, CENTERED_TEMPLATE) }
+    }
+  }
+}
+
+const WITH_ACTIONS_TEMPLATE = `<HeroTitle
+  eyebrow="Edge platform"
+  highlight="Build anything."
+  title="Run it everywhere."
+  description="Ship applications, security and observability from one platform."
+>
+  <template #actions>
+    <Button label="Start for free" />
+    <Button kind="outlined" label="Talk to sales" />
+  </template>
+</HeroTitle>`
+
+/** @type {import('@storybook/vue3').StoryObj<typeof HeroTitle>} */
+export const WithActions = {
+  render: () => ({ components: { HeroTitle, Button }, template: WITH_ACTIONS_TEMPLATE }),
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      controls: { disable: true },
+      description: {
+        story:
+          'The `actions` slot owns its own responsive layout: the CTAs stack full-width below `sm` — a hero button is the page’s primary target — and return to a content-width row above it.'
+      },
+      source: { code: toSfc(IMPORT_WITH_BUTTON, WITH_ACTIONS_TEMPLATE) }
+    }
+  }
+}
diff --git a/apps/storybook/src/stories/components/content/section-title/SectionTitle.stories.js b/apps/storybook/src/stories/components/content/section-title/SectionTitle.stories.js
new file mode 100644
index 000000000..6c72b8230
--- /dev/null
+++ b/apps/storybook/src/stories/components/content/section-title/SectionTitle.stories.js
@@ -0,0 +1,175 @@
+import Button from '@aziontech/webkit/button'
+import SectionTitle from '@aziontech/webkit/section-title'
+
+import { toSfc } from '../../../_shared/story-source'
+
+const IMPORT = "import SectionTitle from '@aziontech/webkit/section-title'"
+const IMPORT_WITH_BUTTON = [IMPORT, "import Button from '@aziontech/webkit/button'"]
+
+/** @type {import('@storybook/vue3').Meta<typeof SectionTitle>} */
+const meta = {
+  title: 'Components/Content/SectionTitle',
+  component: SectionTitle,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+    backgrounds: {
+      default: 'dark'
+    },
+    a11y: {
+      config: {
+        rules: [{ id: 'color-contrast', enabled: true }]
+      }
+    },
+    docs: {
+      description: {
+        component:
+          'The framed header row that opens a page section: an optional overline, the section’s `h2`, an optional description and an optional row of actions, held inside a registration frame whose bottom rule is what divides the header from the section body. `kind` picks the layout — `centered` for a symmetric opener, `left` for a reading-order one, and `horizontal` for a wide row that sets the headline against its description.'
+      },
+      canvas: { sourceState: 'shown' }
+    }
+  },
+  argTypes: {
+    title: {
+      control: 'text',
+      description: 'Headline of the section, rendered as the section’s `h2`.',
+      table: { category: 'props', type: { summary: 'string' } }
+    },
+    description: {
+      control: 'text',
+      description: 'Supporting sentence under the headline; overridden by the default slot.',
+      table: { category: 'props', type: { summary: 'string' }, defaultValue: { summary: "''" } }
+    },
+    eyebrow: {
+      control: 'text',
+      description: 'Short uppercase overline rendered above the headline.',
+      table: { category: 'props', type: { summary: 'string' }, defaultValue: { summary: "''" } }
+    },
+    kind: {
+      control: 'inline-radio',
+      options: ['centered', 'left', 'horizontal'],
+      description:
+        'Layout of the header: `centered` stacks and centers the copy, `left` stacks it at the start edge, `horizontal` sets the headline and its description in two columns.',
+      table: {
+        category: 'props',
+        type: { summary: "'centered' | 'left' | 'horizontal'" },
+        defaultValue: { summary: "'centered'" }
+      }
+    },
+    default: {
+      control: false,
+      description: 'Description body; replaces the `description` prop when provided.',
+      table: { category: 'slots', type: { summary: 'VNode | string' } }
+    },
+    actions: {
+      control: false,
+      description: 'Call-to-action row under the copy, aligned with the chosen `kind`.',
+      table: { category: 'slots', type: { summary: 'VNode' } }
+    }
+  },
+  args: {
+    title: 'Everything runs at the edge',
+    description: 'One platform for applications, security and observability.',
+    eyebrow: 'Platform',
+    kind: 'centered'
+  }
+}
+
+export default meta
+
+// One reactive render for the arg-driven story: every control updates the canvas live.
+const Template = (args) => ({
+  components: { SectionTitle },
+  setup() {
+    return { args }
+  },
+  template: '<SectionTitle v-bind="args" />'
+})
+
+const DEFAULT_MARKUP = `<SectionTitle
+  eyebrow="Platform"
+  title="Everything runs at the edge"
+  description="One platform for applications, security and observability."
+/>`
+
+/** @type {import('@storybook/vue3').StoryObj<typeof SectionTitle>} */
+export const Default = {
+  render: Template,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Overline, headline and description centered inside the frame. The frame’s bottom rule is what divides the header from the section body, so no margin is needed below it.'
+      },
+      source: { code: toSfc(IMPORT, DEFAULT_MARKUP) }
+    }
+  }
+}
+
+const KINDS_TEMPLATE = `<div>
+  <SectionTitle
+    kind="centered"
+    eyebrow="Centered"
+    title="A symmetric section opener"
+    description="Copy capped at the reading width and centered in the frame — the default."
+  />
+  <SectionTitle
+    kind="left"
+    eyebrow="Left"
+    title="The same stack, at the start edge"
+    description="Same anatomy, aligned to the start — for a section that reads rather than announces."
+  />
+  <SectionTitle
+    kind="horizontal"
+    eyebrow="Horizontal"
+    title="Headline in the first column"
+    description="The description takes the third column, with the middle one left as air. Below the md breakpoint the grid collapses and this falls back under the headline."
+  />
+</div>`
+
+/** @type {import('@storybook/vue3').StoryObj<typeof SectionTitle>} */
+export const Kinds = {
+  render: () => ({ components: { SectionTitle }, template: KINDS_TEMPLATE }),
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      controls: { disable: true },
+      description: {
+        story:
+          'The three layouts stacked. `centered` and `left` share one column and differ only in alignment; `horizontal` puts the headline and its description in a three-column grid, which is what makes a wide band read as one row instead of a tall stack.'
+      },
+      source: { code: toSfc(IMPORT, KINDS_TEMPLATE) }
+    }
+  }
+}
+
+const WITH_ACTIONS_TEMPLATE = `<SectionTitle
+  eyebrow="Platform"
+  title="Everything runs at the edge"
+  description="One platform for applications, security and observability."
+>
+  <template #actions>
+    <Button label="Start building" />
+    <Button kind="outlined" label="Read the docs" />
+  </template>
+</SectionTitle>`
+
+/** @type {import('@storybook/vue3').StoryObj<typeof SectionTitle>} */
+export const WithActions = {
+  render: () => ({
+    components: { SectionTitle, Button },
+    template: WITH_ACTIONS_TEMPLATE
+  }),
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      controls: { disable: true },
+      description: {
+        story:
+          'The `actions` slot owns its own responsive layout: the controls stack full-width below `sm` and return to a content-width row above it, centered only when the header is.'
+      },
+      source: { code: toSfc(IMPORT_WITH_BUTTON, WITH_ACTIONS_TEMPLATE) }
+    }
+  }
+}
+
diff --git a/apps/storybook/src/stories/components/layout/frame-box/FrameBox.stories.js b/apps/storybook/src/stories/components/layout/frame-box/FrameBox.stories.js
new file mode 100644
index 000000000..7bf29d9f1
--- /dev/null
+++ b/apps/storybook/src/stories/components/layout/frame-box/FrameBox.stories.js
@@ -0,0 +1,256 @@
+import FrameBox from '@aziontech/webkit/frame-box'
+
+import { toSfc } from '../../../_shared/story-source'
+
+const IMPORT = "import FrameBox from '@aziontech/webkit/frame-box'"
+
+/** @type {import('@storybook/vue3').Meta<typeof FrameBox>} */
+const meta = {
+  title: 'Components/Layout/FrameBox',
+  component: FrameBox,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    backgrounds: {
+      default: 'dark'
+    },
+    a11y: {
+      config: {
+        rules: [{ id: 'color-contrast', enabled: true }]
+      }
+    },
+    docs: {
+      description: {
+        component:
+          'The registration frame: a hairline box with a small square set inside each corner and an optional vertical hatch texture behind its content. It is the container every framed page section is built from — a section title, the gap between two sections, a cell of a divider grid — so a page’s rules and corner marks come from one component instead of from per-screen borders.'
+      },
+      canvas: { sourceState: 'shown' }
+    }
+  },
+  argTypes: {
+    borders: {
+      control: 'select',
+      options: ['all', 'x', 'y', 'top', 'right', 'bottom', 'left', 'none'],
+      description:
+        'Which of the frame’s own rules to draw. Takes a keyword (`all`, `none`, `x`, `y`), one side, or a list of sides such as `[\'top\', \'left\']`.',
+      table: {
+        category: 'props',
+        type: { summary: "'all' | 'none' | 'x' | 'y' | Side | Side[]" },
+        defaultValue: { summary: "'all'" }
+      }
+    },
+    marks: {
+      control: 'select',
+      options: [
+        'all',
+        'top',
+        'bottom',
+        'left',
+        'right',
+        'top-left',
+        'top-right',
+        'bottom-left',
+        'bottom-right',
+        'none'
+      ],
+      description:
+        'Which corner registration squares to draw. Takes a keyword (`all`, `none`, `top`, `bottom`, `left`, `right`), one corner, or a list of corners.',
+      table: {
+        category: 'props',
+        type: { summary: "'all' | 'none' | Edge | Corner | Corner[]" },
+        defaultValue: { summary: "'all'" }
+      }
+    },
+    hatch: {
+      control: 'boolean',
+      description: 'Show the diagonal hatch texture behind the content, faded toward the edges.',
+      table: { category: 'props', type: { summary: 'boolean' }, defaultValue: { summary: 'false' } }
+    },
+    flush: {
+      control: 'select',
+      options: ['none', 'top', 'right', 'bottom', 'left'],
+      description:
+        'Which sides a neighbouring frame already draws, so this one does not draw them again. `true` is shorthand for `top` (a vertical stack); use `left` for a horizontal row, or a list for a grid cell.',
+      table: {
+        category: 'props',
+        type: { summary: 'boolean | Side | Side[]' },
+        defaultValue: { summary: 'false' }
+      }
+    },
+    default: {
+      control: false,
+      description: 'Frame content; rendered above the hatch texture.',
+      table: { category: 'slots', type: { summary: 'VNode | string' } }
+    }
+  },
+  args: {
+    borders: 'all',
+    marks: 'all',
+    hatch: false,
+    flush: 'none'
+  }
+}
+
+export default meta
+
+// One reactive render for the arg-driven story: every control (borders, marks,
+// hatch, flush) updates the canvas live.
+const Template = (args) => ({
+  components: { FrameBox },
+  setup() {
+    return { args }
+  },
+  template: `
+    <FrameBox v-bind="args">
+      <div class="p-(--spacing-xl) text-center text-body-md text-(--text-muted)">Framed content</div>
+    </FrameBox>
+  `
+})
+
+const DEFAULT_MARKUP = `<FrameBox>
+  <div class="p-(--spacing-xl) text-center text-body-md text-(--text-muted)">Framed content</div>
+</FrameBox>`
+
+/** @type {import('@storybook/vue3').StoryObj<typeof FrameBox>} */
+export const Default = {
+  render: Template,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'All four rules plus the corner registration squares. Toggle `hatch`, `marks` and `borders` to see the frame change.'
+      },
+      source: { code: toSfc(IMPORT, DEFAULT_MARKUP) }
+    }
+  }
+}
+
+const BORDERS_TEMPLATE = `<div class="flex flex-col gap-(--spacing-xl)">
+  <FrameBox borders="all">
+    <div class="p-(--spacing-lg) text-center text-body-md text-(--text-muted)">borders="all"</div>
+  </FrameBox>
+  <FrameBox borders="x">
+    <div class="p-(--spacing-lg) text-center text-body-md text-(--text-muted)">borders="x" — left and right</div>
+  </FrameBox>
+  <FrameBox borders="y">
+    <div class="p-(--spacing-lg) text-center text-body-md text-(--text-muted)">borders="y" — top and bottom</div>
+  </FrameBox>
+  <FrameBox borders="top">
+    <div class="p-(--spacing-lg) text-center text-body-md text-(--text-muted)">borders="top" — one side</div>
+  </FrameBox>
+  <FrameBox :borders="['top', 'left']">
+    <div class="p-(--spacing-lg) text-center text-body-md text-(--text-muted)">:borders="['top', 'left']" — an explicit list</div>
+  </FrameBox>
+  <FrameBox borders="none">
+    <div class="p-(--spacing-lg) text-center text-body-md text-(--text-muted)">borders="none"</div>
+  </FrameBox>
+</div>`
+
+/** @type {import('@storybook/vue3').StoryObj<typeof FrameBox>} */
+export const Borders = {
+  render: () => ({ components: { FrameBox }, template: BORDERS_TEMPLATE }),
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      controls: { disable: true },
+      description: {
+        story:
+          'Every `borders` value side by side. `y` is the full-bleed band that keeps only the two dividing rules; `none` hands every edge over to a surrounding grid and contributes just the corner marks.'
+      },
+      source: { code: toSfc(IMPORT, BORDERS_TEMPLATE) }
+    }
+  }
+}
+
+const MARKS_TEMPLATE = `<div class="flex flex-col gap-(--spacing-xl)">
+  <FrameBox marks="all">
+    <div class="p-(--spacing-lg) text-center text-body-md text-(--text-muted)">marks="all"</div>
+  </FrameBox>
+  <FrameBox marks="top">
+    <div class="p-(--spacing-lg) text-center text-body-md text-(--text-muted)">marks="top" — both top corners</div>
+  </FrameBox>
+  <FrameBox marks="left">
+    <div class="p-(--spacing-lg) text-center text-body-md text-(--text-muted)">marks="left" — both left corners</div>
+  </FrameBox>
+  <FrameBox marks="top-right">
+    <div class="p-(--spacing-lg) text-center text-body-md text-(--text-muted)">marks="top-right" — one corner</div>
+  </FrameBox>
+  <FrameBox :marks="['top-left', 'bottom-right']">
+    <div class="p-(--spacing-lg) text-center text-body-md text-(--text-muted)">:marks="['top-left', 'bottom-right']" — an explicit list</div>
+  </FrameBox>
+  <FrameBox marks="none">
+    <div class="p-(--spacing-lg) text-center text-body-md text-(--text-muted)">marks="none"</div>
+  </FrameBox>
+</div>`
+
+/** @type {import('@storybook/vue3').StoryObj<typeof FrameBox>} */
+export const Marks = {
+  render: () => ({ components: { FrameBox }, template: MARKS_TEMPLATE }),
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      controls: { disable: true },
+      description: {
+        story:
+          'Each pair of corner ticks is drawn independently. `top` and `bottom` are what a stack needs: the frame above keeps its `bottom` pair and the frame below asks for `bottom` only, so a shared junction carries one mark per corner instead of two a few pixels apart.'
+      },
+      source: { code: toSfc(IMPORT, MARKS_TEMPLATE) }
+    }
+  }
+}
+
+const HATCH_TEMPLATE = `<FrameBox hatch>
+  <div class="p-(--spacing-xl) text-center text-body-md text-(--text-muted)">Hatched frame</div>
+</FrameBox>`
+
+/** @type {import('@storybook/vue3').StoryObj<typeof FrameBox>} */
+export const Hatch = {
+  render: () => ({ components: { FrameBox }, template: HATCH_TEMPLATE }),
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      controls: { disable: true },
+      description: {
+        story:
+          'The vertical hatch-line texture, faded toward the edges and rendered behind the content.'
+      },
+      source: { code: toSfc(IMPORT, HATCH_TEMPLATE) }
+    }
+  }
+}
+
+const FLUSH_TEMPLATE = `<div class="flex flex-col gap-(--spacing-xxl)">
+  <div>
+    <FrameBox>
+      <div class="p-(--spacing-lg) text-center text-body-md text-(--text-muted)">Stacked — first frame</div>
+    </FrameBox>
+    <FrameBox flush marks="bottom">
+      <div class="p-(--spacing-lg) text-center text-body-md text-(--text-muted)">flush — shares the rule above</div>
+    </FrameBox>
+  </div>
+
+  <div class="flex">
+    <FrameBox class="flex-1">
+      <div class="p-(--spacing-lg) text-center text-body-md text-(--text-muted)">Row — first frame</div>
+    </FrameBox>
+    <FrameBox flush="left" marks="right" class="flex-1">
+      <div class="p-(--spacing-lg) text-center text-body-md text-(--text-muted)">flush="left" — shares the rule beside</div>
+    </FrameBox>
+  </div>
+</div>`
+
+/** @type {import('@storybook/vue3').StoryObj<typeof FrameBox>} */
+export const Flush = {
+  render: () => ({ components: { FrameBox }, template: FLUSH_TEMPLATE }),
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      controls: { disable: true },
+      description: {
+        story:
+          '`flush` names the sides a neighbour already draws, so it works on both axes. Vertically, the lower frame is `flush` (shorthand for `top`) with `marks="bottom"`; horizontally, the right-hand frame is `flush="left"` with `marks="right"`. Either way the shared edge reads as one hairline with one mark per corner, instead of two rules and four ticks. It is a subtraction from the frame\'s own side set, not an offset, so nothing overlaps.'
+      },
+      source: { code: toSfc(IMPORT, FLUSH_TEMPLATE) }
+    }
+  }
+}
diff --git a/apps/storybook/src/stories/components/layout/section-gap/SectionGap.stories.js b/apps/storybook/src/stories/components/layout/section-gap/SectionGap.stories.js
new file mode 100644
index 000000000..c6eb2dc1c
--- /dev/null
+++ b/apps/storybook/src/stories/components/layout/section-gap/SectionGap.stories.js
@@ -0,0 +1,163 @@
+import FrameBox from '@aziontech/webkit/frame-box'
+import SectionGap from '@aziontech/webkit/section-gap'
+
+import { toSfc } from '../../../_shared/story-source'
+
+const IMPORT = [
+  "import SectionGap from '@aziontech/webkit/section-gap'",
+  "import FrameBox from '@aziontech/webkit/frame-box'"
+]
+
+/** @type {import('@storybook/vue3').Meta<typeof SectionGap>} */
+const meta = {
+  title: 'Components/Layout/SectionGap',
+  component: SectionGap,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+    backgrounds: {
+      default: 'dark'
+    },
+    a11y: {
+      config: {
+        rules: [{ id: 'color-contrast', enabled: true }]
+      }
+    },
+    docs: {
+      description: {
+        component:
+          'The empty registration frame that divides two page sections. On a page with no margins between sections, this frame *is* the gap: it holds the vertical air, and its own two rules are what separate the sections it sits between — which is why it is a frame and not a spacer `div`. `size` picks how much air, as one, two or three times `--spacing-xxl`, the largest step of the theme’s own spacing scale. That token is itself responsive, so every step scales with the viewport.'
+      },
+      canvas: { sourceState: 'shown' }
+    }
+  },
+  argTypes: {
+    size: {
+      control: 'inline-radio',
+      options: ['small', 'medium', 'large'],
+      description:
+        'How much vertical air the gap holds, as a multiple of `--spacing-xxl`: `small` is 1× (keeps two related bands close), `medium` 2× (the ordinary break), `large` 3× (opens a new part of the page).',
+      table: {
+        category: 'props',
+        type: { summary: "'small' | 'medium' | 'large'" },
+        defaultValue: { summary: "'medium'" }
+      }
+    },
+    hatch: {
+      control: 'boolean',
+      description:
+        'Draw the frame’s diagonal hatch texture in the gap. The gap is the band with no content of its own, so the texture reads as the page’s own material rather than competing with copy.',
+      table: { category: 'props', type: { summary: 'boolean' }, defaultValue: { summary: 'false' } }
+    }
+  },
+  args: {
+    size: 'medium',
+    hatch: false
+  }
+}
+
+export default meta
+
+// One reactive render for the arg-driven story: the `size` control resizes the gap
+// live, between two stub sections so the shared rules stay visible.
+const Template = (args) => ({
+  components: { SectionGap, FrameBox },
+  setup() {
+    return { args }
+  },
+  template: `
+    <div>
+      <FrameBox borders="y">
+        <div class="p-(--spacing-xl) text-center text-body-md text-(--text-muted)">Section above</div>
+      </FrameBox>
+      <SectionGap v-bind="args" />
+      <FrameBox flush marks="bottom" borders="y">
+        <div class="p-(--spacing-xl) text-center text-body-md text-(--text-muted)">Section below</div>
+      </FrameBox>
+    </div>
+  `
+})
+
+const DEFAULT_MARKUP = `<div>
+  <FrameBox borders="y">
+    <div class="p-(--spacing-xl) text-center text-body-md text-(--text-muted)">Section above</div>
+  </FrameBox>
+  <SectionGap size="medium" />
+  <FrameBox flush marks="bottom" borders="y">
+    <div class="p-(--spacing-xl) text-center text-body-md text-(--text-muted)">Section below</div>
+  </FrameBox>
+</div>`
+
+/** @type {import('@storybook/vue3').StoryObj<typeof SectionGap>} */
+export const Default = {
+  render: Template,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'One gap between two stub sections. The gap renders `flush`, so the rule it shares with the section above is drawn once — every junction on the page stays a single hairline. Switch `size` to see the three steps.'
+      },
+      source: { code: toSfc(IMPORT, DEFAULT_MARKUP) }
+    }
+  }
+}
+
+const HATCH_TEMPLATE = `<div>
+  <FrameBox borders="y">
+    <div class="p-(--spacing-xl) text-center text-body-md text-(--text-muted)">Section above</div>
+  </FrameBox>
+  <SectionGap hatch size="large" />
+  <FrameBox flush marks="bottom" borders="y">
+    <div class="p-(--spacing-xl) text-center text-body-md text-(--text-muted)">Section below</div>
+  </FrameBox>
+</div>`
+
+/** @type {import('@storybook/vue3').StoryObj<typeof SectionGap>} */
+export const Hatch = {
+  render: () => ({ components: { SectionGap, FrameBox }, template: HATCH_TEMPLATE }),
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      controls: { disable: true },
+      description: {
+        story:
+          'The diagonal hatch drawn in the gap itself. This is the texture’s home on a framed page: the gap holds no copy, so the hatch gives the break its own identity without sitting behind a headline.'
+      },
+      source: { code: toSfc(IMPORT, HATCH_TEMPLATE) }
+    }
+  }
+}
+
+const SIZES_TEMPLATE = `<div>
+  <FrameBox borders="y">
+    <div class="p-(--spacing-lg) text-center text-body-md text-(--text-muted)">size="small" — one --spacing-xxl below</div>
+  </FrameBox>
+  <SectionGap size="small" />
+  <FrameBox flush marks="bottom" borders="y">
+    <div class="p-(--spacing-lg) text-center text-body-md text-(--text-muted)">size="medium" — two below</div>
+  </FrameBox>
+  <SectionGap size="medium" />
+  <FrameBox flush marks="bottom" borders="y">
+    <div class="p-(--spacing-lg) text-center text-body-md text-(--text-muted)">size="large" — three below</div>
+  </FrameBox>
+  <SectionGap size="large" />
+  <FrameBox flush marks="bottom" borders="y">
+    <div class="p-(--spacing-lg) text-center text-body-md text-(--text-muted)">End</div>
+  </FrameBox>
+</div>`
+
+/** @type {import('@storybook/vue3').StoryObj<typeof SectionGap>} */
+export const Sizes = {
+  render: () => ({ components: { SectionGap, FrameBox }, template: SIZES_TEMPLATE }),
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      controls: { disable: true },
+      description: {
+        story:
+          'Every `size` value in one stack, each gap labelled by the band above it: `small` keeps two related bands close, `medium` is the ordinary break between sections, `large` opens a new part of the page. The 1 : 2 : 3 ratio is what keeps the three weights unmistakable at every viewport width.'
+      },
+      source: { code: toSfc(IMPORT, SIZES_TEMPLATE) }
+    }
+  }
+}
diff --git a/apps/storybook/src/stories/templates/PageExample.stories.js b/apps/storybook/src/stories/templates/PageExample.stories.js
new file mode 100644
index 000000000..b02463975
--- /dev/null
+++ b/apps/storybook/src/stories/templates/PageExample.stories.js
@@ -0,0 +1,128 @@
+import Button from '@aziontech/webkit/button'
+import FrameBox from '@aziontech/webkit/frame-box'
+import HeroTitle from '@aziontech/webkit/hero-title'
+import SectionGap from '@aziontech/webkit/section-gap'
+import SectionTitle from '@aziontech/webkit/section-title'
+
+import { toSfc } from '../_shared/story-source'
+
+// Every component the page renders, so the "Show code" SFC runs standalone.
+const IMPORT = [
+  "import Button from '@aziontech/webkit/button'",
+  "import FrameBox from '@aziontech/webkit/frame-box'",
+  "import HeroTitle from '@aziontech/webkit/hero-title'",
+  "import SectionGap from '@aziontech/webkit/section-gap'",
+  "import SectionTitle from '@aziontech/webkit/section-title'"
+]
+
+const pageComponents = { Button, FrameBox, HeroTitle, SectionGap, SectionTitle }
+
+/** @type {import('@storybook/vue3').Meta<typeof FrameBox>} */
+const meta = {
+  title: 'Templates/PageExample',
+  component: FrameBox,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+    backgrounds: {
+      default: 'dark'
+    },
+    a11y: {
+      config: {
+        rules: [
+          { id: 'color-contrast', enabled: true },
+          { id: 'heading-order', enabled: true }
+        ]
+      }
+    },
+    docs: {
+      description: {
+        component:
+          'A full marketing page assembled from the framed layout set: a `FrameBox` hero band with a `HeroTitle`, `SectionGap` frames sized per break, `SectionTitle` headers in two of their three layouts (`horizontal` then `centered`), and a divider grid whose cells are borderless `FrameBox`es. The page has no margins — every rule you see belongs to a frame, `flush` collapses each junction to a single hairline, and the gaps are the only vertical rhythm.'
+      },
+      canvas: { sourceState: 'shown' }
+    }
+  },
+  argTypes: {},
+  args: {}
+}
+
+export default meta
+
+const PAGE_TEMPLATE = `<div class="bg-(--bg-canvas)">
+  <FrameBox
+    borders="y"
+    class="px-(--spacing-xl) py-(--spacing-xxl)"
+  >
+    <HeroTitle
+      eyebrow="Edge platform"
+      highlight="Build anything."
+      title="Run it everywhere."
+      description="Ship applications, security and observability from one platform — no servers to place, no regions to pick."
+    >
+      <template #actions>
+        <Button label="Start for free" />
+        <Button kind="outlined" label="Talk to sales" />
+      </template>
+    </HeroTitle>
+  </FrameBox>
+
+  <SectionGap hatch size="large" />
+
+  <SectionTitle
+    kind="horizontal"
+    eyebrow="Platform"
+    title="Everything runs at the edge"
+    description="One runtime, one policy surface, one place to look when something breaks — and the same three primitives behind every workload you ship."
+  />
+
+  <div class="grid gap-px bg-(--border-default) sm:grid-cols-3">
+    <FrameBox borders="none" class="bg-(--bg-canvas)">
+      <div class="flex h-full flex-col gap-(--spacing-xs) p-(--spacing-xl)">
+        <h3 class="m-0 text-heading-sm text-(--text-default)">Applications</h3>
+        <p class="m-0 text-body-md text-(--text-muted)">Deploy code that runs close to the request, with no cold start to design around.</p>
+      </div>
+    </FrameBox>
+    <FrameBox borders="none" class="bg-(--bg-canvas)">
+      <div class="flex h-full flex-col gap-(--spacing-xs) p-(--spacing-xl)">
+        <h3 class="m-0 text-heading-sm text-(--text-default)">Security</h3>
+        <p class="m-0 text-body-md text-(--text-muted)">WAF, rate limiting and bot rules applied at the same hop that serves the traffic.</p>
+      </div>
+    </FrameBox>
+    <FrameBox borders="none" class="bg-(--bg-canvas)">
+      <div class="flex h-full flex-col gap-(--spacing-xs) p-(--spacing-xl)">
+        <h3 class="m-0 text-heading-sm text-(--text-default)">Observability</h3>
+        <p class="m-0 text-body-md text-(--text-muted)">Real-time events and logs from every edge location, queryable as one dataset.</p>
+      </div>
+    </FrameBox>
+  </div>
+
+  <SectionGap hatch size="medium" />
+
+  <SectionTitle
+    eyebrow="Get started"
+    title="Your first deploy takes a minute"
+    description="Create an account, push a project, and watch it go live at every edge location."
+  >
+    <template #actions>
+      <Button label="Create an account" />
+      <Button kind="outlined" label="Read the docs" />
+    </template>
+  </SectionTitle>
+</div>`
+
+/** @type {import('@storybook/vue3').StoryObj<typeof FrameBox>} */
+export const Default = {
+  render: () => ({ components: pageComponents, template: PAGE_TEMPLATE }),
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      controls: { disable: true },
+      description: {
+        story:
+          'The whole set composed as one page: hero band, a `large` gap opening the platform part, a `horizontal` section header, a `gap-px` divider grid of borderless frames, a `medium` gap, and a centered closing header with its CTAs. Every section header owns the rule that divides it from its body, so the page needs no vertical margins of its own — the two `SectionGap` steps are the whole rhythm.'
+      },
+      source: { code: toSfc(IMPORT, PAGE_TEMPLATE) }
+    }
+  }
+}
diff --git a/packages/webkit/.size-limit.json b/packages/webkit/.size-limit.json
index f4b34b563..1a0ff278c 100644
--- a/packages/webkit/.size-limit.json
+++ b/packages/webkit/.size-limit.json
@@ -24,6 +24,26 @@
     "path": "src/components/data/table/table.vue",
     "limit": "48 KB"
   },
+  {
+    "name": "frame-box",
+    "path": "src/components/layout/frame-box/frame-box.vue",
+    "limit": "2.5 KB"
+  },
+  {
+    "name": "section-gap",
+    "path": "src/components/layout/section-gap/section-gap.vue",
+    "limit": "3 KB"
+  },
+  {
+    "name": "section-title",
+    "path": "src/components/content/section-title/section-title.vue",
+    "limit": "4 KB"
+  },
+  {
+    "name": "hero-title",
+    "path": "src/components/content/hero-title/hero-title.vue",
+    "limit": "2.5 KB"
+  },
   {
     "name": "password-requirements",
     "path": "src/components/inputs/field-password/password-requirements.ts",
diff --git a/packages/webkit/catalog.json b/packages/webkit/catalog.json
index 588ec1cd1..42426061e 100644
--- a/packages/webkit/catalog.json
+++ b/packages/webkit/catalog.json
@@ -2674,6 +2674,160 @@
       ],
       "purpose": "Displays content or metadata in the UI. Migrated from the existing implementation at `packages/webkit/src/components/webkit/content/card-pricing/`."
     },
+    "hero-title": {
+      "import": "@aziontech/webkit/hero-title",
+      "target": "./src/components/content/hero-title/hero-title.vue",
+      "kind": "component",
+      "treeShakeableImport": "@aziontech/webkit/hero-title",
+      "category": "content",
+      "structure": "monolithic",
+      "status": "approved",
+      "props": [
+        {
+          "name": "title",
+          "type": "string",
+          "default": "—",
+          "required": "true",
+          "doc": "Headline of the page, rendered as the page's `h1`."
+        },
+        {
+          "name": "highlight",
+          "type": "string",
+          "default": "''",
+          "required": "false",
+          "doc": "Opening phrase of the headline, painted in the brand accent; reads as one sentence with `title`."
+        },
+        {
+          "name": "description",
+          "type": "string",
+          "default": "''",
+          "required": "false",
+          "doc": "Supporting sentence under the headline; overridden by the default slot."
+        },
+        {
+          "name": "eyebrow",
+          "type": "string",
+          "default": "''",
+          "required": "false",
+          "doc": "Short uppercase overline rendered above the headline."
+        },
+        {
+          "name": "centered",
+          "type": "boolean",
+          "default": "false",
+          "required": "false",
+          "doc": "Center the whole block — copy, headline and actions — instead of aligning it to the start."
+        }
+      ],
+      "slots": [
+        {
+          "name": "default",
+          "scope": "—",
+          "notes": "Description body; replaces the `description` prop when provided."
+        },
+        {
+          "name": "actions",
+          "scope": "—",
+          "notes": "Leading call-to-action row under the copy."
+        }
+      ],
+      "purpose": "The copy block of a hero band: an optional overline, the page's `h1` (with an optional opening phrase painted in the brand accent), a description and a row of leading calls to action, at hero scale. It is the hero counterpart of `section-title` and is meant to sit above a hero backdrop rather than to draw a frame of its own.",
+      "useWhen": [
+        "As the leading copy of a landing or marketing page, inside the hero band's container.",
+        "Whenever a page needs one accented statement, one supporting sentence and up to a couple of primary CTAs."
+      ],
+      "avoidWhen": [
+        "For a section header further down the page → use `section-title`, which renders an `h2` inside a frame.",
+        "For the top bar of an application shell → use `global-header` instead.",
+        "For a bordered, centered band with no `h1` → use `frame-box` instead."
+      ],
+      "related": [
+        "section-title` — the same anatomy at section scale, framed and centered, rendering an `h2`.",
+        "overline` — the eyebrow treatment above the headline.",
+        "frame-box` — the frame a hero band is usually built from."
+      ],
+      "bestPractices": [
+        "Use exactly one `hero-title` per page — it owns the `h1`, and a second one breaks the document outline.",
+        "Keep `highlight` to the opening phrase of the headline: it is part of the same sentence and the same accessible name, only painted differently.",
+        "Leave the block left-aligned (the default) when the backdrop is weighted to one side; `centered` is for a symmetric backdrop or a single statement.",
+        "Put the CTAs in the `actions` slot — it stacks them full-width below `sm`, which is what makes a hero button a comfortable thumb target."
+      ]
+    },
+    "section-title": {
+      "import": "@aziontech/webkit/section-title",
+      "target": "./src/components/content/section-title/section-title.vue",
+      "kind": "component",
+      "treeShakeableImport": "@aziontech/webkit/section-title",
+      "category": "content",
+      "structure": "monolithic",
+      "status": "approved",
+      "props": [
+        {
+          "name": "title",
+          "type": "string",
+          "default": "—",
+          "required": "true",
+          "doc": "Headline of the section, rendered as the section's `h2`."
+        },
+        {
+          "name": "description",
+          "type": "string",
+          "default": "''",
+          "required": "false",
+          "doc": "Supporting sentence under the headline; overridden by the default slot."
+        },
+        {
+          "name": "eyebrow",
+          "type": "string",
+          "default": "''",
+          "required": "false",
+          "doc": "Short uppercase overline rendered above the headline."
+        },
+        {
+          "name": "kind",
+          "type": "'centered' | 'left' | 'horizontal'",
+          "default": "'centered'",
+          "required": "false",
+          "doc": "Layout of the header: `centered` stacks and centers the copy, `left` stacks it at the start edge, `horizontal` sets the headline and its description in two columns."
+        }
+      ],
+      "slots": [
+        {
+          "name": "default",
+          "scope": "—",
+          "notes": "Description body; replaces the `description` prop when provided."
+        },
+        {
+          "name": "actions",
+          "scope": "—",
+          "notes": "Call-to-action row under the copy, aligned with the chosen `kind`."
+        }
+      ],
+      "purpose": "The framed header row that opens a page section: an optional overline, the section's `h2`, an optional description and an optional row of actions, held inside a registration frame whose bottom rule is what divides the header from the section body. `kind` picks the layout — `centered` for a symmetric opener, `left` for a reading-order one, and `horizontal` for a wide row that sets the headline against its description.",
+      "useWhen": [
+        "Opening a marketing or landing page section that needs a framed header.",
+        "Whenever the header itself should carry the rule that separates it from the content below, with no extra margin.",
+        "For a wide band whose headline and supporting sentence should sit side by side rather than stacked — `kind=\"horizontal\"`."
+      ],
+      "avoidWhen": [
+        "For the page's leading band and its `h1` → use `hero-title` instead.",
+        "For the top bar of an application shell → use `global-header` instead.",
+        "For a plain framed container with arbitrary content → use `frame-box` instead."
+      ],
+      "related": [
+        "hero-title` — the hero counterpart; renders the page's `h1` at hero scale.",
+        "frame-box` — the frame this component composes.",
+        "section-gap` — the empty frame that sets the air before and after a section header; this component holds no vertical air of its own beyond its padding.",
+        "overline` — the eyebrow treatment rendered above the headline."
+      ],
+      "bestPractices": [
+        "Keep one `section-title` per section, and let it own the section's `h2` so the page keeps one document outline.",
+        "Write the eyebrow as one or two words: it is set uppercase and prefixed with `//`, so a sentence in it reads as noise.",
+        "Reach for `horizontal` when the description is long enough to earn its own column — on a narrow viewport it stacks back under the headline.",
+        "Put the section's CTAs in the `actions` slot rather than in the body; the slot already stacks them fluid below `sm` and aligns them with the chosen `kind` above it.",
+        "The vertical rhythm around the header belongs to the `section-gap` frames on either side, not to this component."
+      ]
+    },
     "item": {
       "import": "@aziontech/webkit/item",
       "target": "./src/components/content/item/index.ts",
@@ -7946,6 +8100,125 @@
       ],
       "purpose": "Thin separator line that visually splits content into groups. Renders as a full-width hairline (`horizontal`) or full-height hairline (`vertical`), and can carry centered content (an \"Or\"-style label) when the default slot or `label` prop is set. Unlike `ScrollArea` it adds no scrolling behaviour; it is a purely decorative-yet-semantic boundary exposing `role=\"separator\"`."
     },
+    "frame-box": {
+      "import": "@aziontech/webkit/frame-box",
+      "target": "./src/components/layout/frame-box/frame-box.vue",
+      "kind": "component",
+      "treeShakeableImport": "@aziontech/webkit/frame-box",
+      "category": "layout",
+      "structure": "monolithic",
+      "status": "approved",
+      "props": [
+        {
+          "name": "borders",
+          "type": "'all' | 'none' | 'x' | 'y' | Side | Side[]",
+          "default": "'all'",
+          "required": "false",
+          "doc": "Which of the frame's own rules to draw. Takes a keyword, one side, or a list of sides."
+        },
+        {
+          "name": "marks",
+          "type": "'all' | 'none' | Edge | Corner | Corner[]",
+          "default": "'all'",
+          "required": "false",
+          "doc": "Which corner registration squares to draw. Takes a keyword (`all`, `none`, `top`, `bottom`, `left`, `right`), one corner, or a list of corners."
+        },
+        {
+          "name": "hatch",
+          "type": "boolean",
+          "default": "false",
+          "required": "false",
+          "doc": "Show the linear hatch texture behind the content, faded toward the edges. Reserved for `section-gap`, whose identity it is."
+        },
+        {
+          "name": "flush",
+          "type": "boolean | Side | Side[]",
+          "default": "false",
+          "required": "false",
+          "doc": "Which sides a neighbouring frame already draws, so this one does not draw them again. `true` is shorthand for `top`; use `left` for a horizontal row, or a list for a grid cell."
+        }
+      ],
+      "slots": [
+        {
+          "name": "default",
+          "scope": "—",
+          "notes": "Frame content; rendered above the hatch texture and stretched to the frame height."
+        }
+      ],
+      "purpose": "The registration frame: a hairline box with a small square set inside each corner and an optional linear hatch texture behind its content. Every side and every corner is addressable on its own, so frames stack and abut without doubling a rule or a mark. It is the container every framed page section is built from — a section title, the gap between two sections, a cell of a divider grid — so a page's rules and corner marks come from one component instead of from per-screen borders.",
+      "useWhen": [
+        "Wrapping a page section, band, or grid cell that should read as a framed module.",
+        "Building a page whose vertical rhythm is drawn by rules rather than by margins: stack frames and let `flush` collapse each junction to a single hairline.",
+        "Adding the corner registration marks (and optionally the hatch texture) to an area that already has its rules drawn by a surrounding grid — set `borders=\"none\"` and keep `marks`."
+      ],
+      "avoidWhen": [
+        "For a card-shaped surface with padding, a header and a footer → use `card-box` instead.",
+        "For a single separating line between two blocks → use `divider` instead.",
+        "For the empty framed band that separates two sections → use `section-gap`, which is this frame configured for that one job."
+      ],
+      "related": [
+        "section-gap` — an empty `frame-box` that holds the air between two sections.",
+        "section-title` — a `frame-box` around a centered section header.",
+        "card-box` — a padded surface with header/content/footer regions; a card, not a frame.",
+        "divider` — one hairline with optional centered label; no corners, no content."
+      ],
+      "bestPractices": [
+        "Stack or abut frames with `flush` so a shared edge reads as one hairline instead of two. It subtracts the named sides from this frame's own set, so it works vertically (`flush`, i.e. `top`) and horizontally (`flush=\"left\"`) with the same mechanic.",
+        "Use `borders` rather than overriding the border utilities from the call site: `y` for a full-bleed band that keeps only its top and bottom rules, `none` for a cell of a `gap-px` divider grid whose edges are already drawn by the grid's seams.",
+        "Keep `marks` on: the corner squares are the frame's identity, and they cost nothing when the rules are handed over to a grid. On a shared edge, pair `flush` with the opposite `marks` keyword (`flush` + `marks=\"bottom\"`, `flush=\"left\"` + `marks=\"right\"`) so the junction carries one rule and one mark per corner.",
+        "Reach for `hatch` sparingly — one hatched frame per view reads as texture; several read as noise."
+      ],
+      "styleSeam": true
+    },
+    "section-gap": {
+      "import": "@aziontech/webkit/section-gap",
+      "target": "./src/components/layout/section-gap/section-gap.vue",
+      "kind": "component",
+      "treeShakeableImport": "@aziontech/webkit/section-gap",
+      "category": "layout",
+      "structure": "monolithic",
+      "status": "approved",
+      "props": [
+        {
+          "name": "size",
+          "type": "'small' | 'medium' | 'large'",
+          "default": "'medium'",
+          "required": "false",
+          "doc": "How much vertical air the gap holds, as a multiple of `--spacing-xxl`: `small` is 1× (keeps two related bands close), `medium` 2× (the ordinary break), `large` 3× (opens a new part of the page). The token is responsive, so every step scales with the viewport."
+        },
+        {
+          "name": "hatch",
+          "type": "boolean",
+          "default": "false",
+          "required": "false",
+          "doc": "Draw the frame's linear hatch texture in the gap."
+        }
+      ],
+      "purpose": "The empty registration frame that divides two page sections. On a page with no margins between sections, this frame *is* the gap: it holds the vertical air, and its own two rules are what separate the sections it sits between — which is why it is a frame and not a spacer `div`. `size` picks how much air, on a three-step scale built from the theme's own spacing tokens.",
+      "useWhen": [
+        "Between two stacked page sections on a full-bleed, framed layout.",
+        "Wherever a page needs breathing room that still reads as part of the frame instead of as empty margin.",
+        "To change the weight of one break without touching its neighbours — a `large` gap before a new part of the page, `small` between two bands that belong together."
+      ],
+      "avoidWhen": [
+        "To space two elements inside a section → use the layout's own `gap-(--spacing-*)` utility.",
+        "To draw a single separating line with no air → use `divider` instead.",
+        "When the gap must hold content (a headline, a CTA) → use `section-title`, or a `frame-box` you fill yourself."
+      ],
+      "related": [
+        "frame-box` — the frame this component configures; reach for it directly when the gap needs content or different rules.",
+        "section-title` — the framed header that usually follows a gap; it owns no vertical air of its own beyond its padding, so the gaps around it are what set the page's rhythm.",
+        "divider` — a hairline with no vertical air."
+      ],
+      "bestPractices": [
+        "Pick the step by what the break means, not by how the page happens to look: `medium` is the ordinary break between sections, `large` opens a new part of the page, `small` keeps two related bands close.",
+        "Do not override the height from the call site. The steps are multiples of `--spacing-xxl`, so they already scale with the viewport; a hand-set height freezes one break out of the page rhythm.",
+        "Keep one step per break — stacking two gaps to reach a bigger one draws an extra pair of rules.",
+        "Let it carry the shared rule: it renders `flush` and `marks=\"bottom\"`, so its top rule and top ticks are subtracted and the section above supplies them instead of doubling them.",
+        "Reach for `hatch` here rather than on a section header: the gap is the one band with no copy of its own, so the texture gives the break identity without sitting behind a headline.",
+        "Do not wrap it in a padded container; the gap is the padding."
+      ]
+    },
     "scroll-area": {
       "import": "@aziontech/webkit/scroll-area",
       "target": "./src/components/layout/scroll-area/scroll-area.vue",
diff --git a/packages/webkit/package.json b/packages/webkit/package.json
index 8f397c663..5aeb7184e 100644
--- a/packages/webkit/package.json
+++ b/packages/webkit/package.json
@@ -130,6 +130,8 @@
     "./accordion-content": "./src/components/content/accordion/accordion-content/accordion-content.vue",
     "./card-box": "./src/components/content/card-box/card-box.vue",
     "./card-pricing": "./src/components/content/card-pricing/card-pricing.vue",
+    "./hero-title": "./src/components/content/hero-title/hero-title.vue",
+    "./section-title": "./src/components/content/section-title/section-title.vue",
     "./item": "./src/components/content/item/index.ts",
     "./item-root": "./src/components/content/item/item.vue",
     "./item-group": "./src/components/content/item/item-group.vue",
@@ -245,6 +247,8 @@
     "./select-group": "./src/components/inputs/select/select-group/select-group.vue",
     "./select-option": "./src/components/inputs/select/select-option/select-option.vue",
     "./divider": "./src/components/layout/divider/divider.vue",
+    "./frame-box": "./src/components/layout/frame-box/frame-box.vue",
+    "./section-gap": "./src/components/layout/section-gap/section-gap.vue",
     "./scroll-area": "./src/components/layout/scroll-area/scroll-area.vue",
     "./global-header": "./src/components/layout/global-header/index.js",
     "./sidebar": "./src/components/layout/sidebar/sidebar.vue",
diff --git a/packages/webkit/src/components/content/hero-title/hero-title.test.ts b/packages/webkit/src/components/content/hero-title/hero-title.test.ts
new file mode 100644
index 000000000..79061c820
--- /dev/null
+++ b/packages/webkit/src/components/content/hero-title/hero-title.test.ts
@@ -0,0 +1,152 @@
+import { composeStories } from '@storybook/vue3'
+import { render } from '@testing-library/vue'
+import { describe, expect, it } from 'vitest'
+
+import * as stories from '../../../../../../apps/storybook/src/stories/components/content/hero-title/HeroTitle.stories'
+import { expectNoA11yViolations } from '../../../test/axe'
+import HeroTitle from './hero-title.vue'
+
+const { Default, Highlight, Centered, WithActions } = composeStories(stories)
+
+const TESTID = 'content-hero-title'
+
+const props = { title: 'Run it everywhere.' }
+
+describe('HeroTitle', () => {
+  it('renders the headline as an h1 under the default testid', () => {
+    const { getByTestId, getByRole } = render(HeroTitle, { props })
+
+    expect(getByTestId(TESTID)).toBeInTheDocument()
+    expect(getByRole('heading', { level: 1 })).toHaveTextContent('Run it everywhere.')
+  })
+
+  it('renders no highlight span and is not centered by default', () => {
+    const { getByTestId } = render(HeroTitle, { props })
+    const root = getByTestId(TESTID)
+
+    expect(root).not.toHaveAttribute('data-centered')
+    expect(root.querySelector('h1 span')).toBeNull()
+  })
+
+  it('renders the highlight inside the same h1, so the accessible name is one sentence', () => {
+    const { getByRole } = render(HeroTitle, { props: { ...props, highlight: 'Build anything.' } })
+    const heading = getByRole('heading', { level: 1 })
+
+    expect(heading.querySelector('span')).toHaveTextContent('Build anything.')
+    expect(heading.textContent?.replace(/\s+/g, ' ').trim()).toBe(
+      'Build anything. Run it everywhere.'
+    )
+  })
+
+  it('marks the root centered when the centered prop is set', () => {
+    const { getByTestId } = render(HeroTitle, { props: { ...props, centered: true } })
+
+    expect(getByTestId(TESTID)).toHaveAttribute('data-centered', 'true')
+  })
+
+  it('renders no description paragraph when neither the prop nor the slot is set', () => {
+    const { container } = render(HeroTitle, { props })
+
+    expect(container.querySelector('p')).toBeNull()
+  })
+
+  it('renders the description prop', () => {
+    const { getByText } = render(HeroTitle, {
+      props: { ...props, description: 'Ship from one platform.' }
+    })
+
+    expect(getByText('Ship from one platform.')).toBeInTheDocument()
+  })
+
+  it('lets the default slot replace the description prop', () => {
+    const { getByText, queryByText } = render(HeroTitle, {
+      props: { ...props, description: 'ignored' },
+      slots: { default: 'slotted description' }
+    })
+
+    expect(getByText('slotted description')).toBeInTheDocument()
+    expect(queryByText('ignored')).toBeNull()
+  })
+
+  it('renders no eyebrow when the prop is empty', () => {
+    const { queryByText } = render(HeroTitle, { props })
+
+    expect(queryByText('Edge platform')).toBeNull()
+  })
+
+  it('renders the eyebrow when the prop is set', () => {
+    const { getByText } = render(HeroTitle, { props: { ...props, eyebrow: 'Edge platform' } })
+
+    expect(getByText('Edge platform')).toBeInTheDocument()
+  })
+
+  it('renders no actions row when the slot is empty', () => {
+    const { queryByRole } = render(HeroTitle, { props })
+
+    expect(queryByRole('button')).toBeNull()
+  })
+
+  it('renders the actions slot when it is filled', () => {
+    const { getByRole } = render(HeroTitle, {
+      props,
+      slots: { actions: '<button type="button">Start for free</button>' }
+    })
+
+    expect(getByRole('button', { name: 'Start for free' })).toBeInTheDocument()
+  })
+
+  it('forwards a consumer data-testid and class onto the root', () => {
+    const { getByTestId } = render(HeroTitle, {
+      props,
+      attrs: { 'data-testid': 'my-hero', class: 'max-w-(--container-3xl)' }
+    })
+
+    const root = getByTestId('my-hero')
+    expect(root.tagName).toBe('HEADER')
+    expect(root.className).toContain('max-w-(--container-3xl)')
+  })
+
+  it('has no a11y violations with the full copy block', async () => {
+    const { container } = render(HeroTitle, {
+      props: {
+        ...props,
+        eyebrow: 'Edge platform',
+        highlight: 'Build anything.',
+        description: 'Ship from one platform.'
+      }
+    })
+    await expectNoA11yViolations(container)
+  })
+
+  describe('stories', () => {
+    it('renders the Default story fixture', () => {
+      const { getByTestId, getByRole } = render(Default())
+
+      expect(getByTestId(TESTID)).not.toHaveAttribute('data-centered')
+      expect(getByRole('heading', { level: 1 })).toHaveTextContent('Run it everywhere.')
+    })
+
+    it('renders the Highlight story with the accent phrase in the h1', () => {
+      const { getByRole } = render(Highlight())
+
+      expect(getByRole('heading', { level: 1 }).querySelector('span')).toHaveTextContent(
+        'Build anything.'
+      )
+    })
+
+    it('renders the Centered story centered', () => {
+      const { getByTestId } = render(Centered())
+
+      expect(getByTestId(TESTID)).toHaveAttribute('data-centered', 'true')
+    })
+
+    it('renders the WithActions story with both CTAs', () => {
+      const { getAllByRole } = render(WithActions())
+
+      expect(getAllByRole('button').map((el) => el.textContent?.trim())).toEqual([
+        'Start for free',
+        'Talk to sales'
+      ])
+    })
+  })
+})
diff --git a/packages/webkit/src/components/content/hero-title/hero-title.vue b/packages/webkit/src/components/content/hero-title/hero-title.vue
new file mode 100644
index 000000000..389e12ccd
--- /dev/null
+++ b/packages/webkit/src/components/content/hero-title/hero-title.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+  import { computed, useAttrs } from 'vue'
+
+  import Overline from '../../overline/overline.vue'
+
+  defineOptions({
+    name: 'HeroTitle',
+    inheritAttrs: false
+  })
+
+  interface Props {
+    /** Headline of the page, rendered as the page's `h1`. */
+    title: string
+    /** Opening phrase of the headline, painted in the brand accent; reads as one sentence with `title`. */
+    highlight?: string
+    /** Supporting sentence under the headline; overridden by the default slot. */
+    description?: string
+    /** Short uppercase overline rendered above the headline. */
+    eyebrow?: string
+    /** Center the whole block — copy, headline and actions — instead of aligning it to the start. */
+    centered?: boolean
+  }
+
+  withDefaults(defineProps<Props>(), {
+    highlight: '',
+    description: '',
+    eyebrow: '',
+    centered: false
+  })
+
+  const slots = defineSlots<{
+    default?(): unknown
+    actions?(): unknown
+  }>()
+
+  const attrs = useAttrs()
+
+  const testId = computed(
+    () => (attrs['data-testid'] as string | undefined) ?? 'content-hero-title'
+  )
+</script>
+
+<template>
+  <header
+    v-bind="$attrs"
+    :data-testid="testId"
+    :data-centered="centered || null"
+    class="group flex flex-col items-start gap-(--spacing-md) data-[centered]:items-center data-[centered]:text-center"
+  >
+    <Overline v-if="eyebrow">{{ eyebrow }}</Overline>
+    <h1 class="m-0 max-w-(--container-4xl) text-balance text-heading-2xl text-(--text-default)">
+      <!-- The accent phrase: a discrete vertical gradient across the primary (one palette
+           family, so it reads as one colour catching the light rather than as two),
+           clipped to the glyphs, plus a soft glow. The glow is `drop-shadow` and not a
+           text shadow because the text itself is transparent here — the paint is the
+           clipped background, and only a filter sees that. -->
+      <span
+        v-if="highlight"
+        class="bg-[linear-gradient(180deg,var(--color-orange-400)_0%,var(--primary)_58%,var(--color-orange-600)_100%)] bg-clip-text text-transparent [filter:drop-shadow(0_0_2rem_color-mix(in_srgb,var(--primary)_30%,transparent))]"
+        >{{ highlight }}</span
+      >
+      {{ title }}
+    </h1>
+    <p
+      v-if="description || slots.default"
+      class="m-0 max-w-(--container-2xl) text-pretty text-body-lg text-(--text-muted)"
+    >
+      <slot>{{ description }}</slot>
+    </p>
+    <!-- The actions row owns its own layout so a caller only drops controls in. Below
+         `sm` the CTAs stack and go fluid — a hero button is the page's primary target —
+         and `[&>*]:w-full` is what carries that to the slotted children, since the
+         wrapper's own width says nothing about theirs. From `sm` up they return to a
+         content-width row. -->
+    <div
+      v-if="slots.actions"
+      class="mt-(--spacing-xs) flex w-full flex-col items-stretch gap-(--spacing-sm) [&>*]:w-full sm:w-auto sm:flex-row sm:items-center sm:[&>*]:w-auto sm:group-data-[centered]:justify-center"
+    >
+      <slot name="actions" />
+    </div>
+  </header>
+</template>
diff --git a/packages/webkit/src/components/content/section-title/section-title.test.ts b/packages/webkit/src/components/content/section-title/section-title.test.ts
new file mode 100644
index 000000000..177937a09
--- /dev/null
+++ b/packages/webkit/src/components/content/section-title/section-title.test.ts
@@ -0,0 +1,160 @@
+import { composeStories } from '@storybook/vue3'
+import { render } from '@testing-library/vue'
+import { describe, expect, it } from 'vitest'
+
+import * as stories from '../../../../../../apps/storybook/src/stories/components/content/section-title/SectionTitle.stories'
+import { expectNoA11yViolations } from '../../../test/axe'
+import SectionTitle from './section-title.vue'
+
+const { Default, Kinds, WithActions } = composeStories(stories)
+
+const TESTID = 'content-section-title'
+
+const props = { title: 'Everything runs at the edge' }
+
+describe('SectionTitle', () => {
+  it('renders the headline as an h2 under the default testid', () => {
+    const { getByTestId, getByRole } = render(SectionTitle, { props })
+
+    expect(getByTestId(TESTID)).toBeInTheDocument()
+    expect(getByRole('heading', { level: 2 })).toHaveTextContent('Everything runs at the edge')
+  })
+
+  it('renders inside a flush frame that keeps only its two dividing rules', () => {
+    const { getByTestId } = render(SectionTitle, { props })
+    const root = getByTestId(TESTID)
+
+    // flush="top" is subtracted from borders="y", so the header keeps only its bottom rule —
+    // the divider between the header and the section body.
+    expect(root).toHaveAttribute('data-flush', 'top')
+    expect(root).toHaveAttribute('data-borders', 'bottom')
+  })
+
+  it.each(['centered', 'left', 'horizontal'] as const)(
+    'reflects kind="%s" on data-kind',
+    (kind) => {
+      const { getByTestId } = render(SectionTitle, { props: { ...props, kind } })
+
+      expect(getByTestId(TESTID)).toHaveAttribute('data-kind', kind)
+    }
+  )
+
+  it('defaults to the centered kind', () => {
+    const { getByTestId } = render(SectionTitle, { props })
+
+    expect(getByTestId(TESTID)).toHaveAttribute('data-kind', 'centered')
+  })
+
+  it.each(['centered', 'left', 'horizontal'] as const)(
+    'keeps the headline before its description in DOM order when kind="%s"',
+    (kind) => {
+      const { container } = render(SectionTitle, {
+        props: { ...props, kind, eyebrow: 'Platform', description: 'One platform.' }
+      })
+
+      const heading = container.querySelector('h2')
+      const paragraph = container.querySelector('p:last-of-type')
+
+      expect(heading).toHaveTextContent('Everything runs at the edge')
+      expect(paragraph).toHaveTextContent('One platform.')
+      // Node.DOCUMENT_POSITION_FOLLOWING === 4: the description follows the headline, so the
+      // reading order matches the visual one in every layout — including the two-column one.
+      expect(heading.compareDocumentPosition(paragraph) & 4).toBe(4)
+    }
+  )
+
+  it('renders no description paragraph when neither the prop nor the slot is set', () => {
+    const { container } = render(SectionTitle, { props })
+
+    expect(container.querySelector('p')).toBeNull()
+  })
+
+  it('renders the description prop', () => {
+    const { getByText } = render(SectionTitle, {
+      props: { ...props, description: 'One platform for everything.' }
+    })
+
+    expect(getByText('One platform for everything.')).toBeInTheDocument()
+  })
+
+  it('lets the default slot replace the description prop', () => {
+    const { getByText, queryByText } = render(SectionTitle, {
+      props: { ...props, description: 'ignored' },
+      slots: { default: 'slotted description' }
+    })
+
+    expect(getByText('slotted description')).toBeInTheDocument()
+    expect(queryByText('ignored')).toBeNull()
+  })
+
+  it('renders no eyebrow when the prop is empty', () => {
+    const { queryByText } = render(SectionTitle, { props })
+
+    expect(queryByText('Platform')).toBeNull()
+  })
+
+  it('renders the eyebrow when the prop is set', () => {
+    const { getByText } = render(SectionTitle, { props: { ...props, eyebrow: 'Platform' } })
+
+    expect(getByText('Platform')).toBeInTheDocument()
+  })
+
+  it('renders no actions row when the slot is empty', () => {
+    const { queryByRole } = render(SectionTitle, { props })
+
+    expect(queryByRole('button')).toBeNull()
+  })
+
+  it('renders the actions slot when it is filled', () => {
+    const { getByRole } = render(SectionTitle, {
+      props,
+      slots: { actions: '<button type="button">Start building</button>' }
+    })
+
+    expect(getByRole('button', { name: 'Start building' })).toBeInTheDocument()
+  })
+
+  it('forwards a consumer data-testid onto the root', () => {
+    const { getByTestId } = render(SectionTitle, {
+      props,
+      attrs: { 'data-testid': 'my-section-title' }
+    })
+
+    expect(getByTestId('my-section-title')).toHaveAttribute('data-kind', 'centered')
+  })
+
+  it('has no a11y violations with the full copy block', async () => {
+    const { container } = render(SectionTitle, {
+      props: { ...props, eyebrow: 'Platform', description: 'One platform for everything.' }
+    })
+    await expectNoA11yViolations(container)
+  })
+
+  describe('stories', () => {
+    it('renders the Default story fixture', () => {
+      const { getByTestId, getByRole } = render(Default())
+
+      expect(getByTestId(TESTID)).toHaveAttribute('data-kind', 'centered')
+      expect(getByRole('heading', { level: 2 })).toHaveTextContent('Everything runs at the edge')
+    })
+
+    it('renders the Kinds story with one header per layout', () => {
+      const { getAllByTestId } = render(Kinds())
+
+      expect(getAllByTestId(TESTID).map((el) => el.getAttribute('data-kind'))).toEqual([
+        'centered',
+        'left',
+        'horizontal'
+      ])
+    })
+
+    it('renders the WithActions story with both CTAs', () => {
+      const { getAllByRole } = render(WithActions())
+
+      expect(getAllByRole('button').map((el) => el.textContent?.trim())).toEqual([
+        'Start building',
+        'Read the docs'
+      ])
+    })
+  })
+})
diff --git a/packages/webkit/src/components/content/section-title/section-title.vue b/packages/webkit/src/components/content/section-title/section-title.vue
new file mode 100644
index 000000000..97030a05f
--- /dev/null
+++ b/packages/webkit/src/components/content/section-title/section-title.vue
@@ -0,0 +1,131 @@
+<script setup lang="ts">
+  import { computed, useAttrs } from 'vue'
+
+  import FrameBox from '../../layout/frame-box/frame-box.vue'
+  import Overline from '../../overline/overline.vue'
+
+  defineOptions({
+    name: 'SectionTitle',
+    inheritAttrs: false
+  })
+
+  /** Layout of the header row. */
+  export type SectionTitleKind = 'centered' | 'left' | 'horizontal'
+
+  interface Props {
+    /** Headline of the section, rendered as the section's `h2`. */
+    title: string
+    /** Supporting sentence under the headline; overridden by the default slot. */
+    description?: string
+    /** Short uppercase overline rendered above the headline. */
+    eyebrow?: string
+    /** Layout of the header: `centered` stacks and centers the copy, `left` stacks it at the start edge, `horizontal` sets the headline and its description in two columns. */
+    kind?: SectionTitleKind
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    description: '',
+    eyebrow: '',
+    kind: 'centered'
+  })
+
+  const slots = defineSlots<{
+    default?(): unknown
+    actions?(): unknown
+  }>()
+
+  const attrs = useAttrs()
+
+  const testId = computed(
+    () => (attrs['data-testid'] as string | undefined) ?? 'content-section-title'
+  )
+
+  const hasDescription = computed<boolean>(
+    () => Boolean(slots.default) || props.description.length > 0
+  )
+</script>
+
+<template>
+  <!-- There is no gap around the frame: it spans the column edge to edge and its own bottom
+       rule is what divides the title from the section body, so the row adds no outer margin
+       and no second line. The header holds no vertical air of its own beyond this padding —
+       the rhythm around it belongs to the SectionGap frames on either side. -->
+  <FrameBox
+    v-bind="$attrs"
+    flush
+    borders="y"
+    marks="bottom"
+    :data-testid="testId"
+    :data-kind="kind"
+    class="group"
+  >
+    <div
+      class="flex flex-col items-start gap-(--spacing-xl) px-(--spacing-xl) py-(--spacing-xxl) group-data-[kind=centered]:items-center"
+    >
+      <!-- Horizontal: the overline leads, then the headline and its description share a
+           three-column grid — headline in the first column, description in the third, the
+           middle column left as air. Below `md` the grid collapses to one column and the
+           description falls back under the headline, in reading order. -->
+      <div
+        v-if="kind === 'horizontal'"
+        class="flex w-full flex-col gap-(--spacing-lg)"
+      >
+        <Overline
+          v-if="eyebrow"
+          prefix="//"
+          show-cursor
+          >{{ eyebrow }}</Overline
+        >
+        <div class="grid gap-(--spacing-xl) md:grid-cols-3">
+          <h2 class="m-0 text-balance text-heading-xl text-(--text-default)">
+            {{ title }}
+          </h2>
+          <p
+            v-if="hasDescription"
+            class="m-0 self-start text-pretty text-heading-sm text-(--text-muted) md:col-start-3"
+          >
+            <slot>{{ description }}</slot>
+          </p>
+        </div>
+      </div>
+
+      <!-- Centered and left share one stacked column; only the alignment differs, which is
+           why it switches on the root's `data-kind` instead of on a second template. -->
+      <div
+        v-else
+        class="flex w-full max-w-(--container-2xl) flex-col gap-(--spacing-lg) group-data-[kind=centered]:items-center group-data-[kind=centered]:text-center"
+      >
+        <!-- The overline anatomy the framed sections share: a `//` prefix, the label in the
+             accent, and the blinking cursor. All three are props of Overline, so this is the
+             DS component configured — not a copy of its look. -->
+        <Overline
+          v-if="eyebrow"
+          prefix="//"
+          show-cursor
+          >{{ eyebrow }}</Overline
+        >
+        <h2 class="m-0 text-balance text-heading-xl text-(--text-default)">
+          {{ title }}
+        </h2>
+        <p
+          v-if="hasDescription"
+          class="m-0 text-pretty text-heading-sm text-(--text-muted)"
+        >
+          <slot>{{ description }}</slot>
+        </p>
+      </div>
+
+      <!-- The actions row stacks and goes fluid below `sm` — a section CTA is a primary
+           target and a thumb should not have to aim at a shrink-wrapped label — and
+           `[&>*]:w-full` is what reaches the slotted controls, since the wrapper's own width
+           says nothing about theirs. From `sm` up it is a content-width row, centered only
+           when the header is. -->
+      <div
+        v-if="slots.actions"
+        class="flex w-full flex-col items-stretch gap-(--spacing-md) [&>*]:w-full sm:w-auto sm:flex-row sm:items-center sm:[&>*]:w-auto sm:group-data-[kind=centered]:justify-center"
+      >
+        <slot name="actions" />
+      </div>
+    </div>
+  </FrameBox>
+</template>
diff --git a/packages/webkit/src/components/layout/frame-box/frame-box.test.ts b/packages/webkit/src/components/layout/frame-box/frame-box.test.ts
new file mode 100644
index 000000000..cbce696bc
--- /dev/null
+++ b/packages/webkit/src/components/layout/frame-box/frame-box.test.ts
@@ -0,0 +1,236 @@
+import { composeStories } from '@storybook/vue3'
+import { render } from '@testing-library/vue'
+import { describe, expect, it } from 'vitest'
+
+import * as stories from '../../../../../../apps/storybook/src/stories/components/layout/frame-box/FrameBox.stories'
+import { expectNoA11yViolations } from '../../../test/axe'
+import FrameBox from './frame-box.vue'
+
+const { Default, Borders, Marks, Hatch, Flush } = composeStories(stories)
+
+const TESTID = 'layout-frame-box'
+
+/** The resolved side/corner list off a `data-*` attribute, sorted so order is not asserted. */
+const sides = (el: HTMLElement, attr: string) => {
+  const value = el.getAttribute(attr)
+  return value && value !== 'none' ? value.split(' ').sort() : []
+}
+
+describe('FrameBox', () => {
+  it('renders with the default testid and the default frame configuration', () => {
+    const { getByTestId } = render(FrameBox)
+    const root = getByTestId(TESTID)
+
+    expect(root).toBeInTheDocument()
+    // borders/marks carry the RESOLVED side and corner lists, not the raw keyword.
+    expect(sides(root, 'data-borders')).toEqual(['bottom', 'left', 'right', 'top'])
+    expect(sides(root, 'data-marks')).toEqual([
+      'bottom-left',
+      'bottom-right',
+      'top-left',
+      'top-right'
+    ])
+    expect(root).not.toHaveAttribute('data-hatch')
+    expect(root).not.toHaveAttribute('data-flush')
+  })
+
+  it.each([
+    ['all', ['bottom', 'left', 'right', 'top']],
+    ['x', ['left', 'right']],
+    ['y', ['bottom', 'top']],
+    ['top', ['top']],
+    ['left', ['left']],
+    ['none', []]
+  ] as const)('resolves borders="%s" to its sides', (borders, expected) => {
+    const { getByTestId } = render(FrameBox, { props: { borders } })
+
+    expect(sides(getByTestId(TESTID), 'data-borders')).toEqual([...expected])
+  })
+
+  it('accepts an explicit list of sides', () => {
+    const { getByTestId } = render(FrameBox, { props: { borders: ['top', 'left'] } })
+    const root = getByTestId(TESTID)
+
+    expect(sides(root, 'data-borders')).toEqual(['left', 'top'])
+  })
+
+  it('renders the four corner marks by default', () => {
+    const { getByTestId } = render(FrameBox)
+
+    expect(getByTestId(TESTID).querySelectorAll('span[aria-hidden="true"]')).toHaveLength(4)
+  })
+
+  it.each([
+    ['all', ['bottom-left', 'bottom-right', 'top-left', 'top-right']],
+    ['top', ['top-left', 'top-right']],
+    ['bottom', ['bottom-left', 'bottom-right']],
+    ['left', ['bottom-left', 'top-left']],
+    ['right', ['bottom-right', 'top-right']],
+    ['top-right', ['top-right']],
+    ['none', []]
+  ] as const)('resolves marks="%s" to its corners', (marks, expected) => {
+    const { getByTestId } = render(FrameBox, { props: { marks } })
+    const root = getByTestId(TESTID)
+
+    expect(sides(root, 'data-marks')).toEqual([...expected])
+    expect(root.querySelectorAll('span[aria-hidden="true"]')).toHaveLength(expected.length)
+  })
+
+  it('accepts an explicit list of corners', () => {
+    const { getByTestId } = render(FrameBox, {
+      props: { marks: ['top-left', 'bottom-right'] }
+    })
+    const root = getByTestId(TESTID)
+
+    expect(sides(root, 'data-marks')).toEqual(['bottom-right', 'top-left'])
+    expect(root.querySelectorAll('span[aria-hidden="true"]')).toHaveLength(2)
+  })
+
+  it.each([
+    ['top', 'top-0'],
+    ['bottom', 'bottom-0'],
+    ['left', 'left-0'],
+    ['right', 'right-0']
+  ] as const)('anchors the marks="%s" pair to its own edge', (marks, edgeClass) => {
+    const { getByTestId } = render(FrameBox, { props: { marks } })
+    const squares = [...getByTestId(TESTID).querySelectorAll('span[aria-hidden="true"]')]
+
+    expect(squares).toHaveLength(2)
+    expect(squares.every((square) => square.className.includes(edgeClass))).toBe(true)
+  })
+
+  it('renders the decorative hatch layer only when hatch is set', () => {
+    const { getByTestId } = render(FrameBox, { props: { hatch: true } })
+    const root = getByTestId(TESTID)
+
+    expect(root).toHaveAttribute('data-hatch', 'true')
+    // The hatch is a decorative div (the marks are spans), hidden from a11y.
+    expect(root.querySelectorAll('div[aria-hidden="true"]')).toHaveLength(1)
+  })
+
+  it('treats a bare flush as the top side and drops that rule', () => {
+    const { getByTestId } = render(FrameBox, { props: { flush: true } })
+    const root = getByTestId(TESTID)
+
+    expect(root).toHaveAttribute('data-flush', 'top')
+    expect(sides(root, 'data-borders')).toEqual(['bottom', 'left', 'right'])
+  })
+
+  it.each([
+    ['top', ['bottom', 'left', 'right']],
+    ['right', ['bottom', 'left', 'top']],
+    ['bottom', ['left', 'right', 'top']],
+    ['left', ['bottom', 'right', 'top']]
+  ] as const)('flushes the %s side on either axis', (flush, remaining) => {
+    const { getByTestId } = render(FrameBox, { props: { flush } })
+    const root = getByTestId(TESTID)
+
+    expect(root).toHaveAttribute('data-flush', flush)
+    expect(sides(root, 'data-borders')).toEqual([...remaining])
+  })
+
+  it('flushes several sides at once for a grid cell', () => {
+    const { getByTestId } = render(FrameBox, { props: { flush: ['top', 'left'] } })
+    const root = getByTestId(TESTID)
+
+    expect(sides(root, 'data-flush')).toEqual(['left', 'top'])
+    expect(sides(root, 'data-borders')).toEqual(['bottom', 'right'])
+  })
+
+  it('never leaves a flushed side in the border set', () => {
+    const { getByTestId } = render(FrameBox, { props: { borders: 'y', flush: 'top' } })
+    const root = getByTestId(TESTID)
+
+    expect(sides(root, 'data-borders')).toEqual(['bottom'])
+  })
+
+  it('renders default slot content above the decorative layers', () => {
+    const { getByTestId, getByText } = render(FrameBox, {
+      props: { hatch: true },
+      slots: { default: '<p>Framed content</p>' }
+    })
+
+    const content = getByText('Framed content')
+    expect(getByTestId(TESTID)).toContainElement(content)
+  })
+
+  it('forwards a consumer data-testid and class onto the root', () => {
+    const { getByTestId } = render(FrameBox, {
+      attrs: { 'data-testid': 'my-frame', class: 'h-40' }
+    })
+
+    const root = getByTestId('my-frame')
+    expect(sides(root, 'data-borders')).toEqual(['bottom', 'left', 'right', 'top'])
+    expect(root.className).toContain('h-40')
+  })
+
+  it('has no a11y violations in its default configuration', async () => {
+    const { container } = render(FrameBox, { slots: { default: '<p>Framed content</p>' } })
+    await expectNoA11yViolations(container)
+  })
+
+  it('has no a11y violations with the hatch texture on', async () => {
+    const { container } = render(FrameBox, {
+      props: { hatch: true },
+      slots: { default: '<p>Framed content</p>' }
+    })
+    await expectNoA11yViolations(container)
+  })
+
+  describe('stories', () => {
+    it('renders the Default story fixture', () => {
+      const { getByTestId, getByText } = render(Default())
+      const root = getByTestId(TESTID)
+
+      expect(sides(root, 'data-borders')).toEqual(['bottom', 'left', 'right', 'top'])
+      expect(getByText('Framed content')).toBeInTheDocument()
+    })
+
+    it('renders the Borders story with one frame per borders value', () => {
+      const { getAllByTestId } = render(Borders())
+      const frames = getAllByTestId(TESTID)
+
+      expect(frames.map((frame) => sides(frame, 'data-borders'))).toEqual([
+        ['bottom', 'left', 'right', 'top'],
+        ['left', 'right'],
+        ['bottom', 'top'],
+        ['top'],
+        ['left', 'top'],
+        []
+      ])
+    })
+
+    it('renders the Hatch story with the texture on', () => {
+      const { getByTestId } = render(Hatch())
+
+      expect(getByTestId(TESTID)).toHaveAttribute('data-hatch', 'true')
+    })
+
+    it('renders the Marks story with one frame per marks value', () => {
+      const { getAllByTestId } = render(Marks())
+      const frames = getAllByTestId(TESTID)
+
+      expect(frames.map((frame) => sides(frame, 'data-marks'))).toEqual([
+        ['bottom-left', 'bottom-right', 'top-left', 'top-right'],
+        ['top-left', 'top-right'],
+        ['bottom-left', 'top-left'],
+        ['top-right'],
+        ['bottom-right', 'top-left'],
+        []
+      ])
+    })
+
+    it('renders the Flush story with a vertical and a horizontal shared edge', () => {
+      const { getAllByTestId } = render(Flush())
+      const [stackTop, stackBottom, rowLeft, rowRight] = getAllByTestId(TESTID)
+
+      expect(stackTop).not.toHaveAttribute('data-flush')
+      expect(stackBottom).toHaveAttribute('data-flush', 'top')
+      expect(sides(stackBottom, 'data-borders')).toEqual(['bottom', 'left', 'right'])
+
+      expect(rowLeft).not.toHaveAttribute('data-flush')
+      expect(rowRight).toHaveAttribute('data-flush', 'left')
+      expect(sides(rowRight, 'data-borders')).toEqual(['bottom', 'right', 'top'])
+    })
+  })
+})
diff --git a/packages/webkit/src/components/layout/frame-box/frame-box.vue b/packages/webkit/src/components/layout/frame-box/frame-box.vue
new file mode 100644
index 000000000..5391c8ca5
--- /dev/null
+++ b/packages/webkit/src/components/layout/frame-box/frame-box.vue
@@ -0,0 +1,159 @@
+<script setup lang="ts">
+  import { computed, useAttrs } from 'vue'
+
+  defineOptions({
+    name: 'FrameBox',
+    inheritAttrs: false
+  })
+
+  /** A single edge of the frame. */
+  export type FrameBoxSide = 'top' | 'right' | 'bottom' | 'left'
+  /** A single corner of the frame. */
+  export type FrameBoxCorner = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
+  /** Any way of naming a set of edges: a keyword, one edge, or an explicit list. */
+  export type FrameBoxSides = 'all' | 'none' | 'x' | 'y' | FrameBoxSide | FrameBoxSide[]
+  /** Any way of naming a set of corners: a keyword, one corner, or an explicit list. */
+  export type FrameBoxMarks =
+    'all' | 'none' | 'top' | 'bottom' | 'left' | 'right' | FrameBoxCorner | FrameBoxCorner[]
+
+  interface Props {
+    /** Which of the frame's own rules to draw. Takes a keyword (`all`, `none`, `x`, `y`), one side, or a list of sides. */
+    borders?: FrameBoxSides
+    /** Which corner registration squares to draw. Takes a keyword (`all`, `none`, `top`, `bottom`, `left`, `right`), one corner, or a list of corners. */
+    marks?: FrameBoxMarks
+    /** Show the linear hatch texture behind the content, faded toward the edges. Reserved for `section-gap`, whose identity it is. */
+    hatch?: boolean
+    /** Which sides a neighbouring frame already draws, so this one does not draw them again. `true` is shorthand for `top` (a vertical stack); use `left` for a horizontal row, or a list for a grid cell. */
+    flush?: boolean | FrameBoxSides
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    borders: 'all',
+    marks: 'all',
+    hatch: false,
+    flush: false
+  })
+
+  defineSlots<{
+    default(): unknown
+  }>()
+
+  const attrs = useAttrs()
+
+  const testId = computed(() => (attrs['data-testid'] as string | undefined) ?? 'layout-frame-box')
+
+  // Every "which parts" prop resolves to a set of side / corner names, so a keyword, a single
+  // name and an explicit list are the same thing by the time anything renders. `flush` is the
+  // one that also accepts `true`, because a bare `flush` attribute is how a vertical stack
+  // reads and `top` is what that means.
+  function resolveSides(value: boolean | FrameBoxSides): Set<FrameBoxSide> {
+    if (value === true) return new Set<FrameBoxSide>(['top'])
+    if (value === false || value === 'none') return new Set<FrameBoxSide>()
+    if (value === 'all') return new Set<FrameBoxSide>(['top', 'right', 'bottom', 'left'])
+    if (value === 'x') return new Set<FrameBoxSide>(['left', 'right'])
+    if (value === 'y') return new Set<FrameBoxSide>(['top', 'bottom'])
+    return new Set<FrameBoxSide>(Array.isArray(value) ? value : [value])
+  }
+
+  function resolveCorners(value: FrameBoxMarks): Set<FrameBoxCorner> {
+    if (value === 'none') return new Set<FrameBoxCorner>()
+    if (value === 'all')
+      return new Set<FrameBoxCorner>(['top-left', 'top-right', 'bottom-left', 'bottom-right'])
+    if (value === 'top') return new Set<FrameBoxCorner>(['top-left', 'top-right'])
+    if (value === 'bottom') return new Set<FrameBoxCorner>(['bottom-left', 'bottom-right'])
+    if (value === 'left') return new Set<FrameBoxCorner>(['top-left', 'bottom-left'])
+    if (value === 'right') return new Set<FrameBoxCorner>(['top-right', 'bottom-right'])
+    return new Set<FrameBoxCorner>(Array.isArray(value) ? value : [value])
+  }
+
+  const flushSides = computed(() => resolveSides(props.flush))
+
+  // `flush` is a subtraction, not an override: a side a neighbour already draws is simply not
+  // in this frame's set. That is what makes it work on both axes — dropping `left` for a frame
+  // in a horizontal row is the same operation as dropping `top` in a vertical stack — and it
+  // means a shared edge is one rule at one colour, never two hairlines meeting.
+  const borderSides = computed(() => {
+    const sides = resolveSides(props.borders)
+    for (const side of flushSides.value) sides.delete(side)
+    return sides
+  })
+
+  const markCorners = computed(() => resolveCorners(props.marks))
+
+  // Space-separated so a Tailwind `data-[borders~=top]:` variant can match one name out of the
+  // list; `none` keeps the attribute readable (and unmatchable) when the set is empty.
+  const listAttr = (names: Set<string>) => (names.size > 0 ? [...names].join(' ') : 'none')
+
+  const bordersAttr = computed(() => listAttr(borderSides.value))
+  const marksAttr = computed(() => listAttr(markCorners.value))
+  const flushAttr = computed(() =>
+    flushSides.value.size > 0 ? [...flushSides.value].join(' ') : null
+  )
+
+  const hasCorner = (corner: FrameBoxCorner) => markCorners.value.has(corner)
+
+  // Each square is anchored to a corner and inset from both rules by its own margin,
+  // so the mark sits INSIDE the frame instead of straddling the border line. At 6px
+  // filled it reads as a tick in the corner, not as a second, competing border.
+  const MARK_CLASS = 'pointer-events-none absolute z-20 m-1 block size-1.5 bg-(--border-default)'
+</script>
+
+<template>
+  <!-- Rules, corner marks and hatch are all `--border-default`, an OPAQUE step of the surface
+       palette — so a rule has one identity on every backdrop and two of them meeting cannot
+       composite into a brighter line, which is what made a stacked junction read as a double
+       rule. Sides and corners are addressed individually: `data-borders` carries the resolved
+       side list and each edge matches its own `data-[borders~=…]` variant. -->
+  <div
+    v-bind="$attrs"
+    :data-testid="testId"
+    :data-borders="bordersAttr"
+    :data-marks="marksAttr"
+    :data-hatch="hatch || null"
+    :data-flush="flushAttr"
+    class="relative border-(--border-default) data-[borders~=bottom]:border-b data-[borders~=left]:border-l data-[borders~=right]:border-r data-[borders~=top]:border-t"
+  >
+    <!-- Linear hatch texture — vertical rules at a fixed pitch, faded toward the edges by the
+         radial mask alone, so the line colour is the texture's full strength at the centre.
+         It is the design asset that gives a SectionGap its identity; see that component. -->
+    <div
+      v-if="hatch"
+      aria-hidden="true"
+      class="pointer-events-none absolute inset-0 [background-image:repeating-linear-gradient(to_right,var(--border-default)_0,var(--border-default)_1px,transparent_1px,transparent_var(--spacing-lg))] mask-[radial-gradient(ellipse_at_center,black_35%,transparent_90%)]"
+    />
+
+    <!-- Corner registration squares, one per corner. Stacked or abutting frames share an edge,
+         so drawing both neighbours' ticks puts two squares a few pixels apart on one line;
+         addressing corners individually is what lets a stack read as one mark per corner, the
+         same way `flush` gives it one rule per shared edge. -->
+    <span
+      v-if="hasCorner('top-left')"
+      aria-hidden="true"
+      :class="[MARK_CLASS, 'left-0 top-0']"
+    />
+    <span
+      v-if="hasCorner('top-right')"
+      aria-hidden="true"
+      :class="[MARK_CLASS, 'right-0 top-0']"
+    />
+    <span
+      v-if="hasCorner('bottom-left')"
+      aria-hidden="true"
+      :class="[MARK_CLASS, 'left-0 bottom-0']"
+    />
+    <span
+      v-if="hasCorner('bottom-right')"
+      aria-hidden="true"
+      :class="[MARK_CLASS, 'right-0 bottom-0']"
+    />
+
+    <!-- Content sits above the hatch texture. `h-full` is what lets a frame used as a
+         grid cell hand its stretched height down to the content: against an auto-height
+         frame it resolves to auto, but when the grid stretches the frame to the tallest
+         cell in the row, the content fills it — so a cell can push its footer onto the
+         row's bottom edge and align with its neighbours. -->
+    <div class="relative z-10 h-full">
+      <slot />
+    </div>
+  </div>
+</template>
diff --git a/packages/webkit/src/components/layout/section-gap/section-gap.test.ts b/packages/webkit/src/components/layout/section-gap/section-gap.test.ts
new file mode 100644
index 000000000..122ca7598
--- /dev/null
+++ b/packages/webkit/src/components/layout/section-gap/section-gap.test.ts
@@ -0,0 +1,107 @@
+import { composeStories } from '@storybook/vue3'
+import { render } from '@testing-library/vue'
+import { describe, expect, it } from 'vitest'
+
+import * as stories from '../../../../../../apps/storybook/src/stories/components/layout/section-gap/SectionGap.stories'
+import { expectNoA11yViolations } from '../../../test/axe'
+import SectionGap from './section-gap.vue'
+
+const { Default, Hatch, Sizes } = composeStories(stories)
+
+const TESTID = 'layout-section-gap'
+const FRAME_TESTID = 'layout-frame-box'
+
+describe('SectionGap', () => {
+  it('renders the gap frame under its own testid, not the frame-box fallback', () => {
+    const { getByTestId, queryByTestId } = render(SectionGap)
+
+    expect(getByTestId(TESTID)).toBeInTheDocument()
+    expect(queryByTestId(FRAME_TESTID)).toBeNull()
+  })
+
+  it('renders as a flush frame that keeps only its two dividing rules', () => {
+    const { getByTestId } = render(SectionGap)
+    const root = getByTestId(TESTID)
+
+    // flush="top" is subtracted from borders="y", so only the bottom rule is left.
+    expect(root).toHaveAttribute('data-flush', 'top')
+    expect(root).toHaveAttribute('data-borders', 'bottom')
+    // Only the bottom pair of ticks: the section above supplies the shared junction's marks.
+    expect(root.getAttribute('data-marks')?.split(' ').sort()).toEqual([
+      'bottom-left',
+      'bottom-right'
+    ])
+    expect(root.querySelectorAll('span[aria-hidden="true"]')).toHaveLength(2)
+  })
+
+  it('draws no hatch texture by default', () => {
+    const { getByTestId } = render(SectionGap)
+    const root = getByTestId(TESTID)
+
+    expect(root).not.toHaveAttribute('data-hatch')
+    expect(root.querySelectorAll('div[aria-hidden="true"]')).toHaveLength(0)
+  })
+
+  it('draws one hatch layer when hatch is set', () => {
+    const { getByTestId } = render(SectionGap, { props: { hatch: true } })
+    const root = getByTestId(TESTID)
+
+    expect(root).toHaveAttribute('data-hatch', 'true')
+    expect(root.querySelectorAll('div[aria-hidden="true"]')).toHaveLength(1)
+  })
+
+  it('defaults to the medium size', () => {
+    const { getByTestId } = render(SectionGap)
+
+    expect(getByTestId(TESTID)).toHaveAttribute('data-size', 'medium')
+  })
+
+  it.each(['small', 'medium', 'large'] as const)('reflects size="%s" on data-size', (size) => {
+    const { getByTestId } = render(SectionGap, { props: { size } })
+
+    expect(getByTestId(TESTID)).toHaveAttribute('data-size', size)
+  })
+
+  it('holds no content of its own', () => {
+    const { getByTestId } = render(SectionGap)
+
+    expect(getByTestId(TESTID)).toHaveTextContent('')
+  })
+
+  it('forwards a consumer data-testid onto the root', () => {
+    const { getByTestId } = render(SectionGap, { attrs: { 'data-testid': 'my-gap' } })
+
+    expect(getByTestId('my-gap')).toHaveAttribute('data-borders', 'bottom')
+  })
+
+  it('has no a11y violations', async () => {
+    const { container } = render(SectionGap)
+    await expectNoA11yViolations(container)
+  })
+
+  describe('stories', () => {
+    it('renders the Default story with the gap between two stub sections', () => {
+      const { getByTestId, getByText } = render(Default())
+
+      expect(getByText('Section above')).toBeInTheDocument()
+      expect(getByTestId(TESTID)).toHaveAttribute('data-flush', 'top')
+      expect(getByText('Section below')).toBeInTheDocument()
+    })
+
+    it('renders the Hatch story with the texture drawn in the gap', () => {
+      const { getByTestId } = render(Hatch())
+
+      expect(getByTestId(TESTID)).toHaveAttribute('data-hatch', 'true')
+    })
+
+    it('renders the Sizes story with one gap per size step', () => {
+      const { getAllByTestId } = render(Sizes())
+
+      expect(getAllByTestId(TESTID).map((el) => el.getAttribute('data-size'))).toEqual([
+        'small',
+        'medium',
+        'large'
+      ])
+    })
+  })
+})
diff --git a/packages/webkit/src/components/layout/section-gap/section-gap.vue b/packages/webkit/src/components/layout/section-gap/section-gap.vue
new file mode 100644
index 000000000..573b7617a
--- /dev/null
+++ b/packages/webkit/src/components/layout/section-gap/section-gap.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+  import { computed, useAttrs } from 'vue'
+
+  import FrameBox from '../frame-box/frame-box.vue'
+
+  defineOptions({
+    name: 'SectionGap',
+    inheritAttrs: false
+  })
+
+  /** How much vertical air the gap holds. */
+  export type SectionGapSize = 'small' | 'medium' | 'large'
+
+  interface Props {
+    /** How much vertical air the gap holds, as a multiple of the theme's largest spacing step: `small` is one `--spacing-xxl`, `medium` two, `large` three. The token is responsive, so every step scales with the viewport. */
+    size?: SectionGapSize
+    /** Draw the frame's diagonal hatch texture in the gap. */
+    hatch?: boolean
+  }
+
+  withDefaults(defineProps<Props>(), {
+    size: 'medium',
+    hatch: false
+  })
+
+  const attrs = useAttrs()
+
+  const testId = computed(
+    () => (attrs['data-testid'] as string | undefined) ?? 'layout-section-gap'
+  )
+</script>
+
+<template>
+  <!-- The three steps are one, two and three times `--spacing-xxl`, the largest step of the
+       theme's own spacing scale — so the gap adds no scale of its own, and it is responsive
+       for free: that token already resolves to 2rem / 4rem / 6rem across the breakpoints,
+       which makes the steps 32/64/96px on a phone and 96/192/288px on a wide screen. The
+       ratio (1 : 2 : 3) is what keeps the three weights unmistakable at every width.
+       `borders="y"` keeps only the two rules that do the dividing; `flush` draws the one it
+       shares with the section above exactly once, and `marks="bottom"` leaves the top pair of
+       ticks to that same neighbour so the shared junction carries one mark per corner.
+
+       The gap is where `hatch` belongs on a framed page: it is the one band with no content of
+       its own, so the texture reads as the page's own material instead of competing with copy. -->
+  <FrameBox
+    v-bind="$attrs"
+    flush
+    borders="y"
+    marks="bottom"
+    :hatch="hatch"
+    :data-testid="testId"
+    :data-size="size"
+    class="h-[calc(var(--spacing-xxl)*2)] data-[size=small]:h-(--spacing-xxl) data-[size=large]:h-[calc(var(--spacing-xxl)*3)]"
+  />
+</template>