Style Guide
Brand
Full Logo
Municibid Color Logo
Municibid Dark Logo
Municibid Greyscale Logo
Municibid Color Logo on Dark Background
Municibid White Logo
Slim Logo
Municibid Slim Color Logo
Municibid Slim Dark Logo
Municibid Slim Greyscale Logo
Municibid Slim Color Logo on Dark Background
Municibid Slim White Logo
Colors
Primary Colors
Navy - #214964
Blue - #2676aa
Blue Light - #dee7f1
Secondary Colors
Gold - #ffc637
Neutral Colors
Dark - #222222
Dark Grey - #444444
Medium Grey #666666
Light Grey #cccccc
Lightest Grey- #f1f2f7
Typography
Font Family
Inter
Inter is the standard font to be used for all body and block text.
Normal
/
400
Bold
/
700
Headings
Font Size: 48px / 3rem
Font Weight: 700
Line Height: 120%
Font Family: Inter
Color: #222222
Heading 1
Font Size: 40px / 2.5rem
Font Weight: 700
Line Height: 130%
Font Family: Inter
Color: #222222
Heading 2
Font Weight: 700
Line Height: 130%
Font Size: 32px / 2rem
Font Family: Inter
Color: #222222
Heading 3
Font Size: 24px / 1.5rem
Font Weight: 700
Line Height: 130%
Font Family: Inter
Color: #222222
Heading 4
Font Size: 20px / 1.25rem
Font Weight: 700
Line Height: 140%
Font Family: Inter
Color: #222222
Heading 5
Font Size: 16px / 1rem
Font Weight: 700
Line Height: 150%
Font Family: Inter
Color: #222222
Heading 6
Font Size: 16px / 1rem
Font Weight: 400
Line Height: 150%
Font Family: Inter
Color: #222222
Body Text - Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text.
Rich Text
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Sample text with a link is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text.
- Sample text is being used as a placeholder for real text that is normally present.
- Sample text is being used as a placeholder for real text that is normally present.
- Sample text is being used as a placeholder for real text that is normally present.
- Sample text is being used as a placeholder for real text that is normally present.
- Sample text is being used as a placeholder for real text that is normally present.
- Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.
Buttons
Buttons
Small Button
color: #fff;
font-size: 14px;
border-radius:64px;
height: 40px;
padding: 8px 16px;
font-size: 14px;
border-radius:64px;
height: 40px;
padding: 8px 16px;
Medium Button
color: #fff;
font-size: 16px;
border-radius:64px;
height: 48px;
padding: 12px 24px;
font-size: 16px;
border-radius:64px;
height: 48px;
padding: 12px 24px;
Large Button
color: #fff;
font-size: 18px;
border-radius:64px;
height: 64px;
padding:16px 40px;
font-size: 18px;
border-radius:64px;
height: 64px;
padding:16px 40px;
Form
Dark Form Example
Text Input Styles
border: 2px solid #214964;
background-color: #214964;
color: #fff;
font-size: 16px / 1rem;
border-radius: .8px / 0.5rem;
width: 100%;
height: 56px / 3.5rem;
margin-bottom: 0;
padding: 16px / 1rem;
background-color: #214964;
color: #fff;
font-size: 16px / 1rem;
border-radius: .8px / 0.5rem;
width: 100%;
height: 56px / 3.5rem;
margin-bottom: 0;
padding: 16px / 1rem;
Light Form Example
Text Input Styles
border: 2px solid #ccc;
background-color: #f1f2f7;
color: #222;
font-size: 16px / 1rem;
border-radius: .8px / 0.5rem;
width: 100%;
height: 56px / 3.5rem;
margin-bottom: 0;
padding: 16px / 1rem;
background-color: #f1f2f7;
color: #222;
font-size: 16px / 1rem;
border-radius: .8px / 0.5rem;
width: 100%;
height: 56px / 3.5rem;
margin-bottom: 0;
padding: 16px / 1rem;
Images
Inline Images
border-radus: 16px/1rem
FAQ
Accordion
Question
Question
CARDS
CARDS
2014 Chevrolet Silverado 1500 4WD
1500 4WD up for auction, excellent condition. No Known issues. Fleet maintained. 46,793 Miles. 5.3L V8. Power windows / Locks
2012 JD 624K Payloader
1500 4WD up for auction, excellent condition. No Known issues. Fleet maintained. 46,793 Miles. 5.3L V8. Power windows / Locks