Skip to main content

Tech Coatings — Evidence Field

Overview​

Visual thesis: this is a field report for technical work, not a SaaS landing page. It should feel precise, grounded, and safe to act on: coating layers, inspection marks, evidence tags, and a clear decision trail. The memorable object is the evidence thread that travels from Reality to Dream to Bridge without replacing human judgment.

The four-page sequence has one composition:

LANDING -> REALITY / unread evidence -> DREAM / protected judgment -> BRIDGE / bounded proof

Hierarchy​

Each page has one focal statement, one evidence instrument, and one next action.

  1. Focal statement: the lesson a cold reader should remember.
  2. Evidence instrument: workflow map, setpoint table, or proof sequence—not a decorative card grid.
  3. Boundary: what remains unknown, human, unsafe, or excluded.
  4. Action: one page-specific prompt and one route forward.

Make this order work in grayscale. De-emphasise metadata before enlarging the headline. Use labels only when they improve scanning of dense evidence.

Typography​

  • Body and table text stays at least 16px; use 18px for important explanatory prose.
  • Captions, evidence status, and repeated instructions stay at least 14px.
  • Reserve 12px mono uppercase for rare peripheral markers. The current eyebrow token is not a default content style.
  • Keep sustained prose between 45–75ch, left aligned, with 1.5–1.7 leading.
  • Use no more than one display family, one body family, and mono for evidence notation.

Color​

  • ink and paper carry reading.
  • steel identifies supporting operational context.
  • signal marks unknowns, pressure, exclusions, and kill signals.
  • proof marks accepted evidence, setpoints, receipts, and safe continuation.
  • Never use signal or proof colour alone; pair it with text and a structural cue.
  • Runtime values must come from the shared design system. The values above express roles and must be mapped to measured repository tokens before implementation.

Layout And Rhythm​

  • Use the shared LensSubPage, SectionHeader, Rhythm, and instrument primitives.
  • Alternate narrative space with one full-width evidence object. Avoid stacking identical card grids section after section.
  • Related evidence stays close; a new decision earns loose separation.
  • Tables may use the reading width they need; prose remains narrower.
  • On mobile, recompose multi-column comparisons into an explicit sequence. Preserve DOM and reading order; do not merely squeeze columns.

Components​

  • Landing: orient the reader and expose the three decision doors without duplicating them as ornamental cards.
  • Reality: make the unknown workflow and evidence gaps the dominant instrument.
  • Dream: show how approved evidence travels while accountable people retain authority.
  • Bridge: make 15 cases -> 1 handoff -> 1 decision a visible, bounded sequence.
  • Cards: use only for genuinely repeated peer objects. A claim, warning, or next action should use its semantic primitive rather than another card.
  • Prompts: one per page, specific to the page job, with a clear verb and nearby explanation.

Interaction​

Every action has default, hover, focus, active, and disabled treatment. Touch targets measure at least 44px. Tables remain understandable without horizontal guessing. Focus order follows the visual sequence. Reduced motion removes nonessential transitions without removing state meaning.

Do Not​

  • Do not make unknown evidence look like a product metric.
  • Do not use glossy AI imagery, generic industrial stock decoration, or dashboard chrome.
  • Do not repeat the same three-card section on every page.
  • Do not use tiny mono uppercase text for instructions, navigation, evidence, or table content.
  • Do not invent brand colours, operational facts, performance numbers, or claims of proof.

Acceptance Proof​

Render 320, 375, 768, 1024, and 1440px. At each width verify:

  • the focal lesson and primary action are identifiable in five seconds;
  • the Reality, Dream, and Bridge instruments are visually distinct;
  • computed type floors, contrast pairs, target sizes, focus visibility, and overflow pass;
  • no _flow path or private evidence appears publicly; and
  • one unfamiliar reader can name the constraint, protected future, and first bounded proof.