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 |
![]() |
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 |