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

GREYS

Typography

IBM Plex Sans Condensed is a modern, legible typeface that is supported across all platforms.

WEB & DESKTOP

iOS & ANDROID

Spacing

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

VERTICAL & HORIZONTAL

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