Municibid style guide

Logos

Pick the variant by background, not by taste. Every logo comes as SVG for screens, PNG and JPG for documents, and PDF and EPS for print.

Full logo

Download all

The default. Use it anywhere there is room for the tagline to be read.

Slim logo

Download all

Wordmark without the tagline. Use it in headers, footers and anywhere under 200px wide.

20 year anniversary

Download all

For 2026 anniversary campaigns only. Does not replace the full logo.

20 year anniversary with tagline

Download all

Same rules as the anniversary logo, for placements with room for the tagline.

M logo mark

Download all

Avatars, app icons and social profiles. Never next to the full logo; it is one or the other.

Favicon

favicon.svgfavicon.ico96 × 96Apple touchApp 192App 512 Favicon pack

Usage

Clear space

Keep empty space around the logo equal to the height of the M on every side.

Minimum size

Full logo 140px wide on screen, 1.25in in print. Below that, switch to the slim logo or the M mark.

Backgrounds

Color and dark versions on white or light grey. On navy or photos, use the white logo; the blue in the on-dark version needs a near-black background like #222222.

Don’t

Recolor, stretch, add shadows or outlines, rebuild the wordmark in another font, or place the color logo on a busy photo.

Color

Blue carries action, navy carries weight, gold is a spark. Contrast is measured against WCAG 2.1: 4.5 for body text, 3 for large text (24px, or 19px bold) and UI shapes.

Typography

One family does all the work. Hierarchy comes from size and weight, never from a second display face.

Icons

Round badges drawn from Phosphor (regular weight). Solid blue for emphasis, the light tint for lists and feature grids. Click one to open the SVG.

Round icons (77)

bluelightPhosphor Download all

aialarmarticleatbankbarchartbellbookmarkbookmark-1booksbrowserbuildingcalendar-checkcameracardchatcheckcloudcountdowncurrencydesktopdocfilefolderstarfolderstar-1folderstar-2gavelglobehandshakehandwaveheartbeathourglassimagesinfoinstagramislandlayoutleft-rightmailmedalmegaphonemegaphone-2microphonemobilemoneynotepadpackagepdfphonepickuppinplanequestionquotereceiptrocketsavedatescalesscissorsearchshareshieldslidersstarstoreswaptagtag-1targetteachertrophytruckuseruser-checkuserswifiyoutube

Social

Buttons

Pill shaped, bold, one primary per view. Every size has a fixed height so buttons line up with inputs beside them.

font-size: 14px;
font-weight: 700;
height: 40px;
padding: 8px 16px;
border: 2px solid;
border-radius: 64px;

font-size: 16px;
font-weight: 700;
height: 48px;
padding: 12px 24px;
border: 2px solid;
border-radius: 64px;

font-size: 18px;
font-weight: 700;
height: 64px;
padding: 16px 40px;
border: 2px solid;
border-radius: 64px;

Forms

Labels sit above fields, always visible. Placeholders show an example, never the label. Errors say what to do, under the field, in Error red.

/* Light input */
height: 56px;
padding: 16px;
font-size: 16px;
border: 2px solid #CCCCCC;
border-radius: 8px;
background: #F1F2F7;
color: #222222;
/* focus */
border-color: #2676AA;
background: #FFFFFF;
/* error */
border-color: #B00020;

/* Dark input */
height: 56px;
padding: 16px;
font-size: 16px;
border: 2px solid #214964;
border-radius: 8px;
background: #2A5878;
color: #FFFFFF;
/* focus */
border-color: #FFC637;
/* error */
border-color: #FF8A8A;

Images

Real listings, real places. Rounded 16px corners; captions in small grey text below.

Inline image

Copy

border-radius: 16px; /* 1rem */
aspect-ratio: 3 / 2;
object-fit: cover;

FAQ

Cards

Listing cards: photo first, title in two lines max, numbers right aligned so they scan.

Listing card

2014 Chevrolet Silverado 1500 4WD

Excellent condition, no known issues. Fleet maintained. 46,793 miles, 5.3L V8, power windows and locks.

Bids

239

Starting bid

$10,000

Sale price

$94,600

View listing

2012 JD 624K Payloader

Sample card text. The description is clamped to three lines so cards in a row stay the same height.

Bids

239

Starting bid

$10,000

Sale price

$94,600

View listing

Writing

Warm, practical and specific. Talk to folks like neighbors at a town meeting; back every claim with a number, a name or a date.

Tokens

Drop these into a new project so the values above are the only values anyone types.

:root {
  --mb-navy: #214964;
  --mb-blue: #2676AA;
  --mb-blue-light: #DEE7F1;
  --mb-gold: #FFC637;
  --mb-dark: #222222;
  --mb-grey-dark: #444444;
  --mb-grey: #666666;
  --mb-grey-light: #CCCCCC;
  --mb-grey-lightest: #F1F2F7;
  --mb-error: #B00020;
  --mb-success: #177245;
  --mb-warning: #8A6100;
  --mb-info: #2676AA;
  --mb-error-on-dark: #FF8A8A;
  --mb-success-on-dark: #4ED99B;
  --mb-warning-on-dark: #FFC637;
  --mb-info-on-dark: #7CC4F5;

  --mb-font: Inter, Lato, sans-serif;
  --mb-radius-input: 8px;
  --mb-radius-image: 16px;
  --mb-radius-pill: 64px;
}

// tailwind.config.ts, theme.extend
colors: {
  mb: {
    "navy": "#214964",
    "blue": "#2676AA",
    "blue-light": "#DEE7F1",
    "gold": "#FFC637",
    "dark": "#222222",
    "grey-dark": "#444444",
    "grey": "#666666",
    "grey-light": "#CCCCCC",
    "grey-lightest": "#F1F2F7",
    "error": "#B00020",
    "success": "#177245",
    "warning": "#8A6100",
    "info": "#2676AA",
  },
},
borderRadius: { pill: "64px" },