Components/Typography/Typography

Typography

Semantic heading and body primitives — H1 (Orbitron), H2–H5 (Space Grotesk), P, Em, Strong.

Brand-opinionated wrappers around the six native heading elements plus <p>, <em>, and <strong>. Each primitive sets the correct font family, size, weight, tracking, and default colour from the Nosible design tokens. All accept className for overrides and forward their ref.

Type hierarchy

Primitive	HTML	Font	Size	Notes
`H1`	`<h1>`	Orbitron	64 px (`text-h1`)	Uppercase + tracked — page-level headline
`H2`	`<h2>`	Space Grotesk	32 px (`text-h2`)	Section headings, card titles
`H3`	`<h3>`	Space Grotesk	24 px	Sub-section headings
`H4`	`<h4>`	Space Grotesk	20 px	Deep sub-sections
`H5`	`<h5>`	Space Grotesk	18 px	Minor headings, fieldset legends
`P`	`<p>`	Inter	16 px (`text-body`)	All body copy
`Em`	`<em>`	inherits	inherits	Semantic italic
`Strong`	`<strong>`	inherits	inherits	Semantic semibold

Usage

import { H1, H2, H3, H4, H5, P, Em, Strong } from "nosible-ux"

export default function Example() {
  return (
    <div>
      <H1>Signal, structured.</H1>
      <H2>Section heading</H2>
      <P>
        Body copy in Inter. Use <Strong>Strong</Strong> for emphasis and{" "}
        <Em>Em</Em> for semantic italics.
      </P>
    </div>
  )
}

Examples

Heading scale

H1 — Orbitron 64 px

H2 — Space Grotesk 32 px

H3 — Space Grotesk 24 px

H4 — Space Grotesk 20 px

H5 — Space Grotesk 18 px

Body and inline elements

From tick to thesis

AI-native research tooling for funds that move fast. Built on structured signals, not unstructured noise. Speed is the strategy.

Every source that matters — SEC EDGAR, Federal Reserve, earnings-call transcripts, and 91 more — ingested, normalised, and queryable in under 400 ms.

Colour overrides

All primitives accept className to override the default colour. Use this when placing text on non-default backgrounds (e.g. an accent / Neo Green surface).

On Neo Green — use text-obsidian

Text on green MUST be Obsidian (#0E0E10). Never white, never ghost.

Default — Ghost White on Obsidian

Chromium Mist body copy on the standard dark surface.

asChild polymorphism

Every primitive supports asChild — pass it with a router <Link> or any other element to receive the typography styles without a wrapper node.

Rendered as a span, styled as H2

Accessibility

Each primitive renders its correct semantic HTML element (h1–h5, p, em, strong) so document outline and screen-reader navigation work out of the box. Use asChild only when you genuinely need a different element; do not use it to skip heading levels in the document outline.

Props

All primitives share the same prop surface:

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Merge styles onto the child element instead of rendering the default tag
`className`	`string`	—	Additional Tailwind classes (merged via `cn`)
`children`	`ReactNode`	—	Text or nested elements
`ref`	forwarded	—	Forwarded to the underlying DOM element

← All Components Getting Started →