Green and white

Principles

Six rules carry the whole look. When a case is not covered here, pick what keeps the screen calm, honest and plain.

Colors

Nine core tokens make every screen. The named extras come from the app's own files; use each one only for the job on its card. Press a hex value to copy it. The Tweak button changes the core tokens on this page, in your browser only.

Core tokens

Named extras

Status and Chat

Contrast

Every text pair passes WCAG 2.2 AA (4.5:1). Edges a person must see, such as a field or the focus ring, pass 3:1. The light lines are decoration only.

A ghost button's text carries its meaning, so its light edge is fine. A field's edge is the only thing that shows where to type, so fields use the field edge #81976b.

Typography

Two kinds of letters do the work. A serif gives page, card and dialog titles a calm, bookish feel. DM Sans carries everything a person reads fast or presses. Rooms set their titles in Source Serif 4.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:opsz,[email protected],400;9..40,500;9..40,600;9..40,700&amp;family=Newsreader:opsz,[email protected],500;6..72,600&amp;family=Source+Serif+4:opsz,[email protected],600;8..60,700&amp;display=swap">

This is the link os.html uses, without Cormorant Garamond: that family belongs to the 001 wordmark, and nothing in this design uses it.

Type scale

Space and shape

Spacing moves in small steps. Corners stay small: 5px on controls, 6px in rooms, 8px on cards, 10px on dialogs, and full round only on pills. Shadows are barely there; the thin line does the work.

Spacing steps

Corners

Shadows

Layout

Two reference sizes: desktop 1440 × 1000 and phone 375 × 812. Desktop has a 64px header, a 190px section rail and content that starts about 248px from the left. The phone swaps the rail for a six-item dock at the bottom and keeps one column.

Desktop: 1440 × 1000

Desktop, real pixels

fedm8.com/os.html#/opportunities

FedM8

Community Chat Veterans Opportunities Contracts Grants Readiness Get Certified Learn

Your workspace People & connections Private chats My Profile All tools

Contracts

?

Discover My pursuitsB(Basic plan) Award IntelP(Pro plan) Contract teams More tools ⌄

Search notices Search

2 sample notices

SolicitationDue Nov 14SDVOSB set-asideNAICS 541519

Sample · Help desk support, Fort Example

Example Command · Fort Example

Talk · 12Posted Oct 20

SolicitationDue Dec 2Total small businessNAICS 561730

Sample · Grounds maintenance, Example Lake

Example District · Example Lake

Talk · 3Posted Oct 18

On a small screen, scroll the sample sideways to see all of it.

Phone: 375 × 812

FedM8

Chat

?

Public DiscussionsDiscussions NAICS roomsNAICS Find teammatesPeople Live AllLive AllRead only

Ask your people

Public · Keep prices, bids and nonpublic information out.

Your question

This will post in: your NAICS 541519 room · Change

Post

Everything General 3 new New here NAICS 541519

DR

Dana R.in General · 2h

Has anyone done a site visit at Fort Example? Wondering how far the help desk is from the gate.

2 repliesHelpful · M8 4Open

Chat Veterans Contracts Grants Certify Learn

Navigation

One menu in one order, everywhere: Chat, Veterans, Contracts, Grants, Get Certified, Learn. The desktop rail and the phone dock read the same list. A section's own tabs sit under its title, and its specialist tools wait behind More tools.

Header

FedM8

Section rail

Every rail link is 44px tall with 10px padding, an 18px line icon (1.6 stroke) and 10px between icon and word. Your workspace sits under a 1px line: People & connections, Private chats, My Profile, All tools.

Section tabs

Tabs are 44px tall, 22px apart, DM Sans 12px in muted. The current tab turns dark olive, 600, with a 2px olive underline. More tools sits at the right end and opens a 210px menu (paper, 1px line, 6px corners, 44px rows). On the phone the open list wraps under the tabs.

Public scope tabs

