@janga/norna 0.7.3 → 0.7.5

package/docs/README.md

@@ -41,9 +41,9 @@ For a quick reference:
 - [Content](content.md) describes page frontmatter, section frontmatter,
   image rows, carousels, temporary sections, Markdown section matching, and
   content validation.
-- [Theme](theme.md) describes site-wide layout, spacing, image sizing, font,
-  typography, presentation colors, frame colors, and inline styles.
-- [Typography](typography.md) describes presets, roles, overrides,
+- [Theme](theme.md) describes site-wide layout, layout density, image sizing,
+  font, typography rhythm, presentation colors, frame colors, and inline styles.
+- [Typography](typography.md) describes presets, rhythms, roles, overrides,
   inheritance, and inspection commands.
 - [Routes](routes.md) describes route files, slugs, route navigation, and
   route image directories.

package/docs/commands.md

@@ -105,8 +105,8 @@ should normally mean the repository's complete publishable artifact, while
   runs `astro sync`.
 - `content:sync` / `norna:sync`: rewrites Markdown section order and moves misplaced referenced
   image files after confirmation.
-- `typography presets`: prints the exact built-in values for every typography
-  preset.
+- `typography presets`: prints the exact built-in values for typography
+  presets and rhythms.
 - `typography show`: prints the selected site's resolved typography for the
   theme, every page route, and every section. Each value includes its source,
   and inherited page or section values are marked with `inherited: true`.

package/docs/configuration.md

@@ -66,11 +66,12 @@ Use [Theme](theme.md) for:
 
 - `layout.pageWidth`
 - `layout.gutter`
+- `layout.density`
 - `gallery.width`
 - `gallery.maxAvailableWidthPercent`
 - `gallery.maxAvailableHeightPercent`
 - `typography.fontFamily`
-- typography presets and overrides
+- typography presets, rhythm, and overrides
 - presentation colors, inline styles, and frame colors
 
 ## Navigation

package/docs/design/command-organization.md

