FWD.us is an organization that promotes policies to keep the United States competitive in an ever-changing global economy. Given this dynamic environment, it is increasingly important for us to express a single, compelling voice in everything we do. We call this our brand.
The totality of the logo, visuals, and words we use to describe FWD.us will enable us to establish and maintain a clear, unified brand identity, both within our organization and beyond.
This page provides general guidelines for the visual and verbal articulation of the FWD.us brand, as well as specific directions for the application of our updated logo and related elements. We recommend that you refer to this guide whenever you develop marketing communications.
These rules are flexible enough for designers to be creative but rigid enough to keep the brand easily recognizable. Occasionally situations will call for rules to be bent, but never broken. Continuity is key.
Open up your toolkit or web inspector and poke around. The layout of this page is considered part of the FWD.us brand.
Copy elements and re-use code.
The FWD.us UI is driven by the Bootstrap front-end framework. You can use any elements found in that library on our site and they'll be styled according to the brand guidelines.
The basic logo form is Open Sans Light and Droid Serif to reflect the typography of our website. Use the Light version of the logo when working with light/white backgrounds, and the Dark version for dark/black backgrounds.
Our name is written "FWD.us" with the domain FWD always capitalized and the extension us always lowercase.
These basic tones can be brightened or darkened as needed. But don't get crazy.
Please note, our Red is actually closer to Orange and is in contrast to our light blue.
Headlines are 42px Droid Serif while sub-headlines are sized 80% their parent headline and set in Open Sans Condensed. We use all-caps for sub-headlines to vary the tone and draw readers into the copy.
Body text is Open Sans with a generous 1.8em line-height for better readability.
Politics is a sensitive subject, so the voice of FWD.us is trust-worthy, persuasive, and (above all) casual.3
We use the different headings and paragraphs to differentiate voice:
We use the Font Awesome icon library for all small app icons and special glyphs. Please see their documentation for proper use.
Large icons (>100px) have room for more details and should be treated as simple illustrations. Simple lines, shapes, and a monochrome colour pallet keep these consistent.
Animate SVG icons by adding the
.drawnIn class to your image tag.
Your information is secure and will not be shared