Luaris Framework

Appearance

Typography ​

The Luaris Framework uses a small typography system built around three font families, a shared size scale, named line-height tokens, and a compact weight range. These tokens are emitted as CSS variables and are intended to give the framework a consistent typographic rhythm across both content and components.

INFO

Typography tokens are intentionally separate from control-sizing tokens. For example, md type is 16px, while md controls are 32px tall.

Font Families ​

The framework provides three font-family roles:

  • primary for body copy and interface text
  • secondary for display or accent typography
  • mono for code and technical content
primary (--lx-font-family-primary)Nunito, Inter, Segoe UI, sans-serif

Primary body copy should feel clear, friendly, and easy to read.

secondary (--lx-font-family-secondary)Fraunces, Georgia, Times New Roman, serif

Secondary display copy brings warmth, contrast, and emphasis.

mono (--lx-font-family-mono)JetBrains Mono, SFMono-Regular, Consolas, Liberation Mono, monospace

const typography = "Monospace is used for code and technical content";

Font Sizes ​

The font-size scale ranges from 2xs to 3xl. This scale is used for headings, body copy, labels, and supporting text.

2xs (0.625rem / 10px)

The quick brown fox jumps over the lazy dog.

xs (0.75rem / 12px)

The quick brown fox jumps over the lazy dog.

sm (0.875rem / 14px)

The quick brown fox jumps over the lazy dog.

md (1rem / 16px)

The quick brown fox jumps over the lazy dog.

lg (1.25rem / 20px)

The quick brown fox jumps over the lazy dog.

xl (1.5rem / 24px)

The quick brown fox jumps over the lazy dog.

2xl (2rem / 32px)

The quick brown fox jumps over the lazy dog.

3xl (3rem / 48px)

The quick brown fox jumps over the lazy dog.

Line Heights ​

The line-height tokens control vertical rhythm. In general:

  • tight is best for headings and compact UI labels
  • normal is the default for body copy
  • relaxed is useful for longer-form reading content
tight (1.2)

Tighter line-height is useful for headings and compact display text. It keeps short blocks visually dense, deliberate, and easy to scan when space is limited.

normal (1.5)

Normal line-height is the default for most body copy and interface text. It balances readability and density, making it the safest choice for general-purpose layouts.

relaxed (1.7)

Relaxed line-height gives longer-form reading content more room to breathe. It works best for larger text blocks where a slower, more comfortable reading rhythm matters.

Font Weights ​

The weight scale is intentionally small so components stay visually consistent without too many near-duplicate emphasis levels.

light (300)

The quick brown fox jumps over the lazy dog.

regular (400)

The quick brown fox jumps over the lazy dog.

medium (500)

The quick brown fox jumps over the lazy dog.

semibold (600)

The quick brown fox jumps over the lazy dog.

bold (700)

The quick brown fox jumps over the lazy dog.

Heading Scale ​

The reset layer applies the font-size scale to headings using the following defaults:

  • h1 uses 2xl
  • h2 uses xl
  • h3 uses lg
  • h4 uses md
  • h5 uses sm
  • h6 uses xs
h1 (Heading 1)

The quick brown fox

h2 (Heading 2)

The quick brown fox

h3 (Heading 3)

The quick brown fox

h4 (Heading 4)

The quick brown fox

h5 (Heading 5)
The quick brown fox
h6 (Heading 6)
The quick brown fox

Usage Notes ​

  • Default body text uses the primary family with md size and normal line-height.
  • Code-like content should use the mono family.
  • Display text, accent headings, or editorial moments can use the secondary family sparingly.
  • Control sizing should not be derived from raw font size alone. Use the control sizing tokens for component height and spacing.