@@ -275,9 +275,10 @@ npm run norna:typography:presets
 npm run norna:typography:show
 ```
 
-`norna:typography:presets` shows the built-in typography presets from the
-installed engine. `norna:typography:show` shows the effective typography for
-the selected site after presets and overrides have been applied.
+`norna:typography:presets` shows the built-in typography presets and rhythms
+from the installed engine. `norna:typography:show` shows the effective
+typography for the selected site after presets, rhythms, and overrides have
+been applied.
 
 ### Correct Content And Configuration
 

package/docs/design/site-examples-structure.md

@@ -26,8 +26,8 @@ site repository. It should not be a showcase for every feature.
 An example site is a runnable site that demonstrates one or more features.
 
 Examples can be richer than the starter. They may show routes, navigation,
-typography presets, galleries, image carousels, inline styles, and site-specific
-configuration choices.
+typography presets, typography rhythms, galleries, image carousels, inline
+styles, and site-specific configuration choices.
 
 ### Documentation Site
 
@@ -72,7 +72,8 @@ they demonstrate a distinct feature or workflow.
   navigation diagnostic target.
 - `routes-demo/`: focused route/navigation example if the dog example becomes
   too broad.
-- `typography-demo/`: focused typography preset and override example if needed.
+- `typography-demo/`: focused typography preset, rhythm, and override example
+  if needed.
 
 The repository-local `site/` directory is reserved for the documentation site.
 `docs/` should remain for reference documentation. It should link to the

package/docs/getting-started.md

@@ -64,9 +64,9 @@ Commit the generated `package-lock.json` after the first install.
 
 1. Edit `site/config.mjs` for the site's URL, language labels, GitHub
    repository, footer, and deploy settings.
-2. Edit `site/theme.md` for site-wide layout, vertical spacing, image sizing,
-   font, typography preset, colors, inline styles, and frame colors, or omit it
-   to use engine defaults.
+2. Edit `site/theme.md` for site-wide layout, layout density, typography
+   rhythm, image sizing, font, typography preset, colors, inline styles, and
+   frame colors, or omit it to use engine defaults.
 3. Edit `site/content.md` for homepage title, description, sections, text,
    image rows, page/section presentation overrides, alt text, and captions.
 4. Put source images under `site/images/<section-id>/`.
@@ -114,12 +114,13 @@ Read [Site Structure](site-structure.md), [Content](content.md),
 [Theme](theme.md), [Typography](typography.md), [Routes](routes.md), and
 [Configuration](configuration.md) before publishing a real site.
 
-To change the site's maximum page width, side gutters, vertical spacing, image
-width, image height limits, font, colors, or site-wide typography preset, edit
-`site/theme.md`. See [Theme](theme.md) for the accepted shape.
+To change the site's maximum page width, side gutters, layout density,
+typography rhythm, image width, image height limits, font, colors, or
+site-wide typography preset, edit `site/theme.md`. See [Theme](theme.md) for
+the accepted shape.
 
 To change one page or section, add a focused `presentation.typography`
 override in `site/content.md`. See [Typography](typography.md). Use
-`norna typography presets` to inspect the installed preset values and
+`norna typography presets` to inspect the installed preset and rhythm values and
 `norna typography show` to inspect the resolved typography for the selected
 site.

package/docs/theme.md

@@ -15,35 +15,11 @@ on top of the resolved page presentation.
 navigation:
   brand: Example Site
 layout:
+  density: normal
   pageWidth: 1180px
   gutter:
     desktop: clamp(1.25rem, 4vw, 3rem)
     mobile: 1rem
-  spacing:
-    firstSectionTop:
-      desktop: clamp(1.875rem, 3vw, 2.75rem)
-      mobile: 1.375rem
-    sectionGap:
-      desktop: clamp(2.55rem, 4.2vw, 3.9rem)
-      mobile: 2.25rem
-    finalSectionBottom:
-      desktop: clamp(2.55rem, 4.2vw, 3.9rem)
-      mobile: 2.25rem
-    sectionHeadingToBody:
-      desktop: clamp(0.5625rem, 1.25vw, 0.75rem)
-      mobile: 0.4375rem
-    bodyToImages:
-      desktop: clamp(1.25rem, 2.5vw, 2rem)
-      mobile: 1.25rem
-    imageGap:
-      desktop: clamp(1.5rem, 3.5vw, 2.75rem)
-      mobile: 2.75rem
-    subheadingTop:
-      desktop: 2rem
-      mobile: 1.6rem
-    subheadingRuleTop:
-      desktop: 1rem
-      mobile: 0.8rem
 gallery:
   width: 900px
   maxAvailableWidthPercent:
@@ -55,6 +31,7 @@ gallery:
 typography:
   fontFamily: "Arial, 'Helvetica Neue', Helvetica, sans-serif"
   preset: quiet-gallery
+  rhythm: normal
 presentation:
   backgroundColor: "#000000"
   textColor: "#f7f4ee"
@@ -94,14 +71,17 @@ navigation:
 - `gutter`: side margin removed from the viewport before available content
   width is calculated. Use either one CSS length for all viewports or
   `desktop` / `mobile` values.
-- `spacing`: vertical rhythm for sections, text, image rows, and Markdown
-  subheadings. Every spacing value accepts either one CSS length for all
-  viewports or `desktop` / `mobile` values.
+- `density`: default structural spacing profile. Allowed values are `compact`,
+  `normal`, and `airy`.
+- `spacing`: optional structural spacing overrides for sections and image
+  rows. Every spacing value accepts either one CSS length for all viewports or
+  `desktop` / `mobile` values.
 
 Example:
 
 ```yaml
 layout:
+  density: normal
   pageWidth: 1180px
   gutter:
     desktop: clamp(1.25rem, 4vw, 3rem)
@@ -111,28 +91,25 @@ layout:
       desktop: clamp(1.875rem, 3vw, 2.75rem)
       mobile: 1.375rem
     sectionGap:
