Agrii Brand Guidelines — 2026 Refresh

00

Introduction

How this document works

A practical, current account of the Agrii brand system — built from what's live, not from a wishlist. Use it as the source of truth for new design work.

What's new in v2.0

Slate teal #344347 codified as the brand's primary chrome colour, replacing the earlier "supporting dark grey" status.
Lime green #8DC63F promoted to the system's action colour — used on every primary CTA across the live site.
Cyan #2BB4C7 added to the palette for "connect" moments — sign-up bands, top-tier footer, eyebrows.
Yellow #FFD200 reserved exclusively for the Tramlines podcast brand-within-the-brand.
Single web type family (Proxima Nova) replaces the 2021 Futura LT + Memphis LT slab pairing.
New simplified information architecture: 5 top-level entries, mega-menu pattern, 3-item utility bar.
Hero carousel pattern with per-slide accent colour, progress timing, and content-pause-on-hover.
Photography style codified: warm desaturated treatment, three subject categories (Crop / People / Place).

The Agrii system has matured since 2021. Some of that maturation is deliberate; some happened in production as new pages were built. This refresh accepts the live state as the starting point and writes it down before any more drift occurs.

If you are designing for Agrii, this is the spec. Open the document to the chapter that matches what you're making — Patterns for a new web page, Applications for print/email, Misuse before you ship — and follow what's there. Where you need to deviate, log it back and we'll update.

Compared to the 2021 spec, what's gone: the Earth / Water / Growth / Sun four-element metaphor; the Futura + Memphis pairing; the i-plus icon; "Two to the power of you". What's retained: the dark teal as a foundation, the agricultural green personality, the Water Line concept (now expressed as the cyan footer band), and the warm desaturated photography treatment.

01

Chapter one

The Agrii marque

One wordmark, three approved colourways, and a small set of non-negotiable rules. The marque should always feel deliberate — never decorative.

Approved colourways

White on slate Primary — used on all dark chrome (header, footer, dark imagery).

Slate on light Used on white or off-white surfaces. Stationery, documents, print.

White on lime Used sparingly for brand-led moments. Never on text-heavy panels.

Clear space & minimum size

Maintain a clear space equal to the cap height of the 'A' on all sides. Nothing — no rules, no other logos, no body text, no image content — should encroach on this margin.

Minimum size: 24px tall on screen; 12mm tall in print. Below these sizes the wordmark loses legibility and should not be used.

Don't

Agrii

Don't recolour

Agrii

Don't distort

Agrii

Don't box

Agrii

Don't underline

A g r i i

Don't space the letters

Agrii

Don't add shadow

Agrii

Don't place on busy imagery

Agrii

Don't restyle

02

Chapter two

Colour

Four primary brand colours, three workhorse neutrals, and a clear hierarchy of when each gets to speak. Restraint is the rule.

Primary palette

Slate

Chrome · Body text · Foundation

HEX: #344347
RGB: 52, 67, 71
PMS: 5467 C
CMYK: 70 / 50 / 50 / 50

Lime

Action · CTAs · Highlights

HEX: #8DC63F
RGB: 141, 198, 63
PMS: 368 C
CMYK: 50 / 0 / 100 / 0

Cyan

Connect · Sign-up · Eyebrows

HEX: #2BB4C7
RGB: 43, 180, 199
PMS: 319 C
CMYK: 70 / 0 / 20 / 0

Yellow

Tramlines podcast · Only

HEX: #FFD200
RGB: 255, 210, 0
PMS: 116 C
CMYK: 0 / 15 / 100 / 0

Hover & deep variants

Slate Deep #2D3B3E · For panels on imagery

Lime Deep #7AB02E · Button hover state

Cyan Deep #1F9DAE · Cyan button hover

Yellow Deep #E6BD00 · Yellow button hover

Neutrals

Paper #FFFFFF · Surfaces, cards

Off-white #F4F5F2 · Alt section backgrounds

