Improving The LLMWikis Contrast Theme

LlmWikis.org is already doing one important thing right: it behaves like a documentation site rather than a marketing landing page. The homepage explicitly says the layout is meant to work like a reference site, with...

Metadata

Field	Value
Source site	llmwikis.org
Source URL	https://llmwikis.org/
Canonical AIWikis URL	https://aiwikis.org/llmwikis/files/raw-system-archives-llmwikis-agent-file-handoff-archive-2026-04-28-impro-8b9574bb/
Source reference	raw/system-archives/llmwikis/agent-file-handoff/Archive/2026-04-28/Improvement/Improving the LlmWikis Contrast Theme.md
File type	md
Content category	memory-file
Last fetched	2026-06-22T01:56:21.9510185Z
Last changed	2026-04-28T12:25:01.9955907Z
Content hash	sha256:8b9574bb93e34cf3b5bca54e71141cf548730a75f7be621a642b1b5d901ecb43
Import status	unchanged
Raw source layer	data/sources/llmwikis/raw-system-archives-llmwikis-agent-file-handoff-archive-2026-04-28-improvement-improving-the-llm-8b9574bb93e3.md
Normalized source layer	data/normalized/llmwikis/raw-system-archives-llmwikis-agent-file-handoff-archive-2026-04-28-improvement-improving-the-llm-8b9574bb93e3.txt

Current File Content

Structure Preview

• Improving the LlmWikis Contrast Theme
• Executive summary
• Site audit and assumptions
• What the live audit shows
• Assumptions and limits
• Current and proposed style comparison
• Recommended design system
• Color palette recommendations
• Typography, spacing, and responsive scale
• Responsive breakpoints
• Implementation blueprint
• Priority order and rationale
• Recommended HTML shell
• Core CSS layer
• Responsive rules and optional contrast mode
• WordPress mapping note
• Testing, browser rollout, and timeline
• Testing checklist
• Browser and device considerations
• Deployment steps
• Timeline estimate

Raw Version

This public page shows a bounded preview of a large source file. The complete source remains in the raw and normalized source layers named in metadata, with the SHA-256 hash above for verification.

• Source characters: 39959
• Preview characters: 11982

# Improving the LlmWikis Contrast Theme

## Executive summary

LlmWikis.org is already doing one important thing right: it behaves like a documentation site rather than a marketing landing page. The homepage explicitly says the layout is meant to work like a reference site, with route density, source boundaries, search, and reusable paths, and it intentionally avoids “hero art” and decorative panels. That content-first intent should be preserved. What needs improvement is not the site’s underlying editorial model, but its visual hierarchy, spacing system, responsive behavior, and accessibility consistency across a dense header, repeated route maps, long text pages, code examples, and table-like content. The live pages I audited consistently show a skip link, a crowded pre-content header area, metadata blocks rendered as loose labels and values, and repeated footer navigation clusters on internal pages. citeturn0view0turn7view0turn27view0turn27view1turn27view2

The highest-value changes are to introduce a documented color and typography system, limit article line length, simplify the top navigation into clear primary and secondary layers, make keyboard focus unmistakable, ensure controls and boundaries meet WCAG contrast requirements, and make all major page types reflow cleanly at mobile widths. WCAG 2.2 requires text contrast of at least 4.5:1 for normal text, 3:1 for non-text UI components, visible keyboard focus, and reflow without two-dimensional scrolling at a width equivalent to 320 CSS pixels, while the text-spacing criterion requires content to survive user overrides for line height, paragraph spacing, letter spacing, and word spacing. citeturn15search4turn18search0turn19search5turn18search3turn18search1

My recommendation is a **content-first front-end refactor**, not a visual rebrand. The finished site should feel like a refined public handbook: quieter, more legible, more targetable by keyboard and touch, and more resilient on small screens. Because `robots.txt` references `/wp-admin/` and `/wp-login.php`, WordPress is a reasonable implementation assumption; however, the public crawl does not expose the active theme internals or computed CSS, so the HTML and CSS below are designed as a robust front-end layer that can be mapped onto either a classic theme, a block theme, or a child theme implementation. citeturn8view1turn21search2turn26search0turn21search12

