Skip to Main Content

Pattern Library

The pattern library breaks down the building blocks of a website, from the smallest details to the largest components. These are the common elements of design found on sites that get an FIU style treatment. Use the library to understand the design requirements of FIU sites and envision how your site will look and feel.

What's Inside

Colors & Typography

Our sites bleed blue and gold like we do. Use these clean fonts and colors across all university websites to help maintain brand identity.

In-Text Elements

These are special elements to mix into content to make text pop. You'll also find some HTML tips and tricks to tweak page presentation.


When used judiciously, buttons are a powerful tool to point the user in the right direction. Use too many buttons and risk overwhelming the user.


The navigation (or menu) is a website's road map. Navigation may take on different names and designs, but the goal is the same: be consistent and be direct.


One of the most recognizable elements on a page, the header bears the the site's name and the FIU logo. Few things change the header, but learn what it can do. 


Often overlooked but still important, the footer houses links and contact information to help lost users who drift to the bottom of the page.