Typography

Summary

The type system: 14px base with a 20px line (1.42857), AUI 5.4's exact heading scale and vertical rhythm, and styled inline semantics (code, kbd, cite, abbr, …). No classes needed: plain HTML elements are styled directly. The font family is a token: --neura-font-family defaults to Arial for AUI visual parity; override it (see Design tokens) to retheme.

Type scale

Element	Style
`body`	14px / 20px line, `--neura-color-text`.
`h1`	24px, normal weight, 30px top margin.
`h2`	20px, normal weight, 30px top margin.
`h3`	16px, bold, 30px top margin.
`h4`	14px, bold, 20px top margin.
`h5`	12px, uppercase, gray, 20px top margin.
`h6`	12px, gray, 20px top margin.
`small`	12px, gray.

Examples

Headings

Heading 1 - 24px

Heading 2 - 20px

Heading 3 - 16px

Heading 4 - 14px

Heading 5 - 12px uppercase

Heading 6 - 12px

Body text and lists

A paragraph of body copy at the 14px base size with the 20px line. Block elements in flowing content share a 10px top-margin rhythm. Small text renders at 12px in the mid gray.

Unordered list item
Another item
- Nested item

Ordered list item
Second item

Definition term: Definition description.

Quotes and citations

A blockquote gets a start-side border, gray text, and indentation. Source of the quote

An inline quote gets locale quote marks and gray text; a citation like The Nsys Handbook is italic with a leading em-dash; an abbreviation like CSS is dotted-underlined with a help cursor; a variable like hostname and a definition like flatpack render italic.

Code and keys

Inline code and keyboard keys like Ctrl+C use the mono stack (--neura-font-family-mono). Preformatted blocks keep the 10px rhythm.

Links

Links render in the brand link color with no underline until hover/focus; visited links use the visited token. Both follow the active theme.

Vertical rhythm

Every block element in flowing content (p, lists, headings, blockquote, pre, and opt-in components like forms, tables, tabs, panels, groups) carries a uniform 10px top margin (except headings, which use their own 30px/20px from the scale). Two adjustments keep things tight: the first child of any container drops its top margin, and a heading directly followed by the next heading level (h1 + h2, h2 + h3, …) closes up to 10px. Bottom margins are never used; spacing always comes from the element below.

HTML

Semantic elements

<p>Body copy with <small>small print</small>,
  <code>inline code</code>, and <kbd>Esc</kbd>.</p>

<blockquote>
  Quoted content.
  <cite>Source</cite>
</blockquote>

<p>A <abbr title="Cascading Style Sheets">CSS</abbr>
  reference, a <var>variable</var>, and a
  <dfn>definition</dfn>.</p>

Changing the font

/* your application stylesheet - swap in a system stack */
:root {
  --neura-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
}

AUI compatibility

The scale, margins, and rhythm rules are ported verbatim from AUI 5.4's page typography, and the default Arial stack matches it exactly; flowing content renders pixel-identically under the drop-in. Element-level styling means legacy markup needs no classes at all.