Prose

Typography wrapper that styles nested HTML (markdown output, CMS content, article bodies).

Inverse-square law

The intensity of an effect, like gravity or radiation, falls off inversely with the square of the distance from the source. In code:

function intensity(power, distance) {
  return power / (4 * Math.PI * distance ** 2);
}

Why it shows up everywhere

Anything radiating uniformly in three dimensions spreads its power across the surface of an ever-larger sphere. Surface area grows as , so per-unit-area intensity must shrink in the same ratio.

  • Newtonian gravity
  • Point-source radiation (light, sound)
  • Electrostatic field strength
Make everything as simple as possible, but not simpler.

See the Wikipedia article for derivations and the long list of physical phenomena it governs.

Usage

import {Prose} from 'kinu';

<Prose><h1>Title</h1><p>Body...</p></Prose>

Exports

Name Description Rendered HTML
Prose Typography wrapper <div k="prose">

Notes

  • Tune spacing, font, and heading weight via CSS variables: --k-prose-spacing, --k-prose-font, --k-prose-heading-weight.
  • Only styles direct and nested standard elements; does not touch Kinu components used inside.
  • First/last child margins are zeroed so the wrapper can drop into any layout without margin collapse.

_Source: src/components/prose/index.tsx