Design

An overview of CoachNow's design mission and principles, various app UI components, and system.
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
Orange Button
Bold
16px / 1rem
22px / 1.375rem
Blue
Blue Button
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.