Navy and gold

Where it is used

How an AI agent uses this page

Read the tokens first: /design/001/tokens.json. It holds every color, font, size and rule on this page in one file. Use the --b- variables, never a new hex. If this page and DESIGN_DNA.md disagree, DESIGN_DNA.md wins and this page needs a fix. The checklist is at For AI agents.

One thing to know about the app: the signed-in app uses the paper and olive look from DESIGN.md. That is design 002. This page covers the navy and gold side.

Logo and name

The shield is a blue, red and white flag shield with the letters FEDM8 across it. The name is written FedM8: capital F, capital M, the number 8. Say it "Fed Mate".

The shield files

The wordmark

Three versions, one for each job. On the web top bar: shield, then Cormorant Garamond "Fed" in white and "M8" in light gold, a small cursive "Your mate in", and small capitals "Federal Contracting". On video: DM Sans bold, "Fed" in white and "M8" in gold. On light calm pages: the same lockup in dark navy and deep gold.

FedM8Your mate inFederal Contracting

Top bar on navy (theme.css)

FedM8Your mate inFederal Contracting

Top bar on light pages (index-calm.css)

FedM8

Video end card and thumbnails: DM Sans 700, tracking -0.04em

Clear space and size

½½½½

Keep half the shield's width free on every side.

Smallest: 28 px (the smallest file we ship). The top bar uses 40 px.

The half-width clear space is a proposed rule. The source files do not state one. Tell us if you want a different number.

Do and don't

FedM8 AI

Colors

Navy is the ground. Gold is the line. Everything else stays quiet: a light gray canvas, white surfaces and one pale blue for "you are here".

Brand

Quiet interface

Guided flow

This is the one place the navy and gold rule gives way (owner direction, 2026-10-02). Steps are blue chevrons, Continue is green.

Video stage

Status

Every status color comes with a word. A color alone is never the message.

Contrast

Ratios are computed from the default values. A Tweak changes the page, not these numbers. Text needs 4.5 to 1. Large text and lines need 3 to 1.

Typography

Two families do the work. Source Serif 4 speaks in headings on public pages. DM Sans does everything else, including headings inside working screens.

Type scale

Two hero looks exist today. Public tool pages use the serif hero above. The home page uses a calmer DM Sans hero (650, 36 to 58px, tracking -0.045em). New public pages use the serif hero.

Quiet interface

Working screens stay calm. Gray canvas, white panels, one navy button, one pale blue "you are here". Gold is saved for the brand and for deadlines.

The rules in the sample

• Light gray canvasThe page ground is --b-page.
• White surfacesPanels and cards are --b-surface with a thin line.
• 12px corners, 24px paddingEvery panel. Buttons use 9px.
• Navy fills the main actionOne filled navy button per view.
• Pale blue is "you are here"The current section and the current tab.
• Gold is for brand and deadlinesNot for decoration, not for every button.
• Words come with status colorsA chip says "Saved", not only green.
• Chat leadsChat is first in the rail. Search feeds the rooms.
• Say the limits out loudDeadlines, source age, preview limits, errors and gates stay visible.

Layout

A public page is a navy top bar, a navy hero, light sections, a navy band and a dark footer. One column on a phone.

A marketing page

fedm8.com

FedM8Your mate inFederal Contracting

Federal contracting

Get certified. Win contracts. Find your crew.

Start with the paperwork. Then find work worth a bid and people to team with.

Start free Start a lesson

Pick your lane

We walk it with you.

Three places to begin. Each one is short.

Get certified

The steps, in order.

Find work

Notices that fit your codes.

Ask your people

Rooms for the work you do.

Your M8 for federal work.

A short lesson is there if you want the how-to.

Start a lesson

On a phone

FedM8Your mate in

Get certified. Win contracts.

Start with the paperwork.

Start free

Get certified

The steps, in order.

Find work

Notices that fit.

Your M8 for federal work.

Start a lesson

Spacing and corners

Print and the capability one-pager