A 48px strip in #e8ebdf with a 1px #d2d9c8 edge and 6px corners. Each choice is a 44px button; the chosen one is paper on olive. On the phone the "Public" label and the "Read only" tag drop out and the words shorten to Discussions, NAICS, People, Live All.

Phone dock

Six equal columns, 78px tall, paper with a #cdd5bf line on top. Each item is 58px tall with a 20px icon and an 11px word. The current one is dark olive, 600, on #e5ebd9. Get Certified reads "Certify" here.

Where the menu comes from

You never draw the header, rail, dock, section tabs or help dialog. assets/approved-design.js draws all of them from four lists. A new tool adds a row to a list; it does not add a menu.

/* assets/approved-design.js: the only source of the menu.
   [key, label, href, icon, dock label, os-boot space, rail group heading] */
var NAV_ORDER = [
  ['chat', 'Chat', '#/talk', 'chat', 'Chat', 'talk', 'Community'],
  ['veterans', 'Veterans', '#/veterans', 'shield', 'Veterans', 'vets', ''],
  ['contracts', 'Contracts', '#/opportunities', 'work', 'Contracts', 'find', 'Opportunities'],
  ['grants', 'Grants', '#/grants', 'grant', 'Grants', 'find', ''],
  ['certified', 'Get Certified', '#/certified', 'cert', 'Certify', 'certs', 'Readiness'],
  ['learn', 'Learn', '#/academy', 'learn', 'Learn', 'ready', '']
];
/* A section's tabs under its title: [label, route]. */
var TABS = { contracts: [['Discover', 'opportunities'], ['My pursuits', 'pipeline'], ['Award Intel', 'intel'], ['Contract teams', 'opportunities?view=board']] };
/* Specialist tools behind More tools. */
var EXTRA = { contracts: [['Award search', 'found'], ['Bid Coach', 'coach'], ['Win Kit', 'win']] };
/* The words behind the round ? button. */
var HELP = { contracts: 'Search by keyword or NAICS. Open a notice to read its brief, requirements and files. Public discussion stays with that notice. Keep bid files, pricing and proposal work in your private pursuit.' };
/* ROUTES maps every route to its section, so the right rail item lights up. */

Buttons and fields

Every control is at least 44px tall, with 5px corners and DM Sans 500 at 12px. One olive main button per view; everything else is a ghost button or a link. Every field has a label above it and the olive field edge.

Buttons

Fields

Focus ring

App-wide: a 3px olive outline #526547, 3px outside the control; fields keep it 1px outside. Inside rooms, chips and plan tiles it is 2px, 2px outside. It passes 3:1 on paper and canvas. Press Tab on this page to see the real ring on any sample control.

<button type="button" class="btn">Save and continue</button>
<button type="button" class="btn ghost">Save this search</button>
<button type="button" class="btn danger">Remove</button>

<label for="company">Company name</label>
<input id="company" type="text" aria-describedby="company-hint">
<p id="company-hint" class="muted">Your posts show this name when you post as your company.</p>

<label><input type="checkbox"> I'm not working on this buy for the government, and I won't share nonpublic information.</label>

Chips and counts

A chip states one fact. Most chips are quiet: soft fill, thin line, 11px words. Color is saved for meaning: the Talk door, a count, a due date, an answer and a host.

// A "Talk · N" door for a list row. Counts fill in from one batched read.
var door = FedM8TalkDoors.chip(document, {
  item: FedM8TalkDoors.itemFor("notice", noticeId),   // "grant" -> "grant:<id>", "naics" -> "naics:<code>"
  signedIn: !!ctx.user,
  title: notice.title
});
row.appendChild(door);
FedM8TalkDoors.counts([door.getAttribute("data-td-item")], { client: ctx.sb, user: ctx.user && ctx.user.id })
  .then(function (map) { FedM8TalkDoors.fill(list, map); });

Cards and panels

