Typography

Player 1 Inventory uses the system sans-serif stack for all UI text. The system font renders crisply at any weight, requires no network request, and matches the native feel of each platform — appropriate for a grocery app where users scan lists quickly.

Rosario (--font-rosario) is reserved for the app name only, consistent with its sister app GW2 Inventory. It is a humanist serif that adds warmth and brand recognition to the wordmark without affecting readability of content text.

Fonts

Role	Typeface	Token	How to use
App name only	Rosario (variable, 300–700)	`--font-rosario` / `font-rosario` Tailwind utility	Apply only to the app name wordmark
All UI text	System sans-serif	(none — browser default)	No class needed; `body` inherits automatically

Rosario is loaded via a <link> in apps/web/index.html and mapped as a Tailwind utility via @theme:

@theme {
  --font-rosario: 'Rosario', sans-serif;
}

For the app name, apply the utility class:

<span className="font-rosario">Player 1 Inventory</span>

All other text inherits the system sans-serif from body — no utility class needed.

Type scale

The app uses Tailwind’s default type scale. No custom size tokens are defined.

Welcome to Player 1 Inventory

Onboarding welcome title — not used in main app

text-2xl / 1.5rem

Choose from a template

Onboarding headings — not used in main app

text-xl / 1.25rem

Costco

Page title (h1) — vendor / shelf / recipe detail headers

text-base / 1rem

Organic Whole Milk

Card titles, button labels, section headings, form labels

text-sm / 0.875rem · font-medium

Your data is stored on this device

Card descriptions (default), body text, dropdown items, navigation labels

text-sm / 0.875rem · font-normal

3 / 8 active · 2 low stock · dairy

CardMetadata, badges, fine print, secondary stats and counts

text-xs / 0.75rem

The app deliberately uses a compact scale. The largest size in regular UI is text-base (page titles); most content sits at text-sm and text-xs. Sizes above text-base appear only in the onboarding flow (/onboarding).

When to use each step

Heading scale

Level	Class	Example context
`h1`	`text-base font-regular`	Page title in `LayoutInnerPages`, pantry detail view headers
`h2`	`text-sm font-medium uppercase`	Form section headers (e.g. “Quantities”, “Advanced”)
Onboarding only	`text-xl` / `text-2xl`	Welcome screen — isolated to `/onboarding`, not part of main app hierarchy

h3 elements are rare in the app. CardTitle (the most common card heading element) renders as text-sm font-medium leading-tight by default.

Content scale

These reflect actual usage across the app for non-heading UI text:

Size	Class	Use
`text-base`	16 px	Button large (`lg`), page title
`text-sm`	14 px	Default body text, card content, form labels, button default, dropdown items, navigation labels, card descriptions (default)
`text-xs`	12 px	Badges, fine print, helper text, secondary metadata, card descriptions (many components override `CardDescription` to `text-xs`), group card counts

Sizes below text-xs and above text-base are not used in the main app.

Component typography defaults

Component	Default class	Notes
`CardTitle`	`text-sm font-medium leading-tight`	Primary content heading
`CardDescription`	`text-sm text-foreground-muted`	Secondary labels and short descriptive copy
`CardMetadata`	`text-xs text-foreground-muted`	Compact supplementary data — item counts, stats, badge-style info
`Button` (default size)	`text-sm font-medium`
`Button` (lg size)	`text-base font-medium`
`Button` (xs / sm size)	`text-xs font-medium`
`Badge`	`text-xs capitalize`	No weight override — inherits `font-normal`
`Label`	`text-sm font-normal leading-none`	Form field labels

Weight conventions

Weight	Tailwind class	Usage
400	`font-regular` / `font-normal`	Page titles (`h1`), body text — `font-regular` is used in the codebase as an alias for the normal weight
500	`font-medium`	Card titles, button labels, section headings, form labels, all button sizes
600	`font-semibold`	Dialog titles, alert titles, dropdown menu items
700	`font-bold`	Not used in production UI — reserved for future intentionally heavy emphasis

Line height

The app’s body rule sets a compact base line height:

body {
  line-height: 1.25em;
}

Individual components override this with leading-tight as needed — CardTitle uses it by default.

Uppercase labels

Form section headers use a distinct small-caps treatment:

<h2 className="text-sm font-medium uppercase">Quantities</h2>

This pattern is intentional — the reduced size, medium weight, and uppercase transform together signal a non-interactive group header that sits above form fields without competing with field labels.

Name display convention

Entity names (items, tags, recipes) are displayed in title case using Tailwind’s capitalize class. This is purely visual — stored values are unchanged, so search and comparison logic is unaffected.

Vendor names are excluded — vendors may use intentional casing (e.g. “iHerb”, “7-Eleven”). Vendor badges explicitly add normal-case to override the Badge component’s built-in capitalize.

Mono font

No custom mono font token is defined. The Starlight documentation site falls back to its default system mono stack for code blocks.