Print is navy and gold on white. A navy band at the top, a gold status bar, gold underlined headings, gold square bullets and a navy rule above the footer. No shadow, no screen buttons. The page is about 850px wide and prints on one sheet.

Components

A small set, used the same way everywhere.

Buttons

Cards

Tags and chips

Plan cards

Names only. Prices live on the plans page, not in samples.

Guided flow

Walk-throughs and Win Kit follow the owner's reference video. Steps are chevrons, one question fills the screen, Continue is green.

Forms

Chat on brand pages

Every FedM8 page has chat or comments. Public pages show a short preview of Contract Chat. Signed-in people get the full room. Both use the words below, from assets/chat-words.js.

Shown here in navy and gold, as it sits on brand pages. Inside the signed-in app, rooms use the paper and olive look (design 002).

Public preview

One room

States

Rules for the room

• Room tabs read This contract, NAICS code and Live All. Live All is read only.
• The pinned note names its host: FedM8 AI, "not a member". It always links its source.
• The rules line sits above the box. The action word is Post.
• Every post has Helpful · M8 N, Reply, Follow, and a ⋯ menu with Report, Hide this person and Remove mine.
• Replies nest up to 8 levels. New ones wait behind "N new replies · Show".
• Say what failed and keep the person's words. No invented people or activity.

Walkthrough video

The full standard for walkthrough videos is now video 001, Narrated walkthrough, with the reference episode, tokens and a text version to paste into an AI chat. This section is a summary. If they disagree, video 001 wins for videos.

A walkthrough looks like someone using the product. A navy stage, one rounded browser window, a gold cursor, short captions and a quiet piano. The values come from the fedm8-walkthrough-style skill.

A full frame

Scaled from 1920 × 1080. On a phone the frame is tiny. Open this page on a wide screen to read it.

The parts, up close

Closing lines and end card

The spec

Video honesty

Thumbnails and social

A thumbnail is the stage in one frame: navy ground, a big serif line with the last word in gold, a gold rule, the shield on a white tile and the wordmark. Keep it to a few words, large enough to read at the size of a phone thumbnail.

Ask your people.

Federal work. Connected people.

FedM8

• Size 1280 × 720, safe margin about 90 px.
• Ground #0b1626. Title in Source Serif 4 bold, #f2f5f9, last word #d6b56c.
• One gold rule under the title. Second line in DM Sans, #b9c6d6.
• Shield on a white tile, wordmark bottom left.
• No faces, no prices, no promise of a win. Samples stay labeled.
• The social card is 1200 × 630 (/og-ai.png, /og-scan.png).

The thumbnail rules are proposed from the stage look. The skill does not list thumbnail sizes.

Plan tiles

A small B or P square marks a tool that needs Basic or Pro. Free tools get no tile. It is quiet, never a banner.

Words

Talk to one person who is tired and has real work to do. Plain words, short sentences, one next step, then be quiet.

Voice

• Name the mess, say why it matters to this person, show one next move. Then stop.
• Short sentences. When you show an action, start with a verb: "Open the notice."
• Schoolbook words. A hard word, like NAICS, wears its definition on the dotted underline.
• Pair each feature with a plain benefit: "Less searching for where to ask."
• No hype. No "unlock", "seamless" or "powerful". No exclamation marks.
• Never promise a win. Members share experience. SBA decides eligibility.
• Do not describe how we teach or brag about being honest. State the fact.
• Errors say what failed, what to do, and keep the person's words.

Names

The SDVOSB rule

FedM8's own status is held in one place: assets/sdvosb-status.js, STATUS. Today it is not_claimed. So the words are Veteran-led small business, and FedM8 claims no SDVOSB status. Do not write that FedM8 has an SDVOSB application in process, or that SBA has certified it, until the owner confirms the application or SBA grants it and that constant changes. Teaching about the SDVOSB program, set-asides and how to apply stays as it is.

Accessibility

Navy and gold looks rich, so check the gold. Gold on white fails. Gold is for navy grounds and for lines.