Rule #E1E4DE · Borders, dividers

Muted #6E7A7D · Secondary text

Secondary accents

Two soft accents carried forward from the 2022 palette update. They are for editorial and data moments only — charts, report sections, campaign call-outs — never for primary CTAs or navigation, which stay lime. Use sparingly and never together with yellow on the same spread.

Heather Purple #B68EB4 · RGB 182 142 180 · editorial / charts

Rose Pink #E07CA0 · RGB 224 124 160 · editorial / charts

Usage budget

Colour	Approx. proportion per screen	Distribution
Paper / Off-white	60–70%
Slate (chrome & text)	15–25%
Imagery	8–15%
Lime (CTAs & highlights)	3–5%
Cyan (connect moments)	2–4%
Yellow (Tramlines only)	≤ 1%

Accessibility. All primary text combinations meet WCAG AA at body sizes. Slate-on-paper achieves 11.2:1. White-on-slate achieves 9.7:1. Lime-on-paper does not meet AA for body text — use lime as decoration, never as the colour of small text.

03

Chapter three

Typography

One geometric sans, used with weight contrast and tight letter-spacing on display sizes. Italic emphasis carries the brand voice — use it once per headline.

Primary family: Proxima Nova — served via Adobe Typekit on the web. The 2021 Futura LT + Memphis LT pairing has been retired; Proxima Nova handles both display and body roles.

Fallback stack: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif

Weights in use: Regular (400), Semibold (600), Bold (700). Avoid Light and Black weights — they make the brand feel either weak or shouting.

Type scale

Display 72 / 76 · -0.015em
Bold (700)

Advancing sustainable farming.

H1 48 / 52 · -0.012em
Bold (700)

Tackling rising costs with smarter margins.

H2 32 / 36 · -0.005em
Bold (700)

Find a specialist on your soil, in your season.

H3 24 / 28
Bold (700)

120,000 plot trials a year

H4 17 / 22
Bold (700)

Variety choice, drilling rates and disease pressure.

Lede 19 / 30
Regular (400)

Research-backed advice, market-leading inputs and the digital tools to put them to work — so every field decision pays back across the season.

Body 16 / 26
Regular (400)

Over 200 BASIS- and FACTS-qualified agronomists across the UK — paired by region, crop and farm size so you get advice that lands.

Eyebrow / Kicker 12 / 16 · 0.18em
Bold uppercase

Spring 2026 — Plan with confidence

Contextual pairings

Editorial

Real conversations with the people shaping British farming.

Display headline + italic-emphasised key phrase. One italic per heading, never two.

Service

Crops & Seeds

Short bold heading paired with muted body copy. No italic; let the rhythm carry it.

Promotional

See this season's trial results at an iFarm near you.

Mid-size headline with strong CTA below. Used in carousel slides and bands.

Utility

Find Your Local Agronomist

Bold uppercase with letter-spacing. Used on every CTA button across the site.

Five rules

1. One italic per headline. The italic emphasis is the brand's voice signal — overusing it dilutes it. Pick the most resonant phrase and italicise that.

2. Tight tracking on display. Headlines 32px and up use letter-spacing: -0.005em to -0.015em to keep the geometric sans looking confident, not stretched.

3. Eyebrows in lime (or accent colour). Cyan eyebrows for cross-section labels; lime for hero/CTA contexts; never both at once.

4. No all-caps body copy. All-caps is reserved for eyebrows, buttons, and utility nav. Body and headlines stay in sentence case.

5. Don't pair Proxima Nova with another typeface. If a different feel is needed (academic, editorial flourish), use a typographic device — italics, weight contrast, scale — not a second family.

04

Chapter four

Layout

An 8-step spacing scale, a 12-column grid that breathes, and five clear breakpoints. The container is always 1280px maximum — beyond that, content breathes against the canvas.

Spacing scale

4pxTight gap

8pxInline gap

