Azora Nexus

Headings

Display scale for page titles and large editorial copy.

.h1

Heading 1

font-size: 6rem / line-height: 6rem / font-weight: 300

.h2

Heading 2

font-size: 3.75rem / line-height: 3.75rem / font-weight: 300

.h3

Heading 3

font-size: 3rem / line-height: 3.125rem / font-weight: 400

.h4

Heading 4

font-size: 2.125rem / line-height: 2.5rem / font-weight: 400

.h5

Heading 5

font-size: 1.5rem / line-height: 2rem / font-weight: 400

.h6

Heading 6

font-size: 1.25rem / line-height: 2rem / font-weight: 500

Text

Subtitle, body, button, caption, and overline text styles.

.subtitle-1

Subtitle 1

List item title and compact section heading text.

.subtitle-2

Subtitle 2

Smaller subtitle text with semibold weight.

.body-1

Body 1

Default paragraph copy used across panels, cards, and long form descriptions.

.body-2

Body 2

Secondary body copy for helper text and dense content blocks.

.button

Button

Uppercase label styling for compact action text.

.caption

Caption

Small supporting copy for metadata and counters.

.overline

Overline

Uppercase eyebrow text with wider letter spacing.

Font Weight

Utility classes for changing emphasis without changing the text scale.

.font-weight-light

Azora dashboard typography

.font-weight-regular

Azora dashboard typography

.font-weight-medium

Azora dashboard typography

.font-weight-semibold

Azora dashboard typography

.font-weight-bold

Azora dashboard typography

Text Transform

Uppercase, lowercase, and capitalized text helpers.

.text-uppercase

Sneat typography sample

.text-lowercase

Sneat Typography Sample

.text-capitalize

sneat typography sample

Text Colors

Semantic text colors mapped to the app theme tokens.

Primary text.text-primary

Secondary text.text-secondary

Success text.text-success

Info text.text-info

Warning text.text-warning

Error text.text-danger

Text Alignment

Alignment helpers for responsive layouts and card copy.

.text-left

Left aligned text keeps dense operations content easy to scan.

.text-center

Center aligned text works for empty states and summaries.

.text-right

Right aligned text is useful for numeric or action-heavy cells.

Decoration & Wrap

Decoration, no-wrap, and truncation utilities for compact UIs.

.text-decoration-underline

Underlined support link

.text-decoration-line-through

Archived invoice copy

.text-no-wrap

This line intentionally never wraps to the next line.

.text-truncate

Very long typography content that should truncate inside a narrow card container.

Blockquote & Lists

Editorial content patterns for release notes, documentation, and policy copy.

The best interface copy is short, specific, and placed exactly where the user needs it.

Ordered list

Define the content hierarchy.
Choose the correct text scale.
Use color only for semantic emphasis.

Unordered list

Headings
Body copy
Utility classes