# FedM8 design continuity

This change preserves the existing navy and gold identity, logo, system typography,
buttons, panels and app rail. The homepage keeps the existing hero assets and adds a
compact two-column layout: purpose and next action on the left, a usable real-notice
example on the right. Below 760px the example follows the introduction in one column.
The example uses text, native form controls, visible keyboard focus and a live region.
No new brand, decorative illustration, animation language or logo is introduced.

## Contract workflow, September 16, 2026

The app started with contract discovery (superseded by owner direction 2026-10-16
below: Chat leads. Search feeds the rooms). Find contracts, My Bids, Partners and My Firm
led the navigation. Primary search exposes set-aside, work location and deadline;
advanced filters and broader research use separate disclosures. Result metadata and
controls are readable at 14–16 px with 44 px primary inputs. Navy, gold, DM Sans and
Source Serif 4 follow the existing app. The Mercury reference informed calm working
density without replacing the identity. Small screens stack filters and result actions.
Pricing separates direct cost, burden, fee and estimating evidence. Capabilities state
the included behavior, plan, limitations and competitor reference for each workflow.

## Quiet interface, September 18, 2026

Reference: Apple at https://styles.refero.design/style/aecac5da-f397-4ddf-b71f-de1efc434cb8.
Retain the FedM8 shield and navy/gold brand. Use light gray canvas, white surfaces,
DM Sans working headings, 12px panel corners, and 24px panel padding. Navy filled
buttons identify the primary action. Pale blue marks the current section; gold is
reserved for brand and deadline accents. Text labels accompany every status color.

Chat leads. Search feeds the rooms. (Owner direction 2026-10-16; this replaced
"Search leads.") The default rail shows five main spaces plus the active space;
All tools reveals the rest and remembers the choice. Optional route explanations
and code definitions use accessible question-mark disclosures. Native details
collapse saved searches, research, and secondary reading. Deadlines, source age,
preview limitations, errors, prices, consent, and permission gates remain visible.

Hints work by click, touch, and keyboard; Escape closes and returns focus. A small
onboarding tip and individual next-step tips remember dismissal on this device.
Show tips restores the onboarding prompt. No automatic dialogs or new dependencies.

## Guided-flow look (owner direction, 2026-10-02)

Walk-throughs and Win Kit follow the owner's reference video. This is the one place the navy and gold rule gives way.

- Steps are chevrons. Finished parts fill blue (`#1f6fb5`) with a white check; the current part is dark blue (`#164e86`); later parts are grey. The label under each chevron still names it.
- One large centered question per screen. Answers are tiles; the chosen tile turns light blue with a blue border.
- Continue is green (`#1f7a3a`, white text, 5:1). Back is a blue outline. Inside Win Kit, Next is blue.
- Results sit in white cards with a soft shadow. Yes, no and caution use filled circles (green, red, amber) next to the words.
- Styles live at the end of `assets/os-walkthrough.css` and `assets/os-winkit.css`. No inline styles, no new fonts.
- Calm focus tint (owner, 2026-10-08): the step card is a light blue stage (`#e9f0f8`, border `#cbd8e7`). Answer tiles stay white with a stronger edge (`#aebfd3`) and a soft shadow; the picked tile turns `#d6e6f8`. The eye lands on the answers, the current chevron and the green Continue. Text inside the stage uses `--ink-2` (5.6:1), never `--muted`.
- One look everywhere: every step-by-step screen (walk-throughs, certification tracks, Win Kit, Team Up setup, the Directory listing, Start) uses the same chevron bar markup (`nav.walk-progress > ol > li > button.walk-seg[.is-done|.is-current] > span.walk-seg-label`), the same tiles and the same footer. Tokens are the `--guide-*` custom properties in `assets/os-walkthrough.css`; add a screen by reusing those classes, not by copying colors.

## Owner direction 2026-10-16: Chat leads

Chat leads. Search feeds the rooms. The owner asked to center the app on people
talking about the work: Chat comes first, and contract, grant and certification search
feed the rooms people talk in. This replaces "The app starts with contract discovery"
and "Search leads." above. Chat is now first in the app rail, the phone dock and the
public top bar, members land in it after sign-in, and its home is calm: My rooms on
the left, one "Ask your people" box and one stream in the middle, one card at a time
on the right. One list (`NAV_ORDER` in `assets/approved-design.js`) sets the menu order.

- One name per thing. "Contract Chat" stays the public name (owner, 2026-10-13). Inside
  the app the section is "Chat". A conversation is a "room". The helpful mark is a
  button labeled "Helpful"; its count is M8.
- Chat screens read their words from one table, `assets/chat-words.js`: rules line,
  empty room, daily limit, profile gate, refused post, Veterans note, the Helpful label
  and the home card titles. Server reason codes (`no_profile:`, `on_hold:`,
  `ack_required:`, `basic_required:`) are turned into plain words and one next step;
  a raw code is never shown.
- No made-up people or activity anywhere. When chat cannot load, the page says so in
  one line, offers Try again, and keeps the person's unsent words (in this tab).