Each brand has a distinctive set of colors for elements, hyperlinks, buttons, icons, headers, body, copy, header text, lines, etc. Colors can affect human behavior and can directly affect purchase decisions.
Icon fonts are used as visual descriptors when presenting information or directing a user to an action. Icons convey information efficiently, taking up very little space on the page.
Typography is a powerful tool that honors the content and establishes a visual hierarchy for verbal and visual communication.
CSS Classes based on existing "gcss-typography-brand-heading-#", "gcss-typography-utility-heading-#" and
"gcss-typography-label-#" however the difference with these utility classes, is that they could be applied independently for each breakpoint, E.g.: Size-2 in Mobile, Size-1 in Tablet and above.
These classes were created using a Mobile First approach which means that if only .xs:- is used, it will apply that Typography appearance for all breakpoints and a second .sm:- .md:- or .lg:- could be applied for a specific breakpoint as needed. It is recommended to use at least the .xs:- prefix which will apply the base typography styles.
The Typography Brand Heading, Typography Utility Heading and Typography Label classes are responsive, and they have a Prefix and a Suffix. The Prefix represents the breakpoint and you would only need to use one or multiple of the following prefixes according to the screen size:
The Suffix (a number), represents the font's appearance that you would like to apply for each screen size (based on brand heading, utility heading or typography label classes)
Please take into account that these responsive classes are meant to be used when you want to override the font appearance ( suffix number)for a specific breakpoints. Otherwise the existing typography classes are already responsive.
* Note: font appearance will be different for each brand based on their own styleguide
Example:
Snippet for above:
More information: Storybook: Breakpoint specific classes
Buttons are used to call the user to action and have them go different places. This is a very-wide ranging component, and is used in numerous components, but should always follow the rules outlined below.
Buttons have three priority levels. This design with chevron should be used for all calls to action.
Secondary
Default state is shown, hover and active state are also enabled on the button.
Secondary Outline
Default state is shown, hover and active state are also enabled on the button.
Buttons have two size options.
Small (Only Use when Absolutely Necessary)
Default state is shown, hover and active state are also enabled on the button.
Buttons can contain a combination of icons, chevrons and text.
With Chevron
Default state is shown, hover and active state are also enabled on the button.
With Icon & Chevron
Default state is shown, hover and active state are also enabled on the button. Icons can be added for more visual distinction. Any icon class can be used. Including the chevron is preferred.
Text Only Primary
Default state is shown, hover and active state are also enabled on the button.
Text Only Secondary
Default state is shown, hover and active state are also enabled on the button.
Text & Icon
Default state is shown, hover and active state are also enabled on the button.
Buttons can use a variable width that adjusts to the content inside the button or a fixed width for a set width which is not influenced by the button content.
Variable Width
Default state is shown, hover and active state are also enabled on the button.
Fixed Width
Default state is shown, hover and active state are also enabled on the button.
Build & Price
Dealers & Vehicles/Find a Dealer Icon
Search New Inventory
Compare Vehicles Icon
Calculate Payment Icon
Learn More Icon
View Incentives & Offers Icon