Paper on canvas, a 1px line, 8px corners and almost no shadow. A panel holds a tool or a form. A card holds one thing in a list. A selected card gets a darker edge and a 2px olive bar inside its left edge, never a fill.

Metrics, callouts and dialogs

<section class="panel">
  <h2>What the buyer wants</h2>
  <p>Help desk support for about 400 people, Monday to Friday.</p>
  <button type="button" class="btn ghost">Open the files</button>
</section>

<div class="metrics">
  <div class="metric"><div class="lbl">Open pursuits</div><div class="val">3</div></div>
</div>

Chat

Chat comes first. Members land on Chat home, and every contract, grant and NAICS code has its own room. One component draws every room, so each one has the same head, tabs, actions, ⋯ menu and box. The rules line, where a post goes and the box stay in sight while someone writes.

Public name

Contract Chat

In the app

Chat, at /os.html#/talk

A conversation

A room. Rooms hold posts; posts hold replies.

The action

Post. In a reply box: Post reply.

Room host

FedM8 AI · not a member

Drawn by

assets/chat-home.js and assets/fedm8-room.js; every word in assets/chat-words.js

Chat home on a desktop

Three columns: My rooms, then Ask your people above the new posts, then one card at a time. The sample is the whole 1440 × 1000 screen, scaled down to fit.

fedm8.com/os.html#/talk

FedM8

Community Chat Veterans Opportunities Contracts Grants Readiness Get Certified Learn

Your workspace People & connections Private chats My Profile All tools

Chat

?

Public DiscussionsDiscussions NAICS roomsNAICS Find teammatesPeople Live AllLive AllRead only

My rooms

Rooms

• Everything5 new
• General3 new
• New here
• Veterans Hall
• Supporters
• Getting certified
• First bid
• Running the shop
• Learning
• Grants

Your codes

• 541519 Other Computer Related Services2 new
• 561720 Janitorial Services

My conversations

• Sample · Help desk support, Fort Example
• Marcus T.

Messages1 unread

New means posted in the last 24 hours.

Ask your people

Your question

Public · Keep prices, bids and nonpublic information out.

This will post in: your NAICS 541519 room · Change

2 new posts left today · replies are open

I'm not working on this buy for the government, and I won't share nonpublic information.

Post

New in your rooms

Unanswered near you

“Has anyone cleaned the Example Lake visitor center? Do they want day porters or only a night crew?”

NAICS 561720 · 1d · no replies yet

Waiting over a day. Can you answer it?

Answer⋯

DR

Dana R.in General · 2h

Has anyone done a site visit at Fort Example? Wondering how far the help desk is from the gate.

2 repliesHelpful · M8 4⋯Open

EN

Example Network ServicesFounding crewin NAICS 541519 · 5h

We're a prime on a help desk recompete and need a sub with Tier 2 network support near Fort Example. Roles only here; we can talk more in a private chat.

1 replyHelpful · M8 2⋯Open

LK

Lena K.in New here · 6h

Hi all. I run a two-person IT shop and I'm learning how set-asides work. Glad to be here.

4 repliesHelpful · M8 6⋯Open

Topic photo
placed by the app

Best contract for you

Sample · Help desk support, Fort Example

Example Command · NAICS 541519

Due Nov 14SDVOSB set-aside82% match

12 posts about it

Join the talkOpen

Basic shows all your matches, with fit and summaries. See plans

1 of 3Next: Who's around

On a small screen, scroll the sample sideways to see all of it.

// Chat home is drawn for you on #/talk. assets/commons-feed.js calls it:
FedM8ChatHome.render(root, ctx, isCurrent);   // ctx: { sb, user, account, plan }

// Every word comes from one file. Read it; never retype it.
var W = FedM8ChatWords;
W.chatHome.askTitle;      // "Ask your people"
W.chatHome.streamTitle;   // "New in your rooms"
W.rulesShort;             // "Public · Keep prices, bids and nonpublic information out."
W.helpfulLabel(4);        // "Helpful · M8 4"   (just "Helpful" at 0)

