• Communities: /c explains the four kinds (circle, board, cohort, practice, from COMMUNITY_FORMATS) before listing them, and each community's page says what its kind means. A member adding a note picks its label, as in the composer: the note box suggests one from the text until they choose (suggestNoteBasis in lib/app/labels.ts), shows what the chosen label means, and a Documented note must say in its text where it can be checked, a link, page, chapter, verse, year, ISBN or DOI (namesASource; postNote checks it again). "What the labels mean" under each thread lists the four. Ctrl or ⌘ + Enter adds a note.

Fewer choices at once (Hick's law). The time to choose grows with the number of choices in view, so each decision point offers few. They are grouped under a label, the likeliest first, the default already chosen, and the rest a tap away. Each page leads with one or two main actions. /learn opens on the units and one recommended start, the five-step walk with the 2-minute check beside it. Five of its problems show, with the rest behind "more". The tools come after the chapters, in two labelled groups: "For an exam" and "Going further". A choice set has a default whenever one is sensible (20 questions, every unit, the first kind of report). The same destination isn't offered twice in one place: the footer drops Home, since the brand above it goes there, and a chapter's Contents holds the chapter, its terms and its unit, and nothing else. Text size and theme live in the Menu and the footer. The header follows the Menu's order (Chapters, Glossary, Practice, Revision, Community). Where the device has its own share sheet, the share dialog leads with it and leaves out WhatsApp and LinkedIn, which the sheet already holds. Practice keeps its less common settings (mock test, weak or started chapters only) under "More options", which opens by itself when one is on, and explains spaced review under "How the spacing works", open only until the reader has something on their list. On a chapter, the first button is the next thing to do: the first concept, "Continue" with the next one not done, or, once all are done, the chapter test. One button opens or closes every concept.

Within reach. On phones a practice question's "Next" docks to the foot of the screen once answered, and a mock test's Previous and Next stick there; on touch screens every button is at least 44px tall. A closed concept opens from anywhere on its head. "Back to top" appears in the corner after two screens. The Menu starts with "Continue" and the concept read last.

Looking pressable. Whatever can be pressed says so before it is touched, and answers in every state, in both stylesheets. At rest: buttons are ruled or filled boxes; a ghost button and every link set in text are underlined (lightly, fully under the pointer); a card or row that is a link ends in an arrow (back or forward by direction, and ↗ for a new tab, which screen readers also hear: NewTab in components/landing/Arrow.tsx); a part that opens ends in a red + that turns to − (the same glyph on every summary); a choice among a few is joined boxes with the chosen one in ink (text size and theme included); a field lightens under the pointer, and its hint is fainter than typed text. Pointing: the arrow leans the way it goes, cards and rows tint, and a closed concept's head and its Open button tint together; hover looks for chips, tabs and choices sit inside @media (hover: hover), so a tap on a phone doesn't leave one looking chosen. Pressing: buttons sink 1px and darken; anything without its own pressed style dims while held (a weightless :where(...):active rule), and the browser's tap flash is the site's ink. Focus: the red ring turns light on red grounds, and a card whose title link has focus rings the whole card. Where you are: the header link for the current page or section has a red bar under it (components/landing/CurrentLink.tsx; Chapters marks itself on any chapter), the Menu and footer mark the page, and the Menu's icon becomes a cross while open. Honest: a disabled button ignores the pointer; a community card or notification is one target (a stretched link), so its hover tells the truth; panels that scroll (Menu, Chapters, Contents) shade the edge that has more. Roles match behaviour: links that change the address (Library, a profile, a community's sections, For you and Following) are a nav with aria-current, not tabs; a choice made in place (Asking or Sharing, Daily or Weekly) is buttons with aria-pressed; true tabs move with the arrow keys.

Being found. A feature that only the Menu lists is a feature few readers meet. Each one is reached in three ways:

