Design guidelines

Design template download

Below are design guidelines for your micro-site. Click here to view all modules available for use on your new micro-site, and here to download an Adobe XD file of these modules.

Typography

AgriFutures primary typeface: Product Sans

This is the only font to be used on all micro-sites. Access note to go here. How do users access this font?

H1 Heading Style

Font: Product Sans

Weight: Bold

Size: 44px

Leading: 50px

Paragraph Spacing: 15px

Colour: #333333
H2 Heading Style

Font: Product Sans

Weight: Bold

Size: 34px

Leading: 42px

Paragraph Spacing: 15px

Colour: #333333
H3 Heading Style

Font: Product Sans

Weight: Regular & Bold

Size: 24px

Leading: 30px

Paragraph Spacing: 15px

Colour: #333333
H4 Heading Style

Font: Product Sans

Weight: Regular & Bold

Size: 20px

Leading: 26px

Paragraph Spacing: 15px

Colour: #333333
P1 Paragraph Style (for 1 column layouts)

Font: Product Sans

Weight: Regular & Bold

Size: 10px

Leading: 24px

Paragraph Spacing: 15px

Colour: #666666
P2 Paragraph Style (for multi-column layouts)

Font: Product Sans

Weight: Regular & Bold

Size: 16px

Leading: 22px

Paragraph Spacing: 15px

Colour: #666666

Colour

Please use the following colours as your primary colour palette and refrain from introducing any additional colours.

Green

#00B14E

Copied to clipboard

Copy
Charcoal

#333333

Copied to clipboard

Copy
Grey

#666666

Copied to clipboard

Copy
Light Beige

#F8F8F5

Copied to clipboard

Copy
Dark Beige

#F2F1EC

Copied to clipboard

Copy

Need an additional colour?

Our core palette has been designed to meet most use cases while ensuring brand consistency and accessibility. If your project requires an extra accent colour beyond the standard palette please feel free to reach out. We’re happy to collaborate and provide guidance or approve additional colour use where appropriate.

Header

Navigation

Hero module

Lorem ipsum dolor sit amet. Non rerum iusto aut accusantium quam qui galisum omnis in volupt atem corporis. Sed dolor magnam quo error alias qui sunt dolorem sit voluptatibus quibusdam aut repellat commodi eum iste provident. Sed facilis delectus consequ untur et consectetur sequi.