one list of roles, named for what they are

Fonts and Font Sizes are the same four things, so they now read in the same order
under the same names — Menu, Titles, Headings, Body — from one list.

font_display is the largest statements and font_title is a section heading, which
is the reverse of what the words suggest. The labels say what the reader sees.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

web/sections/roles.ts

@@ -0,0 +1,21 @@
+/**
+ * The four type roles, named and ordered once.
+ *
+ * ── One list, two sections ──
+ *
+ * Fonts picks the FACE for a role and Font Sizes picks its SIZE. They are the same four things, so a
+ * reader moving between the two sections is entitled to find them in the same order under the same
+ * names — and that only holds if there is one list.
+ *
+ * ── The names are the site's, not the stylesheet's ──
+ *
+ * `font_display` is the largest statements and `font_title` is a section heading, which is the reverse
+ * of what those two words suggest. So the labels say Titles and Headings, in the order somebody reads
+ * a page: the menu above it, the title, the headings under that, the words.
+ */
+export const ROLES = [
+  { size: 'sub' as const, font: 'font_sub' as const, label: 'Menu' },
+  { size: 'display' as const, font: 'font_display' as const, label: 'Titles' },
+  { size: 'title' as const, font: 'font_title' as const, label: 'Headings' },
+  { size: 'body' as const, font: 'font_body' as const, label: 'Body' },
+];