The ProAgri Media identity
Our logo, colours and type, and how to use them. Partners and press are welcome to use the files below to refer to ProAgri Media.
Logo
The mark is a sun rising over three ploughed furrows, drawn to stay legible at favicon size. The ProAgri wordmark is hand-built from simple geometry rather than set in a font, so it looks the same everywhere. The i is dotted with a leaf.
Clear space and minimum size
- Clear space: at least X on every side, where X is half the mark's height.
- Full logo: no smaller than 24px tall on screen, or 10mm in print. Below that, use the mark.
- Mark: no smaller than 16px (it is the favicon at that size).
- Placement: centred in the site masthead; top-left elsewhere.
Colour
ProAgri Red leads, as it has on the magazine for years. Soil Ink and Newsprint give the site its editorial, printed feel. Field Green and the earth tones are supporting accents for agriculture; use them sparingly.
Core
- ProAgri Red
#d7141a--redLogo, links, primary buttons, kickers - Soil Ink
#1a1712--inkHeadlines and body text - Newsprint
#faf7f0--paperPage background - White
#ffffff--cardCards, header, form fields
Supporting
- Deep Red
#a80f14--red-darkHover and pressed states, red text on tints - Ink 2
#3b372f--ink-2Long-form body copy - Stone
#625d53--mutedCaptions, meta, hints - Rule
#e4ded1--lineDividers and borders - Night
#14120e--darkFooter, top bar, newsletter band - Dust
#bdb6a8--on-dark-mutedSecondary text on Night
Agriculture accents
- Field Green
#2f6b2a--leafThe logo leaf, badges, positive results - Sprout
#6fae4f--leaf-brightThe logo leaf on dark backgrounds (not for text) - Earth
#8a5a2b--earthIllustration, soil - Harvest Sun
#e8a317--sunIllustration and rules (never text)
Contrast
Every text and background pair used on this site, with its WCAG 2.1 contrast ratio. Body text needs 4.5:1 (AA); large text and graphics such as the logo need 3:1.
| Sample | Text / background | Used for | Ratio | Needs |
|---|---|---|---|---|
| Aa | --ink on --paper | Body text and headlines | 16.70:1 | Pass 4.5:1 |
| Aa | --ink on --card | Text on cards and the header | 17.86:1 | Pass 4.5:1 |
| Aa | --ink-2 on --paper | Long-form guide copy | 11.06:1 | Pass 4.5:1 |
| Aa | --muted on --paper | Meta, captions, hints | 6.11:1 | Pass 4.5:1 |
| Aa | --muted on --card | Hints inside calculator panels | 6.54:1 | Pass 4.5:1 |
| Aa | --red on --card | Links and CTAs on cards | 5.24:1 | Pass 4.5:1 |
| Aa | --red on --paper | Links and kickers on the page | 4.90:1 | Pass 4.5:1 |
| Aa | --red-dark on --paper | Link hover | 7.15:1 | Pass 4.5:1 |
| Aa | --on-red on --red | Primary button | 5.24:1 | Pass 4.5:1 |
| Aa | --on-red on --red-dark | Primary button, hover | 7.65:1 | Pass 4.5:1 |
| Aa | --red-dark on --red-tint | Over-limit callout | 6.70:1 | Pass 4.5:1 |
| Aa | --leaf on --leaf-tint | Badges, within-limit callout | 5.56:1 | Pass 4.5:1 |
| Aa | --leaf on --card | Green headings on cards (brand page) | 6.44:1 | Pass 4.5:1 |
| Aa | --ink on --warn-tint | Caution callout | 16.60:1 | Pass 4.5:1 |
| Aa | --on-dark on --dark | Footer links, top bar, newsletter band | 16.59:1 | Pass 4.5:1 |
| Aa | --on-dark-muted on --dark | Footer and newsletter body text | 9.28:1 | Pass 4.5:1 |
| Aa | --red-on-dark on --dark | Footer link hover | 6.74:1 | Pass 4.5:1 |
| Aa | --on-dark on --ink | Selected guide filter | 15.85:1 | Pass 4.5:1 |
| Aa | --red on --dark | "Agri" in the reversed logo | 3.56:1 | Pass 3:1 (graphic) |
| Aa | --leaf-bright on --dark | Leaf in the reversed logo | 6.98:1 | Pass 3:1 (graphic) |
Typography
Source Serif 4
Headlines and pull quotes. A sturdy, readable serif that carries the magazine's editorial voice.
Inter
Body, navigation, buttons, labels and every number in the calculators. Kickers are Inter extra-bold, in capitals.
--text-3xl44pxPage and lead-story headlines--text-2xl34pxSection headlines--text-xl28pxCard headlines--text-lg22pxSub-heads--text-md18pxGuide body copy--text-base16pxInterface text--text-sm14pxMeta, captions--text-xs12pxKickers and labels (bold caps)
Do and don't
Do
- Use the SVG files as supplied.
- Use the full-colour logo on Newsprint or white, and the reversed logo on Night or dark photography.
- Keep the clear space, and scale the logo in proportion.
- Let red lead, with green as a small accent.
Don't
- Retype the wordmark in a font, or re-colour, stretch, rotate or outline it.
- Put the full-colour logo on red, or on a busy photo without a dark overlay.
- Separate “MEDIA” from the wordmark, or add effects such as shadows or gradients.
- Use Harvest Sun or Sprout for text; they are for graphics only.