A room

Every contract, grant, award, NAICS code and topic gets this same room. Here is a contract room as a member sees it, with the ⋯ menu drawn open on Lena K.'s reply.

Room parts

// One call draws a whole room: head, tabs, posts, replies, ⋯ menus, the box.
var room = FedM8Room.mount(host, {
  ctx: ctx,                         // { sb, user, account, plan }
  item: noticeId,                   // "grant:<id>" for a grant, "naics:541519" for a code room
  kind: "notice",                   // "grant", "code", "award", "cert", "room"
  code: "541519",                   // the NAICS tab
  label: notice.title,
  header: true, title: notice.title, sub: "Example Command · Fort Example · Due Nov 14",
  stickyCompose: true,              // on a phone the box is pinned above the dock
  empty: FedM8ChatWords.empty
});
room.ready.then(function () { /* posts are drawn */ });

// The same actions and ⋯ menu on a post shown outside a room (Chat home does this):
var acts = FedM8Room.actions(post, { ctx: ctx, kind: "post", helpful: true });

// Follow in a header row, with its hint:
head.appendChild(FedM8Follow.button(ctx, noticeId, { hint: true, what: "conversation" }));

Who's here and People to say hi to

Contract and grant rooms open with one card above the posts. It counts who raised a hand to team, lets a member raise theirs, and suggests up to three people to say hi to, each with one reason. It never shows who is viewing a notice.

// Who's here goes first in a contract, grant or code room. The room page mounts it:
FedM8Teaming.whosHere(hereHost, ctx, noticeId, {
  item: notice, title: notice.title,
  onDone: function () { room.reload(); }      // after the member raises a hand
});

// Item keys: a notice id, "grant:<id>" for a grant, "naics:541519" for a code room.
FedM8Teaming.tagKind("naics:541519");          // "code"

Before your first post

A member with no public name yet sees this card the first time they press Post. It opens inside the box, right above Post, and their words stay where they are. Here a company is posting for the first time.

// A room's box does this already. For a box of your own:
var fp = FedM8FirstPost.create(ctx, { button: "Post", noun: "post" });
postButton.addEventListener("click", function () {
  if (!fp.node.isConnected) form.insertBefore(fp.node, buttonRow);   // right above Post
  // First press: shows the card and the step line, resolves false.
  // Next press: checks and saves the name, resolves true. The words in the box are never touched.
  fp.run(statusLine, "Post").then(function (ok) { if (ok) send(); });
});
fp.finish(composeHost);   // after the first post: "Finish your card so primes can find you."

Talk doors

A Talk door opens a room from anywhere else: a notice card, a grant card, a grant page, a lesson. It says how many posts the room holds and, when known, who is in. Talking is free on every plan, so a door never carries a plan tile.

var TD = FedM8TalkDoors;
var item = TD.itemFor("notice", notice.id);      // "grant:<id>" for a grant, "naics:541519" for a code
var door = TD.chip(document, { item: item, title: notice.title, signedIn: !!ctx.user });
cardFoot.appendChild(door);                       // signed out, the door goes to sign-in, then the room

// One read for the whole list, then every door gets its count:
TD.counts(itemIds, { client: ctx.sb, user: userId }).then(function (map) { TD.fill(list, map); });

A room on a phone

On a phone a room fills the screen between the header and the dock. A slim bar gives Back, the room's name and Room info. The box is pinned right above the dock, with the rules line kept to two lines. The sample scrolls inside the frame.

FedM8

←

Sample · Help desk support, Fort Example

i

3 raised a hand · no sub yet · 1 online now

I'm in as Prime Sub Independent specialist

Say hi: Marcus· Example Network Services· Lena See why Hide

This contract NAICS 541519 Live All

AI

FedM8 AIPinnedAI brief

One firm runs a help desk for about 400 people, weekdays 7 a.m. to 6 p.m. Set aside for SDVOSB firms. Offers are due Nov 14.

DR

