TractGolfstyle pack.

The TractGolf logo, colours, type, shapes and components in one place. Colours were sampled from the brand board, and the logo was traced from it into SVG.

Logo

Wordmark and mark.

The G carries a rising trend arrow. Use the version that gives the best contrast on the background you have.

Wordmark on greenPrimary

Open

Wordmark on lightWhite and Fringe backgrounds

Open

Wordmark on darkBlack and Deep green backgrounds

Open

Wordmark, single colourPhotos and one-colour print

Open

MarkApp icon, favicon, social avatar

Open

Mark on darkDark backgrounds

Open

Clear space

Suggested: keep the height of the letter T free on every side.

Minimum size

Suggested: wordmark no narrower than 90 px on screen. Mark no smaller than 24 px.

Keep it intact

Do not stretch, rotate, outline or recolour it. The arrow always points up and to the right.

Clear space and minimum size are suggested starting points, not rules from the original board.

Colour

Six course colours.

Named after the course. Select any swatch to copy its hex value.

Text and background pairs

Ratios are calculated from the hex values. 4.5 or higher passes for body text. 3 or higher passes for large headings.

Type

One typeface, two weights doing the work.

Plus Jakarta Sans is a free web font with a geometric build close to the wordmark. Use ExtraBold with tight letter spacing for headings and Regular to Medium for text. The wordmark itself stays as artwork and is never typed out.

Plus Jakarta Sans ExtraBold · headings

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

Plus Jakarta Sans Regular to Bold · text

The quick brown fox plays through. 0123456789

Display 96/92Slow play?

Heading 56/58One round, seen from both sides.

Subheading 28Slow play, found while it is still small.

Body 17/27TractGolf tracks golfers by GPS, shows marshals where play is slowing down, and lets them message the players involved.

Label 14Groups held up

Shapes and illustration

Flat, rounded, seen from above.

Illustrations show the course as a plan view: stripes of green, pale sand bunkers, light blue water, dark round trees and red flags. No outlines, no gradients.

TreeDeep green circle

FlagRed flag on Fringe green

BunkerSand, soft blob

LakeLake, soft rectangle

Mown stripesTwo greens, alternating

Large panels · 28 px radius

Tiles and alerts · 20 px

Buttons and chips · pill

Components

How the pieces behave.

Buttons

Book a demoSee the marshal appWatch the demo

On brand green

Book a demoWatch the demo

Slow play?

Not today.

Pace status

On paceHeld upSlow groupAhead

Group 7 is slowing the course

4 groups are held up behind them.

Metric tiles

4groups held up

36minutes lost

Tokens

Drop-in CSS variables.

Paste these into a Wix custom code block, or use them as a reference when setting the site's colours and fonts.

:root{
  --tg-black:#2b2b2b;
  --tg-iron:#b3b3b3;
  --tg-green:#00a28a;
  --tg-lake:#abd8f7;
  --tg-sand:#ffecaa;
  --tg-fringe:#eaf5ef;
  --tg-deep-green:#064238;
  --tg-flag:#ff5362;
  --tg-font:'Plus Jakarta Sans',system-ui,sans-serif;
  --tg-radius-panel:28px;
  --tg-radius-tile:20px;
  --tg-radius-pill:999px;
}