• By name. The header search finds pages and settings as well as content. Every page in SITE_MAP carries a line saying what it is for (about) and the words readers use for it (also: "mock test" and "flashcards" for Practice, "dark mode" for the theme). content/learn/search.ts indexes them with the units, the display settings, the keyboard shortcuts, offline reading and sign-in. Those other names count as much as a title does. An empty search box says what search covers and offers three searches to try. A search with no results points to the chapters, the glossary and the community. A new page needs its about and also, or search won't know it.
• Where it is needed. Every chapter ends with "More for this chapter": its revision sheet, its formulas, the "Apply it" situations its ideas solve (scenariosFor), and its place on the map (/learn/map#<slug> opens the map on it). Practice points to the study plan, the formula sheet and the quiz maker, and its results point to progress. The report dialog links to the corrections page, and the walk ends with Practice and the weekly email.
• Where people look. Text size and theme are at the end of the Menu and in every footer (#display). Keyboard shortcuts are listed by ? on any page, by the footer where there is a keyboard, and by search (#keys, components/landing/Shortcuts.tsx); add a new key there. Icon-only buttons name themselves on hover. Every page offers the weekly feed to feed readers through <link rel="alternate">.

Two things a concept can do but doesn't show, dotted terms and J/K, are told once in the first concept opened (components/learn/ReadingTip.tsx). The tip stops for good on "Got it" or the first time the reader uses either one.

Reach (Fitts's law). The time to hit a target grows with its distance and shrinks with its size. The "Reach" sections at the end of landing.css, learn.css and product.css apply this in four ways:

• Size for the hand. Every control is at least 44px both ways on a touch screen (@media (pointer: coarse)) and at least 24px with a mouse.
• Hit areas larger than what is drawn. A small control that should stay small reaches further than it looks. This is padding cancelled by an equal negative margin (inline links, breadcrumbs, heading links, labels), or an empty ::after laid over the space around it (the glossary card's close button, faces in the community). A control with a set height grows its min-height and takes the same negative margin, since padding inside a min-height would shrink its share of the layout. A list row with one link is one target (the timeline, a chapter's connections, the study plan's weeks, earlier weekly ideas).
• Edges. Header targets are as tall as the bar, so the screen's top edge is part of them. The brand and the Menu run out to the side edges, "Back to top" reaches the corner, and the practice dock, a mock test's buttons, the community's bottom bars and the phone reading strip reach the foot of the screen. An ::after is placed from inside its element's border, so a bordered element adds 2px to its reach.
• The thumb's zone. On phones, the controls used most sit at the foot of the screen. The practice dock does this already. A chapter's reading strip now docks there too, with its Contents opening upward (learn.css, "Phones: the strip docks"). Dialogs rise as sheets from the bottom, and the community's bottom-bar items share the bar's whole width.

To check a change, measure what a tap actually lands on rather than the drawn box. Sample document.elementFromPoint on a 2px grid around each control, at a phone width with touch emulation and at a desktop width.

Familiar ways (Jakob's law). Readers spend most of their time on other sites, so this one behaves as those do:

• Back. On touch screens, Back closes what is open over the page (search, the Menu, Contents, a dialog, the community's composer and dialogs) and then leaves the page as usual. components/landing/layer.ts adds a history entry when a layer opens and takes it off when it is closed any other way. A page chosen from inside a layer replaces that entry, so Back never has a step that does nothing. A layer opened by the same tap that closed another waits for that step back to land. With a mouse, Back keeps its usual meaning.
• Links are links. Search results and inbox notifications are real links, so Ctrl- or ⌘-click, a middle click or a long press opens them in a new tab.
• Keys. Search also opens with Ctrl+K or ⌘K. Tabs answer to the arrow keys and Home and End. Escape closes anything open.
• Fields. Fields bring up the keyboard that fits: email, the decimal keypad for calculators, a "search" or "send" key. Links and codes don't autocorrect or capitalise, and a name autocompletes.
• Words and furniture. The theme's third option is "System", as phones and computers call it (it is still stored as device). The footer ends with a copyright line, and deeper pages have breadcrumbs. iPhones get a home-screen icon (app/apple-icon.png).

Seen as groups (Gestalt). The eye groups what is near, alike, lined up, framed together or in front before it reads a word, so the layout has to say what belongs together. The "Seen as groups" sections at the end of landing.css, learn.css and product.css hold these rules:

• Proximity. A heading, label or note sits closer to what it belongs to than to anything else: a heading to what follows it, a caption or hint to what comes before. A chapter's head is four groups, each a little further from the last: where the chapter sits and its title, what it covers, the facts, then the ways in. The first section after a page's opening stands as far off as the sections after it. A community thread is one group: its name, then its notes (as close as any list's rows), then the box to add one. The footer's last line is three groups: write to us, about the site, and how it shows. The header's Search and Menu sit closer to each other than to its links.
• Similarity. Each job has one look, and a different look means a different job.
  • A red bar marks what is current, chosen or pointed at, drawn one way for each kind of thing: 4px down the left of a row, 6px along the top of a card, and 4px along the foot of a chosen chip or tab, which is in ink.
  • "Unit n" is set the same everywhere (12px capitals, extra-bold, .08em apart). A field's name in a list of facts is a plain label. "+" has one size at the end of a row and one after a few words.
  • Links in text share one weight and one underline: 2px, a quarter of the text size below the words.
  • The header's Search and Menu are one height. The community's dialogs close with the same ruled × as the learning pages', and the reader uses the same Documented and Told chips as everywhere else.
• Continuity. What should line up lines up exactly, because a near miss reads as a mistake. Columns side by side share their rows (subgrid on /learn), so the rules over their lists line up however their headings wrap. These pairs share a baseline: a term and its meaning, a concept's number and its title, a post's author and its labels, and the footer's brand and column labels. A row's words stay on the column's edge. A hovered row's tint and red bar reach out into the margin rather than sit on its first letters.
• Figure and ground. A layer over the page reads at once as the figure: it has its own edge, a 2px ink rule, and one scrim (--scrim) dims the page behind it. The scrim darkens the page in both themes; made of the ink, it used to lighten a dark page. The Menu, the chapters panel and Contents now dim the page as search and the dialogs do. A press on the dimmed page closes the layer and does nothing else. A box that floats casts the flat sheet's shadow (--sheet, a hard offset with no blur); a panel hanging from a bar needs none. While one of the header's layers is open, the header comes forward over the bars docked at the foot of the screen.
• Common fate. Layers arrive in the same few ways: a panel drops from the bar it hangs from, a dialog or sheet rises, and the scrim fades in. Nothing moves for readers who ask for less motion.
• Prägnanz and order.
  • One frame or one line where one will do: no box drawn tight inside another, and no two rules a few pixels apart. A table's last row gives up its rule to the frame's, and the feed's end rule replaces the last post's.
  • Cards in a row share one height, with their feet on one line.
  • On phones, a stack of buttons or of units to jump to is one even column.

To check a change, measure gaps from ink (lines of text, rules, the edges of tinted regions) rather than from boxes. A heading's gap below should be smaller than its gap above. Compare baselines with a zero-size inline-block placed before the first word, and look at every layer open in both themes, at phone and desktop widths.

Words, seen as groups (Gestalt for text). Readers group words the way they group shapes: the same word reads as the same thing, the same grammar as one set, and a word next to another as its partner. The copy follows the same principles as the layout:

• Similarity: one name for each thing. A chapter is made of concepts ("lesson" is the code's word, never the screen's). A line quoted from a text is a passage, and the texts are the classical texts, not "the classics" or "old texts". Progress is done. What the site keeps is on this device (this browser only where the difference matters: Backup and transfer, and the privacy notice). A choice is Choose, a beginning Start, a return Continue, and the community's groups are communities (a circle is one kind). Where a modern idea and a passage part company is always headed "Where they differ".
• Similarity: one shape for each set. Menu labels are noun phrases, theme tabs are "-ing" phrases, the community notes on the home page are short sentences, the two answers in the hero's question start the same way, and the four kinds of community are each "a group that...". Buttons start with a verb; toasts are sentences with a full stop. Durations and counts are digits ("15 minutes", "220 cited passages"); one to nine are words in running prose.
• Continuity. The words a reader clicks are the first words on the page they open: a page's eyebrow is its name in the Menu, and the heading below it says what the page gives without repeating it. A link names a page as that page names itself ("Read two ways", "Practice and review", "The classical texts"). The home page opens and closes on the same pair, read, then ask.
• Proximity. A fact sits beside what it explains: "Units 3 and 5 are being written" beside the unit tabs that skip them, the time a check takes beside its Start button, the reason for a disagreement before the reply.
• Closure. A number agrees everywhere it appears (the home page counts passages as the texts page does; the level check takes about 10 minutes wherever it is mentioned). A count that is named is the count that is shown, and no line points at a form or page that isn't there.
• Figure and ground, Prägnanz and symmetry. The point comes first and the how-it-works after, in fine print. One idea to a sentence, most under 25 words, and blurbs in a set of about the same length. Two-part headlines balance: "Management is new. Its questions are not."

To check a change, read the page's words in order, without the layout: the eyebrow, headings and buttons should tell its story on their own. Search the code for the retired words above before adding new copy.

Feedback. A thin red line along the top shows a page is loading if it takes more than a moment (components/landing/NavProgress.tsx, in both layouts); cards and rows that are links darken as they are tapped. What loads after the page shows its shape meanwhile: the practice panel, and every community screen (app/(app)/(shell)/loading.tsx), use skeletons (.sk).

Recovering from mistakes. A practice session in progress is kept for the tab (sessionStorage, half a day), so leaving the page or reloading offers to continue it; leaving a mock test part-way asks first. Forms keep what was typed when sending fails (the weekly sign-up holds its field in state, since a form action clears uncontrolled fields), and mark the field with aria-invalid and the message. Destructive actions ask first (clearing the review list) or can be undone (marking a concept not done).

Landing on a #part. Long pages skip drawing sections far off screen (content-visibility), which made jumps to a #part land thousands of pixels away. A page opened at a #part now draws every section from the start (data-landing, set by a script in the landing layout before the first paint), and components/landing/HashLanding.tsx settles on the part after in-page and client-side jumps. New long lists that use content-visibility should be added to the data-landing rule in learn.css. Accessibility checkers misread skipped sections (contrast and target size); check those with every section drawn.

Type scale. Text uses ten sizes, as tokens in :root (--fs-2xs 11px up to --fs-h4 22px), in landing.css and product.css; headings above that scale with the screen. Use a token rather than a new pixel size.

Missing pages and errors. app/global-not-found.tsx answers any address that matches no page (the site has two root layouts, hence experimental.globalNotFound in next.config.ts), and not-found.tsx in each route group answers a missing chapter, text or question. A not-found file belongs to every page in its group, so it imports no stylesheet of its own (its styles are in landing.css); otherwise every page would load that stylesheet too. error.tsx in each group, and app/global-error.tsx as a last resort, say that progress on the device is safe and offer to try again.

Search results and sharing. Titles stay under about 65 characters and descriptions under 160. A page that sets openGraph replaces the layout's, image included, so it lists DEFAULT_OG_IMAGES from lib/meta.ts: the site's card at /share.png. Chapters and passages have their own images.

Bundles. Client components may import only types from content/learn/index.ts, or from any module that imports it (practice.ts, readings.ts and so on): importing a value would put every chapter in the browser's download. That once made the practice page 4 MB of JavaScript. Small helpers that client code needs, like questionId, cardId and recallId, live in content/learn/question-id.ts. A client page that fills in after loading holds its space meanwhile (aria-busy on the practice panel), so the page doesn't jump.

Security headers. next.config.ts sends a Content-Security-Policy on production builds: scripts, styles, fonts, images and requests from the site itself only (Supabase is used from the server alone), no framing, no plugins, and forms posting only to the site. Next.js's inline scripts need 'unsafe-inline'; nonces would make every page dynamic. Preview deployments also allow Vercel's toolbar. Adding a third-party script, font or API called from the browser means adding its origin there. The weekly-email cron route compares its secret in constant time.