-      desktop: clamp(2.55rem, 4.2vw, 3.9rem)
-      mobile: 2.25rem
-    subheadingTop:
-      desktop: 2rem
-      mobile: 1.6rem
+      desktop: clamp(1.4rem, 3vw, 2.75rem)
+      mobile: 1.5rem
 ```
 
 If omitted, Norna uses `1180px` for `pageWidth`, desktop
-`clamp(1.25rem, 4vw, 3rem)` for `gutter`, mobile `1rem`, and the spacing
-defaults shown in the minimal theme example.
+`clamp(1.25rem, 4vw, 3rem)` for `gutter`, mobile `1rem`, and `normal` layout
+density.
 
 Spacing keys:
 
 - `firstSectionTop`: space above the first section heading.
 - `sectionGap`: space above each following section.
 - `finalSectionBottom`: space below the final section.
-- `sectionHeadingToBody`: space from a section heading to its body text.
 - `bodyToImages`: space from section body text to image rows.
 - `imageGap`: space between image rows.
-- `subheadingTop`: space above Markdown `###` subheadings inside body text.
-- `subheadingRuleTop`: space between the rule above a Markdown `###`
-  subheading and the subheading text.
+
+Text-near spacing, such as spacing after headings, spacing before Markdown
+subheadings, paragraph spacing, and caption spacing, belongs to
+`typography.rhythm` and typography overrides.
 
 ## Image Sizing
 
@@ -166,6 +143,8 @@ Top-level `typography` is the site-wide typographic base. It supports:
 
 - `fontFamily`: global CSS font-family stack.
 - `preset`: built-in typography preset.
+- `rhythm`: text-near spacing profile. Allowed values are `compact`,
+  `normal`, and `airy`.
 - `overrides`: focused changes to preset values.
 
 Example:
@@ -174,19 +153,23 @@ Example:
 typography:
   fontFamily: "Arial, 'Helvetica Neue', Helvetica, sans-serif"
   preset: quiet-gallery
+  rhythm: normal
   overrides:
     headings:
       h2:
         size: medium
+        spacingAfter: 0.55em
       h3:
-        size: small
+        size: medium
+        spacingBefore: 1.5em
+        spacingAfter: 0.5em
     body:
       lineHeight: 1.55
 ```
 
-Use `norna typography presets` to inspect built-in preset values and
-`norna typography show` to inspect the resolved typography for the selected
-site. See [Typography](typography.md).
+Use `norna typography presets` to inspect built-in preset and rhythm values,
+and `norna typography show` to inspect the resolved typography for the
+selected site. See [Typography](typography.md).
 
 ## Presentation
 
@@ -218,6 +201,7 @@ presentation:
       headings:
         h2:
           size: large
+          spacingAfter: 0.6em
       body:
         paragraphSpacing: 1em
 ```

package/docs/typography.md

@@ -1,10 +1,10 @@
 # Typography
 
 `norna` typography is configured in `site/theme.md` through a site-wide font,
-presets, and optional overrides.
+presets, text rhythm, and optional overrides.
 
-The normal place to choose a site-wide typography preset is the top-level
-`typography` block in `site/theme.md`.
+The normal place to choose a site-wide typography preset and rhythm is the
+top-level `typography` block in `site/theme.md`.
 Page and section files may override the theme when a page or section needs a
 different presentation.
 
@@ -18,25 +18,31 @@ Available presets:
   short information blocks.
 - `text-forward`: more generous body text for pages where longer text carries
   more of the experience.
-- `statement`: stronger type for introductions, first sections, and short
-  programmatic statements. Use it sparingly, usually as a section override.
+- `statement`: tighter, more declarative line-height for introductions, first
+  sections, and short programmatic statements. Use it sparingly, usually as a
+  section override.
 
 If theme typography is omitted, `quiet-gallery` is used.
 
-Presets define `headings.h1` through `headings.h4`, `body`, and `caption`.
-They differ primarily through heading scale, alignment, line height, paragraph
-spacing, caption treatment, and intended use. Choose larger or smaller type
-with focused overrides when a specific page or section needs it.
+Presets define alignment, size, and line height for `headings.h1` through
+`headings.h4`, `body`, and `caption`. Built-in presets use `medium` as the
+default size for every text role. Visual heading hierarchy comes from the
+Markdown heading level, so `h1` is larger than `h2`, `h2` is larger than `h3`,
+and so on.
 
-Use this command to inspect the exact preset values shipped with the installed
-engine:
+`rhythm` defines text-near spacing for headings, paragraphs, and captions.
+Available rhythms are `compact`, `normal`, and `airy`. Built-in rhythm values
+use `em` so spacing follows the rendered text size.
+
+Use this command to inspect the exact preset and rhythm values shipped with
+the installed engine:
 
 ```sh
 norna typography presets
 ```
 
 Use this command to inspect the effective values for the selected site after