## Site audit and assumptions

### What the live audit shows

Across the homepage and representative internal pages such as **Start Here**, **What Is an LLM Wiki?**, **The Three-Layer Architecture**, and **Ingest**, the page structure is highly repetitive and predictably dense: a skip link appears first, followed by a single row containing the site title plus nine primary section links, then a search area, the text or control label “Contrast,” a canonical UAIX link, and a second “Source map” row of links before the article body even begins. This is useful for power users, but on smaller screens it is almost certainly the main readability and tap-target pressure point. citeturn0view0turn7view0turn27view0turn27view1turn27view2

Article pages then present the page title, breadcrumbs, and metadata such as **Status**, **Last reviewed**, and **Canonical source**, but in the text crawl these appear as loose label/value sequences rather than as a visually grouped metadata component. The bodies are text-heavy and include code examples and table-like comparative content, which means typography, spacing, code-block overflow management, and responsive table handling matter more here than visual ornament. citeturn7view0turn27view0turn27view1turn27view2

Internal pages also repeat a large route-map footer containing **Main sections**, **Reference**, **Case studies**, and **UAIX canonical** links after the main content. Repeated navigation is not inherently bad, but MDN notes that not all links need to be in navigation landmarks, and excess landmarks can create noise for assistive technology users. LlmWikis should keep the discoverability benefit while reducing cognitive and visual overload. citeturn7view0turn27view0turn20search5turn25search2

### Assumptions and limits

The recommendations below assume the following:

- **The site is likely WordPress.** The public `robots.txt` disallows `/wp-admin/` and `/wp-login.php`, which is a strong WordPress signal. Deployment guidance therefore includes both classic-theme and block-theme WordPress paths. citeturn8view1turn21search2turn26search0turn26search1
- **The public crawl did not expose computed colors, font declarations, or full front-end class names.** For that reason, I am not claiming specific existing color-ratio failures. Instead, I am prescribing a tested palette and a tokenized CSS system so compliance is explicit rather than implied.
- **The header label “Contrast” may be a theme toggle, a theme label, or a control adjacent to search.** If it is interactive, it should be converted into a real button with an accessible name, clear focus state, and state semantics. The text appears in the header on every page I audited. citeturn0view0turn7view0turn27view0

### Current and proposed style comparison

The table below synthesizes the observed live structure and the recommended design direction.

| Area | Current observed or likely state | Proposed state |
|---|---|---|
| Contrast | Public crawl shows a control or label called “Contrast,” but the site does not expose a documented front-end palette in the crawl, so compliance is not easily auditable from the public HTML alone. citeturn0view0turn7view0turn27view0 | Define a tokenized light palette and optional high-contrast dark palette, with all text and UI pairs pre-checked against WCAG thresholds. |
| Typography | Long text-heavy pages, code examples, and comparison content create a high readability burden. citeturn27view0turn27view1turn27view2 | Use a controlled prose measure of ~72ch, line-height around 1.65, stronger heading scale, and consistent meta/body/code sizes. |
| Spacing | Metadata and repeated nav blocks appear visually compressed in the crawl; dense content likely benefits from much stronger grouping. citeturn7view0turn27view0 | Introduce an 8-point spacing scale, card-like metadata grouping, larger section gaps, and predictable list/code/table spacing. |
| Layout | Reference density is intentional, but the page very likely overloads the viewport before the article begins. citeturn0view0 | Keep the docs-first feel, but separate masthead, primary nav, source map, article meta, prose, and footer into clearer layers. |
| Navigation | One large header row plus a second source-map row before content, then another large route map in the footer. citeturn0view0turn7view0turn27view0 | Keep one primary nav, turn source map into a disclosure/secondary nav, and compress footer links into grouped clusters or mobile accordions. |
| Images and rich media | The audited pages are overwhelmingly text-first and did not show an obvious reusable figure system in the crawl. citeturn0view0turn27view0turn27view1 | Define one responsive figure pattern with `alt`, `width`, `height`, `max-width: 100%`, and captions so future screenshots/diagrams do not break layout. |

