Design principles
The NSW Email Design System helps ensure every email sent by government is recognisably NSW, accessible to all users, and quick for teams to build. Each component—headers, hero banners, feature blocks, buttons, dividers, footers and more—solves a specific layout need. The principles below explain how these components combine to create a consistent, brand-safe whole.
Lead with brand clarity
Each email should reassure recipients that it is from the NSW Government. The Header component uses the State crest, approved typography and colour tokens to support immediate brand recognition. Consistent use of the blue, red and grey palette, along with the Public Sans typeface, aligns the visual identity with web and print assets. The Footer restates identity with the crest, contact details and required legal links.
Design for accessibility first
Emails must meet WCAG 2.2 AA. Components support accessibility through built-in colour contrast, minimum touch-target sizes and semantic HTML. This ensures screen-reader users experience the same information hierarchy as sighted users. Images include alt text; headings follow a clear H1 to H6 structure; and buttons offer a high-contrast fallback.
Respond to every screen
Most users read emails on a phone. The component grid adapts from fixed-width tables to stacked columns on smaller screens. This responsive design prevents layout breaks and ensures tap zones remain user-friendly without hiding key visuals.
Build with reusable modules
Each module is a self-contained content block you can use in any sequence. For example, a newsletter might include: Header → Intro → Feature → Event list → Call-to-action → Footer. Reusing modules reduces production time and ensures consistent spacing, typography and colour.
Prioritise readability and hierarchy
Use short paragraphs, generous line spacing and clear headings for easy scanning. Dividers and background bands improve structure, while a consistent type scale ensures headings and body text work harmoniously.
Make actions obvious
Effective emails prompt action. The primary button is always in the strongest brand colour and centred on smaller screens. Secondary actions appear inline and never overshadow the main call to action.
Code for reliability
The design uses tables, inline CSS and VML fallbacks to support legacy email clients like Outlook. Decorative CSS elements (such as gradients and animations) do not affect access to core content, which is always presented in plain text and images with alt text.
Optimise performance
Images are cropped to exact module dimensions, provided at 1× and 2× resolution for high-density screens, and lazy-loaded when supported. CSS is minified and de-duplicated to reduce load time and improve deliverability.
Evolve in the open
The design system is publicly documented and versioned. Components include changelogs, and new variants (e.g. compact headers or dark mode) are added based on research and feedback. Community input via GitHub and the Digital NSW forum keeps the system current.