Iconography
Our clean, thin-line iconography helps to simplify complex ideas and translate messages quickly. We leverage our phase colors throughout the icons to help communicate where we are in our phased journey.
UI Elements
Additional UI elements — lines and buttons — mirror our iconography: clean, thin-lined, and colored to reflect the appropriate phase.
Phased Lines
This phase UI element shows the transition from one phase to the next. In terms of color, the gradients allow each phase to be a distinct step. The gradients also allow each phase to seamlessly fade into the next, representing the overarching story of Shine.
Call-to-Action Buttons
Buttons should be thin lined and formatted as shown below. This style reflects a clean, modern look.
Phased Lines
This phase UI element shows the transition from one phase to the next. In terms of color, the gradients allow each phase to be a distinct step. The gradients also allow each phase to seamlessly fade into the next, representing the overarching story of Shine.
Call-to-Action Buttons
Buttons should be thin lined and formatted as shown below. This style reflects a clean, modern look.
Headings Font
Exo 2
Heading 1 | 600 - Semibold 38px
Heading 2 | 600 - Semibold 32 px
Heading 3 | 600 - Semibold 24 px
Heading 4 | 600 - Semibold 18 px
Heading 5 | 600 - Semibold 14 px
Heading 6 | 600 - Semibold 12px
SHINE's primary typeface is Exo 2. This font is used for main headings and infographics. It is used as a semibold option and typically in a sparing manner. It denotes messaging that needs to be distinguished. Important sections of header text may be accompanied with a white glow, as seen by the hero image heading at the very top of the page.
Download fontParagraph Font
Red Hat Display
Large Paragraph | 400 - Normal 35 px
Semi Large Paragraph | 400 - Normal 28 px
Medium Paragraph | 400 - Normal 18px
Regular Paragraph | 400 - Normal 14 px
SHINE's secondary typeface is Red Hat Display. This font is used for paragraph text or any other copy that is not a heading.
Download fontSHINE Logo with Taglines Guidelines
*To download, click the "Download Logo Package." A new tab will open with the logos variations in a Google Drive folder. Right click the desired logo file and click "Download." the file will be in your downloads folder on your computer.
Newsletter Logos
Use these logos for their respective digital newsletters. Logos should only be used on dark backgrounds in the newsletter. Refer to the Hubspot email templates for spacing and size.
*To download, click the "Download Logo Package." A new tab will open with the logos variations in a Google Drive folder. Right click the desired logo file and click "Download." the file will be in your downloads folder on your computer.
The Beacon Newsletter Logo
Use only on dark backgrounds. Allow for adequate spacing around the logo.
download logo packageThe Beacon Express Newsletter Logo
Use only on dark backgrounds. Allow for adequate spacing around the logo.
download logo packageThe Spotlight Newsletter Logo
Use only on dark backgrounds. Allow for adequate spacing around the logo.
download logo packageThe Sun Newsletter Logo
Use only on dark backgrounds. Allow for adequate spacing around the logo.
download logo package
