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.
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
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.
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
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
76px / -3px
H1
AI for NZ Business
Poppins 800
60px / -2px
60px / -2px
H2
Your time matters
Poppins 700
48px / -1.5px
48px / -1.5px
H3
Automate the boring
Poppins 700
38px / -1px
38px / -1px
H4
Discovery Call
Poppins 600
30px / -0.5px
30px / -0.5px
Lead
We build AI agents that work 24/7 so you don't have to.
DM Sans 400
20px / 1.7
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
15px / 1.65
Small
agenti.nz · Christchurch, New Zealand
DM Sans 400
13px / 1.5
13px / 1.5
Label
AI AUTOMATION · NZ OWNED
DM Mono 500
11px / +3px
11px / +3px
03
Spacing & Grid
An 8px base grid creates visual harmony. All spacing values are multiples of 4.
Spacing Scale
Space 14px
Space 28px
Space 312px
Space 416px
Space 624px
Space 832px
Space 1040px
Space 1248px
Space 1664px
Space 2080px
12-Column Grid
04
Components
Reusable UI building blocks. Every component follows the same interaction language.
Buttons
Badges & Pills
Active
Ready to Post
In Progress
Error
Draft
AI Agent
NZ Owned
Cards
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.
Form Inputs
This is how you'll appear on quotes and invoices.
✓ Email verified
Please enter a valid NZ phone number.
Alerts & Notifications
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
Page backgrounds
Level 1
Raised
0 2px 8px rgba(0,0,0,0.25)
Cards, inputs
Cards, inputs
Level 2
Floating
0 4px 20px rgba(0,0,0,0.35)
Dropdowns, modals
Dropdowns, modals
Level 3
Glow
0 0 40px rgba(74,158,255,0.2)
CTAs, hero elements
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..."
07
Logo Usage
The Agenti NZ logo must always be reproduced clearly, with sufficient clear space.
On Dark — Preferred
On Darkest Background
On Light Background
Clear SpaceMaintain a minimum clear space equal to the height of the "a" in agenti on all sides.
Minimum SizeNever reproduce the logo smaller than 80px wide on screen or 25mm in print.
No DistortionNever stretch, skew, or alter the proportions of the logo.
No RecolouringNever change logo colours. Use white version on dark, navy version on light.
No Busy BackgroundsNever place the logo over a busy photograph or pattern without a clear backdrop.
No Drop ShadowsNever add drop shadows, outlines, or effects to the logo.
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.
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
Gradient
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.
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.
Social Media Specs
Platform-specific asset sizes and the hashtag strategy for maximum reach.