Site Colors & Section Modifiers

Micropage supports a global brand color system defined in [site] and optionally overridden for dark mode in [site.dark]. Once defined, the primary color can be applied to any section via modifier tokens on the section header line.

---

Defining colors

Colors are declared inside an indented colors: block within the [site] (and optionally [site.dark]) block.

[site]
title: My Brand
colors:
  primary: #5c6fff

[site.dark]
colors:
  primary: #8ba2ff

• Only primary is supported in this iteration.
• [site.dark] values apply automatically when the visitor's system preference is dark mode (via prefers-color-scheme: dark).
• The hex value is used to compute RGB components, a luminance-based contrast color, and a slightly darkened hover shade — all emitted as CSS custom properties at build time.

Generated CSS variables

Variable	Value
--mp-primary	The hex value
--mp-primary-rgb	Comma-separated R, G, B
--mp-primary-contrast	#ffffff or #111111 (WCAG contrast)
--bs-primary	Overrides Bootstrap's primary
--bs-primary-rgb	Overrides Bootstrap's primary RGB
--bs-link-color	Matches primary
--bs-link-hover-color	Primary darkened 10%

---

Section modifiers

Modifiers are space-separated key:value tokens appended to the section header line after the section type:

/// section bg:primary
/// hero bg:primary align:center
/// section bg:dark text:light
/// section align:center

The bare token center is also accepted as shorthand for align:center:

/// section center

bg: — background color

Token	Background
primary	var(--mp-primary)
primary-subtle	12% tint of --mp-primary-rgb
success	var(--bs-success)
warning	var(--bs-warning)
info	var(--bs-info)
danger	var(--bs-danger)
dark	var(--bs-dark)
light	var(--bs-light)
muted	var(--bs-secondary-bg)

text: — explicit text color

Token	Color
text:light	#ffffff
text:dark	#111111

When text: is omitted:

• bg:primary → uses --mp-primary-contrast (auto-computed from luminance)
• bg:success, bg:danger, bg:info, bg:dark → white text
• bg:warning → dark text
• bg:primary-subtle, bg:muted → no override (dark text works fine)

align: — column alignment

Token	Effect
align:center	Columns align vertically to center (align-items-center)
(omitted)	Columns align to the top (align-items-start)

Top alignment is the default, which gives a better result for unequal-height cards and pricing grids. Use align:center for image-and-text split layouts.

---

Full example

[site]
title: Color System Demo
description: Demonstrating bg:, text:, and align: modifiers
colors:
  primary: #5c6fff

[site.dark]
colors:
  primary: #8ba2ff

[nav]
Home -> /

[Home -> /]

/// hero bg:primary
h1: Welcome to My Brand
p: This hero uses the primary brand color as background.
button: Get started -> /signup

/// section bg:primary-subtle
h2: Primary subtle
p: A 12% tint — great for alternating sections without full saturation.

/// section
h2: Default (top-aligned columns)
p: No bg modifier. Columns align at the top.

col:
  h3: Card A
  p: Short.

col:
  h3: Card B
  p: Longer content that stays top-aligned.

/// section bg:dark text:light
h2: Dark background
p: Explicit text:light for contrast.

/// section bg:success
h2: Bootstrap semantic token
p: success, warning, info, danger, dark, light work without any custom color config.

/// section align:center
h2: Center-aligned columns
p: Use for image-and-text split pairs.

col:
  img: <- workspace

col:
  h3: Paired with image
  p: Vertically centred next to the image.