Loading...
Consistent, accessible emails for NSW Government
The NSW Email Design System helps teams quickly produce high-quality, accessible emails in multiple formats. This ensures clear, inclusive communications that work everywhere.
Consistent NSW Government branding
Every email looks and feels official. Shared styles and layouts apply the NSW Government brand consistently, building trust and creating a familiar user experience across campaigns.
Emails that reach and engage
Responsive, accessible patterns render consistently across clients, avoid spam filters, and keep audiences engaged.
Easier collaboration and maintenance
Shared components, templates and guidance give teams a common foundation, making handovers, reviews, and updates predictable across agencies and roles.
Privacy, tracking and cyber security
How to meet privacy, security and analytics obligations when sending government emails.
Get started
Design
Practical design guidance for accessible, brand-aligned emails that work in email clients.
Read guidelines
Content
Guidance for writing NSW Government emails that are inclusive, plain language and easy to scan.
Read guidelines
Development
Coding guidance for accessible HTML emails that work across Outlook and mobile devices.
Learn morestyles.css
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome</title>
</head>
<body>
<x-main>
<x-header title="Welcome" />
<x-section>
<x-text>Thanks for joining us.</x-text>
<x-button.solid value="Read more" align="center" />
</x-section>
<x-footer />
</x-main>
</body>
</html>Discover our email building blocks
Access a library of brand-aligned components – from headers to call-to-action banners – that help teams create NSW-compliant emails faster and more consistently.
Colour
Guidance for applying NSW Government colour palettes with sufficient contrast and clear hierarchy in email.
Typography
Email typography standards for readable headings, body text and labels across devices.
Borders and radius
Standards for borders and corner radii that add structure without visual noise.
Spacing
A consistent spacing scale for padding and gaps that keeps layouts tidy and readable.
Section
Container patterns that group related content with predictable backgrounds and padding.
Grid system
Column layouts for one or more columns that collapse cleanly on small screens.
Breakpoint and stacking
How columns stack at the mobile breakpoint to preserve reading order and clarity.
Reverse stack
Utilities to swap column order on mobile while keeping logical source order.
Buttons
Accessible call-to-action buttons with clear labels, ample hit areas and strong contrast.
Divider
Simple horizontal rules to separate content and improve scanability.
Images
Patterns for sizing, alt text and placement so images work across clients and devices.
Link
Readable, recognisable link styles and guidance for meaningful link text.
Logo
Brand-compliant logo usage for headers and footers with correct size and spacing.
Social
Consistent social icon rows with accessible labels and sensible placement.
Spacer
A utility block for adding reliable vertical space between sections.
Blockquote
A styled quote with optional citation to highlight testimonials or statements.
Call to action
A focused section pairing concise copy with a primary action button.
Callout
A highlighted box for important notes, warnings or reminders.
Card
A compact container for an image, title, text, and an optional action.
Features
A short list of features or benefits, designed for quick scanning.
Footers
Standardised footers with agency identity, contact details and required links.
Gallery
Grid patterns for multiple images with guidance on alt text and stacking.
Header bars
Slim bands for section titles, alerts or labels that aid hierarchy.
Headers
Top-of-email patterns combining logo, title and optional intro text.
Hero banners
Prominent intros with headline, supporting copy and a clear action.
Infographics
Email-friendly ways to share data or charts, with accessible alternatives.
Lists
Readable ordered and unordered lists with sensible spacing and link styles.
Tables
Accessible table styles for simple tabular data that fits standard email widths.
Transactional and service
Triggered by a service interaction, event, or requirement.
Special purpose
Situational or highly targeted messages such as events or sector-specific alerts.
Leadership and insider
Communications driven by authority or exclusivity, such as executive or broadcast messages.
Informational updates
Regular or one-off updates to keep audiences informed.
Engagement and promotional
Messages designed to drive awareness, participation or behaviour change.