Typography

A comprehensive typography system for the Poyraz UI kit, built with Nunito font family. Designed for readability, hierarchy, and consistent visual communication.

Font Properties

Core font family and properties used throughout the design system.

Font Family

Primary: Nunito, sans-serif
Fallback: system-ui, -apple-system, sans-serif

Line Height & Spacing

Tight: 1.25
Normal: 1.5
Relaxed: 1.625

Heading Styles

Hierarchy of heading styles for titles and section headings.

Heading 1 (Large)

Page titles, main headings

48px / 60px
600 (Semibold)
Poyraz UI Kit
text-4xl sm:text-5xl font-semibold

Heading 2 (Section)

Section titles, major headings

24px
600 (Semibold)
Typography System
text-2xl font-semibold

Heading 3 (Subsection)

Subsection titles, component headings

18px
600 (Semibold)
Text Styles
text-lg font-semibold

Heading 4 (Small)

Card titles, small headings

16px
600 (Semibold)
Component Name
text-base font-semibold

Body Text Styles

Text styles for content, descriptions, and general body text.

Large Text

Hero descriptions, important content

18px
400 (Normal)
A collection of beautiful, reusable UI components and design patterns from poyrazavsever.com portfolio.
text-lg font-normal

Body Text

Main content, descriptions

16px
400 (Normal)
This is the standard body text used throughout the application for main content and descriptions.
text-base font-normal

Small Text

Helper text, metadata

14px
400 (Normal)
Additional information and helper text
text-sm font-normal

Extra Small Text

Labels, captions, fine print

12px
400 (Normal)
Category tags and timestamps
text-xs font-normal

Special Text Styles

Specialized text styles for buttons, code, and interactive elements.

Button Text (Small)

Small buttons

12px
500 (Medium)
Click me
text-xs font-medium

Button Text (Medium)

Default buttons

14px
500 (Medium)
Browse Components
text-sm font-medium

Button Text (Large)

Large buttons

16px
500 (Medium)
Get Started
text-base font-medium

Code Text

Code snippets, technical text

12px
400 (Monospace)
className="text-neutral-600"
text-xs font-mono

Text Color Variations

Color variations for different text contexts and hierarchy levels.

Primary Text

Main headings and important content

High contrasttext-neutral-800 dark:text-neutral-100
Secondary Text

Section headings and subheadings

Medium-high contrasttext-neutral-700 dark:text-neutral-200
Body Text

Main content and descriptions

Medium contrasttext-neutral-600 dark:text-neutral-400
Muted Text

Helper text and metadata

Lower contrasttext-neutral-500 dark:text-neutral-500
Subtle Text

Timestamps, labels

Low contrasttext-neutral-400 dark:text-neutral-500

Toast Notification Typography

Typography specifications for toast notifications and feedback messages.

Properties

Font Family: Nunito, sans-serif
Font Size: 0.97rem
Font Weight: 400
Border Radius: 0.75rem
Padding: 0.75rem 1.25rem

Example

This is a toast notification message

Best Practices

Maintain Hierarchy

Use consistent heading levels to create clear information hierarchy

Ensure Readability

Maintain proper contrast ratios for accessibility compliance

Consistent Spacing

Use consistent line heights and spacing for better reading experience