5240lab Harness Design System

Project: 5240lab Harness Direction: System Atlas Generated: 2026-08-13 Source: ui-ux-pro-max recommendation, adjusted to the approved visual mockup

Visual Intent

The site is a precise, evidence-led developer atlas. It uses oversized editorial headings for orientation, restrained technical surfaces for dense evidence, and a monospace layer for paths, commands, states, and metrics. It must feel like a trustworthy engineering instrument rather than an AI marketing page.

Semantic Color Tokens

Color cannot be the only state indicator. Every status also carries text and, where useful, an SVG symbol.

Typography

• Display and body: IBM Plex Sans, system sans-serif fallback
• Paths, commands, metrics and labels: JetBrains Mono, system monospace fallback
• Display size: clamp(2.75rem, 7vw, 6.5rem)
• Reading text: 16–18px with 1.65 line height and a maximum 72ch measure
• Technical labels: 11–13px; never smaller than 11px in the delivered site
• Large headings use tight tracking; body text never uses negative tracking

Fonts are loaded with next/font or self-hosted assets so core content does not depend on third-party font requests.

Spacing and Shape

• Base rhythm: 4px; primary sequence: 8, 16, 24, 32, 48, 64, 96
• Content maximum width: 1200px
• Reading column: 720px
• Card radius: 12–16px; major shell radius: 20–24px
• Borders define hierarchy before shadows; shadows stay subtle and static
• Interactive targets are at least 44×44px

Page Pattern

Global navigation exposes the four stable routes: overview, guide, 5240lab evidence, and roadmap. Each page begins with a short orientation block and then moves from summary to inspectable detail. Search is not required for four routes; the evidence page provides keyboard-accessible filters and in-page navigation instead.

Landing

Hero → lifecycle atlas → concept comparison → metric summary → route cards.

Guide

Sticky local index → working playbook → document timeline → Superpowers mapping → manual synchronization gate → copyable templates.

Evidence

Layer map → evidence-type legend → filter controls → evidence cards → verification metadata.

Roadmap

Baseline score → L0–L4 explanation → improvement loop → before/after assessments → open work.

Interaction

• Use 150–250ms color, border, opacity, and shadow transitions.
• Do not shift surrounding layout on hover or focus.
• Respect prefers-reduced-motion; no scroll-jacking or required entrance animation.
• Filters, disclosures, copy buttons, and theme controls are keyboard operable and announced.
• Core explanations and evidence remain present in server-rendered HTML without JavaScript.

Accessibility and Responsive Rules

• Provide a skip link and sequential heading hierarchy.
• Maintain 4.5:1 body text contrast and visible focus rings.
• Verify 375, 768, 1024, and 1440px widths with no horizontal overflow.
• On mobile, the global navigation becomes an accessible disclosure, lifecycle nodes stack, and the guide side index becomes an in-flow contents control.
• Dark and light themes use semantic tokens; status meaning remains identical.

Forbidden Patterns

• Emoji as structural icons
• Purple-to-pink AI gradients, neon glow, glassmorphism, or decorative grid overload
• Unverified metrics presented as live facts
• Tiny code text, low-contrast muted text, invisible focus, or motion-only meaning
• Cards that are clickable without clear link/button semantics
• Search UI that has no useful content scale or working result behavior

Pre-Delivery Checklist

• [ ] SVG icons use one consistent outline family
• [ ] All interactive targets are at least 44×44px
• [ ] Keyboard order matches the visual order and skip link works
• [ ] Light/dark text and status contrast pass
• [ ] prefers-reduced-motion disables nonessential animation
• [ ] 375, 768, 1024, and 1440px layouts have no loss or overflow
• [ ] Core content is usable with JavaScript disabled
• [ ] Every displayed evidence fact has validation metadata