Quire

Theme settings

Typography, layout and motion — what each setting does, and the range it allows.


Typography

Quire uses the IBM Plex superfamily: Serif for display, Sans for body, Mono for labels and interface text. They are designed as one family across three classifications, so they sit together without being matched by eye.

Display scale

80–130%, in steps of 5

Scales the six heading steps together. It does not touch body text. Below about 90% headings stop reading as headings on mobile; above about 120% long product titles start wrapping to three lines.

Body size

15–19px

17px is the default and suits most catalogues. Go to 18 or 19 if your audience skews older; the measure adjusts with it automatically.

Measure

36–52 characters, in steps of 2

How wide a paragraph is allowed to get. The unit is the width of a zero, so the default of 44 sets a line of about 53 typical characters — squarely in the range that reads most comfortably. The setting is bounded because a paragraph running the full width of a desktop screen is the single most common way a good catalogue is made unreadable.

Layout

Maximum page width

How wide the content area can grow. Wider suits photography, narrower suits text.

Minimum page margin

16–80px

The gap between content and the edge of the screen on small viewports.

Show column rules

The faint vertical rules behind the grid. On by default. They are a typographic device, not a decoration — turn them off if your photography is busy.

Corner radius

0–8px

Applies to buttons, cards and media. 0 for a hard editorial look, 8 for something softer. It is capped at 8 on purpose: past that the theme starts to look like a different theme.

Motion

Two levels — None and Calm (the default). Both respect the visitor's own reduce motion system setting, which always wins: someone who has asked their operating system for less motion gets less motion regardless of what you choose here.

Previous
Presets