v1.0 — Agenti NZ Brand

Design
System

The single source of truth for Agenti NZ's visual language. Everything needed to build consistent, on-brand experiences — across social media, presentations, web, and beyond.

Version 1.0.0
Last Updated March 2026
Brand Agenti NZ
Market New Zealand SMEs
01

Colour Palette

Rooted in trust and precision. Navy anchors authority; electric blue signals innovation; white ensures clarity.

Primary — Navy
Navy 950
#060E1C
Page background
Navy 900 ★
#0D1F3C
Primary brand colour
Navy 800
#102848
Cards, elevated surfaces
Navy 700
#163354
Hover states
Navy 600
#1E4270
Borders, dividers
Accent — Electric Blue
Blue 600
#1A7FE8
Pressed states
Blue 500
#2E8EF5
Hover accent
Blue 400 ★
#4A9EFF
Primary accent
Blue 300
#74B8FF
Hover glow
Blue 100
#E0F0FF
Tinted backgrounds
Neutrals & UI Greys
Off-white
#F0F2F5
Light backgrounds
Grey 400
#8A9BB0
Secondary text
Grey 500
#6B7D90
Muted text
Grey 600
#536070
Disabled states
Grey 700
#3A4A5C
Subtle borders
Semantic / Status Colours
Success
#22C55E
Positive / Active
Warning
#F59E0B
Caution / Review
Error
#EF4444
Destructive / Error
Info
#4A9EFF
Informational
Gradient
Blue → Green
Highlight accent
Design Tokens — Semantic Usage
--bg-primary
Navy 900 · Page & component backgrounds
--accent-primary
Blue 400 · CTAs, links, highlights
--text-primary
White · Headlines, key content
--text-secondary
Grey 400 · Supporting body copy
--bg-secondary
Navy 800 · Cards, elevated panels
--border-subtle
White 7% · Dividers, card borders
02

Typography

Poppins carries authority and energy in headlines. DM Sans keeps body copy warm and readable.

Display & Headlines
Poppins
300 Light 400 Regular 600 SemiBold 700 Bold 800 ExtraBold 900 Black
AI Agents
for NZ
Used for all headings, hero text, slide titles, and any text that needs to command attention.
Body & UI Text
DM Sans
300 Light 400 Regular 500 Medium 600 SemiBold
We automate
the boring stuff.
Used for body copy, captions, UI labels, navigation, and anything requiring extended reading.
Code & Technical
DM Mono
400 Regular 500 Medium
--accent-primary: #4A9EFF;
v1.0.0 · agenti.nz
Used for design tokens, code snippets, labels, version numbers, and technical metadata.
Type Scale
Display Agenti Poppins 900
76px / -3px
H1 AI for NZ Business Poppins 800
60px / -2px
H2 Your time matters Poppins 700
48px / -1.5px
H3 Automate the boring Poppins 700
38px / -1px
H4 Discovery Call Poppins 600
30px / -0.5px
Lead We build AI agents that work 24/7 so you don't have to. DM Sans 400
20px / 1.7
Body Connect your Xero, calendar and inbox. Watch invoices send themselves, appointments book automatically, and leads get followed up instantly. DM Sans 400
15px / 1.65
Small agenti.nz · Christchurch, New Zealand DM Sans 400
13px / 1.5
Label AI AUTOMATION · NZ OWNED DM Mono 500
11px / +3px
03

Spacing & Grid

An 8px base grid creates visual harmony. All spacing values are multiples of 4.

Spacing Scale
Space 1
4px
Space 2
8px
Space 3
12px
Space 4
16px
Space 6
24px
Space 8
32px
Space 10
40px
Space 12
48px
Space 16
64px
Space 20
80px
12-Column Grid
04

Components

Reusable UI building blocks. Every component follows the same interaction language.

Active Ready to Post In Progress Error Draft AI Agent NZ Owned
Invoice Automation
Invoices sent automatically after every job. Never chase a payment again.
📅
Smart Booking
Customers book directly into your calendar. Zero back-and-forth.
🌐
Multilingual
Your agent responds in Mandarin, Hindi, Samoan and more.
This is how you'll appear on quotes and invoices.
✓ Email verified
Please enter a valid NZ phone number.
ℹ️
Your agent is building
We're connecting your Xero account. This usually takes 2–3 minutes.
Invoice sent successfully
Invoice #1042 was sent to the client automatically.
⚠️
Xero connection expiring
Your Xero authorisation expires in 7 days. Reconnect to avoid interruption.
🚫
Booking failed
Could not add appointment to calendar. Check your Google Calendar permissions.
05

Elevation & Shadow

Depth creates hierarchy. Use shadow to lift interactive elements and establish focus.

Level 0
Flat
No shadow
Page backgrounds
Level 1
Raised
0 2px 8px rgba(0,0,0,0.25)
Cards, inputs
Level 2
Floating
0 4px 20px rgba(0,0,0,0.35)
Dropdowns, modals
Level 3
Glow
0 0 40px rgba(74,158,255,0.2)
CTAs, hero elements
06

