PyColors UI uses a clean, minimal, and highly readable typography system built on Tailwind’s scale, enhanced with semantic text roles and clear hierarchy.

Typography underpins the entire system — dashboards, SaaS interfaces, documentation, and marketing pages all rely on the same structure and rules.

Font families

PyColors UI relies on a system-friendly sans-serif stack by default, configured via next/font and exposed as CSS variables.

// app/layout.tsx (example)
import { Inter } from "next/font/google";

const inter = Inter({
  subsets: ["latin"],
  variable: "--font-sans",
});

Available font roles:

• font-sans — primary UI and content font
• font-brand — optional brand accent font
• font-mono — code, technical values, and identifiers

You are free to replace any of these fonts without changing component code.

Default text styles

To avoid inconsistency across products, PyColors UI follows simple defaults:

• SaaS UI & dashboards → text-sm leading-normal
• Documentation & marketing → text-base leading-relaxed

These defaults provide density where needed and readability where it matters.

Heading hierarchy

Headings follow Tailwind’s natural scale to ensure predictable hierarchy and rhythm.

export function HeadingHierarchy() {
  return (
    <div className="space-y-4">
      <h1 className="text-4xl font-bold tracking-tight">Heading 1</h1>
      <h2 className="text-3xl font-semibold tracking-tight">Heading 2</h2>
      <h3 className="text-2xl font-semibold tracking-tight">Heading 3</h3>
      <h4 className="text-xl font-medium tracking-tight">Heading 4</h4>
      <h5 className="text-lg font-medium">Heading 5</h5>
      <h6 className="text-base font-medium">Heading 6</h6>
    </div>
  );
}

Labels and metadata

Labels and metadata are not headings. They use smaller sizes and stronger letter spacing.

<p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
  Label / metadata
</p>

Use labels for:

• form field context
• section indicators
• subtle UI metadata

Body text & hierarchy

export function BodyTextExample() {
  return (
    <div className="space-y-3 max-w-prose">
      <p className="text-base">Standard body text.</p>
      <p className="text-sm text-muted-foreground">
        Secondary descriptive text.
      </p>
      <p className="text-xs text-muted-foreground">
        Subtle metadata.
      </p>
    </div>
  );
}

Semantic text roles

Semantic roles define meaning, not appearance.

Always prefer semantic roles over raw colors.

Weights

Guidelines

Related guides