Four tier badges mapped to the subscription plans in the spec, plus a horizontal strip that works at any tier. Every badge links back to the agency's directory profile, which is where the backlink value and the flywheel come from. Ratings and review counts are placeholders — the live embed pulls them from the API.
01
Listed
The free-tier badge. Deliberately quiet: no rating, no stars, nothing that implies review-backed endorsement an unrated agency hasn't earned. The green dot signals an active profile and gives the free tier a small reason to embed.
Purple Mid border with the checkmark breaking the top edge, so it reads as verified at thumbnail size before any text is legible. Rating in JetBrains Mono, review count underneath — the two numbers a prospect actually scans.
Gold ribbon and a 38px score — the rating is the whole point of this tier, so it gets the largest type in the set. Gold sits outside the core palette on purpose: it has to look like an award, not like another purple UI element.
Admin-curated, so it shows no rating at all — the endorsement is editorial, and a number would dilute that. Purple gradient plus gold hairline. The logo is reversed to white with a CSS filter; see the note below on shipping a true reversed PNG.
Horizontal, 326 × 64. Agencies rarely have room for a 200px square in a site footer or an email signature, and that's where most badge impressions actually happen. Same data as Verified, one third of the height.
Growth and aboveFooters, signatures, proposals326 × 64
Reversed logo. Editor's Pick uses filter: brightness(0) invert(1) to flip the logo white. That works on any solid-colour logo but kills the purple "O" accent, which the brand guidelines say must never change colour. Host a true reversed PNG (white wordmark, Purple Light #A78BFA "O") and swap the src rather than shipping the filter.
Anchor markup. The previews use divs so they render standalone. The embed codes use <a> wrappers with <span> children — an anchor can't contain block-level elements, and the backlink is the point of the whole system.
Fonts. Host sites won't have DM Sans or JetBrains Mono loaded. Inside the embed.js iframe sandbox, load both from Google Fonts in the iframe document. If you ever ship a raw HTML copy-paste version, the system fallbacks will kick in and the mono numerals will lose their character.
Live data.data-ecm-rating and data-ecm-reviews are placeholders for the API response. Half-star gradient IDs (ecmHalfA, ecmHalfB) must be unique per badge instance — generate them from the agency ID or two badges on one page will share a fill.
Tracking. Every badge needs an impression ping to ecm_badge_analytics on iframe load and a click event before navigation, with referrer_domain captured server-side from the request header rather than trusted from the client.
Gold.#C9971F / #E0B94A / #E8C56A aren't in the brand palette. They're only used inside the two award badges, where purple would read as generic UI. Worth adding to the guidelines as a restricted award-only accent if you keep them.
