Design System & Pattern Library

Various web and app UI components, design principles, and our system.

Foundation

Golfshot is about improving the golfing experience on and off the course.

Using best design practices and thinking, powered by human-centered research, we strive to deliver excellent products used everyday by millions of golfers.

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 Golfshot: vivid, purposeful, and bright.

HUES

Color

Label

HEX Value

RGB Value

Blue #1E88E5 30,136,229
Green #43A047 67,160,71
Red #E53935 229,57,53
Orange #FB8C00 251,140,0
Purple #5E35B1 94,53,177

GREYS

Color

Label

HEX Value

RGB Value

Dark Grey #363636 54,54,54
Slate Grey #767676 140,140,140
Grey #E4E4E4 213,213,213
Light Grey #F4F4F4 247,247,247

Typography

IBM Plex Sans Condensed 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

Pro Button

Bold 16px / 1rem 22px / 1.375rem Green

General Button

Bold 16px / 1rem 22px / 1.375rem Blue

iOS & ANDROID

Category

Weight

iOS / Android

Leading

Color

Num1

Bold 44pt / 44sp 60pt / 60sp Black

Num2

Regular 44pt / 44sp 60pt / 60sp Black

H1

Bold 27pt / 27sp 38pt / 38sp Black, White

H2

Regular 27pt / 27sp 38pt / 38sp All

Navbar / Button

Bold 19pt / 19sp 27pt / 27sp White

Body

Regular 19pt / 19sp 27pt / 27sp All

Caption

Regular 15pt / 15sp 22pt / 22sp Slate Grey

Subtitle

Regular 15pt / 15sp 22pt / 22sp Blue

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 golfing experience. All icons are in scaleable vector format to maintain readability at all sizes.

SYSTEM

Icon

Label

Meaning

menu Menu options indicator
dots More options indicator
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

Icon

Label

Meaning

gps GPS/navigation indicator
marker Location indicator
front Front of the green
center Center of the green
back Back of the green
golfer Singular golfer/default avatar
golfers Multiple golfers/group avatar
zoom Zoom-in on course aerial image
eye 3D course/hole preview
recenter Reset/recenter GPS distances
ring GIR/Scramble miss
target Fairway/GIR/track shot hit
miss-left Fairway/GIR/track shot missed to left
miss-right Fairway/GIR/track shot missed to right
miss-long Fairway/GIR/track shot missed long
miss-short Fairway/GIR/track shot missed short
path Hazard cart path
bunker Hazard bunker/sand trap
water Hazard water
pencil Scoring the hole/editing indicator
cart Tee times golf cart indicator
9-hole Tee times 9 hole course indicator
18-hole Tee times 18 hole course indicator
meal Tee times meal indicator
price Tee times price/deal indicator
mail User email/contact indicator
talk-bubble User chat/message indicator
star Rating filled star
star-empty Rating empty star
star-half Rating half star
battery Power save mode
flag Course indicator
ruler Fitness distance
flame Fitness calories burned
shoe Fitness steps taken
club Club/track shot indicator
clubs Equipment/club recommendation indicator
plane Travel indicator
statistics User statistics indicator
graph Historical statistics indicator
calculator Handicaps indicator
journal Rounds indicator
news News indicator
mountain Photo indicator
badge Awards indicator
video Golfplan videos indicator
golfscape Golfscape AR indicator
bug Golfshot/play golf indicator
phone Contact course

Imagery

Use candid golfer photography, crisp course imagery, and the latest device shots for all banners and graphics to enhance user experience and express our brand. Avoid “slock-like” portrayals and low resolution shots.

Metaphors

Overlay: Use for layering and ordering elements on top of each other in elegant and playful ways in graphic design. Application: header banner elements, promotional graphics, and various UI components.

Simulation: Use for depicting golfing-related elements, like gps/statistical analysis and sense of progress, in real-life portrayals. Application: header banners and promotional graphics.