Stock golf photograph illustrating a large visual course entry
Fictional course entry
North Shore Links
Atlantic coast · 18 holes
Space off the tee. More to think about on the way in.
Explore the course →Internal design system · v0.2 · Visual refinement
More course.
Less interface.
A calm, editorial foundation for understanding golf through photographs, real shots and a few well-chosen words.
Explore the course →Fictional explorer specimen
Golfer finishing a swing on a tree-lined course beneath a cloudy sky
01 / Foundations
Clarity is the visual identity.
Typography, spacing and media establish hierarchy. Containers are earned, not automatic.
The open fairway.
A course worth knowing.
Room to make a decision.
A closer look at the approach.
One observation can explain more than ten minutes of footage.
Body / Comfortable reading, plain language and useful context.
Caption / Image credit, context and supplementary information.
Label / Hole 04 · Approach
164 yd
A small, semantic palette.
Blue identifies actions. The golf media supplies the rest of the color. Status colors always travel with words.
✓ Saved! Not recorded× Media unavailable
One spacing rhythm.
Radius, with restraint.
8
16
24
Full
Small for controls. Square edges for editorial media. One floating elevation, used only for menus.
Floating surface / menu specimen
02 / Components
Useful. Quiet. Reachable.
Primary: save. Secondary: explore patterns. Editorial: text + arrow. Contextual media: play below the image. Hole numbers remain 48px targets; Tab reveals the full focus ring.
Buttons change local preview state only.
Icon buttons have a 48px target and accessible name. Essential meaning never relies on an icon alone.
Course metadata / Fictional example
- Location
- Atlantic coast
- Holes
- 18
- Par
- 72
- Character
- Open, exposed, thoughtful
03 / Explorer specimen
The shot stays at the center.
A deliberately schematic scene to review media, navigation and data hierarchy. All selections and distances below are fictional. This is not Trackman footage.
Stock golf photograph used as an illustrative shot-viewer background
Paused · No measured flight data
Hole 01 · Par 4
Shot 1 of 3 · Tee shot
Illustrative values, not recorded shot measurements.
Course map / Schematic routing
Schematic, not a surveyed course map. Equivalent text controls remain available without interpreting the graphic.
Interaction contract
One hole. One shot.
A clear place in the round.
Hole selection resets to the first shot. Previous and next stop at the bounds. Focus stays with the control you used; the page does not jump.
On phone, the media leads. The two-row hole navigator scrolls locally when needed; all 18 targets remain 48px with 8px gaps. Identity and shot navigation sit below the image, with data following naturally.
Production needs real media loading/error handling, captions, poster transitions and deep links. Those are documented contracts, not fabricated capabilities in this specimen.
04 / Composition patterns
Editorial, without the ceremony.
These are isolated pattern specimens. They are not a homepage or course page.
Editorial story / Fictional observation
Driver is probably unnecessary here.
Obviously I hit driver.
Invented personal observation for typography review.
Stock golf photograph cropped to a four-to-three editorial frame
Course introduction / Fictional anatomy
North Shore Links
Atlantic coast
Open land, a changing wind and decisions that become clearer when you see the course one hole at a time.
- Holes
- 18
- Par
- 72
- Review status
- Fictional specimen
Course index / Large visual entries
A course, at a glance.
Begin with an image and an observation. Discovery controls belong here when real course data exists.
Media layouts
Keep the original when the detail matters.
Full stock image fitted without cropping into a four-to-three frame
05 / Review & governance
Does this feel like BayLiv3?
Previous → Revised
- Less noise: section rules, header divider, hole boxes and arrow outlines removed. Three preview destinations replace five.
- More editorial: existing Display typography carries course names and a personal observation. Text actions replace the lead filled button.
- Consumer clarity: media reaches composition edges, captions stay outside, selection uses weight and a short underline.
- Rules refined: borderless hole controls, four action treatments and intentional media bleed. Tokens, type scale, focus, target sizes and breakpoints remain unchanged.
Use the system before extending it.
Future implementations must reuse these tokens, components and patterns. Explain a genuine gap, add and document the reusable primitive, then use it.
Limitations: one proposed light theme, system fonts, stock golf photograph, fictional values, illustrative motion, no real course photography or Trackman video supplied. Production media, routing, search and course pages are outside this review.
Download the design system and previewBack to Studies