## Recommended design system

The right visual direction is **minimal, professional, and documentation-first**. WCAG’s visual-presentation guidance recommends text blocks that can be constrained to no more than about 80 characters or glyphs, left-aligned rather than fully justified, and spaced enough to support reading and resizing. For a site like LlmWikis, I would go slightly stricter than WCAG’s upper bound and hold the main reading measure near **68–72ch**, because the site is concept-heavy and reference-oriented rather than editorially narrative. citeturn24search0turn24search14turn16search0

Wireframe mockup reference: redacted from this public preview because the original image path was sandbox-local. Use the reviewed source archive or regenerated public media asset when visual evidence is required.

That visual direction also respects the site’s declared intent. The homepage says the layout is supposed to function as a route-dense public reference, not as a campaign page with decorative hero panels. So the redesign should sharpen hierarchy and usability without adding visual clutter or turning the site into a card-heavy product homepage. citeturn0view0

### Color palette recommendations

The ratios below are calculated against the specified adjacent background using the WCAG contrast formula. For normal text, aim for **4.5:1 or higher**. For visual boundaries of controls and meaningful UI states, aim for **3:1 or higher**. citeturn15search4turn18search0

| Token | Purpose | Light theme | Contrast on light bg | Optional high-contrast theme | Contrast on dark bg |
|---|---|---:|---:|---:|---:|
| `--color-bg` | Page background | `#F8FAFC` | — | `#0B1220` | — |
| `--color-surface` | Cards, header, footer | `#FFFFFF` | — | `#111827` | — |
| `--color-surface-muted` | Secondary panels | `#F1F5F9` | — | `#1E293B` | — |
| `--color-text` | Main text | `#111827` | `16.96:1` on `#F8FAFC` | `#F8FAFC` | `17.89:1` on `#0B1220` |
| `--color-text-muted` | Meta, supporting text | `#374151` | `9.85:1` on `#F8FAFC` | `#CBD5E1` | `12.61:1` on `#0B1220` |
| `--color-link` | Default links | `#0B57D0` | `6.10:1` on `#F8FAFC` | `#93C5FD` | `10.38:1` on `#0B1220` |
| `--color-link-hover` | Hover state | `#0842A0` | `8.74:1` on `#F8FAFC` | `#BFDBFE` | `13.18:1` on `#0B1220` |
| `--color-visited` | Visited links | `#6D28D9` | `6.79:1` on `#F8FAFC` | `#C4B5FD` | `10.14:1` on `#0B1220` |
| `--color-focus` | Keyboard focus ring | `#1D4ED8` | `6.41:1` on `#F8FAFC` | `#F59E0B` | `8.72:1` on `#0B1220` |
| `--color-border-strong` | Inputs, control boundaries | `#64748B` | `4.55:1` on `#F8FAFC` | `#64748B` | `3.93:1` on `#0B1220` |
| `--color-border` | Dividers, subtle rules | `#CBD5E1` | decorative only | `#334155` | decorative only |
| `--color-accent-soft` | Callouts, selected nav bg | `#EFF6FF` | — | `#1E3A8A` | — |

Practical guidance for this palette:

- **Keep body text dark and neutral.** Do not use blue for body text; reserve it for links and accents.
- **Underline prose links by default.** WCAG’s “Use of Color” criterion says color should not be the only means of distinguishing action or information, so prose links should not rely on color alone. citeturn19search7
- **Use the strong border token for interactive controls.** WCAG non-text contrast applies to boundaries and focus indicators when those visuals are needed to identify the control or its state. citeturn18search0turn19search5

### Typography, spacing, and responsive scale

MDN’s accessibility guidance for `line-height` recommends a minimum value of `1.5` for main paragraph content, and WCAG’s text-spacing criterion requires content to remain usable when users increase line height, paragraph spacing, letter spacing, and word spacing. For this site, I recommend a little more than that baseline: `1.65` for prose, with generous paragraph spacing and a restrained but clear type scale. `clamp()` is broadly supported and works well for fluid but bounded typography. citeturn16search0turn18search1turn18search4turn17search0

