Design

An overview of CoachNow’s design mission and principles, various app UI components, and system.

Media Kit

Foundation

CoachNow is about improving and consolidating communications between coaches and their athletes.

Using best design practices and thinking, powered by human-centered research, we strive to deliver excellent products used everyday by thousands of coaches, athletes, parents, and alike.

The purpose of this system is to familiarize you with our designed components, elements, and application.

Principles

Familiar: Interactions and tasks should feel familiar, relevant, and intuitive.

Minimal: Present only essential design elements for the user to accomplish goals.

Seamless: Strive to reduce confusion and pain points along the user journey.

Flexible: Layouts should be adaptive and scale with growth. Design for the long term.

Meaningful: Have meaning behind design choices. Don’t let them become arbitrary or empty.

Colors

Our colors express the personality of CoachNow: assertive, purposeful, and bright.

PRIMARY HUES

Color

Label

HEX Value

RGB Value

Orange#E54500229,69,0
Blue#039BE53,155,229

SECONDARY HUES

Color

Label

HEX Value

RGB Value

Green#43A04737,160,71
Yellow#FFA000255,160,0
Purple#5E35B194,53,177

GREYS

Color

Label

HEX Value

RGB Value

Dark Grey#3C404860,64,72
Slate Grey#8C8C8C140,140,140
Border Grey#DDDDDD221,221,221
Light Grey#F4F4F4247,247,247

Typography

Montserrat is a modern, legible typeface that is supported across all platforms.

WEB & DESKTOP

Category

Weight

Size

Leading

Color

H1

Bold48px / 3rem64px / 4remDark Grey

H2

Regular32px / 2rem48px / 3remDark Grey

H3

Regular22px / 1.375rem32px / 2remDark Grey

H4

Regular16px / 1rem22px / 1.375remDark Grey
BodyRegular16px / 1rem22px / 1.375remSlate Grey

Orange Button

Bold16px / 1rem22px / 1.375remOrange

Blue Button

Bold16px / 1rem22px / 1.375remBlue

iOS & ANDROID

Category

Weight

iOS / Android

Leading

Color

H1

Bold26pt / 26sp36pt / 36spBlack, White

H2

Regular26pt / 26sp36pt / 36spBlack, White

Navbar / Button

Bold18pt / 18sp26pt / 26spWhite

Body

Regular18pt / 18sp26pt / 26spBlack

Link

Regular18pt / 18sp26pt / 26spBlue

Caption

Regular15pt / 15sp22pt / 22spSlate Grey

Subtitle

Bold15pt / 15sp22pt / 22spSlate Grey

Spacing

To maintain a consistent layout and rhythm of elements, use a 4-based scale, prevalent with iOS, Android, and web standards.

VERTICAL & HORIZONTAL

Category

Web

iOS / Android

Use

XXL96px / 6em48pt / 48dpSpacing between groups
XL64px / 4em32pt / 32dpAlt. spacing between groups
LG48px / 3em24pt / 24dpSpacing between elements within groups
MD32px / 2em16pt / 16dpAlt. spacing between elements within groups
Base16px / 1em8pt / 8dpSpacing around individual elements
SM8px / 0.5em4pt / 4dpAlt. spacing around individual elements

Iconography

Our icon family represents the coaching experience. All icons are in scaleable vector format to maintain readability at all sizes.

SYSTEM

Icon

Label

Meaning

menuMenu options indicator
dotsMore options indicator
arrow-rightTable cell indicator
arrow-leftNavigation back button
arrow-downDropdown static indicator
arrow-upDropdown active indicator
closeNavigation close button
addAction for creating
checkmarkTable cell selected indicator
searchSearch cell indicator
cogSettings indicator
filtersFiltering indicator

GENERAL

Icon

Label

Meaning

cameraPhoto indicator
camera-emptyPhoto secondary indicator
videoVideo indicator
video-emptyVideo secondary indicator
documentDocument indicator
document-emptyDocument secondary indicator
libraryLibrary indicator
library-emptyLibrary secondary indicator
segmentsSegments indicator
segments-emptySegments secondary indicator
feedFeed indicator
feed-emptyFeed secondary indicator
notificationsNotifications indicator
notifications-emptyNotifications secondary indicator
commentComment indicator
comment-emptyComment secondary indicator
audioAudio indicator
audio-emptyAudio secondary indicator
new-postNew post indicator
new-post-emptyNew post secondary indicator
homeHome indicator
home-emptyHome secondary indicator
channelsTeam channel indicator
channels-emptyTeam channel secondary indicator
likeLike indicator
like-emptyLike secondary indicator
invitationEmail/invitation indicator
invitation-emptyEmail/invitation secondary indicator
phonePhone indicator
phone-emptyPhone secondary indicator
tagsTags indicator
tags-emptyTags secondary indicator
drawDraw/telestrate indicator
draw-emptyDraw/telestrate secondary indicator
memberMember indicator
member-emptyMember secondary indicator
lockPassword indicator
lock-emptyPassword secondary indicator
templatesTemplates indicator
dollarBilling indicator
plusCoachNow Plus indicator
readMark-as-read indicator
teamTeam indicator
member-addAdd member indicator
member-incompleteIncomplete member indicator
alertAlert/error indicator
infoMore information indicator
draw-arrowDraw arrow indicator
draw-circleDraw circle indicator
draw-lineDraw line indicator
draw-squareDraw square indicator
draw-squiggleDraw squiggle indicator
compareMedia comparison indicator
slo-moVideo slow motion indicator
draw-undoUndo draw/telestrate indicator
draw-deleteDelete draw/telestrate indicator

Imagery

Use candid coaching/athlete/team interaction photography, crisp environmental shots, and the latest devices for all banners and graphics to enhance user experience and express our brand. Avoid “slock-like” portrayals and low resolution shots.

Metaphors

Inclusion and Impact: Use for depicting a state of inclusiveness and effectiveness a coach has on their athletes or clients. The circle represents an area of education and influence.

Deconstruction: Use to illustrate and breakout various ideas of a design, as well as emphasizing certain areas of a product.