Style Guide
Style guides require compliance and conformity; in return they provide stability and cohesion. A style guide and code standards document is a way of ensuring brand and code consistency. By maintaining all of a website's primary elements on a single page, we can see how modular components can be reused, as well as how changes to those elements will affect the site overall. The style guide also serves as a curated, archival collection for design and UX/UI decisions made during the course of the site's development - creating a code base that can resist arbitrary decisions since a predefined choice presents itself.
ConsolidatedCredit.org website is built on top of Bootstrap 4, an open source toolkit for developing with HTML, CSS, and JS.
For thorough documentation on the grid system, components, utilities and all the fun stuff Bootstrap 4 offers, check out the Bootstrap documentation.
Logo
Full Color Logo
Logo Variations
If you absolutely have to use the logo on a dark color background, use the all white version.
If you absolutely have to use the logo on a light color background, use the all black version.
You may also use the logo without the tagline, this should only be used when space is limited or when logo will be too small for tagline to legible.
Logo Don'ts
Don't use full color logo on color background.
Don't change the colors of the logo.
Don't change any of the fonts in the logo.
Don't omit the Registered Trademark symbol (®).
Don't remove any of the Conolidated Credit icons.
Don't move the position of the tagline.
Don't skew the proportions horizontally or vertically.
Logo Spacing
To ensure maximum visibility, readability, and brand integrity, the logo should always appear with clear space around it.
The gray box surrounding the logo illustrates the required minimum clear space around the logo; nothing should encroach on this space, represented by the “C” from the logo.
Colors
Brand Colors
Other Colors
Typography
Gibson Light
Weight 300
Gibson Regular
Weight 400
Gibson SemiBold
Weight 600
Gibson Bold
Weight 700
Fonts licensed and hosted by Google Fonts
H1 - Default H1 header
H2 - Default H2 header
H3 - Default H3 header
H4 - Default H4 header
H5 - Default H5 header
Paragraph text. ConsolidatedCredit.org offers daily expert advice about money – how to make it, how to save it, and how to spend it. We even tell you how to go into debt the right way. (What do you think a mortgage and a car loan are?)
But if you want to get out of debt, ConsolidatedCredit.org has partnered with highly rated companies that can help. When you tell us your circumstances (and we tenaciously protect your personal information) we act like a dating service for debt. We introduce you to the perfect debt-solution company for you, and we make sure you’re happy with the results.
Forms
Text Fields and Dropdowns
<form>
<div class="form-row">
<div class="col">
<div class="form-group">
<label for="exampleFormControlInput1">First Name</label>
<input type="text" class="form-control" id="exampleFormControlInput1" placeholder="First name">
</div>
</div>
<div class="col">
<div class="form-group">
<label for="exampleFormControlInput2">Last Name</label>
<input type="text" class="form-control" id="exampleFormControlInput2" placeholder="Last name">
</div>
</div>
</div>
<div class="form-group">
<label for="exampleFormControlInput3">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput3" placeholder="name@example.com">
</div>
<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<div class="select">
<select class="form-control" id="exampleFormControlSelect1">
<option>First select</option>
<option>Option</option>
<option>Option</option>
</select>
<div class="select__arrow"></div>
</div>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
</form>
Checkboxes and Radio Buttons
<form>
<div class="form-row">
<div class="col">
<div class="form-group control-group">
<label>Example checkboxes</label>
<div class="form-check">
<label class="control control--checkbox">Checkbox
<input type="checkbox">
<div class="control__indicator"></div>
</label>
</div>
<div class="form-check">
<label class="control control--checkbox">Checked
<input type="checkbox" checked="checked">
<div class="control__indicator"></div>
</label>
</div>
<div class="form-check">
<label class="control control--checkbox">Disabled
<input type="checkbox" disabled="disabled">
<div class="control__indicator"></div>
</label>
</div>
<div class="form-check">
<label class="control control--checkbox">Disabled & checked
<input type="checkbox" disabled="disabled" checked="checked">
<div class="control__indicator"></div>
</label>
</div>
</div>
</div>
<div class="col">
<div class="form-group control-group">
<label>Example radio buttons</label>
<label class="control control--radio">Radio button
<input type="radio">
<div class="control__indicator"></div>
</label>
<label class="control control--radio">Checked
<input type="radio" checked="checked">
<div class="control__indicator"></div>
</label>
<label class="control control--radio">Disabled
<input type="radio" disabled="disabled">
<div class="control__indicator"></div>
</label>
<label class="control control--radio">Disabled & checked
<input type="radio" disabled="disabled" checked="checked">
<div class="control__indicator"></div>
</label>
</div>
</div>
</div>
</form>
Icons
We use the AWESOME open-source, icon font toolkit, Font Awesome Pro, for most of the icons on our website.
We implement many custom icon images throughout the site and try to stay with a thin, line icon style. A custom icon font will be coming soon to make implementing icons even easier.
Primary Icons