PyColors UI uses a clean, minimal and highly readable typography system built on Tailwind’s default scale, enhanced with semantic text roles and a flexible sans-serif stack.

Typography underpins the entire system — headings, body, metadata, UI components, documentation, and dashboards all rely on the same structure.

Font family

PyColors UI uses a neutral, system-friendly sans-serif stack.

fontFamily: {
  sans: ["system-ui", "ui-sans-serif", "sans-serif"],
}

You can later replace this with a custom font using next/font (Inter, Geist, or your future PyColors Brand Font).

Heading hierarchy

Headings follow Tailwind’s natural scale. This ensures readability, consistency, and a smooth visual hierarchy.

Heading 1 — Page title

Heading 2 — Section title

Heading 3 — Subsection

Heading 4 — Minor heading

Heading 5

Heading 6 — Label

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 uppercase text-muted-foreground">
        Heading 6
      </h6>
    </div>
  );
}

Body text & metadata

Body text follows a simple progression:

text-base → main content
text-sm → secondary content, descriptions
text-xs → subtle metadata, helper text

Standard body text for content, documentation, and product pages. Balanced line height and optimal readability.

Muted text for secondary information, descriptions, form hints, timestamps.

Extra-small label text for structural metadata or subtle UI labels.

export function BodyTextExample() {
  return (
    <div className="space-y-3 max-w-prose">
      <p className="text-base">
        Standard body text for content, documentation, and product pages. Balanced
        line height and optimal readability.
      </p>

      <p className="text-sm text-muted-foreground">
        Muted text for secondary information, descriptions, form hints, timestamps.
      </p>

      <p className="text-xs text-muted-foreground uppercase tracking-wide">
        Extra-small label text for structural metadata or subtle UI labels.
      </p>
    </div>
  );
}

Semantic text roles

Semantic roles ensure color, emphasis, and accessibility are consistent across the system.

text-foreground — main body text.

text-muted-foreground — subdued text.

text-accent-foreground — accents/highlights.

text-destructive — destructive/danger.

export function TextRolesExample() {
  return (
    <div className="space-y-2">
      <p className="text-foreground">
        <code>text-foreground</code> — main body text.
      </p>
      <p className="text-muted-foreground">
        <code>text-muted-foreground</code> — subdued text.
      </p>
      <p className="text-accent-foreground">
        <code>text-accent-foreground</code> — accents/highlights.
      </p>
      <p className="text-destructive">
        <code>text-destructive</code> — destructive/danger.
      </p>
    </div>
  );
}

Content example

A realistic composition mixing headings, paragraphs, and metadata.

Typography demonstration

PyColors UI defines a unified typography system to ensure clarity, hierarchy, and strong visual structure across all products.

Subheading

Components rely on the same text roles and typographic scale, ensuring coherence from dashboards to marketing pages.

Clear hierarchy
Accessible contrast
Consistent spacing

Metadata: last updated 2 days ago.

export function ArticleExample() {
  return (
    <article className="space-y-4 max-w-prose">
      <h2 className="text-3xl font-semibold tracking-tight">
        Typography demonstration
      </h2>

      <p className="text-base">
        PyColors UI defines a unified typography system to ensure clarity, hierarchy,
        and strong visual structure across all products.
      </p>

      <h3 className="text-xl font-semibold tracking-tight">Subheading</h3>

      <p className="text-base">
        Components rely on the same text roles and typographic scale, ensuring coherence
        from dashboards to marketing pages.
      </p>

      <ul className="list-disc pl-6 space-y-1">
        <li>Clear hierarchy</li>
        <li>Accessible contrast</li>
        <li>Consistent spacing</li>
      </ul>

      <p className="text-sm text-muted-foreground">Metadata: last updated 2 days ago.</p>
    </article>
  );
}

Weights

Tailwind’s weight scale applies:

Weight	Utility	Usage
400	`font-normal`	Body text
500	`font-medium`	UI labels, small titles
600	`font-semibold`	Strong headings
700	`font-bold`	H1, emphasis

Guidelines

Keep headings short and scannable.
Use muted text for secondary or descriptive content.
Maintain consistent spacing between sections.
Prefer semantic text roles over raw color utilities.
Limit the number of type scales on one screen.

Typography