Creative Brief and Style Guide

Typography & Color

The Carolina’s Golf Association website is being designed with accessibility and readability at the forefront, using strong color contrast, clear visual hierarchy, and legible typography throughout. Figtree was selected for its clean, modern character, excellent readability across devices, and diverse range of weights. Headings use Carolina’s dark blue #000547, while body copy uses #222222 for comfortable, high-contrast reading.

The expanded digital palette builds on Carolina’s established blue and green brand colors with supporting colors selected for accessibility, flexibility, and visual hierarchy. #5C789A provides an accessible link color, while #B0CAEA adds a soft brand accent. #E6EAED offers a neutral light background, and deep green #144835 provides a complementary dark background option. Together, the palette creates a cohesive, recognizable Carolina’s Golf Association experience while allowing for clear contrast and varied content treatments.

H1 Heading Figtree - 60/50pt

H2 Heading Figtree - 50/40pt

H3 Heading Figtree - 32pt

H4 Heading Figtree - 28pt

H5 Heading Figtree - 21pt
H6 Heading Figtree - 16pt

Paragraph text - Figtree  18pt/1.7 line space

Sample text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Sample link excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Head color #000547

Body color #222222

Brand primary color #09347A

Brand secondary color #419639

Accessible safe link color #5C789A

Brand accent color #B0CAEA

Light background color #E6EAED

Dark background color #144835

Button Use

CTAs

Example buttons/class:

cta-primary →
cta-secondary →
cta-white →
cta-four
cta-six

NOTE: White buttons and links will only be used on dark backgrounds.

 

Forms

Form buttons will use the "CTA-Primary" class as a default. If you need a white button, use the form option in one of the Theme modules to "Select Alt Button" and the CTA-Five (white solid) will be used.