Dark ModeLight Mode

Elements

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.

download Icon package

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 above. 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 above. This style reflects a clean, modern look.

Typography

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.

Download font

Paragraph 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 font

The SHINE Orb

The glowing orb represents our progress through each of SHINE's phases. At each phase, more and more of the orb is illuminated; in the same way, more and more is illuminated in terms of insights gleaned and technology developed along the journey to Phase IV: fusion energy.

Human-Centered Photography &
"Rays" Application

It's important we show the tangible, human impact of the work that we do, which is why our photography centers on people. Where applicable, we also use the "rays" from the logo as photo treatment. This visual element ties the brand together and also indicates phase by its color (Phase I: yellow, Phase II: blue, Phase III: green, Phase IV: purple).

Headshots

Traditional, emotional, and expressive, this cinematic portrait style tells the story of both the individual themselves and SHINE as a company. The lighting should be high contrast, and the background be subtle and flat. The poses should be relaxed and authentic. These guidelines apply to both color and black and white headshots.

Photography Guidelines

Photos taken of our company and of our employees should appear well lit, candid, and natural. No image should appear highly edited or overly staged.

Stock Photography

Whenever possible, using original SHINE imagery will add to the authenticity of our story and develop the visual strength of our brand. When stock photography is necessary, follow the same criteria as original SHINE photography. Make sure it feels authentic, genuine and focuses on a moment. The stock photos should blend seamlessly. Because our focus is on the tangible, human impact of our work, choose images that center around people.

Color
Resources