| Token / element | Recommended value |
|---|---|
| `--font-sans` | `Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif` |
| `--font-mono` | `ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace` |
| Base font size | `clamp(1rem, 0.98rem + 0.15vw, 1.0625rem)` |
| Body line-height | `1.65` |
| Small/meta text | `0.875rem` to `0.9375rem` |
| H1 | `clamp(2rem, 1.45rem + 2vw, 3rem)` |
| H2 | `clamp(1.5rem, 1.2rem + 1vw, 2.25rem)` |
| H3 | `clamp(1.25rem, 1.12rem + 0.6vw, 1.5rem)` |
| H4 | `1.125rem` |
| Code / pre text | `0.9375rem` |
| Reading measure | `72ch` max for prose |

Why This File Exists

This is a memory-system evidence file from llmwikis.org. It is shown here because AIWikis.org is demonstrating the real source files that make the UAIX / LLM Wiki memory system work, not only summarizing those systems after the fact.

Role

This file is memory-system evidence. It records source history, archive transfer, intake disposition, or another piece of provenance that should be retrievable without becoming an unsupported public claim.

Structure

The file is structured around these visible headings: Improving the LlmWikis Contrast Theme; Executive summary; Site audit and assumptions; What the live audit shows; Assumptions and limits; Current and proposed style comparison; Recommended design system; Color palette recommendations. Those headings are retrieval anchors: a crawler or LLM can decide whether the file is relevant before reading every line.

Prompt-Size And Retrieval Benefit

Keeping this material in a separate file reduces prompt pressure because an agent can load this exact unit only when its role, source site, category, or hash is relevant. The surrounding index pages point to it, while this page preserves the full content for audit and exact recall.

How To Use It

• Humans should read the metadata first, then inspect the raw content when they need exact wording or provenance.
• LLMs and agents should use the source site, category, hash, headings, and related files to decide whether this file belongs in the active prompt.
• Crawlers should treat the AIWikis page as transparent evidence and follow the source URL/source reference for authority boundaries.
• Future maintainers should regenerate this page whenever the source hash changes, then review the explanation if the role or structure changed.

Update Requirements

When this source file changes, update the raw source layer, normalized source layer, hash history, this rendered page, generated explanation, source-file inventory, changed-files report, and any source-section index that links to it.

Related Pages

• Source overview
• Site file index
• Site report index
• UAI system index
• Source provenance
• Site directory
• Organization reports

Provenance And History

• Current observation: 2026-06-22T01:56:21.9510185Z
• Source origin: current-source-workspace
• Retrieval method: local-source-workspace
• Duplicate group: sfg-655 (primary)
• Historical hash records are stored in data/hashes/source-file-history.jsonl.

Machine-Readable Metadata

{
    "title":  "Improving The LLMWikis Contrast Theme",
    "source_site":  "llmwikis.org",
    "source_url":  "https://llmwikis.org/",
    "canonical_url":  "https://aiwikis.org/llmwikis/files/raw-system-archives-llmwikis-agent-file-handoff-archive-2026-04-28-impro-8b9574bb/",
    "source_reference":  "raw/system-archives/llmwikis/agent-file-handoff/Archive/2026-04-28/Improvement/Improving the LlmWikis Contrast Theme.md",
    "file_type":  "md",
    "content_category":  "memory-file",
    "content_hash":  "sha256:8b9574bb93e34cf3b5bca54e71141cf548730a75f7be621a642b1b5d901ecb43",
    "last_fetched":  "2026-06-22T01:56:21.9510185Z",
    "last_changed":  "2026-04-28T12:25:01.9955907Z",
    "import_status":  "unchanged",
    "duplicate_group_id":  "sfg-655",
    "duplicate_role":  "primary",
    "related_files":  [

                      ],
    "generated_explanation":  true,
    "explanation_last_generated":  "2026-06-22T01:56:21.9510185Z"
}