Skip to content

The Brief

Project overview

Goal of the facelift is to create a more modern and user-friendly interface while keeping the current look and feel of the website.

Design system

Typography

PRIMARY TYPEFACE

Libre Franklin
Aa
BOLD
Aa
SEMIBOLD
Aa
REGULAR
Aa
LIGHT
Aa
EXTRALIGHT

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj

Kk Ll Mm Nn Oo Pp Qq Rr Ss

Tt Uu Vv Ww Xx Yy Zz 0 1 2

3 4 5 6 7 8 9 ! @ # $ % & *

Primary typeface of the brand is Libre Franklin, designed by Pablo Impallari in 2016. The design expands the original Franklin into an impressive nine weights—from thin to black—each with matching italics. The wide variety of font styles offered by this typeface can be adjusted to fit different brand printed and interactive materials.

The entire family is available for free on Google Fonts, which makes it accessible for everyone wishing to leverage the brand's signature thin headlines without having to purchase a license.

Download Libre Franklin font

Design system

Typography

CONTENT TYPEFACE

Inter var
Aa
BOLD
Aa
SEMIBOLD
Aa
REGULAR
Aa
LIGHT
Aa
EXTRALIGHT

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj

Kk Ll Mm Nn Oo Pp Qq Rr Ss

Tt Uu Vv Ww Xx Yy Zz 0 1 2

3 4 5 6 7 8 9 ! @ # $ % & *

Inter features a tall x-height to aid in readability of mixed-case and lower-case text. Several OpenType features are provided as well, like contextual alternates that adjusts punctuation depending on the shape of surrounding glyphs, slashed zero for when you need to disambiguate "0" from "o", tabular numbers, etc.

Choosing Inter as the content typeface will improve readability of the website and make it easier for users to scan through the content.

Download Inter font

Design system

Color Palette

EXO TEAL

#03171b

EXO GREEN

#00bd25

DIGITAL BLACK

#000000

EXO BLUE

#03171b

WHITE

#FFFFFF

The color palette of the brand is based on the Exceed Orphan logo, which features a strong green color (#00bd25). This color is used as the primary color of the brand, while the secondary color is a dark teal, which is used as the background color of the website.

Design system

Icons

Brand facelift is accompanied by a new set of icons, which are used throughout the website and other brand materials. The icons are designed to be simple and easy to understand, while maintaining a consistent visual style.

Design system

Documents

Use attached templates for day-to-day work with interactive or printed documents. Open downloaded .dotx file with Microsoft Office – Word or Libre Office Writer for best results.

Template

Template (black and white)

Presentation (pptx)

Brand tooling

Signature

Dear John Doe,

lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque necessitatibus porro laudantium consequatur itaque iusto corrupti tenetur quaerat alias nulla.

Dear John Doe,

lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque necessitatibus porro laudantium consequatur itaque iusto corrupti tenetur quaerat alias nulla.

E-mail signature is a great way to promote the brand and its values. Use this tool to generate signature for your e-mail client.

Signature tool

Output for your e-mail client:

Design extras

Wallpapers

Design system

Motion

Motion graphics play subtle, yet important role in brand voice. ExCEEd Orphan's motion graphics are designed to be unobtrusive and not distracting, while still being able to convey the intended message.

Brand video (original green)

Brand video (white background)