12pxForm padding

16pxCard inner

24pxContainer

40pxSection

56pxChapter

96pxBand padding

12-column grid

1

2

3

4

5

6

7

8

9

10

11

12

Sidebar / 4 cols

Main content / 8 cols

Card

Standard layouts: 4-card row (3 + 3 + 3 + 3), sidebar + content (4 + 8), two-column (6 + 6). Gutter is 20px between columns; section padding is 56px vertical on desktop, scaling down to 40px on mobile.

Breakpoints

Breakpoint	Range	Container	Behaviour
Mobile	< 480px	Fluid, 16px padding	Single column · stacked cards · drawer nav
Mobile L / Tablet	480 – 820px	Fluid, 24px padding	2-column cards · drawer nav · hero panel full-width
Tablet L	820 – 1100px	Fluid, 32px padding	3-column cards · mega-menu still drawer · hero panel max 540px
Desktop	1100 – 1280px	1280px max, 32px padding	4-column cards · hover mega-menu · full hero panel
Wide	> 1280px	1280px max, centered	Same as desktop · content breathes against canvas

05

Chapter five

Components

The atomic building blocks. Each component is calibrated for the system's voice — sharp corners, generous padding, bold uppercase action labels.

Buttons

Primary action (lime) — the system's workhorse. Use for the most important CTA on any page.

Cyan action — used in "connect" contexts: sign-up, contact, download. Rare in primary positions.

Yellow action — Tramlines podcast only. Never use yellow elsewhere.

Ghost button — secondary action when a primary lime button is already present.

Button specifications: 13px bold uppercase, 0.06em letter-spacing, 13/28px padding, 2px corner radius, no shadow. Hover deepens the colour by one shade.

Card & sign-up

Cereals

Wheat, barley, oats — variety choice, drilling rates and disease pressure.

Service card · 4 / 3 image ratio

The latest, straight from the field.

Weekly briefings — trial highlights, seasonal alerts and the Tramlines drop.

Sign-up specimen · Cyan band

Navigation

Contact Search

Agrii

Crops & Seeds
Services
R&D & Trials
Advice & Insights
About

Primary navigation · 5 entries · 3-item utility

06

Chapter six · New in v2.0

Web patterns

Two new patterns introduced in v2.0 — the hero carousel and the mega-menu — anchor the brand's contemporary web feel.

Hero carousel

Spring 2026 — Plan with confidence

Advancing sustainable farming with expert agronomy.

Research-backed advice, market-leading inputs and the digital tools to put them to work — so every field decision pays back across the season.

Find Your Local Agronomist

Hero carousel · 4 slides · 6.5s rotation · lime progress bar

Backdrop Full-width photography with a 100° left-to-right slate gradient to keep panel contrast at 9:1+.

Panel Slate-deep at 82% opacity with 4px lime left border. Max 540px, aligned bottom-left.

Kicker 12px uppercase, 0.18em tracking. Lime by default, cyan for "connect" slides, yellow for Tramlines.

Headline 40/44px bold with one italicised key phrase in the slide's accent colour.

CTA Solid button in slide's accent colour. Uppercase 13px bold.

Progress 3px lime bar across full hero bottom edge. Pause-on-hover. Per-slide auto-rotate every 6.5s.

Mega-menu

Mega-menu · 3-column · 3px lime top border · slate promo tile

Page patterns library

P01

Hero carousel

4 rotating slides with per-slide accent colour, progress bar, pause-on-hover, keyboard navigation, localStorage persistence.

P02

Service row

Left-side label column (eyebrow + heading + intro + view-all link) with 4-card grid on the right. Alternating paper/off-white backgrounds.

P03

Full-bleed band

Photography backdrop with slate gradient overlay, narrow text column on left, single CTA. Used between service rows for rhythm.

P04

Sign-up strip

Cyan band, two-column layout: heading + lede on left, email field with slate submit button on right. One per page maximum.

P05

