Site color

Each Isomer website has two main colors, a primary color and a secondary color.

The primary color is displayed in the following elements:

• the notifications banner in the homepage

• the hero banner button in the homepage

• font colors for headers

• underlined and highlighted text colors

The secondary color is displayed in the following elements:

• the key highlights buttons in the homepage

• the page banner in the inner website pages (all except the homepage)

Note: If you are picking a new primary or secondary color for your Isomer website, please ensure that the color fulfills the minimum color contrast ratio of 4.5 for accessibility.

Please ensure your color palette provides sufficient contrast using the color contrast checker. If you have any questions regarding this, please reach out to us via Slack or email us at [email protected]

How to change your site colors

The color is set in misc/custom.scss. You will find these 3 values in the file: $primary, $secondary, and $secondary-hover. Adjust the hex codes for these 3 values accordingly. Note that the semicolon (;) is required at the end of each line.

Sample configuration:

// Website brand colors
$primary: #6031b6;
$secondary: #4372d6;
$secondary-hover: darken(#4372d6, 20%);

To change the resource room colors, edit the $media-color-... values in the same file (misc/custom.scss):

// Resources page colors
$media-color-one: #49759a;
$media-color-two: #744d9f;
$media-color-three: #00838f;
$media-color-four: #00838f;
$media-color-five: #00838f;

IsomerCMS users

If you're using IsomerCMS, your color configuration will be determined on config.yml file.