q284wjw65sxn5fxm028ll2nqorbzcs

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 – Action Color #1E88E5 30,136,229
Green – Secondary Action/Pro #43A047 67,160,71
Red – Error/Attention Color #E53935 229,57,53
Orange #FB8C00 251,140,0
Purple #5E35B1 94,53,177

GREYS

Color

Label

HEX Value

RGB Value

Dark Grey – Primary Type #363636 54,54,54
Slate Grey – Fine Print/Secondary Type #767676 140,140,140
Grey – Outlines #E4E4E4 213,213,213
Light Grey – Background #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 26pt / 26sp 38pt / 38sp Black, White

H2

Regular 26pt / 26sp 38pt / 38sp All

Navbar / Button

Bold 18pt / 18sp 27pt / 27sp White

Body

Regular 18pt / 18sp 27pt / 27sp All

Caption

Regular 16pt / 16sp 22pt / 22sp Slate Grey

Subtitle

Regular 16pt / 16sp 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 and out 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
heart Favorite course
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
alert This item needs attention/approval
“i” icon Information link or indicator
calculator Handicaps indicator
journal Rounds indicator
news News indicator
mountain Photo indicator
badge Awards indicator
video Golfplan videos indicator
golfscape Golfscape AR indicator
Golfshot icon Golfshot/play golf indicator
phone Contact course
Map GPS view map/get directions
Trash Delete iteam
Smart-phones Android and iOS phones

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.

Components

Our native app components are the building blocks to our atomic design system. Use these to build compelling, user and data driven UI and UX.

SYSTEM

Component

Label

Meaning

Navigation App Bar Bar at the top that displays user’s current location, back or close icon, and a secondary action or icon
Bottom Tab Bar Bar at the bottom that allows user to move to different high-tier levels
Hero Banner Large image of golf course displayed at the top of a page
Avatar Circular image or icon in a header
Carousel Dots Indicate a horizontal scrolling carousel, color dots indicate which page the user is on
Data Container Static view of elements and/or data
Segment Tabs Finite selectable tabs at the top that change the view on the same level
Small Table Cell Text label, sub label, icons, and arrow chevron as a grouped row with dividers in a list view
Large Table Cell Text label, sub label, icons, imagery, and arrow chevron for courses, videos, or tee time-related list views.
Table Cell Switch Visual switch that toggles between two exclusive states, on or off
Table Cell Checkbox Visual indicator of selecting multiple items in a list
Table Cell Radio Visual indicator of selecting a single item in a list
Table Cell Header Label section for grouped table cells and text fields in a list view
Table Cell Selector Table cell for user selecting a multiple items in a drop-down container
Text Field Table cell for user text input
Dialogs, android and iOS Temporary view that overlays the UI with short-form content and 1-2 buttons
Search Bar Bar for user input to search and find content within a view
Blue Button Contained button for user to commit primary or encouraged actions
Green Button Contained button for user to commit Golfshot Pro-related actions
Grey/Black Button Contained button for user to commit secondary actions
Red Button Contained button for user to destroy/delete content or data
Progress Indicator Bar to display progression to the user, mostly for course syncing or locating
Small Floating Action Button Circular buttons representing secondary actions for the user, mainly on the GPS view
Large Floating Action Button Singular circular button representing primary actions for the user, mainly on the GPS view