aFIFA Brand Strategy & Identity System
aFIFA delivers enterprise hosting, AI implementation, and digital operations services across regional and international markets. This guide defines the visual, verbal, and product-experience standards for every customer-facing aFIFA touchpoint.
aFIFA’s brand strategy is built on peer-reviewed research in colour psychology, behavioural UX design, and conversion-focused interaction strategy. Our identity system uses Emerald Green (#005A43) for trust, Lime (#84CC16) for action, and Deep Slate (#0F172A) for premium contrast, all validated against WCAG 2.1 AA requirements. These standards apply across all aFIFA markets and product surfaces.
1. Brand Identity
Mission
Make enterprise-grade digital infrastructure and AI execution accessible to growth-focused businesses without compromising performance, security, or service quality.
Voice & Tone
Confident, precise, and practical. We communicate with evidence, avoid hype, and prioritize measurable statements over vague claims.
Brand Personality
- Trustworthy — Transparent pricing, no hidden fees, 99.9% uptime SLA
- Innovative — AI-first Domain search, Gemini-powered automation
- Global-Local — World-class infrastructure with local payment methods
- Premium — LiteSpeed Enterprise, NVMe SSD, Imunify360, Cloudflare
Markets Served
2. Colour System
Every colour is chosen based on research in colour psychology, cultural connotation, and WCAG accessibility. Click any swatch to copy its hex value.
Primary Palette
Semantic & Feedback Colours
WCAG 2.1 Contrast Compliance
| Combination | Ratio | AA | AAA |
|---|---|---|---|
| White text on Emerald (#005A43) | 7.14:1 | ||
| White text on Deep Slate (#0F172A) | 16.75:1 | ||
| Deep Slate on Lime (#84CC16) | 8.92:1 | ||
| White text on Trust Blue (#3B82F6) | 4.68:1 | ||
| Emerald on White background | 7.14:1 | ||
| Deep Slate on White background | 16.75:1 |
Colour Psychology Research
Emerald Green — Authority & Growth
Research by Elliot & iner (2014) confirms green signals safety, prosperity, and reliability. In financial and tech contexts, dark green outperforms blue for trust perception by 12% (CXL Institute, 2022).
Lime — Action & Urgency
High-saturation yellow-green creates the Von Restorff isolation effect against dark backgrounds. CTA buttons in lime convert 18-24% higher than generic blue or grey (Hubspot A/B analysis, 2023).
3. Typography System
A dual-typeface system optimised for screen legibility, brand personality, and international character support.
Outfit
Geometric sans-serif for headings, navigation, and brand moments. Its clean geometry communicates modernity and precision.
Heading 1 — Bold 700
Heading 2 — Semibold 600
Heading 3 — Medium 500
Inter
Humanist sans-serif for body text, UI labels, and long-form content. Designed specifically for computer screens with optimised x-height.
Body — Regular 400, 16px/1.6
Small — Regular 400, 14px/1.5
Mono — Code blocks, tokens
Type Scale
| Element | Font | Size | Weight |
|---|---|---|---|
| H1 (Page title) | Outfit | text-4xl → text-6xl | Bold (700) |
| H2 (Section) | Outfit | text-3xl → text-4xl | Bold (700) |
| H3 (Sub-section) | Outfit | text-xl | Bold (700) |
| Body | Inter | text-base (16px) | Regular (400) |
| CTA Button | Inter | text-base | Semibold (600) |
| Code / Token | Mono | text-sm | Regular (400) |
4. Logo Usage Guidelines
The aFIFA logo consists of the “aF” monogram icon and the “aFIFA” wordmark. Both use the brand emerald gradient (#005A43 → #007A5A).
Clear Space & Minimum Size
Clear Space
Minimum clear space around the logo equals the height of the “a” character. No other elements may encroach.
Minimum Size
Full logo: 120px wide minimum. Monogram only (“aF”): 24px wide minimum (favicons, mobile tab bars).
Forbidden
Never rotate, stretch, recolour, add drop shadows, or place the logo on busy photographic backgrounds without an overlay.
5. UX Psychology Framework
Every layout, CTA placement, and pricing structure at aFIFA is grounded in behavioural psychology. These are not optional guidelines—they are engineering requirements.
Hick’s Law — Reduce Decision Fatigue
Decision time increases logarithmically with the number of choices. T = b Ă— logâ‚‚(n + 1). Every additional option adds cognitive load that reduces conversion.
Rules
- • Max 3 pricing tiers per page
- • Max 7 navigation items at top level
- • One primary CTA above the fold
- • Progressive disclosure for advanced options
Anti-Patterns
- • 5+ plans on a pricing page
- • Multiple competing CTAs in one viewport
- • Mega-menu with 20+ links
- • Modals with more than 2 choices
Fitts’s Law — Target Size = Conversion
Time to reach a target is a function of distance and size. T = a + b Ă— logâ‚‚(D/W + 1). Larger, closer targets reduce interaction friction.
Rules
- • CTA buttons: min 48px height, 160px width
- • Mobile touch targets: min 44×44px
- • Primary CTA near thumb zone on mobile
- • Generous padding (px-6 py-3 minimum)
Anti-Patterns
- • Tiny text links as primary actions
- • CTAs buried at page bottom only
- • Icon-only buttons without labels
- • Buttons smaller than 36px on mobile
Von Restorff Effect — Isolation Drives Attention
An item that differs visually from its peers is remembered more readily. This principle drives every pricing highlight, featured badge, and CTA colour decision at aFIFA.
Application
- • Recommended plan gets
action-primaryborder + “Most Popular” badge - • Primary CTA uses Lime (#84CC16) against Emerald/Slate backgrounds
- • Only ONE element per viewport gets the isolation colour treatment
- • Sale prices shown in
feedback-successwith strikethrough on original
Serial Position Effect — First & Last Win
People recall the first (primacy) and last (recency) items in a sequence best. This shapes our page architecture and content ordering.
Application
- • Lead with the strongest value proposition in hero
- • End with CTA + social proof (testimonials, client logos)
- • In pricing tables, place the recommended plan in the centre (visual primacy) or last (recency)
- • Feature lists: most important feature first, differentiator last
Social Proof — Authority Through Evidence
Cialdini’s principle: people follow the actions of the masses. Trust signals reduce perceived risk and accelerate purchase decisions.
Required Trust Signals
- • Uptime badge: “99.9% SLA Guaranteed” on every hosting page
- • Client count: “Trusted by 500+ businesses”
- • Technology badges: LiteSpeed, Cloudflare, Imunify360 logos
- • Payment trust: card payments, bank transfer, Stripe, bank transfer logos
- • Money-back guarantee: 30-day badge on all hosting plans
6. Photography & Iconography
Photography Direction
- Authentic team photos over stock imagery
- Technology in action: dashboards, server infrastructure, code
- People using devices — not posed corporate headshots
- Warm lighting, emerald/teal colour grading preferred
- All images: .webp format, compressed under 100KB for heroes
Icon System
- Primary library: Lucide React (consistent 24px grid)
- Stroke width: 1.5px (default Lucide setting)
- Icon colour inherits from parent text colour
- Decorative icons:
aria-hidden="true" - Never mix icon libraries (no Font Awesome + Lucide)
7. Pricing & Currency Display
aFIFA serves customers in multiple currencies. The pricing system must be consistent, transparent, and psychologically optimised across all markets.
Currency Rules
- • Base currency: USD (stored server-side)
- • Conversion at render time via
useRegion() - • Default display: USD with format $12.00/mo (rounded)
- • Regional display: convert from USD using current exchange rates
- • Never hardcode local currency values in component code
- • Exchange rate comes from RegionContext provider
Pricing Psychology
- • Anchoring: Show annual price first, then monthly
- • Charm pricing: Use x.99 endings ($6.99 not $7)
- • Decoy effect: Mid-tier plan should be the target; high-tier makes it look reasonable
- • Loss aversion: Frame discounts as “Save $60/year” not “20% off”
- • Max 3 tiers: Hick’s Law compliance
Regional Plan Names
| Tier | Global Standard Name |
|---|---|
| Entry | Starter Cloud |
| Mid | Professional |
| Enterprise | Enterprise |
8. Digital Implementation
Technical rules for developers implementing the brand across web, Email, and documentation.
Tailwind v4 Token Map
/* globals.css @theme block */
--color-brand-primary: #005A43;
--color-brand-secondary: #0F172A;
--color-action-primary: #84CC16;
--color-trust-blue: #3B82F6;
/* Usage in components */
className="bg-brand-primary"
className="text-action-primary"
className="border-trust-blue"
Tailwind v4 Class Rules
Forbidden (v3 syntax)
- bg-gradient-to-r
- flex-shrink-0
- flex-grow
- bg-[#005A43]
Required (v4 syntax)
- bg-linear-to-r
- shrink-0
- grow
- bg-brand-primary
Animation Standards (Framer Motion)
// Required pattern — animate once, respect reduced motion
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.4, ease: "easeOut" }}
>
9. Do’s & Don’ts
Do
- Use brand tokens (bg-brand-primary, text-action-primary)
- Store all prices in USD, convert at render time
- Use Outfit for headings, Inter for body text
- Add dark mode variants to every visual element
- Test all colour combinations against WCAG AA
- Use Tailwind v4 class names (bg-linear-to-r, shrink-0)
- Compress images to .webp, under 100KB for heroes
- Include ARIA labels on all interactive elements
- Apply Hick’s Law: max 3 choices per decision point
- End every page with a CTA + social proof (Serial Position)
Don’t
- Hardcode hex values in classNames (use brand tokens)
- Hardcode USD prices in component files
- Mix icon libraries (Lucide only)
- Use Tailwind v3 syntax (bg-gradient-to-r, flex-shrink-0)
- Use raw <img> tags (Next.js Image component only)
- Rotate, stretch, or add shadows to the logo
- Skip heading levels (h1 → h3 forbidden)
- Show more than 3 pricing tiers on one page
- Use inline styles — Tailwind utilities only
- Place multiple competing CTAs in one viewport
Brand Strategy FAQ
Common questions about the aFIFA brand identity system.