Dana R.Sub✓ Answered2h

Has anyone done a site visit at Fort Example? How far is the help desk from the gate?

Helpful · M8 4 Reply ⋯

2 replies

Replies open here.

EN

Example Network ServicesPrimeOct 19

We're a prime on this one and want a sub for the network side.

Helpful · M8 2 Reply ⋯

Talk about the work and who you need. Keep prices, bids and contact details out of open rooms. Share prices only privately with teammates, under a signed teaming agreement. Ask the contracting officer about the requirement, in writing.

Add to the conversation Post

Chat Veterans Contracts Grants Certify Learn

Chat states

Every state says what is true and keeps the member's words. These are the app's own sentences from assets/chat-words.js; use them, never new ones.

var W = FedM8ChatWords;

// A gate: plain words and at most one link.
host.appendChild(W.gate(document, err));       // "Set up your Team Up profile to post. Set up profile"

// After Post fails: the server's sentence, right above the buttons. The words stay in the box.
form.insertBefore(FedM8Room.refusal(err, { verb: "post", textarea: input }), buttonRow);

// While typing: the heads-up under the box.
var hu = FedM8Room.headsUp(input, { ctx: ctx, item: noticeId });
input.after(hu.node);

Match-M8

Match-M8 is the product name of the matching AI. Never show an engine or vendor name. Match-M8 says how well a notice fits what a member does, and why, in plain lines. It suggests; the member decides.

Name

Match-M8, in every word a member reads or hears: buttons, help, alerts, email, video narration and samples

Plan

Basic and Pro · feature id found_for_you in tier.js

Shows

A percent, the role it fits and up to five reasons

Drawn by

assets/os-search.js (the match box) with FedM8TeamUpUI.reasons

The match box on a notice

Win Kit: what they paid before

Win Kit answers one question from public award records. It is part of Pro, so its heading carries a P tile. It shows the dollars obligated, never what anyone bid.

// The headline and the reasons, as the match box builds them:
var pct = Math.round(Number(match.fit) * 100);
var how = match.basis === "firm" ? "for your firm"
        : match.role === "ind" ? "for you as an independent specialist"
        : match.role === "prime" ? "to lead it" : "as a sub";
headline.textContent = pct + "% match " + how;                     // "82% match as a sub"
var lines = FedM8TeamUpUI.reasons(match.answers, match.role);      // five at most, from the member's answers

Plan tiles

A plan tile is a small square right after the name of a paid tool, output or ability: B for Basic, P for Pro. It tells a member which plan the thing belongs to. It informs; it never sells. Free features get no tile. Pro includes AI, so there is no AI tile.

Files

assets/plan-tile.css and assets/plan-tile.js

The plan comes from

FedM8Tier.minPlanFor(featureId) in tier.js, never typed by hand

Size

16 × 16 · 4px corners · DM Sans 700 10px · 6px after the name. A link tile has a 44px hit area.

Colors

B: olive #526547 letter, no fill, #b8c5aa edge. P: dark olive #344b2c on #e4ead8.

The forms

In context: see it as each plan

Press Free, Basic or Pro. Tiles for a plan the viewer already has turn quiet and stop linking, and the Free line goes away once the plan is there. The samples below change as you press.

<!-- Filled from tier.js; removed when the feature is free -->
Saved searches<a class="plan-tile" data-plan-feature="saved_searches"></a>

<!-- One quiet line where a Free member meets a paid output -->
<p class="plan-lock" data-plan="basic"><span class="plan-tile" data-plan="basic" aria-hidden="true">B</span>Match-M8 matches are part of Basic. <a href="/plans#basic">See plans</a></p>

// In your page's .js file (never an inline script):
var tile = FedM8PlanTile.forFeature("award_intel");                 // a link tile, or null when free
if (tile) heading.appendChild(tile);

