Nixtla

Font System Demo

This page demonstrates the Alliance font system used throughout the site.

Typography Styles

h1

Alliance Heading 1

h2

Alliance Heading 2

h3

Alliance Heading 3

h4

Alliance Heading 4

body

This is body text using Alliance No.2 Light. It's designed to be readable and clean for longer paragraphs of content.

bodySmall

This is smaller body text using Alliance No.2 Light, useful for secondary content.

quote

"This is a quote style using Alliance No.2 Light italic."

subheading

Alliance subheading text

lead

Alliance lead paragraph text for introductions

Text Utility Functions

The text object provides helper functions for consistent text styling:

text.h1()
H1 with utility function
text.h2()
H2 with utility function
text.heading(2)
Heading with level parameter
text.subheading()
Subheading with utility function
text.body()
Body text with utility function
text.paragraph()
Paragraph text with utility function
text.lead()
Lead text with utility function
text.small()
Small text with utility function
text.stats()
85%
text.badge()
Blue BadgeGreen BadgeRed BadgeGray Badge
text.apply() - The core function
Custom styling with text.apply

Alliance Font Families

AllianceNo.1Regular (Headings)

The quick brown fox jumps over the lazy dog.

AllianceNo.1Light

The quick brown fox jumps over the lazy dog.

AllianceNo.2Light (Body)

The quick brown fox jumps over the lazy dog.

AllianceNo.2Regular

The quick brown fox jumps over the lazy dog.

AllianceNo.1LightItalic

The quick brown fox jumps over the lazy dog.

AllianceNo.2LightItalic

The quick brown fox jumps over the lazy dog.

Using the Font System

This font system ensures consistent typography across the entire application. Use the text utility functions for the most consistent results.