Augusta Design System · Wolf Golf Games

Color · Primary

Six greens and creams do almost all the work. Gold appears only on green. White and black are never used directly — use cream and ink instead.

Augusta Green#1A5E3APrimary accent, CTA, positive money

Green Deep#0F4128Home backdrop, pressed buttons

Augusta Gold#C49A3AEyebrows & chevrons — green surfaces only

Cream#FAF7F0Default screen background

Cream Elevated#F5F1E8Cards, game rows

Cream Sunken#EFEAE0Inputs, score steppers

Cream Muted#E2DDD1Disabled / unavailable

Hairline#D8D2C40.5px dividers on cream

Color · Ink & Semantic

Burgundy replaces alert-red; muted gold replaces alert-orange. Green is shared between brand and winnings — one color, two meanings, never a conflict (the app never uses augusta-green for decorative purposes on a money screen).

Ink Primary#1C1C1CBody text, score digits

Ink Secondary#5C5C5CLabels, captions, field names

Ink Tertiary#8A8A8AHints, chevrons on cream

Positive#1A5E3AWinnings — same hue as green

Negative#8B2E2ELosses — muted burgundy

Warning#A67B2EThrottle, rate-limit, soft errors

Type · The Scale

Three families in strict roles. Cormorant Garamond for display. System sans for body. System mono for every number the user cares about — scores, money, handicaps — so digits stack vertically across rows.

displayLargePick a course.34 · Cormorant 600

displayYour group.28 · Cormorant 600

headlineWolf22 · Cormorant 600

bodyAdd 2–5 players to get started. Others can join with a code or nearby on the first tee.16 · SF 400

bodyEmphasisCreate a Lobby16 · SF 500

labelChoose Your Game13 · SF 500 · 1.5px

captionOthers join with a code or nearby12 · SF 400

scoreLarge0748 · SF Mono 300

score4 5 3 4 5 4 3 5 422 · SF Mono 400

money+$24 $0 -$3017 · SF Mono 400

Spacing · 8pt Grid

Everything lives on an 8pt grid. The sm+2 (10px) half-step is the only exception — it appears ~30× in the source for hairline inset from containers.

--sp-xs

4px · icon padding

--sp-sm

8px · inside a chip

--sp-sm2

10px · row inset (half-step)

--sp-md

16px · inside a card

--sp-lg

24px · screen padding

--sp-xl

40px · between sections

--sp-xxl

64px · top breathing room

Components

The pieces that actually compose screens. Every one of them passes through one of three surface colors (cream, elevated, sunken) and is outlined by a single 0.5px hairline — no shadows anywhere in the system.

Buttons

Primary CTA — one per screen. Secondary — outlined, ink primary. Text — green for affirmatives, ink for neutrals.

Section Header

Quick Rules Choose Your Game Settlement

On cream → augusta-green. On green surfaces → augusta-gold. Always 1.5px tracking, always uppercase.

Form Input

Name Rob Gillette

Handicap 12

Venmo @optional

Sunken surface, no borders on individual rows — only hairlines between them.

Game Card

Wolf 3–4 Players

Pick partners or go lone wolf

Choose partners or go lone wolf each hole. The wolf sees all tee shots before deciding.

Strategy · Best Ball · Rotating Wolf

3px green accent rail on the leading edge. Headline in green, sub in ink primary, tag strip in tertiary.

Money Text

Rob+$24

Marcus+$6

Sam$0

Tomas-$30

Monospaced · tabular · signed. Zero is ink-secondary, not positive — silence is not a win.

Scorecard Marks

Eagle

Birdie

Par

Bogey

Double

Green circles for under-par, ink squares for over-par. Same convention every scorecard shows.

Brand · The Masthead

Wolf's only brand treatment: a 3px gold rule, a solid green bar, and the tracked mark. It appears exactly once — at the top of the Home screen. Anywhere else would cheapen it.

WOLFGolf Games

Host a Round

Create a Lobby

Others join with a code or nearby on the first tee.

Navigation · On Green

When Wolf puts actions on green, the rules invert: gold eyebrows, cream titles, cream-at-60% subtitles, gold chevrons. The hairlines darken to match.

NearbyDiscover a round on the first tee

›

With a CodeEnter a 6-character code from the host

›

Resume Last RoundWolf at Pinehurst · 7 holes played

›

Principles

The rules that keep the visual vocabulary coherent. Each one exists because breaking it has an obvious tell — most of this is a reaction to common AI-UI tropes that felt wrong for a clubhouse wager tracker.

Never pure white or pure black.

Cream and ink carry the entire surface and text story. A stark #FFF next to the cream would look like a rendering bug.

Serif is display only.

Cormorant Garamond carries screen headers and card titles. Never body copy, never buttons, never in an input.

Numbers are monospaced, always.

Scores, money, handicaps. Tabular figures so digits stack vertically across rows of players.

No shadows. No gradients.

Elevation is three cream surfaces and a 0.5px hairline. Depth through color, never blur.

Gold lives on green.

The augusta-gold is reserved for eyebrows and chevrons on dark green surfaces. On cream, use augusta-green instead.

Emoji only in the receipt.

🏆 😬 📊 — only in post-round highlights. Elsewhere the tone is dry.