Using the Interface Builder, you can match your interface to your Website's fonts, colors and button styles.  This article explores the most common tasks.

Interface elements like links, buttons and icons have style class.  That class has a name like primary, secondary or warning so forth.  You can manage the styles associated with each class under Style & Color.

Changing the Primary Color will change any Interface elements styled with the primary style class as shown below:

Notice the Website and Email buttons did not turn red.  That is because they are Secondary elements.

To modify the Secondary Color, we can follow the same procedure as the primary color and click Style & Color, then modify the Secondary Color.  

The question then arises, what if we want the Website and Email buttons to also be the primary color, or what if we want the Email button to be a different color than the Website button?  The answer is to change the Style of the button(s).  

Under Results, then List, we can see the Website and Email buttons listed in the Links container in this example:

Let's expand the Link field to reveal the settings.  Click the caret icon to show the settings.  Notice the Styles option shown below.  In this example, we can see it has Secondary and Small Button styles already selected.

If we want to change the Link to the Primary style, first remove the Secondary style by clicking [x] next to the word Secondary.  Then, in the list, choose Primary from the Button group as shown.  Notice our Link button now has the Primary style, and now gets its color from the Primary color choice we made earlier.
​

There are many other styles of interest in this drop-down.  For example, try changing it to Primary Outline Button for this effect.  
​

Be sure to remove Primary from the styles list.  Not all styles work together.  For example the white text in the Primary button conflict with the white background in the Primary Outline Button style.

Some of our templates show icons within the buttons and next to items.  For example, the Website button above shows a chain link icon and the email button shows an envelope.  To choose the icon associated with a field, click the folder icon next to the icon text field as shown below:
​

In the above screenshot, fa fa-map-marker is the name of the CSS class that is used by the icons in the Font Awesome library.  That library is automatically included, so any of the free icons are available.  Be sure to enter the full CSS class, like fa fa-phone or fas fa-angle-double-right.  
​
​Fonts

Most interfaces use a default font list as defined by the Bootstrap CSS library.  The default font is a reliable, web-safe font set that will display well on most devices and screen sizes. If you need to modify the font; however, it is simple to do.  Click Style & Color, then choose a Font from the dropdown list. Choose either a standard font set or a Google font from the list.

The Font Weight is a numerical value which can be used to adjust the font from thin to bold.  Not all fonts support all font weights, so if it doesn't have an effect, choose a different value as shown below.  Lower numbers are thinner fonts.
​

The borders of buttons and text inputs have rounded corners.  To adjust or eliminate the rounding to match your brand, you can adjust the border radius as shown below:

This completes the overview of branding possibilities in the Interface Builder.