Create State/System Landing Pages: Color Selection

States/systems can create a customized, branded Transferology® landing page to help promote colleges and universities to prospective students. When navigating to Transferology through the system's referral link or badge, students will see the customized page (assuming it is published) instead of the CollegeSource-branded homepage. This article within Create State/System Landing Pages: An Overview Guide (see Related Articles) explains how users can customize select header text, background color, foreground color, buttons, icons, and borders within the page.

Articles in this series:

Text Color
Section 2 Background and Foreground Colors
Secondary Color
Tertiary Color
Accessibility Requirements

States and systems must work with CollegeSource to collaboratively create the initial landing page. Once the landing page is in place, it will be maintained by users at the participating institutions with the State Coordinator role in the Lab, and any other State Coordinators given access to edit the page.

The hex numbers of school colors can be used to customize select header text, background color, foreground color, buttons, icons, and borders within the landing page. Hex codes are six characters, contain numbers 0-9, and letters a-f. The state/system will need to supply hex code numbers for the text color, section 2 background and foreground colors, secondary color, and tertiary color as described below.

Text Color

The Text Color is used to establish the color of the header text appearing on a white background.

Callout illustrates text affected by the primary color selection.

Section 2 Background and Foreground Colors

The Section 2 Background Color sets the background color of the section on the landing page that advertises the relationship between the institution and Transferology®.

The Section 2 Foreground Color sets the text and button color in this section.

Secondary Color

The secondary color is used to establish the color of the main buttons on the Transferology homepage ("Sign up" and "Get started"), the background color for three custom resource links, and various icons used throughout the page

Get started button

Tertiary Color

The tertiary color is used to establish the border color for the Participating institutions map. This map pinpoints the names and locations of institutions associated with the state/system landing page. If provided, users will also see an icon with an arrow that, when selected, will direct the user to the institution's website.

Participating institutions map. Text reads Use Transferology to see how your courses, exams, military experience, and life learning experiences transfer to the following institutions. The universities associated with the landing page are listed. — Select to see a larger version

Accessibility Requirements

CollegeSource is committed to ensuring its products are accessible to all users. The company follows WCAG 2.2 Level AA standards when developing all products. Chosen colors must be WCAG AA accessible for use with the color white (#FFFFFF).

State/system representatives can contact the appropriate Marketing department(s) to confirm hex code numbers.

Visit a sample Transferology® system landing page for a detailed look at how color selections appear on a state/system landing page.

The text color hex used is #00008b (dark blue).
The section 2 background color hex used is #008080 (teal).
The section 2 foreground color hex used is #FFFFFF (white).
The secondary color hex used is #b94700 (orange).
The tertiary hex code used is #4a584b (dark green).