Avec / Brand foundations
Design
system.
The single source for Avec's colours, type, surfaces, components and imagery. Use these rules for decks, reports, social posts and campaign work.
Contents
Logo
Two variants: the horizontal wordmark and the standalone mark. Always use the supplied artwork and never redraw, retype or recolour the letters. The logo switches between charcoal and white to suit the background. The standalone mark is provisional until an official Avec mark is supplied.
light
dark
brand
Product lockups
When a layout speaks as an Avec product rather than the group, use the lockup: the wordmark, a hairline divider, then the product name. The divider stands at the wordmark's height and the product name never outweighs the wordmark.
Clear space
Keep a clear zone around the logo equal to half the logo's height on every side. The artwork below is drawn on a padded canvas, so the dashed line sits at the outer edge of that zone and the gap you can see is the clear space itself. This is a provisional carry-over rule: keep neighbouring text, imagery and frame edges outside the zone, and confirm final guidance against the Avec logo specification.
Wordmark
Mark
Minimum size
The horizontal logo never goes below 120px wide on screen (30mm in print). Below that the wordmark loses legibility — switch to the mark, which holds up down to 24px.
Common misuses
The logo is fixed artwork. If a layout conflicts with these rules, change the layout, never the logo.
Don't stretch or distort
Don't rotate
Don't add shadows or effects
talent.
Don't re-set the wordmark
Don't reduce opacity
Don't use on low-contrast backgrounds
Colour
Avec magenta is the lead brand colour. Charcoal neutrals carry backgrounds, text and actions. Tints and shades extend magenta; alphas are magenta at reduced opacity for overlays.
Primary, tints and shades
Primary / Base
#7237B8
Primary / Tint / 90
#8A50D2
Primary / Tint / 80
#AC6CFF
Primary / Tint / 60
#C191FF
Primary / Tint / 40
#D5B5FF
Primary / Tint / 20
#F6F2FA
Primary / Shade / 90
#63309F
Primary / Shade / 80
#552987
Primary / Shade / 60
#3F2266
Primary / Shade / 40
#2A1744
Primary / Shade / 20
#150B22
Primary alphas
Primary / Alpha / 80
#7237B8 · 80%
Primary / Alpha / 60
#7237B8 · 60%
Primary / Alpha / 40
#7237B8 · 40%
Primary / Alpha / 20
#7237B8 · 20%
Primary / Alpha / 15
#7237B8 · 15%
Neutrals
Neutrals / White
#FFFFFF
Neutrals / 50
#F4F5F7
Neutrals / 100
#E3E5EA
Neutrals / 200
#C9CCD4
Neutrals / 300
#ADB1BD
Neutrals / 400
#9096A5
Neutrals / 500
#757C8E
Neutrals / 600
#5C6478
Neutrals / 700
#444D63
Neutrals / 800
#2F3850
Neutrals / 850
#1D2436
Neutrals / Charcoal
#252D41
Typography
Inter is the typeface for display, headings and body. Fragment Mono is used for small labels. Display tracking is −6% at 95% line height; headings −3% at 100%. A highlighted word inside a heading keeps the heading weight and takes the pop colour.
Display XL
Display L
Heading H1
Heading H2
Heading H3
Heading H4
Heading H5
Heading H6
Body Large
Body Main
Body Small
Label L
Label L Caps
Label M
Label M Caps
Label S
Label S Caps
Surfaces
Surfaces are coloured containers that set background, text, pop and button colours together. Each theme (Light, Dark, Brand) has five, from quiet to loud: Base, Subtle, Mute, Elevate and Inverse. Use the quietest surface that does the job.
Theme / light
base
Headline with
a pop word
Default page background and containers
Surface text fade
subtle
Headline with
a pop word
Light grouping of related content
Surface text fade
mute
Headline with
a pop word
Stronger separation for panels
Surface text fade
elevate
Headline with
a pop word
Focal content, one per view
Surface text fade
inverse
Headline with
a pop word
Flips light and dark for a contrast break
Surface text fade
Theme / dark
base
Headline with
a pop word
Default page background and containers
Surface text fade
subtle
Headline with
a pop word
Light grouping of related content
Surface text fade
mute
Headline with
a pop word
Stronger separation for panels
Surface text fade
elevate
Headline with
a pop word
Focal content, one per view
Surface text fade
inverse
Headline with
a pop word
Flips light and dark for a contrast break
Surface text fade
Theme / brand
base
Headline with
a pop word
Default page background and containers
Surface text fade
subtle
Headline with
a pop word
Light grouping of related content
Surface text fade
mute
Headline with
a pop word
Stronger separation for panels
Surface text fade
elevate
Headline with
a pop word
Focal content, one per view
Surface text fade
inverse
Headline with
a pop word
Flips light and dark for a contrast break
Surface text fade
Layout and spacing
One spacing scale for margins, padding and gaps across every format. Align content to the column grid and leave generous empty space.
Spacing scale
4px
8px
12px
16px
20px
24px
32px
40px
48px
56px
64px
72px
80px
88px
96px
112px
128px
144px
168px
192px
224px
Margins
64–96px
Slides: 80px or 96px. Social: 64px. Repeat the same outer margin across a series.
Card padding
16 / 24 / 32px
16px compact, 24px standard, 32px spacious. Keep all sides consistent.
Gaps
8 / 16 / 32 / 64px
8px icon to label; 16px inside groups; 32px between groups; 64px between major blocks.
Alignment
Shared anchors
Align headlines, copy, cards and imagery to the same column edges. Centre only when the composition calls for it.
Corner radii
Radius 1
Radius 2
Radius 3
Radius 4
Radius 5
Radius 6
8px for compact controls; 16–24px for cards and photos; 32–48px for large editorial treatments. Round / 999px for pills.
Frame grids
Slides use a 6-column grid; every social format (4:5, 1:1, 9:16) uses 2 columns. Margins and gutters are measured on the full-size canvas.
6 columns
1920 × 1080
Presentation
Margin 80px · Gutter 32px
2 columns
1080 × 1350
Social portrait
Margin 64px · Gutter 32px
2 columns
1080 × 1080
Social square
Margin 64px · Gutter 32px
2 columns
1080 × 1920
Social vertical
Margin 64px · Gutter 32px
Top / bottom inset 144px*
*Vertical safe areas are a working minimum, not a platform guarantee. Keep logos, headlines and CTAs away from interface overlays; check the destination platform before export.
Components
Reusable building blocks. Each one reads its colours from the surface it sits on, so it stays legible in every theme and surface without manual overrides.
Toggle
Toggle · no labels
Button
Tag
Inverse surface
High-contrast break for statements, figures and calls to action.
Use candid, editorial workplace photography — real people mid-task, muted cool grade, no staged stock poses.
Image Wrap + Elevate surface
25+
Years creating people's futures
Tooltips
Tooltips show extra detail on hover, such as an element's properties or a token's codes. They use a fixed charcoal Inverse background, white text and a faint white border on every theme. Corners use radius 2 (16px). Property names use Label S Caps and values use Label M, both in Fragment Mono. Add a colour dot only for colour-related values. Use a single row for one property, or a Heading H6 title and divided rows for several related properties. Keep essential information visible outside the tooltip; reveal hover details on focus and provide a tap equivalent on touch screens.
light / Single row
- Size20px
dark / Single row
- Size20px
brand / Single row
- Size20px
LIGHT / MULTIPLE ROWS
Heading
- TypefaceInter
- Size20px
- Line height140%
dark / Multiple rows
Heading
- TypefaceInter
- Size20px
- Line height140%
brand / Multiple rows
Heading
- TypefaceInter
- Size20px
- Line height140%
Orbs
Soft, blurred shapes in violet, periwinkle, mint, green and orchid with a fine grain. Use them to add atmosphere in empty space only, never behind text, logos or key content. All other backgrounds stay flat colour.
Orb 01
Orb 02
Orb 03
Orb 04
Do
- Place in empty areas, such as beside a headline or behind the clear space of a cover.
- Use one orb per frame, two at most.
- Let the orb bleed off the edge of the frame.
- Use on Dark or Brand theme backgrounds.
Don't
- Put text, logos, icons or buttons on top of an orb.
- Recolour, sharpen or remove the grain.
- Use as a full-bleed background or as a gradient fill.
- Place inside cards, buttons or small surfaces.
Icons
The shared group icon set: 153 line icons on a common grid. Icons use either the surface's main text colour or its pop colour; icons inside filled buttons take the button's text colour. Use the switch to preview both.
60-40
accessibility
aged-care
arrow-down
arrow-left
arrow-right
arrow-up
attatchment
audio-fast-forward
audio-pause
audio-play
audio-rewind
audio-skip-back
audio-skip-forward
audio-stop
battery
bell
bin
blend
book
bounce
box
brain
briefcase
bug
calendar
camera
car
categories
certificate
chev-down
chev-left
chev-right
chev-up
clear
clinks
clock
clothing
cloud
code
coffee
cog
cogs
coin-dollar
coin-eruo
coin-pound
comment-speech-bubble
comment-speech-bubble-2
compass
computer
construction-crane
construction-crane-2
construction-tape-measure
construction-trowel
contact-email
contact-email-2
contact-mobile
contact-phone
conversation
dashboard
design-plan
design-sketch
diamond
download-cloud
download-file
drive
edit-copy
edit-cut
export
external
eye
family
flag-aus
flag-nz
gant
gender-female
gender-male
give
globe
government-federal
government-landmark
government-local-councils
government-state
graph
handshake
healthcare-aged-care
healthcare-gym
healthcare-heart-bubble
healthcare-mask
healthcare-medical-devices
healthcare-medical
healthcare-medical-2
history
home
industries
infinite
information
job-experience
lightbulb
lightning
list
log-out
megaphone
mic
microchip
network
option
page-document
page-inspect
pending
person
pharma-microscope
pharma-pills
pin
pop
process
punchy
quote
recycle
risk
roots
save
saved
scale-down
scale-up
science
search
secure-doc
secure-padlock
secure-page
secure-shield
select
send
shine
stack
star
sun
sustainability
swatch
text
thumb-down
thumb-up
toggle
travel
trophy
utilities-fire
utilities-water
verify-cross
verify-tick
video
wellness
wind
write
Chart examples
Survey-style charts for reports and slides. Bars fill with the primary-to-accent gradient on a soft track. Doughnut slices take evenly spaced colours along that gradient, so any number of items stays on brand. Labels use Fragment Mono; values use body text.
Is your organisation formally measuring AI impact?
- Yes, clear metrics or KPIs8%
- Yes, but informal13%
- Starting to define19%
- No, but plan to18%
- No current plans20%
- Not sure22%