var inside = FedM8PlanTile.forFeature("saved_searches", { inside: true });
if (inside) {
  saveButton.appendChild(inside);                                    // hidden from screen readers
  // os.html has no shared hidden-text class, so the button's name carries the plan:
  saveButton.setAttribute("aria-label", "Save this search (" + (inside.dataset.plan === "pro" ? "Pro" : "Basic") + " plan)");
}
FedM8PlanTile.apply(root, ctx.plan);                                 // quiets tiles the viewer already has

States

Every screen says what is true, in words: loading, nothing yet, could not load, saved. One main action per state, then one line that says what it does. No grey placeholder people or counts.

Words

FedM8 sounds like a calm colleague who has done this before: short sentences, plain words, the next step. Words live in one table per file, such as assets/chat-words.js for Chat. Read them from there; never retype them.

• Say what is true, then the next step: "Chat could not load. Check your connection, then try again."
• Write short sentences a busy owner reads once. One idea each.
• Define a term where it appears, in a few words.
• Use the names members know: My Profile, Support, the contracting officer.
• Stay calm: no exclamation marks, no "Oops", no capitals for stress.
• No sales words: unlock, supercharge, don't miss out, exclusive.
• Give the real count or none. Say where a fact comes from: "SAM lists SDVOSB", "Veteran (self-reported)".
• Keep the member's words safe, and say so: "Your words are still in the box."

Accessibility

WCAG 2.2 AA is the floor, and the app's release check allows no serious or critical findings. Most of it comes free with the parts on this page; these are the rules to keep when you build something new.

Known gap: the Chat boxes still use lighter edges (#c9d1bd in rooms, #b9c4ab on Chat home and the first-post card, about 1.6 to 1.8:1). New fields use #81976b.

For AI agents

Building a FedM8 screen? Read this list, then /design/002/tokens.json, then copy the closest snippet on this page. /design/catalog.json lists every design.

1. Use design 002 for the app and every new screen. Use 001 only for brand marks, walkthrough videos, YouTube thumbnails, social posts and print.
2. Build with the app's own parts, named in each snippet: the shell in assets/approved-design.css, FedM8Room.mount for any conversation, FedM8ChatWords for every Chat word. The x2- classes on this page are for samples only.
3. Take colors only from the --fd-* variables. No new hex values, no gradients, no dark theme.
4. Newsreader (then Source Serif 4) for page and card titles, Source Serif 4 for room titles, DM Sans for everything else.
5. One olive button per view. Everything else is a ghost button or a link.
6. Every control 44 × 44 on a phone, with a 2px olive focus ring. Check at 1440 × 1000 and 375 × 812.
7. Names: Match-M8 for the matching AI, FedM8 AI · not a member for the room host, Contract Chat in public, Chat in the app, rooms, Post. Never an engine or vendor name.
8. Plans come from tier.js. Free features get no tile, and "See plans" is the only upgrade link.
9. States in words. Keep the member's words after every failure.
10. Samples are fictional and labelled Sample. No real people, emails or phone numbers.
11. The site's security rules allow no inline styles or scripts, no style attributes and no inline event handlers. Styles go in a .css file, behavior in a .js file.
12. When this page and DESIGN.md disagree, DESIGN.md wins. Say so in Comments.

The core variables

/* assets/approved-design.css sets these on body.fd-design. Read them; do not redefine them. */
body.fd-design {
  --fd-bg: #f5f3ec;          /* canvas */
  --fd-paper: #fffef9;       /* cards, header, dock, dialogs */
  --fd-soft: #eef1e7;        /* quiet fills */
  --fd-ink: #29372e;         /* text */
  --fd-muted: #586653;       /* second lines */
  --fd-line: #d9ded0;        /* card edges, dividers */
  --fd-green: #526547;       /* the one main button, focus ring */
  --fd-green-dark: #344b2c;  /* text on light fills */
  --fd-mint: #d9eddd;        /* count pills */
}

Where things live

Comments and questions

Ask a question about this design, or point out something that is missing or wrong. Answers stay here for the next person who builds a screen.