News grid

4 cards with thumbnail, cyan uppercase meta, bold heading, lime "Read article →" link. Aspect 16:10 thumbnails.

P06

Two-tier footer

Cyan top band with logo + tagline + lime circle socials. Slate bottom band with 5-column sitemap and legal strip.

07

Chapter seven

Photography

Three subject categories, one treatment recipe, one composition rule. Real fields, real people, real work — never stock.

Three subject categories

Crop Fields, varieties, stages — the work itself.

People Agronomists, researchers, farmers in context.

Place Tramlines, machinery in action, R&D sites.

Treatment recipe

Lightroom / Photoshop pass

Sharpen: +30 (medium radius) for foreground detail.
Saturation: −8 to −12% across the board.
Vibrance: −5% to keep greens grounded, not neon.
Exposure: lift midtones +4 to +6 for an open, optimistic feel.
White balance: warm by +100K to +200K (4750K → 4900K).
Vignette: subtle, −15 amount, 60% feather, 50% midpoint.
Grain: optional +6 for the editorial-print feel.
Crop: leave negative space on the left third for overlay panels.

Composition rule

Always reserve the left third for an overlay panel. The Agrii hero treatment depends on dark photography on the left bleeding to lit photography on the right — the slate gradient overlay needs space to land. Shots that put the subject dead-centre or in the left third won't survive the overlay treatment. Brief photographers accordingly.

Subjects to avoid: studio shots with seamless backgrounds; over-staged group photos; aerial drone shots without a human-scale element; close-up product shots of containers/bags (we sell expertise, not packaging).

08

Chapter eight

Motion

Motion is functional, never decorative. Six patterns cover everything from hover states to the carousel timing.

Pattern	Duration	Easing	CSS
Button hover Colour change on CTAs and links	150ms	ease	`transition: background 0.15s ease;`
Card lift Service / news card hover	200ms	ease	`transition: box-shadow 0.2s ease, transform 0.2s ease;`
Mega-menu open Hover-or-click reveal	180ms	ease-out	`transition: opacity 0.18s ease-out, transform 0.18s ease-out;`
Carousel cross-fade Background image transition	700ms	ease	`transition: opacity 0.7s ease;`
Carousel content fade 150ms delayed after backdrop	500ms	ease (delay 150ms)	`transition: opacity 0.5s ease 0.15s;`
Progress bar tick Per-frame width update via rAF	100ms	linear	`transition: width 0.1s linear;`

Reduced motion. All motion must respect prefers-reduced-motion: reduce. When this preference is set, disable the carousel auto-rotation, remove the cross-fade, and let images appear instantly. The progress bar should hide rather than animate.

Never animate: colour of body text on hover; the logo; eyebrows; primary navigation items (only their underline). Page-level entrance animations are not part of the system — pages should feel solid on landing, not flashy.

09

Chapter nine

Voice & tone

Agrii speaks to working agronomists and farmers. The voice is expert without being academic, plainspoken without being folksy, confident without being marketing-y.

Four pillars

Expert

BASIS-qualified, science-led, 120,000 plot trials a year. Show the work — don't just claim authority.

Practical

Every sentence pays back on the farm. No advice that can't be acted on this season.

Plainspoken

Industry shorthand is fine (CSFB, OSR, BASIS, SFI). Marketing speak isn't. Write how an agronomist talks at a farm gate.

Confident

Direct claims, specific numbers. Avoid hedge words ("might help", "could potentially") — they signal weakness.

Sounds like Agrii / Doesn't

Sounds like Agrii

"Find your local agronomist."
"120,000 plot trials a year — independent, replicated, applied within the same season."
"Variety choice, drilling rates and disease pressure."
"Walk the plots, talk to the agronomists who ran them, and take home variety and rate decisions for your farm."
"Real conversations with the people shaping British farming."
"Twelve sites across the UK from June through September."

Doesn't sound like Agrii

