{
  "name": "FedM8 design standards",
  "updated": "2026-11-02",
  "index": "https://fedm8.com/design/",
  "video_catalog": "https://fedm8.com/design/v/catalog.json",
  "how_to_use": [
    "Making a video? Read video_catalog (https://fedm8.com/design/v/catalog.json) instead.",
    "Pick the design from which_design.",
    "Read that design's tokens file and page. Use only its tokens and copy its component snippets.",
    "Give every page chat or a comments box, and a plan tile on each paid tool.",
    "Use the design's word table. Call the matching AI Match-M8 and never show an engine or vendor name.",
    "Design 003 is the standard for all new work (approved 2026-11-02); rollout to every page is in progress (theme layer shipped 2026-11-03), so build from https://fedm8.com/design/003/spec.json and its tokens. DESIGN.md (design 002, retired for new work) and DESIGN_DNA.md (design 001) record earlier decisions. If a design page and its file disagree, the file wins until the page is fixed."
  ],
  "designs": [
    {
      "id": "001",
      "name": "Navy and gold",
      "status": "standard",
      "summary": "The FedM8 brand: the shield, navy and gold, DM Sans and Source Serif 4. Videos have their own styles in video_catalog.",
      "use_for": [
        "brand marks",
        "social posts",
        "print and the capability one-pager"
      ],
      "page": "https://fedm8.com/design/001/",
      "tokens": "https://fedm8.com/design/001/tokens.json",
      "source_files": [
        "DESIGN_DNA.md",
        "assets/theme.css"
      ]
    },
    {
      "id": "002",
      "name": "Green and white",
      "status": "retired",
      "summary": "Retired for new work on 2026-11-02. Pages not yet rebuilt in design 003 still use it until the rollout is complete (see design/003/status.json). Reference only for new work.",
      "use_for": [
        "reference only"
      ],
      "page": "https://fedm8.com/design/002/",
      "tokens": "https://fedm8.com/design/002/tokens.json",
      "source_files": [
        "DESIGN.md",
        "assets/approved-design.css",
        "assets/approved-design.js",
        "assets/fedm8-room.css",
        "assets/chat-words.js"
      ],
      "retired": "2026-11-02",
      "replaced_by": "003"
    },
    {
      "id": "003",
      "name": "Card hub + social",
      "status": "standard",
      "summary": "The standard for all new work in the app. Rollout to every page is in progress: warm ground, navy for 'where you are', one amber action, big choice cards, Reddit-style threads, team-up (Prime/Sub/1099) and 'I can do this' on every opportunity. Fully token-driven so members can change the look at runtime.",
      "use_for": [
        "the app: every screen in fedm8.com/os, as pages are rebuilt (design/003/status.json)",
        "every new screen, tool or page"
      ],
      "page": "https://fedm8.com/design/003/",
      "tokens": "https://fedm8.com/design/003/tokens.json",
      "spec": "https://fedm8.com/design/003/spec.json",
      "source_files": [
        "design/003/spec.json",
        "design/003/tokens.json",
        "design/003/design-003.css",
        "design/003/theme.schema.json"
      ],
      "approved": "2026-11-02",
      "rollout": "in_progress",
      "rollout_status": "https://fedm8.com/design/003/status.json"
    }
  ],
  "which_design": [
    {
      "making": "The app: Chat, Veterans, Contracts, Grants, Get Certified, Learn",
      "use": "003"
    },
    {
      "making": "A new screen, tool or page",
      "use": "003"
    },
    {
      "making": "The logo, brand marks, business cards and print",
      "use": "001"
    },
    {
      "making": "Videos and YouTube thumbnails",
      "use": "a video style from video_catalog (walkthroughs: v001)"
    },
    {
      "making": "A change to a page that already uses one design",
      "use": "keep that page's design; never mix two designs on one page"
    }
  ],
  "shared": {
    "comments_box": {
      "rule": "Every page carries chat or a comments box so people can ask, answer and help each other.",
      "markup": "<div class=\"pc\" data-page-comments data-topic=\"PAGE-KEY\" data-page-title=\"PAGE TITLE\"></div>",
      "topic_rule": "PAGE-KEY is the page's short path in lower case with hyphens, 1 to 40 characters, starting with a letter (for example plans, certifications, design-002).",
      "files": [
        "/assets/page-comments.css",
        "/assets/page-comments.js"
      ],
      "needs": [
        "/assets/vendor/supabase.min.js",
        "/tier.js"
      ],
      "backend": "Community Q&A: comments are questions in that topic and replies are answers. Anyone reads; signed-in members post through community_ask and community_answer and report through community_report.",
      "colors": "Set --pc-surface, --pc-ink, --pc-muted, --pc-line, --pc-accent, --pc-accent-ink, --pc-soft, --pc-radius and --pc-font on body for the page's design."
    },
    "plan_tile": {
      "rule": "A small B (Basic) or P (Pro) tile right after a paid tool, output or ability. Free features get no tile. Pro includes AI, so there is no AI tile.",
      "markup_link": "<a class=\"plan-tile\" data-plan=\"basic\" href=\"/plans#basic\" aria-label=\"Basic plan feature. See plans\" data-tip=\"Basic plan\">B</a>",
      "markup_inside_control": "<button type=\"button\" class=\"btn ghost\" aria-label=\"Award Intel (Pro plan)\">Award Intel<span class=\"plan-tile plan-tile--flush\" data-plan=\"pro\" aria-hidden=\"true\">P</span></button>",
      "markup_from_tier": "<a class=\"plan-tile\" data-plan-feature=\"award_intel\"></a>",
      "on_dark": "Add plan-tile--on-dark on a filled or dark control (a primary button, the video stage).",
      "files": [
        "/assets/plan-tile.css",
        "/assets/plan-tile.js"
      ],
      "plan_source": "FedM8Tier.minPlanFor(featureId) in tier.js",
      "colors": "Set --plan-b-ink, --plan-b-bg, --plan-b-line, --plan-p-ink, --plan-p-bg and --plan-p-line on body for the page's design."
    },
    "naming": {
      "matching_ai": "Match-M8",
      "room_host": "FedM8 AI",
      "chat_public_name": "Contract Chat",
      "chat_in_app": "Chat",
      "conversation": "room",
      "post_action": "Post"
    }
  }
}