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
Color Label HEX Value RGB Value
Orange #E54500 229,69,0
Blue #039BE5 3,155,229
SECONDARY HUES
Color Label HEX Value RGB Value
Green #43A047 37,160,71
Yellow #FFA000 255,160,0
Purple #5E35B1 94,53,177
GREYS
Color Label HEX Value RGB Value
Dark Grey #3C4048 60,64,72
Slate Grey #8C8C8C 140,140,140
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
Category Weight Size Leading Color
H1 Bold 48px / 3rem 64px / 4rem Dark Grey
H2 Regular 32px / 2rem 48px / 3rem Dark Grey
H3 Regular 22px / 1.375rem 32px / 2rem Dark Grey
H4 Regular 16px / 1rem 22px / 1.375rem Dark Grey
Body Regular 16px / 1rem 22px / 1.375rem Slate Grey
Orange Button Bold 16px / 1rem 22px / 1.375rem Orange
Blue Button Bold 16px / 1rem 22px / 1.375rem Blue
iOS & ANDROID
Category Weight Size Leading Color
H1 Bold 26pt / 26sp 36pt / 36sp Black, White
H2 Regular 26pt / 26sp 36pt / 36sp Black, White
Navbar / Button Bold 18pt / 18sp 26pt / 26sp White
Body Regular 18pt / 18sp 26pt / 26sp Black
Link Regular 18pt / 18sp 26pt / 26sp Blue
Caption Regular 15pt / 15sp 22pt / 22sp Slate Grey
Subtitle Bold 15pt / 15sp 22pt / 22sp Slate 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
XXL 96px / 6em 48pt / 48dp Spacing between groups
XL 64px / 4em 32pt / 32dp Alt. spacing between groups
LG 48px / 3em 24pt / 24dp Spacing between elements within groups
MD 32px / 2em 16pt / 16dp Alt. spacing between elements within groups
Base 16px / 1em 8pt / 8dp Spacing around individual elements
SM 8px / 0.5em 4pt / 4dp Alt. 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
Menu menu Menu options indicator
dots dots More options indicator
arrow-right arrow-right Table cell indicator
arrow-left arrow-left Navigation back button
arrow-down arrow-down Dropdown static indicator
arrow-up arrow-up Dropdown active indicator
close close Navigation close button
add add Action for creating
checkmark checkmark Table cell selected indicator
search search Search cell indicator
cog cog Settings indicator
filters filters Filtering indicator
GENERAL
Icon Label Meaning
camera camera Photo indicator
camera-empty camera-empty Photo secondary indicator
video video Video indicator
video-empty video-empty Video secondary indicator
document document Document indicator
document-empty document-empty Document secondary indicator
library library Library indicator
library-empty library-empty Library secondary indicator
segments segments Segments indicator
feed feed Feed indicator
notifications notifications Notifications indicator
notifications-empty notifications-empty Notifications secondary indicator
comment comment Comment indicator
comment-empty comment-empty Comment secondary indicator
audio audio Audio indicator
audio-empty audio-empty Audio secondary indicator
new-post new-post New post indicator
new-post-empty new-post-empty New post secondary indicator
home home Home indicator
home-empty home-empty Home secondary indicator
channels channels Team channel indicator
like like Like indicator
like-empty like-empty Like secondary indicator
invitation invitation Email/invitation indicator
invitation-empty invitation-empty Email/invitation secondary indicator
phone phone Phone indicator
phone-empty phone-empty Phone secondary indicator
tags tags Tags indicator
tags-empty tags-empty Tags secondary indicator
draw draw Draw/telestrate indicator
draw-empty draw-empty Draw/telestrate secondary indicator
member member Member indicator
member-empty member-empty Member secondary indicator
lock lock Password indicator
lock-empty lock-empty Password secondary indicator
templates templates Templates indicator
dollar dollar Billing indicator
plus plus CoachNow Plus indicator
read read Mark-as-read indicator
team team Team indicator
member-add member-add Add member indicator
member-incomplete member-incomplete Incomplete member indicator
alert alert Incomplete member indicator
info info More information indicator
draw-arrow draw-arrow Draw arrow indicator
draw-circle draw-circle Draw circle indicator
draw-line draw-line Draw line indicator
draw-square draw-square Draw square indicator
draw-squiggle draw-squiggle Draw squiggle indicator
compare compare Media comparison indicator
slo-mo slo-mo Video slow motion indicator
draw-undo draw-undo Undo draw/telestrate indicator
draw-delete 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.

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