# Brand Guidelines - Full Content Version 1.0 - 2026 | DairyBook KE Limited | [dairybook.app](http://dairybook.app) --- ## 01 - Brand Foundations DairyBook is an offline-first farm ERP for small and medium-scale dairy farmers and cooperatives across Sub-Saharan Africa, with Kenya as primary market. The brand must feel trusted, practical, and deeply local - not corporate. Every design decision should reflect the world it serves: the field, the milking parlour, the cooperative collection centre. | | | |--------------------|----------------------------------------------------------------------------------------------------------------------------------| | **Mission** | Replace handwritten farm records with reliable digital tools that work everywhere - even where the internet does not. | | **Positioning** | The complete offline-first ERP for modern dairy. Serious enough for a cooperative, simple enough for a 10-cow farm. | | **Primary Market** | Kenya - with a growth path across Sub-Saharan Africa. County-level specificity (Uasin Gishu, Kiambu, Nakuru) matters to farmers. | | **Core Promise** | Works fully offline. Syncs automatically. Nothing is ever lost - whether the farmer has 4G or no signal at all. | --- ## 02 - Logo & Wordmark The DairyBook wordmark is a two-tone logotype. "Dairy" in deep green anchors the agricultural heritage; "Book" in the DairyBook green signals the digital record-keeping nature of the product. The sub-label "Farm Management" appears beneath in spaced capitals where space allows. **Logo Variants** | Variant | Preview | Description | Background | |-----------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------|----------------------| | Light | DairyBook | "Dairy" in #0a4a28, "Book" in #00783b | White | | Dark / Reversed | DairyBook | "Dairy" in white, "Book" in #5cbd86 | #171717 (dark theme) | | Monochrome | DairyBook | "Dairy" in #444444, "Book" in #888888 | Off-white | **App icon** The app icon places the Friesian cow over the highland landscape, in three container shapes. Each is provided as **SVG** and **PNG**: - **SVG** - vector; scales to any size with no blur. Use for the web, print, large displays and any slot that accepts vector. - **PNG** - rasterised at 512px; universally supported. Use for app-store icon uploads, social / OG images, email and favicons. | Icon | Name | Download | Purpose | |--------------------------------------------------------------------------------------------------------------------------------------|--------------|----------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------| | DairyBook squircle icon | **Squircle** | Download SVG
Download PNG | App icons, Favicons | | DairyBook circle icon | **Circle** | Download SVG
Download PNG | Adaptive icons, social media avatars | | DairyBook square icon | **Square** | Download SVG
Download PNG | Favicons, OG / social images | **Do** Always use the two-tone split. Use the reversed version on dark or green backgrounds. Maintain the "Farm Management" sub-label where space allows. **Do not** Never stretch, rotate, recolour, or add effects to the wordmark. Do not use the logo on busy photographic backgrounds without a clear-space buffer. --- ## 03 - Colour Palette The app and website share **one palette** - a deep dairy green (`#00783b`) with a golden-amber accent, on neutral surfaces. Values below are the live tokens from `app/lib/theme/app_colors.dart`, mirrored in `wst/src/app.css`. **Brand & accent** | Role | Hex | Use | |-----------------------|---------|-------------------------------------| | Primary green | #00783b | Brand colour, primary actions, CTAs | | Primary - dark mode | #2faa5e | Brightened green on dark surfaces | | Brand soft tint | #e2f1e9 | Selected / success-tint backgrounds | | Accent (gold / amber) | #e7a542 | Secondary accent, highlights | | Info blue | #185abd | Informational accents | **Surfaces & text (light)** | Role | Hex | Use | |-----------------------|---------|--------------------------------| | Page background | #ffffff | Scaffold / page background | | Surface (cards) | #fafafa | Cards, sheets, inputs | | Muted surface | #f5f5f5 | Subtle section fills | | Chrome (nav / header) | #000000 | Bottom nav / action dock (app) | | Text primary | #171717 | Body, headings | | Text secondary | #525252 | Labels, captions | | Text muted | #a3a3a3 | Hints, placeholders | | Border / divider | #e5e5e5 | Dividers, outlines | **Surfaces & text (dark)** | Role | Hex | Use | |------------------|---------|----------------------------| | Background | #171717 | Scaffold / page background | | Surface (raised) | #262626 | Cards, sheets | | Recessed / wells | #0a0a0a | Code, inputs, footer | | Text primary | #fafafa | Body, headings | | Text secondary | #d1d1d1 | Labels, captions | | Text muted | #737373 | Hints, placeholders | | Border / divider | #404040 | Dividers, outlines | > The website implements the greens as a Tailwind `brand-50…950` ramp (see §10); `brand-700` is `#00783b` and `brand-400` is `#2faa5e`. --- ## 04 - Typography DairyBook's type system favours **clarity at small sizes and on low-end screens** over decorative warmth. **Asap** - a friendly, slightly condensed humanist sans - carries nearly everything: UI copy, labels, and headings alike. A small set of supporting faces handle specific jobs: **Gabarito** for big marketing display moments, **Gochi Hand** for a single playful "try the demo" accent, **Noto Serif** for long-form legal reading, and **JetBrains Mono** for IDs, numbers and data-dense tables. On mobile/desktop the app deliberately uses the **device system font** for body copy (no webfont is fetched on device - it renders natively and stays offline-friendly); the web build loads Asap. ### Typefaces in use | Family | Role | Where | Google Fonts | |--------------------|--------------------------------------------------------------|----------------------|----------------------------------------------------------------------------------------------| | **Asap** | Primary UI + headings (body, labels, captions, H1–H4) | App (web) & website | [fonts.google.com/specimen/Asap](https://fonts.google.com/specimen/Asap) | | **Gabarito** | Marketing display - hero titles only | Website | [fonts.google.com/specimen/Gabarito](https://fonts.google.com/specimen/Gabarito) | | **Gochi Hand** | Handwriting accent - the "Interactive Demo" callout | Website | [fonts.google.com/specimen/Gochi+Hand](https://fonts.google.com/specimen/Gochi+Hand) | | **Noto Serif** | Long-form reading - legal documents (privacy, terms, DPA) | Website | [fonts.google.com/specimen/Noto+Serif](https://fonts.google.com/specimen/Noto+Serif) | | **JetBrains Mono** | Monospace - IDs, numeric values, tables, farmer IDs (§18) | App | [fonts.google.com/specimen/JetBrains+Mono](https://fonts.google.com/specimen/JetBrains+Mono) | | *System font* | App body copy on device (iOS San Francisco / Android Roboto) | App (mobile/desktop) | - (platform native) | | **Lexend** | Accessibility opt-in - dyslexia-friendly text mode | App | [fonts.google.com/specimen/Lexend](https://fonts.google.com/specimen/Lexend) | **Web embed** - the exact stylesheet the website loads (off the critical path, with `display=swap`): ```html ``` Weights loaded: **Asap** 400 / 500 / 600 / 700 / 800 · **Gabarito** 600 / 700 / 800 / 900 · **Gochi Hand** 400 · **Noto Serif** 400 / 600 / 700 (+ italics). The app pulls Asap and JetBrains Mono via the `google_fonts` Flutter package. ### Type scale (app - Material text theme) These are the literal sizes the Flutter client ships (`app/lib/theme/text_styles.dart`). The base body/input size is **14.6px**; the scale is otherwise on an 11 → 32px ramp. | Role | Family | Weight | Size | Use | |--------------------|----------------|-----------------|--------------------|----------------------------------------| | Display L / M / S | Asap | 500 / 500 / 600 | 20 / 24 / 20px | Stat numbers, farm names, big figures | | Headline L / M / S | Asap | 500 / 600 / 600 | 24 / 20 / 16px | Page titles, section heads | | Title L / M / S | Asap | 500 / 500 / 600 | 16 / 14.6 / 14.6px | Card titles, list headers | | Body L / M | Asap | Regular 400 | 14.6px | Table content, form values, input text | | Body S | Asap | Regular 400 | 12px | Secondary body, dense rows | | Label L / M | Asap | Regular 400 | 14.6px | Buttons, field labels, nav sections | | Label S / Caption | Asap | Regular 400 | 11px | Timestamps, badges, secondary info | | App bar title | Asap | SemiBold 600 | 16px | Screen titles | | Nav bar label | Asap | Medium 500 | 12px | Bottom-nav item labels | | Mono | JetBrains Mono | Medium 500 | inherits | IDs, numbers, code, tables | ### Type scale (website) The marketing site is utility-driven (Tailwind). Headings (H1–H4) use Asap with `line-height 1.15` and `-0.02em` tracking; body runs at `line-height 1.6`. | Role | Family | Weight | Size | Use | |-------------------------|------------|---------------|----------------------------------------------|----------------------------| | Hero display | Gabarito | ExtraBold 800 | 36 → 72px (responsive `text-4xl`→`text-7xl`) | Landing hero title | | Section heading | Asap | 700–800 | per Tailwind step | Section + card titles | | Eyebrow / kicker | Asap | Bold 700 | 12px (`text-xs`), `0.08em` uppercase | Pill labels above sections | | Body | Asap | Regular 400 | ~16–19px | Paragraph copy | | Demo callout | Gochi Hand | Medium 500 | 30px (`text-3xl`) | "Try our Interactive Demo" | | Legal body | Noto Serif | Regular 400 | 1.05rem, `line-height 1.7` | Privacy / Terms / DPA copy | | Legal H1 / H2 / H3 / H4 | Noto Serif | Bold 700 | 2.25 / 1.6 / 1.3 / 1.1em | Legal document headings | ### Specimen previews On the web ([dairybook.app/brand-guidelines](https://dairybook.app/brand-guidelines)) each line below is rendered live in its own typeface. - **Asap** - Amina produced 24 L today, her highest this week. 0123456789 (400 · 500 · 600 · 700 · 800) - **Gabarito** - Manage your whole dairy farm from your phone. (600 · 700 · 800 · 900) - **Gochi Hand** - Try our Interactive Demo (400) - **Noto Serif** - This Data Processing Agreement governs the handling of farm records. (400 · 600 · 700) - **JetBrains Mono** - A-114 · 24.0 L · KES 47,600 (400 · 500) - **Lexend** - Accessibility-friendly, dyslexia-tuned reading mode. (400 · 500 · 700 · 900) --- ## 05 - UI Components ### Buttons | Variant | Colour | Use Case | |--------------|-----------------------------|----------------------------------------------------------| | Primary | Dairy Green #00783b | Main actions: adding records, saving data. One per view. | | Accent | Amber #e7a542 | Highlights, secondary emphasis, value moments. | | Outline | Green stroke on transparent | Secondary actions: filter, view all, export. | | Destructive | #bc1947 | Delete / dangerous actions. | | Ghost / Text | Border or text only | Cancel, dismiss, low-priority. | ### Status Badges Semantic colours, shared by app and web (`app/lib/theme/app_colors.dart` · `wst/src/app.css`). | Badge | BG Colour | Text Colour | Use For | |-------------|-----------|-------------|------------------------------------------| | Success | #dcf5e6 | #127d44 | Lactating, recovering, complete, healthy | | Warning | #fff4dc | #d93c01 | Monitor, upcoming, dry, low alert | | Destructive | #fce7e7 | #bc1947 | Urgent, ongoing illness, critical alert | | Info | #e3f0ff | #185abd | Scheduled, normal yield, informational | | Neutral | #e5e5e5 | #525252 | Default chips, inactive | --- ## 06 - Spacing & Layout An 8pt base scale with 4pt half-steps (`app/lib/theme/app_spacing.dart`). All spacing, radius and sizing values are taken from these tokens. | Token | Value | Use Case | |-------|-------|--------------------------------------------| | xxs | 2px | Hairline gaps, micro spacing | | xs | 4px | Icon gaps, tight inline spacing | | sm | 8px | Badge padding, tight component gaps | | md | 12px | Form rows, card grid gap | | lg | 16px | Card padding, section gaps, screen padding | | xl | 24px | Section padding | | xxl | 32px | Large section breaks | | xxxl | 48px | Page-level spacing | **Radii:** xs 4px · sm 6px · md 8px · lg 12px · xl 16px · pill 999px. **Sizing:** button 40px · input 48px · tab bar 48px · app bar 56px · bottom nav 64px. **Icons:** 16 / 20 / 24 / 32px. --- ## 07 - Voice & Tone DairyBook speaks like a knowledgeable farm manager - not a startup, not a government form. The voice is practical, direct, and warm. It uses the language of the farm, not the language of software. ### Practical & specific Use real farm language. Name the cow, state the quantity, give the date. Avoid vague system-speak. > *"Amina produced 24 L today - her highest this week." Not: "Record updated successfully."* > ### Direct, not alarming Alerts are useful, not scary. State the fact and the action needed. Reserve urgency for genuinely urgent situations. > *"Vaccination due in 3 days - schedule with your vet." Not: "CRITICAL: Action required immediately."* > ### Locally grounded Reference Kenyan context naturally - M-Pesa, KES, cooperatives, county names. Do not genericise. > *"Collect payment via M-Pesa or record a cash sale." Not: "Multiple payment methods supported."* > ### Calm offline confidence Never apologise for the connection state. Frame offline as a feature. Sync is automatic. > *"Saved locally. Will sync when you are back online." Not: "No internet - some features unavailable."* > --- ## 08 - Imagery & Iconography | Area | Guidance | |-------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | Photography | Real farms, real farmers, real animals. Morning light in the highland. Hands on animals, phones in pockets. Cooperative collection centres. No posed stock photography. | | Icons | Use emoji as functional pictograms in the app UI. For marketing materials, move to clean line icons. Never mix icon styles in the same context. | | App Screenshots | Always use real Berur Dairy data in pilot-phase screenshots. No placeholder cows. The pilot farm IS the product story. | | Colour in imagery | Photos should tonally complement the green palette - highland grass, morning mist. Avoid heavy filters. Natural colour temperature preferred. | --- ## 09 - Social Media & Content DairyBook is active on Facebook, Instagram, WhatsApp Business, LinkedIn, YouTube, and TikTok. Each platform has a distinct register - but all share the same brand voice and visual identity. Bilingual content (English + Swahili) is intentional, not optional. | Platform | Register | Content Focus | |---------------------|--------------------------------|----------------------------------------------------------------| | Facebook / WhatsApp | Community, warm, bilingual | Farmer stories, tips, cooperative news, Swahili posts | | Instagram / TikTok | Visual, energetic, demo-driven | Farm life, app walkthroughs, before/after record-keeping | | LinkedIn | Professional, sector-focused | Cooperative partnerships, agri-tech, investor/partner audience | | YouTube | Educational, tutorial | Feature demos, farm setup guides, testimonials | **Content that works:** "Zana moja. Shamba lote. DairyBook inafanya kazi hata bila mtandao." - bilingual posts that feel native, not translated. Lead with the farmer's reality. **Content to avoid:** Generic agri-tech announcements. Press-release tone. Posts that could be from any startup. No " Excited to announce" openers. --- *DairyBook KE Limited - 30100 - Eldoret, Kenya - [dairybook.app](http://dairybook.app) - 2026* --- ## 10 - Colour Values The full digital specification taken from code, as HEX. **Brand green ramp** (Tailwind `brand-*` on web; `brand-700` is the app's primary) | Stop | HEX | |------|---------| | 50 | #e6f4ec | | 100 | #c4e7d1 | | 200 | #94d3ae | | 300 | #5cbd86 | | 400 | #2faa5e | | 500 | #0c9049 | | 600 | #008340 | | 700 | #00783b | | 800 | #045f31 | | 900 | #0a4a28 | | 950 | #042e18 | **Accents, neutrals & semantics** | Colour Name | HEX | |------------------------|---------| | Amber (accent) | #e7a542 | | Info blue | #185abd | | Success | #127d44 | | Warning | #d93c01 | | Destructive | #bc1947 | | Page (light) | #ffffff | | Surface (light) | #fafafa | | Muted surface (light) | #f5f5f5 | | Text primary (light) | #171717 | | Text secondary (light) | #525252 | | Text muted (light) | #a3a3a3 | | Border (light) | #e5e5e5 | | Background (dark) | #171717 | | Surface (dark) | #262626 | | Recessed (dark) | #0a0a0a | | Border (dark) | #404040 | --- ## 11 - Colour Combinations & Accessibility WCAG 2.1 contrast thresholds: AA requires 4.5:1 for normal text, 3:1 for large text (18px+ or 14px bold). AAA requires 7:1. Ratios calculated against the sRGB luminance formula. | Combination | Ratio | AA normal | AA large | AAA | Verdict | |---------------------------------|--------|-----------|----------|------|---------| | White on Dairy Green (#00783b) | 5.6:1 | PASS | PASS | FAIL | AA | | White on Black chrome (#000000) | 21.0:1 | PASS | PASS | PASS | AAA | | Text #171717 on White | 17.9:1 | PASS | PASS | PASS | AAA | | White on Amber (#e7a542) | 2.1:1 | FAIL | FAIL | FAIL | FAIL | | Ink #171717 on Amber (#e7a542) | 8.4:1 | PASS | PASS | PASS | AAA | | White on Destructive (#bc1947) | 6.2:1 | PASS | PASS | FAIL | AA | | Secondary #525252 on White | 7.8:1 | PASS | PASS | PASS | AAA | **Approved combinations:** White on the primary green (AA - fine for buttons/large text). White on black chrome and ink (#171717) on white (AAA) for body. Ink on amber (AAA) - always pair amber with dark text. **Never use:** White text on amber/gold - fails AA at all sizes (use ink #171717 instead). Don't put white body copy on the primary green at small sizes (AA, not AAA). --- ## 12 - Brand Tagline & Subtitles The primary tagline captures the offline-first promise in plain, grounded language. Subtitles are context-specific - they support without repeating. Never use adjectives like "powerful", "seamless", or "revolutionary". > **Your farm. Your records. Anywhere.** > > *Offline-first dairy farm management for East Africa* > | Context | Tagline / Subtitle | |---------------------|---------------------------------------------------------------------------------| | App store / digital | "Your farm. Your records. Anywhere." - short, offline promise front and centre. | | Cooperative / B2B | "From the field to the ledger - every litre accounted for." | | Swahili primary | "Zana moja. Shamba lote." (One tool. The whole farm.) | | Investor / pitch | "Replacing handwritten records for 5 million Sub-Saharan dairy farmers." | *Subtitle rules: max 12 words. Never repeat the tagline language. Sentence case. Answer the implied question - who is this for, and where.* --- ## 13 - Photography: Composition, Tone & Subject Matter Every photograph should feel like it was taken by someone who belongs on the farm - not someone who drove up with a camera. Authenticity over polish. Local specificity (Uasin Gishu red soil, highland mist, Friesian and Ayrshire cattle) is a brand asset. | Area | Guidance | |----------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | Composition | Rule of thirds: animal or farmer in left third, landscape receding right. Low horizon (below 40%) emphasises scale and sky. Always include environmental context - never isolate animals on a white or studio background. Avoid centred, symmetrical framing which reads as staged. | | Lighting | Golden hour (6-8am and 5-7pm) is the primary window - warmth that matches the Gold palette and avoids harsh midday shadows. Overcast highland light is acceptable for close-up work. Avoid artificial flash. Indoor parlour shots: use available natural window light, supplement only with a warm LED panel. | | Subject matter | Priority subjects: named cows (Amina, Bella, Daisy), hands-on care moments (milking, treatment, calving), phone in the field showing the app, cooperative collection points. Secondary: feed preparation, farm managers mid-action - not posed. Always obtain consent and credit farmers by name where possible. | | Tone | Honest and warm - not aspirational or glossy. Show real conditions: red soil, mist, mud, worn hands. Avoid photos that could have been taken in the Netherlands or New Zealand. Local specificity is a brand asset, not a limitation. | --- ## 14 - Editing Treatments & Presets All edits serve one goal: making the image feel like it belongs in the same visual family as the green and gold palette. Restraint is the default. | Treatment | Settings & Guidance | |-------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | Tone & exposure | Lift shadows +10 to +15 to open detail in darker animal coats. Pull highlights -10 to -15 to protect sky and milk highlights. Aim for a matte, slightly lifted black point - not crushed blacks. Keeps images feeling warm and documentary rather than high-contrast commercial. | | Colour grading | Shift overall temperature slightly warm (+200 to +400K from native). In shadows, push toward teal-green to echo Forest palette. In highlights, nudge toward amber-gold to echo Harvest Gold. HSL: boost green saturation +10, reduce orange saturation -5. Never use auto white balance. | | Sharpness & noise | Sharpen selectively with masking so sharpening hits edges (fur, grass, app screen) but not skin. Luminance noise reduction 15-25 for morning shots (often high ISO). Avoid over-sharpening. | | Vignette & crop | Subtle vignette (-10 to -15 in Lightroom), feather at 80-90. Crop to 3:2 for landscape, 4:5 for Instagram (crop from right, subject in left third). Never use radial filters to fake bokeh. | | Preset & export | Build one custom Lightroom preset named "DairyBook - Highland". Web: 2400px long edge, sRGB, JPEG 85-90 quality. Print: TIFF at 300dpi, CMYK (Fogra39 coated / Fogra47 uncoated) before press. | | Never apply | Heavy desaturation or black-and-white conversion. Orange-and-teal split toning. AI auto-enhance tools (Lightroom AI Enhance, Instagram filters). Heavy grain or dust overlays. Text overlays that obscure the subject. | --- *DairyBook KE Limited - 30100 - Eldoret, Kenya - [dairybook.app](http://dairybook.app) - 2026* --- ## 15 - Graphics & Illustration Style DairyBook illustrations are schematic, not decorative. Every graphic element earns its place by explaining something about the farm, data, or product. The visual language is flat, geometric, and derived from the brand palette. | Principle | Rule | |--------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | Line weight | 1px for outlines, 1.5px for highlights, 2px maximum. Corners: rx 3-4 for objects, rx 8 for UI elements. | | Shape style | Geometric foundations (rects, ellipses) with gently rounded corners. Organic curves only for natural elements - hills, animal silhouettes, water. No freehand or sketchy aesthetics. | | Colour application | Forest for UI shells and dark surfaces. Canopy/Mid-Green for fills. Gold only for numbers, CTAs, or value moments. Flat fills only - no gradients in illustrations. | | Shading | No drop shadows, gradients, noise textures, or neon effects. Use opacity (60-90%) within the same hue to show depth or hierarchy. | | Motion | 0.2s ease for hover/active. 0.3s ease for page/modal transitions. No bounce or spring. Respect prefers-reduced-motion. No looping animations except offline sync pulse. | **Do:** Flat fills. Geometric shapes. 1-1.5px strokes. Brand palette exclusively. Max 5-6 elements per graphic. **Don't:** No drop shadows, gradients, or noise textures. No illustrative scenes with many colours. No cartoon or sketchy line styles. No 3D effects. --- ## 16 - Icons DairyBook uses outline-style icons with a consistent 1.5px stroke weight. Within the app UI, functional emoji serve as quick pictograms for navigation. In marketing materials, a clean line icon set replaces emoji for a more refined look. | Area | Specification | |-----------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | Style | Outline only. Never filled/solid variant. 1.5px consistent stroke weight. Same visual weight as body text at equivalent size. | | Sizes | 14px - inline with text, nav labels. 20px - card headers, list items. 28px - dashboard stat cards. Never below 14px or above 32px in UI contexts. | | Padding | Minimum 4px clear space around any icon before adjacent text or elements. Icon-only touch targets: minimum 44x44px tap area. | | Colour on light backgrounds | Canopy (#0f7a5a) for active/primary icons. Mist (#777777) for inactive/secondary. Alert icons match badge colour - green success, gold warning, red urgent. | | Colour on dark backgrounds | White or Sage (#7FD3A8) for active icons. rgba(255,255,255,0.45) for inactive. Never use Forest icons on Forest backgrounds. | | Accessibility | Always add aria-label to icon-only buttons. Decorative icons get aria-hidden="true". Never rely on colour alone to communicate state - pair with text or shape change. | **Primary icon set (outline style):** Herd (cow), Milk (droplet), Health (heartbeat), Feed (plant), Calving ( baby-carriage), Reports (chart-bar), Settings (settings), Offline (cloud-off), Sync (refresh), Finance (currency), Alerts (bell), User (user). **Do:** Outline style only. Consistent 1.5px stroke. Same icon library throughout. Pair icons with text labels in navigation. **Don't:** Never mix outline and filled icon styles in the same context. Don't scale below 14px. No multi-colour icons. --- ## 17 - Charts & Data Visualisation All data visualisations use the brand palette. Primary data series always uses Canopy green. Secondary uses Harvest Gold. Never more than three colours in a single chart. All charts must have a title, clear axis labels, and a legend. | Chart type | When to use | When not to use | Brand style | |-------------|-------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------| | Bar chart | Comparing discrete values across individual animals, time periods, or categories. Best for ranked comparisons and spotting top producers. | Do not use for trends over time (use line chart) or proportional breakdowns (use donut). | Vertical bars. Canopy for primary data. Gold for targets. Gray for comparison periods. No 3D. No rainbow colours. | | Pie / donut | Proportional breakdown of a whole with 2-5 categories. Herd status, feed budget splits, health outcome ratios. | Never for time series. Never for more than 5 segments. Never when absolute values matter as much as proportion. | Donut style preferred. Canopy for largest segment. Gold for secondary. Totals in donut centre. Legend right or below. | | Line chart | Change over time - daily yield, monthly totals, weight progression. Trends, seasonality, before/after. Minimum 5 data points. | Do not use for comparing discrete unrelated values. Not for fewer than 5 data points. | Canopy solid for current period. Gold dashed for comparison. Dot markers on data points. No area fills. Straight segments only. | **Global chart rules:** Primary series: Canopy (#0f7a5a). Secondary: Harvest Gold (#C9A84C). Grid lines: 0.5px, border colour, horizontal only. Legend always above the chart. Never rely on colour alone - pair with dash pattern, hatching, or marker shape. All charts need aria-label with data summary. --- ## 18 - Brand Applications The brand applied across real-world contexts. These applications bring all elements together - colour, typography, icons, spacing - as a unified system. | Application | Brand elements applied | Key rules | |---------------------------|-----------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------| | App UI - dashboard | Forest sidebar. Asap for stat numbers and body copy. JetBrains Mono for IDs/figures. Gold for yields/financials. Green/gold/red badges. | Mobile-first. Offline status always visible. Named animals used throughout. Data loads progressively. | | Social - Instagram/TikTok | Forest/Deep Green overlays. Gabarito display headlines. Swahili tagline. Gold accent underline. | Square (1:1) or portrait (4:5). Real farm or animal always featured. Bilingual captions. Hashtags in first comment. | | Social - LinkedIn | White background. Deep Green headlines (Gabarito/Asap). No emoji in body. Data-led with brand chart screenshots. | Landscape (16:9) for link previews. Pilot farm data for credibility. No promotional language. | | Print - pilot badge | Forest background. Gold avatar circle. White/Sage type. JetBrains Mono for farmer ID. | CMYK values from Section 10. Minimum 8mm height. 8pt minimum text. Matte stock. | | Email / newsletter | Forest header bar. Gabarito display H1, Asap body at 16px. Canopy CTAs. Cream (#FAFAF5) background. | Max width 600px. Dark mode safe. Single column. One primary CTA. Always include plain-text version. | --- *DairyBook KE Limited - 30100 - Eldoret, Kenya - [dairybook.app](http://dairybook.app) - 2026*