Components & patterns
The bridge between the brand decisions in the rest of this guide and the working product. Every primitive on this page is the canonical version — buttons, fields, cards, spacing, icons. Anything you build in marketing, in the app, on a sticker, or in an email signs off against these.
The locked strapline
Display variant for hero / OG / single-line use. The body refrain (period form) is documented on the Brand page.
Farming is hard enough.
Tag it, don’t blag it.
Hero · OG image · email signature · social bios · printed tags
Display variant · single line
Farming is hard enough. Tag it, don’t blag it.
Body refrain · with setup
Stop the 3am count. Tag it. Don’t blag it.
Type scale · Perfect Fourth, fluid
Base 1rem = 16px. Display + H1 + H2 fluid via clamp(). Anton for display, Hanken Grotesk for body, JetBrains Mono for labels.
Buttons · four variants × three sizes
Primary used sparingly — at most one per viewport. Secondary for the dual CTA pair. Ghost for tertiary actions and nav. Danger reserved for destructive flows.
States
Form fields · labels, inputs, helpers, errors
Mono uppercase labels. 48px minimum height — gloves and dirty fingers. Forest-green focus ring. Error state in semantic red with inline message.
We’ll never sell this. Promise.
That doesn’t look like a UK phone number.
Submit row · in voice
Submit copy follows brand voice: Send, Send it, Order tags. Never Submit, Get started today, or Click here.
Surfaces · paper, card, forest, ink
Five surface tones, four jobs. Paper for the page default. Card for raised content. Paper-2 for section bands. Forest for feature blocks. Ink for app dark / banners.
Spacing scale · 4px base, REM tokens
Tailwind’s default 0.25rem-base scale, adopted verbatim. Body = 1rem = 16px on both LP and app. The scale travels between products unchanged.
Icons · Lucide, curated for AgTag
Lucide is the locked icon set — clean, utilitarian, 24×24, 2px stroke, round caps. ~1,500 icons available; the curated working set below is what the landing and the app draw from. Default size 1rem inline · 1.25rem on buttons · 2rem on feature blocks.
Badges · small but telling
Mono uppercase. Used for tier labels in pricing, status pills in the app, and tag overlays on photography.