Typography

Font Family

The system uses Inter exclusively to ensure a utilitarian, high-readability feel across all platforms.

---

Type Scale

Style	Font	Size	Weight	Line Height	Letter Spacing	Usage
display-lg	Inter	48px	700	1.1	-0.02em	Hero sections, empty states
display-md	Inter	32px	700	1.2	-0.01em	Large display text
title	Inter	24px	600	1.3	-	Screen headers, section titles
subtitle	Inter	18px	500	1.4	-	Card headers, subheadings
body-lg	Inter	16px	400	1.5	-	General content, body text
body-sm	Inter	14px	400	1.5	-	Dense data, table content
caption	Inter	12px	500	1.2	0.01em	Metadata, timestamps

---

Usage Guidelines

Hierarchy

• Display: Hero sections and empty states
• Title: Standard for screen headers
• Subtitle: Section headers and card titles
• Body: Default for general content
• Caption: Metadata like "Tracking ID" or "Weight"

Scale

• Body text defaults to 16px for general content
• Scale down to 14px for dense data tables or package lists

Letter Spacing

Apply slight negative tracking on Display levels to emulate the premium look of Apple's SF Pro.

Utility

Captions should be paired with the On Surface Variant color for secondary metadata.

---

Flet Typography

import flet as ft

# Display
ft.Text(
    "Welcome",
    size=48,
    weight=ft.FontWeight.W_700,
    letter_spacing=-0.02,
)

# Title
ft.Text(
    "Shipment Details",
    size=24,
    weight=ft.FontWeight.W_600,
)

# Body
ft.Text(
    "Your package is on the way.",
    size=16,
    weight=ft.FontWeight.W_400,
)

# Caption
ft.Text(
    "TRK-A1B2C3D4",
    size=12,
    weight=ft.FontWeight.W_500,
    color=ft.Colors.ON_SURFACE_VARIANT,
)