Design

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.

There is no design without discipline. There is no discipline without intelligence.

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

Orange

Blue

#E54500

#039BE5

229,69,0

3,155,229

Label

Color

HEX Value

RGB Value

SECONDARY HUES

Green

Yellow

#43A047

#FFA000

37,160,71

255,160,0

Label

Color

HEX Value

RGB Value

Purple

#5E35B1

94,53,177

GREYS

Dark Grey

Slate Grey

#3C4048

#8C8C8C

60,64,72

140,140,140

Label

Color

HEX Value

RGB Value

Border Grey

#DDDDDD

221,221,221

Light Grey

#F4F4F4

247,247,247

Typography

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

WEB & DESKTOP

Bold

Regular

48px / 3rem

32px / 2rem

64px / 4rem

48px / 3rem

Weight

Category

Size

Leading

Color

Dark Grey

Dark Grey

H1

H2

Regular

22px / 1.375rem

32px / 2rem

Dark Grey

H3

Regular

16px / 1rem

22px / 1.375rem

Dark Grey

H4

Regular

16px / 1rem

22px / 1.375rem

Slate Grey

Body

Bold

16px / 1rem

22px / 1.375rem

Orange

Bold

16px / 1rem

22px / 1.375rem

Blue

iOS & ANDROID

Bold

Regular

26pt / 26sp

26pt / 26sp

36pt / 36sp

36pt / 36sp

Weight

Category

Size

Leading

Color

Black, White

Black, White

H1

H2

Bold

18pt / 18sp

26pt / 26sp

White

Navbar / Button

Regular

18pt / 18sp

26pt / 26sp

Black

Body

Regular

18pt / 18sp

26pt / 26sp

Blue

Link

Regular

15pt / 15sp

22pt / 22sp

Slate Grey

Caption

Bold

15pt / 15sp

22pt / 22sp

Slate Grey

Subtitle

Spacing

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

VERTICAL & HORIZONTAL

96px / 6em

64px / 4em

48pt / 48dp

32pt / 32dp

Spacing between groups

Alt. spacing between groups

Web

Category

iOS / Android

Use

48px / 3em

24pt / 24dp

Spacing between elements within groups

32px / 2em

16pt / 16dp

Alt. spacing between elements within groups

16px / 1em

8pt / 8dp

Spacing around individual elements

8px / 0.5em

4pt / 4dp

Alt. spacing around individual elements

XXL

XL

LG

MD

Base

SM

Iconography

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

SYSTEM

menu

dots

Menu options indicator

More options indicator

Label

Icon

Meaning

arrow-right

Table cell indicator

arrow-left

Navigation back button

arrow-down

Dropdown static indicator

arrow-up

Dropdown active indicator

close

Navigation close button

add

Action for creating

checkmark

Table cell selected indicator

search

Search cell indicator

cog

Settings indicator

filters

Filtering indicator

GENERAL

camera

camera-empty

Photo indicator

Photo secondary indicator

Label

Icon

Meaning

video

Video indicator

video-empty

Video secondary indicator

document

Document indicator

document-empty

Document secondary indicator

library

Library indicator

library-empty

Library secondary indicator

segments

Segments indicator

feed

Feed indicator

notifications

Notifications indicator

notifications-empty

Notifications secondary indicator

comment

Comment indicator

comment-empty

Comment secondary indicator

audio

Audio indicator

audio-empty

Audio secondary indicator

new-post

New post indicator

new-post-empty

New post secondary indicator

home

Home indicator

home-empty

Home secondary indicator

channels

Team channel indicator

like

Like indicator

like-empty

Like secondary indicator

invitation

Email/invitation indicator

invitation-empty

Email/invitation secondary indicator

phone

Phone indicator

phone-empty

Phone secondary indicator

tags

Tags indicator

tags-empty

Tags secondary indicator

draw

Draw/telestrate indicator

draw-empty

Draw/telestrate secondary indicator

member

Member indicator

member-empty

Member secondary indicator

lock

Password indicator

lock-empty

Password secondary indicator

templates

Templates indicator

dollar

Billing indicator

plus

CoachNow Plus indicator

read

Mark-as-read indicator

team

Team indicator

member-add

Add member indicator

member-incomplete

Incomplete member indicator

alert

Incomplete member indicator

info

More information indicator

draw-arrow

Draw arrow indicator

draw-circle

Draw circle indicator

draw-line

Draw line indicator

draw-square

Draw square indicator

draw-squiggle

Draw squiggle indicator

compare

Media comparison indicator

slo-mo

Video slow motion indicator

draw-undo

Undo draw/telestrate indicator

draw-delete

Delete 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.