"Discover your perfect agronomy partner."
"Industry-leading trials data to maximise your yield potential."
"Comprehensive crop solutions across the full variety spectrum."
"Join us at one of our exciting events to network with thought leaders."
"Insightful conversations with key influencers in the agricultural space."
"Multiple locations available across the United Kingdom."

Brand vocabulary

Use these words. They earn their keep.

agronomist BASIS-qualified FACTS-qualified plot trial iFarm variety drilling rotation tramline rate season field margin independent replicated research-backed specialist local region soil yield input protocol recommendation

10

Chapter ten

Applications

The system applied to three reference surfaces. Use these as starting points — not templates to copy directly.

Insight Report · 2026

Margin Pressures: where input costs are heading.

Four levers proven on iFarm trials this season.

Download

Report cover

Agrii

This week from the field

Three things to check before drilling OSR.

Plus the season's iFarm wheat variety results and a new Tramlines episode.

Read this week

Email briefing

Event banner

Cross-surface consistency: regardless of the surface, three things hold — the slate foundation, the lime CTA, and one italic phrase per headline. Surfaces missing all three will feel off-brand even if they hit every other rule.

Surfaces this document doesn't cover yet (and should in the next revision): vehicle livery; social-card templates (LinkedIn, X, Instagram); business cards; trade-stand graphics; conference deck templates; on-farm signage. If you need a reference for any of these before the next revision lands, contact The Ad Plain.

11

Chapter eleven

Misuse

Fifteen ways to make the system feel wrong. Read this chapter before signing off any new piece of work.

Colour traps

Using yellow on anything other than Tramlines podcast assets.
Mixing lime and cyan as primary CTAs on the same screen — pick one.
Using lime as a body-text colour. It fails accessibility checks.
Backgrounding a section in pure black or pure white instead of slate or off-white.
Reintroducing pink, purple, or warm beige washes from earlier internal experiments.

Typography traps

Pairing Proxima Nova with a second display family.
Using Light or Black weights — both feel wrong for the brand.
Italicising more than one phrase per headline.
All-caps body copy. Reserved for eyebrows and buttons only.
Stretching tracking on display sizes (positive letter-spacing).

Layout & tone traps

Putting a full hero panel in the centre — the system is built for left-third.
Rounded corners above 4px — buttons and cards are crisp.
Drop shadows on anything other than mega-menus and lifted cards.
Generic stock photography. Use real Agrii imagery only.
Marketing-speak. Replace "discover", "unlock", "revolutionise" with what the thing actually does.

A 2026 refresh of the Agrii visual system — codified from the live web product.

How this document works

What's new in v2.0

The Agrii marque

Approved colourways

Clear space & minimum size

Don't

Colour

Primary palette

Hover & deep variants

Neutrals

Secondary accents

Usage budget

Typography

Type scale

Contextual pairings

Real conversations with the people shaping British farming.

Crops & Seeds

See this season's trial results at an iFarm near you.

Find Your Local Agronomist

Five rules

Layout

Spacing scale

12-column grid

Breakpoints

Components

Buttons

Card & sign-up

Cereals

The latest, straight from the field.

Navigation

Web patterns

Hero carousel

Advancing sustainable farming with expert agronomy.

Mega-menu

By crop

Tools

2026 Winter barley variety guide

Page patterns library

Hero carousel

Service row

Full-bleed band

Sign-up strip

News grid

Two-tier footer

Photography

Three subject categories

Treatment recipe

Lightroom / Photoshop pass

Composition rule

Motion

Voice & tone

Four pillars

Sounds like Agrii / Doesn't

Sounds like Agrii

Doesn't sound like Agrii

Brand vocabulary

Use these words. They earn their keep.

Applications

Margin Pressures: where input costs are heading.

Three things to check before drilling OSR.

See this season's trial results.

Misuse

Colour traps

Typography traps

Layout & tone traps

Use it. Add to it. Push back on it.