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:

apps/web/src/design-tokens/index.css

@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 — the built-in text-xs through text-3xl utilities cover all current needs.

Pantry

Page headings (h1)

text-3xl / 1.875rem

Shopping List

Section headings (h2)

text-2xl / 1.5rem

Filter by tag

Sub-headings, dialog titles (h3)

text-xl / 1.25rem

Organic Whole Milk

Item card names, list row primaries

text-lg / 1.125rem

Last restocked 3 days ago

Body text, descriptions, form labels

text-base / 1rem

Added to cart

Secondary metadata, helper text, badge labels

text-sm / 0.875rem

Expires 2026-05-01

Timestamps, fine print, tooltip text

text-xs / 0.75rem

When to use each step

Heading scale

Use these classes for semantic heading elements (h1, h2, h3). These are prescriptive — follow them when adding new headings:

Level	Recommended class	Example context
h1	text-2xl font-bold	Page title, welcome screen
h2	text-xl font-semibold	Section heading, dialog title
h3	text-sm font-medium uppercase	Form section header, grouped field set

Content scale

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

Step	Use
text-base	Body text, form field values
text-sm	Labels, metadata, badge text, helper text, button labels
text-xs	Timestamps, fine print, tooltip text

Steps above text-2xl and below text-xs are not used in the app.

Line height

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

body {
  line-height: 1.25em;
}

Individual components override this with leading-tight as needed (the only leading utility currently in use).

Weight conventions

Weight	Tailwind class	Usage
400	font-normal	Helper text, metadata, supplementary labels
500	font-medium	Card titles, dropdown items, mid-emphasis UI (buttons, settings labels)
600	font-semibold	Dialog titles, alert titles, small high-contrast labels
700	font-bold	Rarely used — reserve for intentionally heavy emphasis

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.