Components / Display & Media / Typeset

Typeset stable

Long-form text as one cast part: eyebrow, headings, lead, body, lists, quotes and code on a single type scale.

Preview

Guides

Designing with one mold

Every part in a KATA interface is cast from the same mold, so a page assembled from them holds together without a design review for every screen.

The mold fixes the things teams usually re-decide: the spacing rhythm, the type scale, and which color is allowed to mean action. What stays free is the content. See the notes on the mold for the full reasoning, or run kata-ui add typeset and write.

The rule of three shapes

Glyphs and parts are drawn from three shapes only, which is why things that were never designed together still look related:

  • The circle — dots, knobs, avatars, the core of a switch
  • The 45° line — arrows, checks, the cut of a corner
  • The r2 corner — every radius in the system, no exceptions

A constraint you can state in one sentence is a constraint a whole team can keep.

In practice

When a new part is needed, it is drawn on the same grid and checked against the mold before it ships. If it cannot be drawn from the three shapes, the shape set is wrong — not the part.

Working notes from the KATA studio. Examples here are illustrative; names and products are fictional.

<article class="k-type">
  <p class="eyebrow">Guides</p>
  <h1>Designing with one mold</h1>
  <p class="lead">Every part in a KATA interface is cast from the same mold, so a page assembled from them holds together without a design review for every screen.</p>
  <p>The mold fixes the things teams usually re-decide: the <strong>spacing rhythm</strong>, the type scale, and which color is allowed to mean <em>action</em>. What stays free is the content. See the <a href="#">notes on the mold</a> for the full reasoning, or run <code>kata-ui add typeset</code> and write.</p>
  <h2>The rule of three shapes</h2>
  <p>Glyphs and parts are drawn from three shapes only, which is why things that were never designed together still look related:</p>
  <ul>
    <li>The circle — dots, knobs, avatars, the core of a switch</li>
    <li>The 45° line — arrows, checks, the cut of a corner</li>
    <li>The r2 corner — every radius in the system, no exceptions</li>
  </ul>
  <blockquote><p>A constraint you can state in one sentence is a constraint a whole team can keep.</p></blockquote>
  <h3>In practice</h3>
  <p>When a new part is needed, it is drawn on the same grid and checked against the mold before it ships. If it cannot be drawn from the three shapes, the shape set is wrong — not the part.</p>
  <hr>
  <p class="fine">Working notes from the KATA studio. Examples here are illustrative; names and products are fictional.</p>
</article>
/* KATA Typeset — one wrapper, semantic children, a single type scale */
.k-type{color:var(--k-ink);font-size:15px;line-height:1.75;max-width:68ch}
.k-type .eyebrow{font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--k-accent-ink);margin:0 0 8px;line-height:1.4}
.k-type h1{font-size:29px;line-height:1.25;font-weight:650;letter-spacing:-.01em;margin:0 0 10px}
.k-type h2{font-size:20px;line-height:1.35;font-weight:650;margin:30px 0 8px;padding-top:22px;border-top:1px solid var(--k-line)}
.k-type h3{font-size:16px;line-height:1.4;font-weight:600;margin:22px 0 6px}
.k-type p{margin:0 0 14px}
.k-type .lead{font-size:17px;line-height:1.65;color:var(--k-ink-2);margin-bottom:18px}
.k-type a{color:var(--k-accent-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--k-accent-line)}
.k-type strong{font-weight:650}
.k-type code{font-family:var(--k-mono);font-size:.86em;background:var(--k-bg-soft);border:1px solid var(--k-line);border-radius:5px;padding:1px 5px;white-space:nowrap}
.k-type ul,.k-type ol{margin:0 0 14px;padding-left:20px}
.k-type li{margin:4px 0}
.k-type li::marker{color:var(--k-ink-3)}
.k-type blockquote{margin:18px 0;padding:2px 0 2px 16px;border-left:2px solid var(--k-accent);color:var(--k-ink-2);font-size:15.5px;line-height:1.7}
.k-type blockquote p{margin:0}
.k-type hr{border:0;border-top:1px solid var(--k-line);margin:24px 0}
.k-type .fine{font-size:12.5px;color:var(--k-ink-3);line-height:1.65}

Installation

CLI

node kata-ui.mjs add typeset

Writes the part’s CSS into your project. New to the CLI? See the CLI doc.

Manual

  1. Load tokens.css once, before any part.
  2. Copy the CSS tab into your stylesheet.
  3. Copy the HTML where it belongs.

Examples

Changelog entry

November 2, 2026

Typeset, CLI and a sharper icon cut

Icons were re-cut on a 1.7 stroke with square caps, and the whole catalog is now reachable from the terminal. This page itself is set in the new Typeset part.

  • Added — Typeset part, kata-ui add CLI, four templates
  • Changed — icon mold: 1.7 stroke, square caps, bevel joins
  • Fixed — brand marks redrawn (LINE, Spotify, Notion, npm and six more)
<article class="k-type">
  <p class="eyebrow">November 2, 2026</p>
  <h3 style="margin-top:0">Typeset, CLI and a sharper icon cut</h3>
  <p>Icons were re-cut on a 1.7 stroke with square caps, and the whole catalog is now reachable from the terminal. This page itself is set in the new Typeset part.</p>
  <ul>
    <li><strong>Added</strong> — Typeset part, <code>kata-ui add</code> CLI, four templates</li>
    <li><strong>Changed</strong> — icon mold: 1.7 stroke, square caps, bevel joins</li>
    <li><strong>Fixed</strong> — brand marks redrawn (LINE, Spotify, Notion, npm and six more)</li>
  </ul>
</article>

Centered measure

Manifesto

Copy the code.
Own the design.

A short statement reads best on a narrow measure, centered, with nothing around it competing for the eye.

Set in Typeset on the centered measure.

<div style="display:grid;justify-items:center;text-align:center">
  <article class="k-type" style="max-width:46ch">
    <p class="eyebrow">Manifesto</p>
    <h1 style="font-size:25px">Copy the code.<br>Own the design.</h1>
    <p class="lead">A short statement reads best on a narrow measure, centered, with nothing around it competing for the eye.</p>
    <p class="fine">Set in Typeset on the centered measure.</p>
  </article>
</div>

Usage

Wrap any article, doc or changelog body in .k-type and write plain semantic HTML inside — h1/h2/h3, p, ul, blockquote, code. Add .lead to the first paragraph and .eyebrow above the title. One wrapper, no per-element classes.

Accessibility

Keep a real heading order (one h1, h2 before h3) and let the text be the link text — 'read the migration guide', never 'click here'. The measure caps at 68ch so lines stay readable.

Anatomy

The public surface of this part, read from its own source. Class names are the API — the CSS tab above is the full contract.

.k-typeclass
.eyebrowclass
.leadclass
.fineclass

Related parts

Aspect Ratio beta

A box that holds its shape — 16/9 for video, 4/3 for photos, 1/1 for avatars — whatever fills it.

ratiomediaresponsive

Avatar beta

Initials first, photo when there is one. Three sizes, a status dot, and a stacking group.

userprofileinitials

Bar Chart beta

Columns for comparing a handful of values — the chart people read correctly at a glance.

chartcolumnscomparison

Candlestick Chart beta

Open, high, low, close as cast candles — price action for a session at a glance.

chartfinancetradingohlc
Previous
Timeline