Global Styles

Font Sizing

The default font size is set to 100% of the browser style sheet, usually 16 pixels. This ensures compatibility with browser-based text zoom or user-set defaults. If you're using the Sass version of Foundation, edit the $global-font-size variable to change the base font size. This can be a percentage value, or a pixel value.

Colors

All interactive elements in Foundation, such as links and buttons, use the same color. The default shade of blue you see all over Foundation comes from the $primary-color Sass variable.

Many components can also be colored with four other colors: secondary, alert, success, and warning. Use these colors to give more context to UI elements and actions.

If you're using the Sass version of Foundation, it's possible to edit the default color palette, by changing the $foundation-palette variable in your settings file. The only required color is one named "primary". The names used in the palette will be output as CSS classes.

$foundation-palette: (
  primary: #E44347,
  mars: #D7525C,
  saturn: #E4B884,
  neptune: #5147D7,
)

Using the above palette, we can add the .mars, .saturn, or .neptune classes to buttons, labels, badges, and more.

To access the colors in your code, use Sass's map-get() function:

.mars {
  color: map-get($foundation-palette, mars);
}

Color Classes

Some components, such as buttons, callouts, and labels, have coloring classes, which let you change the color of the element by adding the name of the color as a CSS class.

<button class="button">Primary Action</button>
<button class="secondary button">Secondary Action</button>

<div class="success callout">
  <p>Created a new folder.</p>
</div>
<div class="alert callout">
  <p>Error fetching stick.</p>
</div>