Philosophy

Start with the material

Structure follows the information. Long text needs a readable line length. Dense archives need clear organization. Tools need clear state and controls. Use the shared design with a layout that suits each page.

Keep the interface subordinate

• Prefer text, whitespace, and alignment before containers or decoration.
• Use Wrenfold Text for reading content and article headings. Use Georgia for ordinary interface text and Palatino for interface headings. Use monospace for values, identifiers, shortcuts, and compact status. Reserve sans serif for very small chart labels.
• Keep the palette neutral with one restrained blue for links, focus, selection, and meaningful state.
• Use thin rules to show structure. Add boxes, shadows, gradients, or animation only when the material needs a boundary, depth indicator, or transition.
• Keep controls square, compact, clearly labeled, and near the content they affect. Give equivalent dropdowns the same appearance and keyboard behavior. Remove duplicate controls that have the same function in the same context.
• Keep titles near the material they identify.

Make hierarchy skimmable

Organize long pages by title and date, section headings, summaries, primary material, and optional detail. Where space permits, put context in a margin. On narrow screens, put it in the text flow.

Use margins for useful context or comparison. Remove unexplained section numbers and empty promotional space. Decrease excessive gaps and balance columns. Keep readable line lengths and clear separation.

Use one ruled ornament for a major subject change. Choose a small symbol that suits the material. Remove adjacent section and disclosure rules to prevent duplicate lines.

Put one PNG-centered divider before the main puzzle unit, after all rules and worked examples. Keep its introduction, solve links, and grids together below the line. Choose this boundary by meaning. The first image does not necessarily start the main puzzle. Align the divider with the layout.

Use a transition ornament that differs from the masthead logo. A thin, square-edged sheet can group the main solve links, grids, and references. Use the divider as its top edge. Keep examples outside the sheet. Preserve original diagram colors. Avoid shadows and excessive inset.

Group actual solve actions together. Keep post-grid links in place and preserve the prose structure.

Earn every feature

Use search, filters, sorting, pagination, drawers, and dialogs when they help readers find, read, compare, or operate the material. Keep simple tasks simple as the dataset grows.

Choose one collection layout. Use compact paginated rows in the page flow, with optional details. For a comparison matrix, use a named overflow region. Do not combine pagination with a table that scrolls internally in both directions. Show sort direction in headings. Explain primary and secondary sorting in advanced controls, without unexplained digits.

Share foundations, preserve identity

The theme controls the palette, type roles, focus behavior, accessibility helpers, standard page frames, transitions, and color modes. Each site keeps the layouts and visualizations that its subject requires.

Pair each masthead title with a small abstract subject symbol. Do not use a Unicode glyph or emoji. Generate compatible transparent PNGs from the SVG geometry. Use black on paper and white on charcoal. The title supplies the name. Favicons use the same geometry in white on a black field.

Show code as code

Show source code and structured data in monospace, with the shared syntax palette. Calculate the highlighting during the build. Do not load a highlighter in the browser.

The palette uses the theme tones: muted comments, blue keywords, and quiet hues for strings, numbers, and names. Color helps the reader to parse code. It does not decorate the page. Keep the exact source text. Put long collections of listings in native disclosures.

Accessibility is part of the style

Support keyboard use and visible focus. Give controls useful labels and live status. Respect reduced motion. Keep text legible in light and dark modes. On narrow screens, simplify the layout without hiding essential content.

Test the ends of the scale

Review empty and realistic states. Test narrow and wide viewports, both color modes, and keyboard focus. Test the largest plausible collection. Remove unnecessary interface elements without removing capability.