Why "Nebula"

Typography defines the set of semantic text styles used across the system. Each typography preset combines font size, line height and structural intent to create consistent reading rhythm and visual hierarchy throughout the UI. Typography values are exposed as reusable CSS custom properties, allowing the same styles to be referenced directly in custom layouts, markdown content and external components outside the NebulaKit primitives.

Typography

CSS token names

Resolved value

body

--neb-typography-body-font-size,

--neb-typography-body-line-height

15px,

1.5

lead

--neb-typography-lead-font-size,

--neb-typography-lead-line-height

17px,

1.4

small

--neb-typography-small-font-size,

--neb-typography-small-line-height

14px,

1.3

caption

--neb-typography-caption-font-size,

--neb-typography-caption-line-height

11px,

1.4

--neb-typography-h6-font-size,

--neb-typography-h6-line-height

16px,

1.3

--neb-typography-h5-font-size,

--neb-typography-h5-line-height

21px,

1.3

--neb-typography-h4-font-size,

--neb-typography-h4-line-height

27px,

1.2

--neb-typography-h3-font-size,

--neb-typography-h3-line-height

37px,

1.2

--neb-typography-h2-font-size,

--neb-typography-h2-line-height

48px,

1.1

--neb-typography-h1-font-size,

--neb-typography-h1-line-height

60px,

1.1

body

Default text for reading and general content. Balanced for legibility and rhythm across devices.

lead

Introductory paragraph style - larger and more open than body text, used to draw focus at the start of a section.

small

Reduced body text for secondary content. Used for descriptions, helper text or supporting copy that remains part of the reading flow.

caption

Smallest text size for annotations and metadata. Used for labels, figure captions, timestamps or compact UI notes outside the main content flow.

Upper-body style bridging headings and text. Works for lead-ins, callouts or compact hero banners.

Small heading for titles within dense layouts - sidebars, tables or summary lines.

Mid-level heading often used in cards, panels or feature blocks. Balances presence and compactness.

Sub-section heading used to organize content within sections while keeping hierarchy clear.

Primary section heading beneath the hero. Strong visual anchor for major content groups.

Large display style used for page titles or hero sections. Commands attention without needing extra decoration.

Info