Brand & design system · v1 · August 2026

One system, five audiences, every surface.

Everything Fair Farms publishes is drawn from this system: buyers' documents, the grower app, packaging, social and the site you just came from. Unbleached paper, ink hairlines, a single pepper-red action, and certifications treated as content — never decoration.

28Specimen cards

23Components

6UI kits

1Stylesheet

Brand

The seal, its clear space, the certification lockups, the texture set and the voice.

06 cards

Certification lockupsMark + number + audit date, never the mark alone

Clear space & minimum size25% of diameter on all sides; 44px floor

LockupSeal + wordmark with hairline divider

SealOne colour, three permitted finishes — ink, paper, pepper

Pattern & textureHatch, rule set, seal watermark — nothing else

VoicePlain declaratives, named people, sourced numbers

Colors

Unbleached paper, ink, pepper red and the status family — with the pairings that pass.

05 cards

Earth & field accentsLaterite, khaki, leaf, sea, gold — support only

Ink & paperWarm neutrals — the whole system rests on these

Pepper — primarySun-dried red Kampot berry: the only fill for primary actions

Semantic tokensConsume these in UI, never the raw ramp

Status & certification tonesAlways paired with a word — never colour alone

Type

Newsreader for display, Archivo for interface, IBM Plex Mono for every code and number.

05 cards

Display — Newsreader400 weight, negative tracking; authority through size, not bold

Data — IBM Plex MonoLot codes, weights, certificate numbers, coordinates

Multilingual — EN · FR · KHKhmer never italic, never uppercase, +0.15 line-height

ScaleOne step per role — do not interpolate

UI & body — ArchivoLabels, tables, long body; 12px labels track +0.1em

Spacing

The 4px scale, the 12-column grid, the radii and the two shadows the system allows.

04 cards

ElevationHairline first; shadows are warm, shallow and rare

Grid & containers12 columns · 24px gutter · 1200 / 1360 / 68ch

Radius2 · 4 · 6 · 10 · pill — the only circle is the seal

Scale4px base — 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96

Motion

220ms, one easing, fades and short rises — and what each state does.

02 cards

Durations & easing220ms standard, cubic-bezier(.2,.6,.2,1), no bounce

Interaction statesRest · hover · press · focus · disabled

Components

Buttons, forms, badges, data views, feedback, and the form-submission pattern.

06 cards

Badges, tags & lot codesStatus pills, filter chips, traceability codes

Buttonsprimary · secondary · ghost · inverse, three sizes

Table & spec listRules only, mono numerals, 44px rows

FeedbackDialog, toast, tooltip, tabs

FormsInput, select, checkbox, radio, switch — labels always visible

Form submissionValidate on submit · one inline summary · errors stay inline, confirmation is a toast

UI kits

Reference builds, not recreations — each one is the system applied end to end. They are interactive: sign in, order a lot, declare a delivery, send an enquiry.

06 kits

Marketing site fairfarms.com — hero, trust bar, range, traceability, growers, trade enquiry. Open kit → Buyer portal Sign in, live lots, request a quote, order dialog, certificate vault. Open kit → Field app Grower prices and collection, delivery declaration, public lot record. Open kit → Trade documents A4 lot passport and the Q3 price & availability sheet. Open kit → Packaging 100 g jar, 500 g pouch, 25 kg export sack stencil, at real millimetres. Open kit → Social 1080² feed post, 1080×1350 grower story, 1080×1920 story. Open kit →

Files

One stylesheet carries every token. Link it and take colour, type, spacing, radii and shadows from the variables — never hard-code a hex or a px the tokens already hold.

/styles.css: Flattened token sheet — link this
/assets/logos/: The seal in ink, paper and pepper (SVG)
/assets/certifications/: Licensed certification artwork
/assets/photography/: Supplied photographs, graded at use
/brand-system/cards/: The 28 specimen cards, standalone
/kits/: Six reference builds + the component mirror