Logo, Fonts & Colours
Details on the SCGA logo, fonts used in the logo and on the site, plus Primary and Secondary defined colours.
Primary colours
The first primary accent colour is a dark blue. Used in the logo together with a paler blue, it is the key colour used on the website to highlight blocks, elements and backgrounds.
Dark blue
#005F9B
R – 0
G – 95
B – 155
C – 95
M – 65
Y – 13
K – 1
The second primary accent colour is a pale blue. Used in the logo together with the dark blue, it is used for contrast and secondary elements and backgrounds.
Pale blue
#158DCD
R – 21
G – 141
B – 205
C – 79
M – 33
Y – 0
K – 0
Logo
The logo must always be used in full with the acronym, the globe and the wording below. The acronym is dark blue at the top and pale blue at the bottom with a gradient at 50% middle.
The globe is an embedded image with a mask achieving the same gradient. The wording beneath the acronym uses pale blue for the lower-case letters and dark blue for the upper-case letters.
Logo fonts
There are two fonts used in the logo – these are not the fonts used for copy. The font for the letters SCGA is Gotham Medium from Hoefler & Co. and the font used for the wording below is Swiss 721 Std Light from Bitstream.
Print & site fonts, headings and sub-headings
Headings use the Google font ‘Playfair Display’. On the website they’re used at these sizes:
Heading 1 (H1): 40px
Heading 2 (H2): 30px
Heading 3 (H3): 24px
Heading 4 (H4): 19px
These are the desktop sizes and will change at smaller viewports. Font weight is set to 400 with a line height of 1.2 EM.
Print & site fonts, paragraphs, body & buttons
We use the Google font ‘Inter‘ at 17px, weight ‘Normal’.
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Secondary colours
The website has an additional 4 colours specified in a global palette.
They are used sparingly but are available for use where deemed appropriate.
The first accent colour is a dark-ish purple. Used in buttons and to define a category section.
Purple
#844E85
R – 132
G – 78
B – 133
C – 54
M – 81
Y – 20
K – 3
The second accent colour is pale gold. Used to define a category section.
Pale gold
#BAA898
R – 186
G – 168
B – 152
C – 27
M – 31
Y – 39
K – 0
The third accent colour is a blue variant. Used to define a category section.
Blue variant 1
#2C73BC
R – 35
G – 115
B – 188
C – 84
M – 52
Y – 0
K – 0
The fourth accent colour is another blue/purple variant. Used to define a category section.
Blue variant 2
#58609C
R – 88
G – 96
B – 156
C – 75
M – 68
Y – 11
K – 1
