Families

• Salt, sulfur & mercury 0123456789

  fontFamilies.display'Roboto Slab', 'Rockwell', 'Courier New', serif

  Display and headings H1–H4: the shop-sign slab.

• Salt, sulfur & mercury 0123456789

  fontFamilies.body'Space Grotesk', 'Helvetica Neue', 'Inter', system-ui, sans-serif

  Everything else: body, labels, buttons, H5 and eyebrows.

• Salt, sulfur & mercury 0123456789

  fontFamilies.mono'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace

  Code, IDs, measurements and figures.

Type styles

The design system's styles, each rendered with its achery-ui component. Figures are measured from the rendered text: size · weight · line height · tracking.

• display<Display>size · weight · line height · trackingThe big shop-sign treatment: one per view at most.

  A workbench, not a factory.

• h1<Heading level={1}>size · weight · line height · trackingPage title.

  The slow apothecary

• h2<Heading level={2}>size · weight · line height · trackingSection title.

  Salt, sulfur, mercury

• h3<Heading level={3}>size · weight · line height · trackingSub-head.

  Bound in cream linen

• h4<Heading level={4}>size · weight · line height · trackingCard or panel title.

  Twelve loose pages

• h5<Heading level={5}>size · weight · line height · trackingUppercase grotesk heading; set text-transform: uppercase.

  SECTION EYEBROW

• eyebrow<Eyebrow>size · weight · line height · trackingSmall-caps label: eyebrows, table headers, status pills. Uppercase, in fg-2.
  FIELD GUIDE
• p-lead<Body variant="lead">size · weight · line height · trackingLead paragraph, in fg-2.

  A workbench is what you make of it.

• p<Body>size · weight · line height · trackingBody copy: the 14px compact base.

  Body copy is short, plain, and a little dry.

• p-small<Body variant="small">size · weight · line height · trackingFootnotes and small print, in fg-2.

  1. See Field Guide, p. 14.

• mono<Mono>size · weight · line height · trackingCode blocks, kbd, HUD numerals, recipes in marginalia. Inline code runs at 0.92em.
  const tincture = await steep()

Scales

Font size

Compact, 14px base.

Weight

Line height

Letter spacing