Skip to main content

​
Anitone Brand Identity & Design System

Design Philosophy: “The Operator’s Choice”Anitone’s digital presence speaks to professional producers, not hobby farmers. The aesthetic is agricultural technology meets veterinary science - precise, data-forward, and built for operators who make decisions based on outcomes, not emotions.

​
Brand Positioning

​
Voice & Tone

AttributeDescription
AuthorityVet-developed. Research-backed. 20+ years of field data.
UtilityNo fluff. Direct information. Easy to find dosages and specs.
TrustAustralian-made. Farmer-proven. Multi-generational use.
TechnicalData-forward. Mineral counts. Bioavailability science.

​
Key Messages

  1. Primary: “Field-Tested. Farmer-Proven.”
  2. Secondary: “60+ bioavailable minerals in liquid form.”
  3. Tertiary: “One product. All animals. 20+ years trusted.”

​
Target Market Priority

RankSegmentObjective
1FarmersPrimary website target / Impress
2DistributorsSecondary website target / Impress
3Livestock Industrial EstatesChicks, Cattle, Sheep, Pigs, Horses
4Hobby Users-
5Pet Users-
6Vets-
Brand alignment follows the ProFauna Brand Guide.

​
We Are NOT

  • Cutesy pet brand aesthetic
  • Lifestyle/wellness vibe
  • Discount/budget positioning
  • Generic supplement company

​
Color Palette

​
Primary Colors

NameHexRGBUsage
Forest Green#0069340, 105, 52Primary brand, CTAs, headings
Forest Light#2D825745, 130, 87Secondary actions, hover states
Forest Dark#004D260, 77, 38Gradients, dark accents

​
Secondary Colors

NameHexRGBUsage
Amber#FBAD18251, 173, 24Alerts, highlights, badges
Amber Dark#E09800224, 152, 0Hover states

​
Neutral Palette

NameHexUsage
Black#1A1A1AHeadings, body text
Charcoal#2D2D2DDark backgrounds
Slate#424242Body text, descriptions
Gray#757575Labels, secondary text
Silver#BDBDBDBorders, dividers
Off-White#F8F9FAPage backgrounds
White#FFFFFFCards, content areas

​
Color Application Rules

  1. Forest Green is always the primary action color (buttons, links, icons)
  2. Amber is reserved for alerts, sale badges, or critical highlights only
  3. Black for headings, Slate for body copy
  4. Background is always Off-White with subtle grid, never pure white
  5. Cards are White with subtle green-tinted shadows

​
Typography

​
Font Stack

--font-heading: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;

​
Type Scale

ElementSizeWeightLetter SpacingUsage
Display3.5rem (56px)700-0.02emHero headlines
H12.5rem (40px)700-0.02emPage titles
H22rem (32px)700-0.02emSection headings
H31.5rem (24px)600-0.01emCard titles
H41.25rem (20px)6000Subsections
Body Large1.125rem (18px)4000Lead paragraphs
Body1rem (16px)4000Standard copy
Small0.875rem (14px)4000Captions, meta
Label0.75rem (12px)6000.1emLabels, tags

​
Typography Rules

  1. Labels are always UPPERCASE with wide letter-spacing (0.1em)
  2. Headings use tight letter-spacing (-0.02em) for density
  3. Body copy line-height is 1.65 for readability
  4. Monospace font for technical data (dosages, measurements, stats)
  5. Never use more than 2 font weights on a single component

​
Layout & Spacing

​
Container Width

--container-padding: 15%;        /* Desktop: 1200px+ */
--container-padding-tablet: 8%;  /* Tablet: 768-1199px */
--container-padding-mobile: 5%;  /* Mobile: <768px */

​
Spacing Scale (8px base)

TokenValueUsage
--space-14pxTight gaps (icon + text)
--space-28pxDefault inline spacing
--space-312pxSmall component padding
--space-416pxStandard component padding
--space-624pxCard padding
--space-832pxSection gaps
--space-1248pxMajor section breaks
--space-1664pxSection padding vertical
--space-2496pxHero/CTA padding

​
Grid System

  • Desktop: Max 4 columns, 24px gap
  • Tablet: Max 2 columns, 20px gap
  • Mobile: 1 column, 16px gap

​
The Blueprint Grid

The subtle background grid is a signature element - it communicates “precision” and “technical infrastructure.”

​
Implementation

background-color: var(--anitone-off-white);
background-image:
  /* Main grid lines - very subtle */
  linear-gradient(rgba(0, 105, 52, 0.04) 1px, transparent 1px),
  linear-gradient(90deg, rgba(0, 105, 52, 0.04) 1px, transparent 1px),
  /* Intersection points - slightly more visible */
  radial-gradient(circle at center, rgba(0, 105, 52, 0.12) 1.5px, transparent 1.5px);
background-size: 40px 40px, 40px 40px, 40px 40px;

​
Usage Rules

  1. Grid appears on page backgrounds only, never inside cards
  2. Grid opacity is intentionally low (4%) - it’s felt, not seen
  3. Intersection “dots” at 12% opacity give it the “active tech” feel
  4. Never use on dark backgrounds

​
Component Library

​
Cards

Standard Card 
background: white;
border: 1px solid rgba(0, 105, 52, 0.08);
border-radius: 12px;
padding: 24px;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
Glassmorphism Card (for overlays, stat cards) 
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(20px);
border: 1px solid rgba(0, 105, 52, 0.12);
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 105, 52, 0.12);

​
Buttons

Primary (Forest Green)
  • Background: #006934
  • Text: White
  • Hover: #2D8257
  • Border-radius: 12px
  • Padding: 12px 24px
  • Font: 14px, 600 weight, uppercase, 0.05em spacing
Secondary (Outline)
  • Background: Transparent
  • Border: 2px solid #006934
  • Text: #006934
  • Hover: Fill with #006934, text white

​
Buttons Always Include

  • Arrow icon (→) that animates 4px right on hover
  • Uppercase text
  • No rounded pill shapes (12px radius max)

​
Animation & Interaction

​
Principles

  • Rigid, not fluid: Animations are quick and decisive (100-150ms)
  • Toggle-switch feel: Buttons click “into place”
  • No bounce: No elastic/spring animations
  • Minimal motion: Only hover states and reveals

​
Timing

--transition-instant: 100ms ease-out;
--transition-fast: 150ms ease-out;
--transition-base: 200ms ease-out;

​
Hover Effects

  • Buttons: Instant color shift
  • Cards: 2-4px lift + shadow increase
  • Links: Underline slide-in
  • Arrows: 4px horizontal translate

​
Quick Reference

ElementValue
Primary Color#006934
Container Padding15%
Card Radius12px
Button Radius12px
FontInter
Grid Size40px
Base Spacing8px
Animation Speed100-150ms
This document is the source of truth for all Anitone Shopify theme development.