-presets and overrides have been applied:
+presets, rhythms, and overrides have been applied:
 
 ```sh
 norna typography show
@@ -52,14 +58,20 @@ also marked with `inherited: true`.
 typography:
   fontFamily: "Arial, 'Helvetica Neue', Helvetica, sans-serif"
   preset: quiet-gallery
+  rhythm: normal
   overrides:
     headings:
       h2:
         size: medium
+        spacingAfter: 0.55em
       h3:
-        size: small
+        size: medium
+        spacingBefore: 1.5em
+        spacingAfter: 0.5em
     body:
       paragraphSpacing: 0.8em
+    caption:
+      spacingBefore: 0.5em
 ```
 
 The typographic roles are:
@@ -84,27 +96,28 @@ align:
 Allowed size values are `small`, `medium`, `large`, and `xlarge`. `medium` is
 the normal reading size. Use `small` for quieter supporting text, and use
 `large` or `xlarge` only when a page or section needs stronger emphasis.
-Headings use their own scale, but follow the same principle: `medium` is the
-normal section heading size, not a hero size. Norna may render the first
-section heading as an HTML `h1` for document structure, but its visual
-typography still follows the Markdown level the user wrote: `##` uses
-`headings.h2`.
+Each heading level uses its own scale, but follows the same principle:
+`medium` is the normal size for that level. Norna may render the first section
+heading as an HTML `h1` for document structure, but its visual typography still
+follows the Markdown level the user wrote: `##` uses `headings.h2`.
 
-`lineHeight` is a unitless number from `1` through `3`. `spacing` and
-`paragraphSpacing` are CSS lengths such as `0`, `0.8em`, `1rem`, or `12px`.
+`lineHeight` is a unitless number from `1` through `3`. `spacingBefore`,
+`spacingAfter`, and `paragraphSpacing` are CSS lengths such as `0`, `0.8em`,
+`1rem`, or `12px`. Use `em` for spacing that should track the text size.
 
 Supported override fields:
 
 - `headings.h1.align`, `headings.h1.size`, `headings.h1.lineHeight`,
-  `headings.h1.spacing`
+  `headings.h1.spacingBefore`, `headings.h1.spacingAfter`
 - `headings.h2.align`, `headings.h2.size`, `headings.h2.lineHeight`,
-  `headings.h2.spacing`
+  `headings.h2.spacingBefore`, `headings.h2.spacingAfter`
 - `headings.h3.align`, `headings.h3.size`, `headings.h3.lineHeight`,
-  `headings.h3.spacing`
+  `headings.h3.spacingBefore`, `headings.h3.spacingAfter`
 - `headings.h4.align`, `headings.h4.size`, `headings.h4.lineHeight`,
-  `headings.h4.spacing`
+  `headings.h4.spacingBefore`, `headings.h4.spacingAfter`
 - `body.align`, `body.size`, `body.lineHeight`, `body.paragraphSpacing`
-- `caption.align`, `caption.size`, `caption.lineHeight`, `caption.spacing`
+- `caption.align`, `caption.size`, `caption.lineHeight`,
+  `caption.spacingBefore`
 
 ## Inheritance
 
@@ -115,15 +128,18 @@ Theme typography is the site-wide base:
 typography:
   fontFamily: "Arial, 'Helvetica Neue', Helvetica, sans-serif"
   preset: quiet-gallery
