FedM8 design standards
Pick a design to view
Each design has one page: its colors, type, layouts, chat, components and rules, with live samples. Review it, tweak it in your browser, and copy what you need. AI agents read the same pages to build screens that match.
Designs
Navy and gold
The FedM8 brand: the shield, navy and gold. Use it for brand marks, social posts and print. Videos have their own styles.
Open design 001 →Green and white
The previous app design, retired for new work on Nov 2, 2026. Pages not yet rebuilt still use it. Keep it for reference; new work uses design 003.
Open design 002 →Video styles
Each video style has its own page: frame, motion, captions, voice, music and words, with a reference episode. Video 001 is the narrated walkthrough.
Open video styles →Card hub + social
The standard for all new work. Rollout to every page is in progress (theme layer shipped Nov 3, 2026). Big choice cards, one amber action, and threads, team-up and "I can do this" on every opportunity. Members can change the look on the fly. Use it for every new screen.
Open design 003 →Which design do I use?
Start from what you are making. One page uses one design.
| You are making | Use |
|---|---|
| The app: Chat, Veterans, Contracts, Grants, Get Certified, Learn | 003 Card hub + social |
| A new screen, tool or page | 003 Card hub + social |
| The logo, brand marks, business cards and print | 001 Navy and gold |
| Videos and YouTube thumbnails | Video styles (walkthroughs: V001) |
| A change to a page that already uses one design | Keep that page's design. Don't mix the two on one page. |
On every page, in every design
Chat or comments
Every page has a place to ask and help. App screens have their rooms. Other pages carry a comments box, like the one at the bottom of this page.
Plan tiles
A small tile after a paid tool says which plan it belongs to, so a Free member knows what to upgrade to.
Plain words
Short sentences, schoolbook words and one next step. The matching AI is called Match-M8. FedM8 AI hosts the rooms.
For AI agents
- Read /design/catalog.json. It lists every design, what it is for, and the parts every page shares. For a video, read /design/v/catalog.json instead.
- Pick the design from the table above. Open its page and its tokens file: 001 tokens or 003 tokens (build contract: 003 spec).
- Use only those tokens and copy the component snippets from the page. Don't invent colors, sizes or names.
- Give the page chat or a comments box, and put a plan tile on each paid tool. Take the plan from tier.js, never from page code.
- Use the words from 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 /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.
Comments and questions
Ask about these designs, suggest a change, or help someone build a page.