Voice & Tone

How Agenti NZ sounds — in posts, emails, presentations, and every touchpoint.

🎯
Direct
Say what you mean. No jargon, no fluff. NZ business owners are busy.
🤝
Human
We're a local NZ team. Warm, approachable, never corporate or distant.
💡
Clear
Explain AI in plain English. If your nana can't understand it, rewrite it.
Confident
We know this works. Speak with conviction, not hesitation.
✓ Do say
"Your agent handles invoices automatically — so you don't have to."
"Get your evenings back. Book a free discovery call."
"We build it. You own it. No lock-in."
"NZ-owned. Privacy Act 2020 compliant."
"Think of it as a digital staff member who never clocks off."
✗ Don't say
"Leverage cutting-edge LLM orchestration pipelines..."
"Synergise your operational workflows with agentic AI."
"Revolutionary disruptive technology solution."
"Industry-leading enterprise-grade SaaS platform."
"Our proprietary neural network algorithms..."
08

Motion & Animation

Motion should feel purposeful — guiding attention, not distracting from content.

Easing Curves
Default Ease
cubic-bezier(0.16, 1, 0.3, 1)
Fast out, slow settle. Used for most UI transitions — feels natural and confident.
Used in: buttons, cards, dropdowns, page transitions
Snappy
ease-in-out
Balanced in and out. Best for micro-interactions where speed matters.
Used in: toggles, badges, status changes
Spring
cubic-bezier(0.34, 1.56, 0.64, 1)
Slight overshoot creates life and personality. Use sparingly.
Used in: hero elements, modal entrances, celebrations
Duration Scale
Instant
100ms Hover colour changes, icon swaps
Fast
150ms Button states, input focus rings
Default
250ms Card hovers, dropdown reveals
Slow
400ms Page entrances, modal open/close
Deliberate
600ms Hero animations, loading states
Interactive Hover States — Try Hovering
→ Book Free Call
Learn More
View Case Study
Contact Us
See Pricing
09

Imagery & Visual Style

Three background treatments that define Agenti NZ's visual atmosphere.

agentinz
Treatment 01
Grid + Glow
Subtle navy grid with radial blue glow. Used across all primary slides, presentations, and website hero sections. The "default" Agenti environment.
AI Agents
Treatment 02
Noise Texture
Film-grain noise over dark navy gradient. Adds depth and a premium, tactile quality. Use for full-bleed backgrounds and print materials.
Deep
Gradient
Treatment 03
Dark Gradient
Rich diagonal gradient between navy 950 and navy 600. Creates depth without pattern. Best for video thumbnails, stories, and secondary backgrounds.
Photography Direction

Real NZ Business Contexts

Tradies, retail shopkeepers, hospitality workers — shown in their actual environment. Authentic, not stock-photo perfect.

Diverse Representation

Reflect the real diversity of NZ businesses. Māori, Pacific, Asian, and Pākehā business owners should all be represented.

Navy Duotone Overlay

When placing photos in branded materials, apply a navy duotone overlay (opacity 40–60%) to unify with the colour palette.

🚫

Avoid Generic Tech Stock

No glowing robot hands, generic "AI brain" illustrations, or sterile corporate office photography. Keep it human and grounded.

10

Social Media Specs

Platform-specific asset sizes and the hashtag strategy for maximum reach.

Platform Specifications
Hashtag Strategy
Always-On Brand
Use on every post
#AgentiNZ #NZBusiness #AIAgentNZ #ChristchurchBusiness
Topic-Specific
Rotate based on content
#BusinessAutomation #XeroNZ #WorkSmarter #AIForBusiness #SmallBusinessNZ #AdminOverload
Community
For diversity & reach posts
#DiverseNZ #MultilingualNZ #MaoriBusinessNZ #PacificBusinessNZ #InclusiveBiz
11

Brand Don'ts

Common mistakes that dilute the brand. When in doubt, refer back to this.

Agenti NZ
Wrong Colours
Never use purple, green, or any colour outside the Agenti palette as a primary background.
Agenti NZ
Wrong Font
Never set brand text in Arial, Helvetica, system fonts, or any typeface outside Poppins / DM Sans.
agenti nz
Recoloured Logo
Never change the logo colour to orange, red, or any non-approved colour. White or navy only.
REVOLUTIONARY DISRUPTIVE AI SYNERGY SOLUTIONS PLATFORM™
Jargon & Buzzwords
Never use tech-jargon like "synergise", "disruptive", "paradigm shift". Keep it plain and human.
agenti
Stretched Logo
Never scale the logo disproportionately. Always maintain original aspect ratio.
agenti nz
Effects on Logo
Never add drop shadows, glows, outlines, or any visual effects to the logo mark.