Style guide | GMI Training & Consultancy Ltd

Colour tokens

--navy-900
#0A1C2B

--navy-800
#0F2A40

--navy-700
#16395A

--teal-500
#00A9B7

--teal-600
#00808C

--teal-700
#00666F

--mist
#F4F7F9

--line
#E4E9EE

--ink
#111827

--slate
#4B5563

Rule: teal appears on at most one element per viewport. Teal is never used for body text on white — use --teal-700 for links, and teal fills with navy text for CTAs.

Typography

Hero headline — Manrope 800

Section title — Manrope 800

Sub heading — Manrope 800

Lead paragraph — Inter 400, 18px. Used for the first paragraph of a section or an article.

Body text — Inter 400, 16px with 1.625 line height. The default for everything else on the site.

Eyebrow label

100^%

Stat number and label

Buttons

Primary large Primary Primary small

Navy Outline Arrow link

Primary on navy Outline light

Badges, chips and icon tiles

DefaultTealSolid

Cards

Tag

Card with media

Body copy sits here, followed by an arrow link pinned to the bottom.

Card with icon

Used for values, methods and service summaries.

On•

Session card

3 daysIn-person

Details

Form controls

Text input *

Select

TextareaHelper text sits beneath the field.

Success message state.

Accordion & pull quote

Panel content revealed on click, with keyboard support.

A pull quote carries a teal left border and Manrope weight.Attribution line