• Contrast. Text 4.5 to 1 or more, large text and lines 3 to 1. Use gold text --b-gold-ink on light. See the contrast table.
• Targets. Real controls are 44 px or taller. Buttons here are 46 px.
• Focus. A 3 px ring in --b-focus, offset 2 px. On navy the ring is light gold.
• Headings. One h1, then h2, then h3 in order.
• Pictures. The shield has alt text. Pictures that only decorate have empty alt.
• Color plus words. Status chips carry a word, not only a color.
• Buttons and names. A control's spoken name starts with its visible words.
• Video. Captions are burned in and also shipped as SRT and VTT.
• Motion. Motion is gentle and stops when the person asks the device to reduce it.
• Plan tiles. Inside a button the tile is hidden from screen readers and the plan is said in hidden words.

For AI agents

If you build or edit a FedM8 screen, a video, a thumbnail or a print page in this look, follow this list. The same rules are in /design/001/tokens.json. The catalog of all designs is /design/catalog.json.

1. Read DESIGN_DNA.md and /design/001/tokens.json before you draw anything. If they disagree, DESIGN_DNA.md wins.
2. Use the --b- variables below. Do not invent a hex or a new font.
3. Navy is the ground, gold is the line. Gold text on light fails contrast. Use --b-gold-ink.
4. Headings on public pages are Source Serif 4. Everything else is DM Sans. Cormorant Garamond and Allura are for the wordmark only.
5. Working screens: gray canvas, white panels, 12px corners, 24px padding, one filled navy button, pale blue for the current section.
6. Use the shield files as shipped. Never recolor, stretch or add "AI" to the name.
7. Every page has chat or comments. Use the chat words in this page, and the word Post.
8. Name the matching AI Match-M8. Name the chat host FedM8 AI. Never show an engine or vendor name.
9. One tile for each plan tool, right after its name. No banners. See plans is the only upgrade link.
10. Video: stage #0b1626, window 1660 × 868, captions 34 px and 2 lines at most, gold "Upcoming FedM8 update · Preview" on every frame of an unreleased feature, zoom 1.16, dips 0.45 s, -16 LUFS. Samples use Example Base and end on fedm8.com. Full standard: video 001.
11. Samples are fictional and labeled. No real people, emails or phone numbers.
12. Say "Veteran-led small business" for FedM8 and claim no SDVOSB status unless the constant says so. Never present-tense "SBA-certified".
13. Meet the accessibility list: contrast, 44px targets, focus ring, one h1, alt text.

CSS variables

:root {
  --b-navy:#060d18; --b-navy-2:#0c1626; --b-navy-3:#162438;
  --b-gold:#c4a35a; --b-gold-light:#e0c57a; --b-gold-deep:#9a7a32;
  --b-page:#f5f6f8; --b-surface:#ffffff; --b-ink:#192536; --b-muted:#526071; --b-line:#e1e6ed;
  --b-navy-ui:#193b5d; --b-soft:#e8edf5; --b-soft-ink:#183b61;
  --b-gold-ink:#7e6940; --b-gold-tint:#f5efe1; --b-gold-line:#e8dbbb;
  --b-stage:#0b1626; --b-stage-gold:#d6b56c; --b-stage-text:#f2f5f9; --b-stage-muted:#b9c6d6;
  --b-flow-blue:#1f6fb5; --b-flow-blue-dark:#164e86; --b-continue:#1f7a3a; --b-flow-stage:#e9f0f8;
  --b-ok:#1f7a3a; --b-bad:#b42318; --b-warn:#8a5a00; --b-focus:#2b6cb0;
  --b-radius:12px; --b-radius-btn:9px; --b-pad:24px;
  --font-sans:"DM Sans",system-ui,sans-serif;
  --font-serif:"Source Serif 4",Georgia,serif;
}

Comments and questions

Want a color changed, or not sure which rule applies? Say so here. A plain question helps the next person too.