MulliganGPS / Catalog
Design language
Reusable foundations, interface patterns, and course illustrations for MulliganGPS.
In context
A season at a glance
A round overview using the shared patterns below. Sample data; edits stay in this preview.
Saturday at Tangle Ridge
Sep 20 · 18 holes · Member tees. A round worth remembering.
- Score
- 77
- To par
- +5
- Putts
- 29
Recent rounds
View history- Home CourseToday · 9 of 18 holesIn progress
- Tangle RidgeSep 20 · 18 holesComplete
- Great MunicipalAug 23 · 18 holesComplete
Foundations / 01
Typography
One clear interface family, a distinctive voice for occasional copy, and stable score data.
Typefaces
Each family has one job.
Instrument Sans
Headings, body copy, and interface labels
M PLUS Rounded 1c
Occasional expressive copy and illustration captions
Sono
Distances, scores, and technical data
Type scale
Use the fewest levels needed to make the information hierarchy obvious.
Dozens of rounds played.
Fairways are mostly a suggestion.
Round summary
Hole 7 · Par 4
Approach shot
Club recommendation
Last updated just now
Body text
Instrument Sans keeps body copy, supporting text, and controls consistent. Body text starts at 16px.
Large · 18 / 28
The green sits 164 yards away. The wind says seven iron. Confidence says driver.
Body · 16 / 26
MulliganGPS tracks the round while you focus on golf, weather, and locating the ball you were certain landed beside the fairway.
Small · 14 / 22
Distances are estimates. The confident club selection remains entirely your fault.
Inline styles
Native text elements cover common emphasis without introducing component APIs.
Strong recommendation
Optimistic estimate
Personal best
Penalty-free round
front-nine: 41
Press R to record a shot
Last synced 12 seconds ago
Default text
Secondary text
Round saved
Signal is weak
Score not saved
Unavailable until hole 19
Numbers
Monospaced, tabular figures keep changing distances stable. Headline statistics use Instrument Sans with tabular numerals.
- To pin
- 164 yd
- Round
- +7
- Putts
- 31
- Fairways
- 9/14
Foundations / 02
Colors
Warm neutral surfaces keep the interface clean. Vivid color communicates hierarchy, interaction, and status.
Color ramps
The outlined swatch is the anchor for each ramp.
slate
Primary
--slate-600- 50
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
green
Positive and success
--green-500- 50
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
orange
Accent
--orange-500- 50
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
sky
Information
--sky-500- 50
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
amber
Warning
--amber-500- 50
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
crimson
Danger
--crimson-500- 50
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
Semantic roles
Use these tokens in product styles instead of selecting colors directly from a ramp.
Interaction states
Soft backgrounds support selection; darker steps communicate hover and active states.
Primary
100600700800Positive
100500600700Accent
100500600700Surfaces
Three warm-neutral levels create separation before shadows are introduced.
100 / 200 mixneutral-100neutral-50Text hierarchy
Use opacity-free neutral tokens so contrast remains predictable.
PrimaryScores and essential labels
SecondaryDescriptions and metadata
MutedSupplementary information
DisabledUnavailable actions
Feedback pairings
Tinted surfaces carry status without turning the entire interface into a scoreboard.
Foundations / 03
Shape & elevation
Compact radii, clear borders, and shallow shadows separate content without making it float away from the interface.
Corner radius
Use the smallest radius that suits the size of the element.
4px6px8pxBorders
One-pixel neutral borders do most of the structural work.
neutral-200neutral-300neutral-400Elevation
Three levels cover static content, raised controls, and temporary floating UI.
none0 1px 2px0 3px 6pxCards
Cards are CSS patterns applied to the semantic element that matches their behavior.
Saturday at 8:10 AM. Attendance remains technically possible.
164 yards to the pin and several excuses already prepared.
Every shot is safely recorded, including the regrettable ones.
- Score
- +7
- Putts
- 31
- Fairways
- 9/14
Footer actions
Keep actions together at the bottom edge and preserve one obvious next step.
Great Municipal Golf Course, assuming the alarm clock participates.
18 holes, 6,412 yards, and one golfer listed as both member and public.
Deleting this round requires confirmation and selective memory.
Components / 02
Form elements
Compact native controls for courses, rounds, scores, and settings. Labels and feedback remain visible instead of relying on placeholders.
Inputs
Text-like controls share the 32px default height established by buttons.
Combobox
Type in the field, then select a match. Arrow keys browse; Enter selects; Escape dismisses.
Selected course ID: None
Simulated remote search. Type “error” to preview a failed request.
Multi-select
A field that opens a list. Clicking an option toggles it and keeps the list open; arrow keys browse, Space or Enter toggles, and Escape closes.
Chosen: stroke, match
Disabled, so the list can't open.
Field states
Validation uses borders, text, and focus treatment without shifting control geometry.
Selection controls
Checkboxes remain square, radio controls remain circular, and switches do not become pills.
Components / 03
Badges, tags, and avatars
Compact status and identity patterns with visible corners. Static tags describe data; anything selectable or removable becomes a real control later.
Status badges
Color supports the label but never carries the meaning alone.
Static tags
Low-emphasis metadata, not miniature buttons wearing a fake mustache.
Count badges
Short counts stay square; larger values grow without becoming pills.
Avatar types
Initials are the useful default; the fallback covers missing profile data.
Avatar sizes
Three compact sizes cover dense tables, navigation, and account surfaces.
24px32px40pxComponents / 04
Data tables
Native tables keep dense round history readable. Text stays left aligned, numbers line up on the right, and narrow screens scroll without disguising rows as cards.
Recent rounds
Compact rows use neutral separators, restrained hover, and a visible selected state.
| Course | Holes | Score | To par | Status | Actions | ||
|---|---|---|---|---|---|---|---|
| Great Municipal | 18 | 81 | +9 | Complete | |||
| Lakeside | 18 | 78 | +6 | Complete | |||
| Home Course | 9 | 39 | +3 | In progress | |||
| Expensive Hot Dogs | 18 | 85 | +13 | Needs review |
Empty state
Keep the table context visible and provide one obvious next action.
| Played | Course | Score | Status |
|---|---|---|---|
No rounds yet The scorecard is suspiciously clean. | |||
Components / 05
Feedback and loading
Static feedback uses semantic HTML and complete borders. Animation is reserved for loading indicators and respects reduced-motion preferences.
Alerts
Inline messages remain in the document flow; dismissible alerts come later.
Distances were refreshed from the latest data.
All eighteen holes survived the upload.
Yardages may be ambitious by a few feet.
Check your connection and try saving again.
Progress and meters
Use progress for completion and meter for a measured value within a known range.
Round progress
Native progress with visible numeric context.
Measured values
Threshold colors reinforce the accompanying label.
Loading states
Skeletons mirror the expected layout; spinners cover brief indeterminate work.
Components / 06
Data display
Small display patterns organize course and round information without introducing behavior or a component API prematurely.
Statistics
Tabular figures and short labels keep changing values stable and scannable.
Description list
Label-value details for a course or completed round.
- Course
- Great Municipal
- Tees
- Member · 6,214 yd
- Played
- Weather
- 84° · Breezy enough
Action list
Structured rows for related records and lightweight actions.
- Great MunicipalLast played Aug 23Home
- LakesideLast played Aug 16
- Expensive Hot DogsLast played Aug 2Review
Empty state
A general pattern for an empty collection or search result.
Save one now and pretend this was always the plan.
Thumbnails and placeholders
Images crop consistently; missing imagery remains intentional.
Components / 09
Dialogs
A focused task or a handy reference. Close or press Escape when you’re done.
Saturday at Tangle Ridge
No round notes yet.
Changes here are preview only.
Components / 10
Content utilities
Low-level content styling for separation, instructions, quotations, and technical text.
Dividers
Use spacing first; dividers clarify boundaries when spacing is not enough.
Keyboard hints
Hints document shortcuts without pretending they are buttons.
Press G to open GPS.
Press R then N to start a new round.
Press Esc to reconsider your choices.
Golf is a game where the ball usually knows exactly what you were trying to avoid.
Round notes, probably
score.total = strokes + penalties;
score.explanation = 'wind';Course illustration
Construction paper
Fine paper fibers, carefully cut edges, and just enough depth. A material study for our own course geometry.
One shoreline. Two sheets of water.
Switch to 2× or 3× to inspect the fibers and the recessed water edge. The narrow inlet loses its deep-water layer as the shallow band widens.