Visual reference for the brand tokens and components used across the EVAC website. Foundational decisions here apply to every page. Use this as the source of truth when building new pages or updating existing ones.
Brand colours organised by purpose. Each swatch shows the hex value and what it's used for. Where a colour maps to a Webflow variable, the variable name appears at the bottom of the card.
#1E375C
Body text, dark hero zones, footer.
var: navy#076DB0
Plumbing accent, primary buttons.
var: evac-blue#FFF8ED
Page background, cards on dark sections.
var: cream#0D9E76
Waste management accent.
var: teal#D97706
Compliance accent.
var: amber#534AB7
Facilities Management accent.
var: purple#4BAEF4
CTA highlights, the BOOK button.
var: evac-blue-bright#1A2A3A
Body text on cream backgrounds.
var: ink#F8EFD9
Alternating section background.
var: cream-dark#ECDDB8
Borders and dividers on cream.
var: cream-deep#DCEEF9
Accordion open state, services list bg.
var: evac-blue-pale#D5EEE6
Waste accordion open state.
var: teal-pale#DCD9EF
FM accordion open state.
var: purple-pale#F8E1C0
Compliance accordion open state.
var: amber-pale#4A5A6B
Meta text, placeholders, captions.
var: ink-softDisplay headings use Tanker (uppercase, condensed). Body and meta use DM Sans. Sizes scale with viewport using clamp - the smaller value applies on mobile, larger on desktop.
When something fails - no water, blocked drains, sewage backup - every hour counts. With 25 years in the industry, EVAC has been keeping commercial businesses operational across Australia.
A consistent spacing scale keeps layouts feeling intentional. Border radius separates small interactive elements (buttons, inputs) from larger containers (cards, hero blocks).
Section padding
80px desktop / 40px mobile
Vertical padding between major page sections
Card padding (large)
60px
Hero cards, feature blocks, trade waste section
Card padding (medium)
40px / 32px
Standard cards, audience cards, process steps
Card padding (small)
22px / 28px
Accordion rows, smaller cards
Grid gap (cards)
22px
Standard gap between cards in a grid
Container max-width
1280px
Inner content area on every section
8px
Buttons, inputs
12px
Accordion rows, swatches
14px
Standard cards
18px
Industry cards, larger callouts
22px
Hero cards, feature blocks (default)
999px (pill)
Eyebrow tags, badges
All buttons share an 8px radius and the signature 4px offset shadow that compresses on hover. Variants signal context - default CTAs, service-specific accents, and a transparent ghost for use on coloured backgrounds.
Hero pairing
Cream-filled secondary as primary action plus transparent cream-outline ghost for the call link. The standard pair inside coloured hero cards.
Reusable building blocks for the site. Each component scales across the four service-area accent colours. The examples below show plumbing blue as the default - swap colour classes for waste teal, FM purple, or compliance amber.
Small uppercase pill at the top of hero cards and section headers. Each service area uses its own accent colour. A fifth variant exists for use on coloured hero backgrounds (transparent white).
When something fails - no water, blocked drains, sewage backup - every hour counts. We respond fast and get it sorted.
Signature subpage hero. Rounded card in service accent colour. Eyebrow + headline + body + CTAs on the left, illustration on the right. Stats blend in at the bottom of the card, separated by a soft white line. Variants: blue (plumbing), teal (waste), purple (FM), amber (compliance).
Closed
Reactive plumbing
Leaks, blockages, broken fixtures, worn fittings - the everyday issues that need sorting without fuss.
Open
Reactive plumbing
Leaks, blockages, broken fixtures, worn fittings - the everyday issues that need sorting without fuss.
We work with burst pipes, tap and tapware repairs, hot water system faults, sewer and stormwater blockages, jetting services, specialist leak detection.
Service detail rows. Title and description always visible - the italic accent-coloured detail only appears when expanded. Open state turns the row pale, title coloured, and the + icon rotates to ×. Variants per page: blue, teal, purple, amber.
Comprehensive reference list grouped by category. Cream cards with blue left accent, dot bullets, and dashed dividers between items. Used on the plumbing page for the "Services we cover" section.
Big stat numbers with descriptive labels. Cream card with blue left accent bar. Use to translate operational data into visible business impact.
Cafes, restaurants, childcare centres, and small commercial operators. You have obligations and you need someone who knows exactly what's required.
Managing compliance across multiple sites and multiple services. EVAC takes it off your plate end to end.
Card used to address different audience types. Cream card with coloured top accent bar - shown here in amber (compliance page). Top accent colour matches the page accent.
One conversation. We find out what type of business you are and what obligations apply.
We identify every compliance obligation relevant to your site and build a schedule.
Numbered card with big accent number, heading, and brief description. Used in "How it works" sections. Number colour matches the page accent.
Emergency call-out, reactive repairs, hot water faults, blocked drains. Available after hours.
See plumbing →Coloured card pushing users between service pages. Sits at the bottom of subpages above the form. Background colour signals destination service. Pair format on subpages, trio format on compliance.
Four colour-tinted cards used to introduce industry audiences on the homepage and audience-targeted pages. Each card uses the corresponding service-tier accent colour.
Safe hot water, compliant waste, functional facilities. Zero centre closures in five years of emergency response.
Grease trap compliance, reactive plumbing, drainage. We keep kitchens and venues trading.
Ongoing maintenance programs, emergency response, and compliance reporting across your portfolio.
Compliance-critical environments. TMV, backflow, waste management, and reactive services.
Logo grid section establishing credibility on the homepage. Six-column desktop grid with cream-tinted placeholders; the rightmost cell can be a "+ more" indicator.
From national childcare groups and hospitality venues to strata companies, councils and individual businesses, EVAC has built long-term relationships with clients who need a provider they can rely on.
Large coloured CTA used to spotlight a single offering or campaign. Two-column desktop layout with tag + headline + body + button on the left, illustration spot on the right. Teal variant shown.
One provider for grease trap servicing, liquid waste removal, monitoring, and Form 9 backflow certification. We manage the schedule and the paperwork.
Learn more →Closing card placed at the foot of every subpage. Navy ground with two route cards covering both prospects who want to write and those who want to call.
Tell us what you need. We'll get back to you with a straight answer, no runaround, no waiting on a callback that never comes.
Cream-card section explaining trade waste compliance obligations. Headline + supporting paragraphs above a divider line, then a 3-column responsibility grid below.
Every commercial kitchen has a trade waste obligation with their local council or water authority. Most business owners find it confusing, time-consuming and easy to get wrong.
EVAC has been working with councils, waterboards and the EPA across Australia for 25 years. We know exactly what's required, we handle the paperwork, and we make sure your business stays on the right side of your obligations.
We prepare and lodge your trade waste application with your local council or water authority. We know what they need and how to get it approved.
Scheduled servicing and reporting to keep your business compliant. We report completed services to your local authority on your behalf.
EVAC is an EPA approved waste transporter in Victoria. All liquid waste is collected, transported, and disposed of responsibly and legally.
Top navigation bar — logo on the left, primary nav in the middle, contact icon-buttons plus Book CTA on the right. Sits on cream page background; sticky on scroll on the live site.
Site footer with brand block plus tagline, four service link columns, primary Book CTA pinned right. Bottom row carries copyright and social icons.