+  rhythm: normal
 ```
 
-A page-level `presentation.typography.preset` changes the typographic base for
-that page. A section-level `sections[].presentation.typography.preset` changes
-the typographic base for that section.
+A page-level `presentation.typography.preset` changes the typographic character
+for that page. A section-level `sections[].presentation.typography.preset`
+changes the typographic character for that section. `rhythm` is inherited
+separately, so changing preset does not change spacing unless `rhythm` is also
+set.
 
-If a section sets `typography.preset`, that section starts from that preset. If
-a section only sets `typography.overrides`, it keeps the resolved page preset
-and changes only the specified values.
+If a section sets `typography.rhythm`, that section changes text-near spacing.
+If a section only sets `typography.overrides`, it keeps the resolved page
+preset and rhythm and changes only the specified values.
 
 Example section override:
 

package/examples/dog-gallery/site/content.md

@@ -71,7 +71,7 @@ sections:
       typography:
         overrides:
           caption:
-            spacing: 0.35em
+            spacingBefore: 0.35em
     gallery:
       - carousel:
           - image: white-cute-dog.jpg

package/examples/dog-gallery/site/theme.md

@@ -7,6 +7,7 @@
 # navigation:
 #   brand: site-wide brand/home text; defaults to the homepage title
 # layout:
+#   density: compact | normal | airy
 #   pageWidth: CSS length, e.g. 2048px
 #   gutter:
 #     desktop: CSS length or clamp(), e.g. clamp(1.25rem, 4vw, 3rem)
@@ -18,9 +19,6 @@
 #     sectionGap:
 #       desktop: CSS length or clamp(), e.g. clamp(1.8rem, 3vw, 2.75rem)
 #       mobile: CSS length, e.g. 1.65rem
-#     subheadingTop:
-#       desktop: CSS length, e.g. 1.35rem
-#       mobile: CSS length, e.g. 1.1rem
 # gallery:
 #   width: CSS length, e.g. 55vw
 #   maxAvailableWidthPercent:
@@ -32,14 +30,19 @@
 # typography:
 #   fontFamily: CSS font-family stack
 #   preset: quiet-gallery | compact-gallery | text-forward | statement
+#   rhythm: compact | normal | airy
 #   overrides:
 #     headings:
 #       h2:
 #         size: small | medium | large | xlarge
 #       h3:
 #         size: small | medium | large | xlarge
+#         spacingBefore: CSS length, e.g. 1.2em
+#         spacingAfter: CSS length, e.g. 0.45em
 #       h4:
 #         size: small | medium | large | xlarge
+#         spacingBefore: CSS length, e.g. 0.9em
+#         spacingAfter: CSS length, e.g. 0.35em
 # presentation:
 #   backgroundColor: quoted hex color, e.g. "#000000"
 #   textColor: quoted hex color, e.g. "#f7f4ee"
@@ -53,6 +56,7 @@
 #     textColor: quoted hex color
 # norna:end theme-help
 layout:
+  density: compact
   pageWidth: 2048px
   gutter:
     desktop: clamp(1.25rem, 4vw, 3rem)
@@ -67,21 +71,12 @@ layout:
     finalSectionBottom:
       desktop: clamp(1.8rem, 3vw, 2.75rem)
       mobile: 1.65rem
-    sectionHeadingToBody:
-      desktop: 0.55rem
-      mobile: 0.45rem
     bodyToImages:
       desktop: 1.25rem
       mobile: 1rem
     imageGap:
       desktop: clamp(1.25rem, 2.8vw, 2rem)
       mobile: 1.8rem
-    subheadingTop:
-      desktop: 1.35rem
-      mobile: 1.1rem
-    subheadingRuleTop:
-      desktop: 0.65rem
-      mobile: 0.55rem
 gallery:
   width: 55vw
   maxAvailableWidthPercent:
@@ -93,14 +88,17 @@ gallery:
 typography:
   fontFamily: "Arial, 'Helvetica Neue', Helvetica, sans-serif"
   preset: quiet-gallery
+  rhythm: compact
   overrides:
     headings:
       h3:
         size: medium
-        spacing: 0.7rem
+        spacingBefore: 1.2em
+        spacingAfter: 0.45em
       h4:
         size: small
-        spacing: 0.55rem
+        spacingBefore: 0.9em
+        spacingAfter: 0.35em
 presentation:
   backgroundColor: "#550000"
   textColor: "#ffffff"

package/package.json

@@ -2,7 +2,7 @@
   "name": "@janga/norna",
   "description": "A command-line publishing workflow for simple static sites.",
   "type": "module",
-  "version": "0.7.3",
+  "version": "0.7.5",
   "license": "GPL-3.0-only",
   "repository": {
     "type": "git",

package/scripts/check-config.mjs

@@ -23,6 +23,7 @@ try {
 	console.log(`Base path: ${projectConfig.site.basePath}`);
 	console.log(`Page width: ${projectConfig.layout.pageWidth}`);
 	console.log(`Gutter: desktop ${projectConfig.layout.gutter.desktop}, mobile ${projectConfig.layout.gutter.mobile}`);
+	console.log(`Layout density: ${projectConfig.layout.density}`);
 	console.log(`Image area width: ${projectConfig.gallery.width}`);
 	console.log(`Image max available width: desktop ${projectConfig.gallery.maxAvailableWidthPercent.desktop}%, mobile ${projectConfig.gallery.maxAvailableWidthPercent.mobile}%`);
 	console.log(`Image max available height: desktop ${projectConfig.gallery.maxAvailableHeightPercent.desktop}%, mobile ${projectConfig.gallery.maxAvailableHeightPercent.mobile}%`);

package/scripts/lib/project-config.mjs

@@ -17,6 +17,16 @@ const assertObject = (value, path, sourceLabel = siteConfigLabel) => {
 	return value;
 };
 
+const readEnum = (object, key, path, allowedValues, fallback, sourceLabel = siteConfigLabel) => {
+	const value = object[key] ?? fallback;
+
+	if (!allowedValues.includes(value)) {
+		throw new Error(`${path}.${key} must be one of ${allowedValues.join(', ')} in ${sourceLabel}.`);
+	}
+
+	return value;
+};
+
 const readString = (object, key, path, sourceLabel = siteConfigLabel) => {
 	const value = object[key];
 
@@ -304,6 +314,77 @@ const rawDeploy = assertObject(rawConfig.deploy ?? {}, 'deploy');
 const rawDeployWatch = assertObject(rawDeploy.watch ?? {}, 'deploy.watch');
 
 const defaultFontFamily = "Arial, 'Helvetica Neue', Helvetica, sans-serif";
+const layoutDensityNames = ['compact', 'normal', 'airy'];
+const layoutDensityProfiles = Object.freeze({
+	compact: Object.freeze({
+		bodyToImages: Object.freeze({
+			desktop: '1rem',
+			mobile: '0.9rem',
+		}),
+		finalSectionBottom: Object.freeze({
+			desktop: 'clamp(1.2rem, 2.4vw, 2.25rem)',
+			mobile: '1.25rem',
+		}),
+		firstSectionTop: Object.freeze({
+			desktop: 'clamp(1rem, 2vw, 1.75rem)',
+			mobile: '1rem',
+		}),
+		imageGap: Object.freeze({
+			desktop: 'clamp(1rem, 2vw, 1.5rem)',
+			mobile: '1.25rem',
+		}),
+		sectionGap: Object.freeze({
+			desktop: 'clamp(1.2rem, 2.4vw, 2.25rem)',
+			mobile: '1.25rem',
+		}),
+	}),
+	normal: Object.freeze({
+		bodyToImages: Object.freeze({
+			desktop: '1.25rem',
+			mobile: '1rem',
+		}),
+		finalSectionBottom: Object.freeze({
+			desktop: 'clamp(1.4rem, 3vw, 2.75rem)',
+			mobile: '1.5rem',
+		}),
+		firstSectionTop: Object.freeze({
+			desktop: 'clamp(1.25rem, 3vw, 2.5rem)',
+			mobile: '1.25rem',
+		}),
+		imageGap: Object.freeze({
+			desktop: 'clamp(1.25rem, 2.8vw, 2rem)',
+			mobile: '1.5rem',
+		}),
+		sectionGap: Object.freeze({
+			desktop: 'clamp(1.4rem, 3vw, 2.75rem)',
+			mobile: '1.5rem',
+		}),
+	}),
+	airy: Object.freeze({
+		bodyToImages: Object.freeze({
+			desktop: '1.5rem',
+			mobile: '1.25rem',
+		}),
+		finalSectionBottom: Object.freeze({
+			desktop: 'clamp(2.25rem, 5vw, 4.5rem)',
+			mobile: '2rem',
+		}),
+		firstSectionTop: Object.freeze({
+			desktop: 'clamp(2rem, 5vw, 4rem)',
+			mobile: '1.5rem',
+		}),
+		imageGap: Object.freeze({
+			desktop: 'clamp(1.5rem, 3.5vw, 2.75rem)',
+			mobile: '2rem',
+		}),
+		sectionGap: Object.freeze({
+			desktop: 'clamp(2.25rem, 5vw, 4.5rem)',
+			mobile: '2rem',
+		}),
+	}),
+});
+const layoutDensity = readEnum(rawLayout, 'density', 'layout', layoutDensityNames, 'normal', siteThemeLabel);
+const layoutSpacingDefaults = layoutDensityProfiles[layoutDensity];
 
 export const projectConfig = Object.freeze({
 	site: Object.freeze({
@@ -311,44 +392,18 @@ export const projectConfig = Object.freeze({
 		url: readUrl(rawSite, 'url', 'site'),
 	}),
 	layout: Object.freeze({
+		density: layoutDensity,
 		gutter: readResponsiveCssLength(rawLayout, 'gutter', 'layout', Object.freeze({
 			desktop: 'clamp(1.25rem, 4vw, 3rem)',
 			mobile: '1rem',
 		}), siteThemeLabel),
 		pageWidth: readCssLength(rawLayout, 'pageWidth', 'layout', '1180px', siteThemeLabel),
 		spacing: Object.freeze({
-			bodyToImages: readResponsiveCssLength(rawLayoutSpacing, 'bodyToImages', 'layout.spacing', Object.freeze({
-				desktop: 'clamp(1.25rem, 2.5vw, 2rem)',
-				mobile: '1.25rem',
-			}), siteThemeLabel),
-			finalSectionBottom: readResponsiveCssLength(rawLayoutSpacing, 'finalSectionBottom', 'layout.spacing', Object.freeze({
-				desktop: 'clamp(2.55rem, 4.2vw, 3.9rem)',
-				mobile: '2.25rem',
-			}), siteThemeLabel),
-			firstSectionTop: readResponsiveCssLength(rawLayoutSpacing, 'firstSectionTop', 'layout.spacing', Object.freeze({
-				desktop: 'clamp(1.875rem, 3vw, 2.75rem)',
-				mobile: '1.375rem',
-			}), siteThemeLabel),
-			imageGap: readResponsiveCssLength(rawLayoutSpacing, 'imageGap', 'layout.spacing', Object.freeze({
-				desktop: 'clamp(1.5rem, 3.5vw, 2.75rem)',
-				mobile: '2.75rem',
-			}), siteThemeLabel),
-			sectionGap: readResponsiveCssLength(rawLayoutSpacing, 'sectionGap', 'layout.spacing', Object.freeze({
-				desktop: 'clamp(2.55rem, 4.2vw, 3.9rem)',
-				mobile: '2.25rem',
-			}), siteThemeLabel),
-			sectionHeadingToBody: readResponsiveCssLength(rawLayoutSpacing, 'sectionHeadingToBody', 'layout.spacing', Object.freeze({
-				desktop: 'clamp(0.5625rem, 1.25vw, 0.75rem)',
-				mobile: '0.4375rem',
-			}), siteThemeLabel),
-			subheadingRuleTop: readResponsiveCssLength(rawLayoutSpacing, 'subheadingRuleTop', 'layout.spacing', Object.freeze({
-				desktop: '1rem',
-				mobile: '0.8rem',
-			}), siteThemeLabel),
-			subheadingTop: readResponsiveCssLength(rawLayoutSpacing, 'subheadingTop', 'layout.spacing', Object.freeze({
-				desktop: '2rem',
-				mobile: '1.6rem',
-			}), siteThemeLabel),
+			bodyToImages: readResponsiveCssLength(rawLayoutSpacing, 'bodyToImages', 'layout.spacing', layoutSpacingDefaults.bodyToImages, siteThemeLabel),
+			finalSectionBottom: readResponsiveCssLength(rawLayoutSpacing, 'finalSectionBottom', 'layout.spacing', layoutSpacingDefaults.finalSectionBottom, siteThemeLabel),
+			firstSectionTop: readResponsiveCssLength(rawLayoutSpacing, 'firstSectionTop', 'layout.spacing', layoutSpacingDefaults.firstSectionTop, siteThemeLabel),
+			imageGap: readResponsiveCssLength(rawLayoutSpacing, 'imageGap', 'layout.spacing', layoutSpacingDefaults.imageGap, siteThemeLabel),
+			sectionGap: readResponsiveCssLength(rawLayoutSpacing, 'sectionGap', 'layout.spacing', layoutSpacingDefaults.sectionGap, siteThemeLabel),
 		}),
 	}),
 	gallery: Object.freeze({