v0.6.0
ComponentsProse

Prose

atom

A rich-text container that styles raw semantic tags to the kit’s type and rhythm.

Article
A rich-text container — drop in semantic tags. The .t-display role lands the hero headline at the display tier.

Ship with conviction.

Changelog

What’s new in v2.4

A tighter type scale, calmer surfaces and a faster export — everything you ship now derives from one set of tokens.

Highlights

  • Block recipes for charts, kanban and timelines.
  • One-click contract.json export.

Recipe CSS

This is the exact CSS your kit ships for Prose — token-driven, so it re-themes with every knob. Get it (and the rest) from the configurator's Use kit panel.

/* === Prose ===
   A rich-text container — drop a stream of SEMANTIC tags (h2-h4, p, ul/ol, a)
   inside and they take the kit's display/body type, rhythm and link colour
   automatically. The answer for articles, marketing copy, docs and CMS body
   fields, where you have flowing text rather than discrete components. Pair it
   with .l-center to cap the measure for readability.
     .prose          → styles its own headings, paragraphs, lists and links
     .prose__kicker  → a brand eyebrow above the opening heading */
.prose { color: var(--k-fg-muted); }
.prose__kicker {
  font-size: var(--k-type-eyebrow);
  font-weight: var(--k-weight-semibold);
  color: var(--k-primary);
  margin-bottom: var(--k-s-6);
}
.prose h2 {
  font-family: var(--k-font-display);
  font-size: var(--k-type-h2);
  font-weight: var(--k-weight-display);
  color: var(--k-fg);
  margin: 0 0 var(--k-s-12);
}
/* CP6 — the hero HEADING role. The --k-type-display tier (CP1, ~48–61px) was
   reachable only via .stat-tile--hero (a number); .t-display lets any HEADING
   wear it — page titles, marketing hero lines, an empty-state greeting, a doc
   title. Display font, bold, tight tracking, snug leading, balanced wrap. The
   ONE focal headline per surface (pair with .eyebrow above + a lead below). */
.t-display {
  font-family: var(--k-font-display);
  font-size: var(--k-type-display);
  font-weight: var(--k-weight-display-hero);
  letter-spacing: -0.03em;
  line-height: 1.04;
  color: var(--k-fg);
  text-wrap: balance;
  margin: 0;
}
.prose h3 {
  font-family: var(--k-font-display);
  font-size: var(--k-type-h3);
  font-weight: var(--k-weight-display);
  color: var(--k-fg);
  margin: var(--k-s-20) 0 var(--k-s-8);
}
.prose p {
  font-size: var(--k-type-body);
  line-height: 1.65;
  margin: 0 0 var(--k-s-12);
}
.prose ul, .prose ol { margin: 0 0 var(--k-s-12); padding-left: var(--k-s-20); }
.prose li { font-size: var(--k-type-body); line-height: 1.65; margin-bottom: var(--k-s-6); }
.prose a { color: var(--k-primary); text-decoration: underline; }
.prose > :last-child { margin-bottom: 0; }