Building a Golf App Design System for St Andrews Links

How do you translate a golf brand that has been around for 600 years into a modern app without losing what makes it recognizable? For St Andrews Links, the answer started with a design system: one place that defines color, typography, spacing, components, and how controls behave. This is how we approached it for the Home of Golf app.

Key takeaways

• We adapted the St Andrews Links brand for screens, so its colors and type work as interface elements and not only as a print identity.
• The system was built from small pieces (color, type scale, spacing, icons) up to reusable components and screen layouts.
• Defining each element once kept the app consistent across tee times, tickets, and course guides.
• Because the system lived in one place, a brand update a few months into the project did not mean restyling every screen by hand.

Why does a heritage brand need a design system?

In our view, guests notice quickly when an app feels disconnected from the place it represents. For a brand like St Andrews Links, that gap costs more than it would for most. The design had to do two jobs at once: stay true to the brand and make the app easy to use on a phone.

So we treated design as a system, not a stack of one-off screens. Our statement of work for the project organized the app around three steps in a golfer’s day (plan, play, and participate), and it named brand synthesis and design system setup as part of the design phase. If you want to see how we run that kind of work, our services page lays it out.

How do you make a brand’s colors work on a screen?

A print palette does not translate straight into an interface. A deep brand color that looks right on a sign or a scorecard still has to work as a button, a link, a disabled state, and a background. We worked through that in four steps:

• Name each color by its role (primary action, text, surface, alert), not only by its brand name.
• Pair text and control colors so labels stay readable.
• Give every control the same set of states: default, pressed, and disabled.
• Keep the St Andrews character wherever it did not get in the way of using the app.

The result is a palette that looks like St Andrews and behaves like product UI.

How does a design system turn into real screens?

A system only matters once it drives screens. We applied the same tokens to the patterns that repeat across the app, from tee-time booking and digital tickets to GPS course guides. The goal was not novelty. Golfers should know how a control behaves and where to find things, whichever screen they are on.

That matters most on the course, where attention belongs on the round. We wrote about how mobile tech can help a round without distracting from it, and a predictable interface is a big part of that. More of our finished work is in our work.

What does atomic design look like in an app?

We built the system from the smallest pieces up, using an atomic approach. These are the tiers we used on this project. Teams name them differently.

Level	What it holds	Examples
Atoms	The smallest design decisions	Color, type scale, spacing, base icons
Molecules	Small groups of atoms that do one job	Buttons, input groups, cards, metadata rows
Patterns	Repeatable layouts built from molecules	Layouts for booking, tickets, and account screens

The order matters because each tier inherits from the one below it. Change an atom, and every molecule and pattern that uses it changes too. We cover the code side in how a reusable component system built the app.

What happens when the brand changes mid-project?

Brand updates happen. A few months into the project, St Andrews Links updated its digital brand. Colors, fonts, and element styles were defined in one place, so we changed them there and the update carried through the app instead of being applied screen by screen. In our account of the project, that kept a late brand change from becoming a late redesign.

Is a design system worth it for a heritage brand?

In our view, yes. The most useful result was not a single release. It was a base the team can keep building on. As St Andrews Links changes its campaigns, features, and content priorities, it can extend the app without starting the design over. For another hospitality example, see how we elevated the Foxwoods experience.

Planning an app for a heritage brand? Talk to us.