MEP Services Group · Internal
Style Guide
A single, lightweight reference for the tokens, type, and components used across the MEP app, generated reports, and the walkthrough deck. The goal is consistent visual cues — not a full design system.
Color tokens
Three brand colors plus a calm neutral set. Navy carries primary weight; orange is sparse accent only.
Brand
Neutrals
Status
Typography
A single family — Montserrat — with system-sans fallback. Headings sit on navy; body on ink.
Stack
font-family: Montserrat, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
Deck scale
MEP Bid Memory — Module 00
Tender Triage
What lives in the tender folder
The system reads the buckets MEP already uses and turns each one into a business signal.
At-a-glance readiness
Reads the client package, BOM, quote files, vendor folders, and missing-download markers. Pulls out bid facts, blockers, weak evidence, and what still needs estimator confirmation.
Source cue: the January–March archive shows this repeated tender-folder shape across MEP projects.
App scale
Tender Readiness — Brokerlink Oakville
Triage queue
Save review → approve → proposal basis. The estimator stays in control.
Spacing & surface
Recurring values from the codebase. Stick to these when adding new UI.
Spacing scale
Radius
4 px
Buttons, inputs (app).
6 px
Cards, table wraps.
8 px
Panels, tiles, slide frames.
Elevation
Panel shadow
0 2px 0 rgba(26,54,103,0.08)
Slide shadow
0 18px 60px rgba(21,36,76,0.12)
Components
Recurring elements; class names match what's already in the codebase.
Status pills
Buttons
Marker, rule, callout
Turns a tender folder into a reviewable readiness picture: facts, evidence, blockers, warnings, review status, and proposal-basis inputs.
Fact strip
Panel with check rows
At-a-glance readiness
Patterns
Page conventions that keep the app and deck reading like the same product.
App header
A 3px orange top-border and 1px hairline bottom-border. The "MEP Services Group" cue sits as a tiny uppercase blue label above the page title.
MEP Services Group
Tender Readiness — Brokerlink Oakville
/tenders/2026/brokerlink-oakville · scanned 2 hours ago
Slide frame
Paper card on the wash grid background. A 2px navy border, plus an inner 1px dashed inset border at 18px. Frame label sits bottom-right in uppercase.
MEP Bid Memory — Module 00
Folder to approved proposal basis
Module 00 / 05
Layout primitives
Two-column with side panel
main 1fr · side minmax(320px, 0.82fr)
Three-tile grid
Equal columns. Tile 2 rotates +0.35°, tile 3 rotates −0.25°.
Four-step flow
Equal columns. Orange chevron pill between steps.
Queue
Card per row. Priority rows get a 4px orange left-border.
Conventions
Rules that keep visual cues tied to MEP without turning this into a full design system.
Do
- Use navy for headings and primary action buttons.
- Use orange sparingly — top-rules, callout borders, flow arrows, priority left-borders.
- Keep panels calm: paper surface, 1.5px hairline, 8px radius, 2px-tinted shadow.
- Use status pills (good / review / info / red) consistently for ready, warning, info, blocker.
- For the deck, keep the dashed inner frame and bottom-right frame label.
- Prefer "MEP Services Group" as text; the public site is the source of truth.
Don't
- Don't recreate, trace, or embed the MEP logo.
- Don't introduce a competing primary color or a gradient.
- Don't use the secondary blue as a button background — it competes with navy.
- Don't inline a copy of the deck CSS in a new slide — link
shared-slide.css. - Don't add ornamental cards or one-off radius / shadow values.
- Don't put scan counts, raw paths, or evidence IDs on a first-screen view.
- Don't write large inline CSS blocks in Python output templates.
- Don't add new component abstractions without repeated UI need.