All notable changes to the NSW Digital Design System Figma file will be documented in this file.
- Date picker: Initial
- Card carousel: Add additional indicators on mobile Added to Component library page Add numbered pagination
- New component: Card carousel (Initial) - Component library still to do
- Card carousel: Add additional indicators on mobile Added to Component library page Change variants from individual cards to the entire carousel - Component library still to do
- New component: Back to top
- Filters Instant-Down: Changed heading for 'Down' state from 'Filter' to 'Filters' for collapsed.
Batch-Down, Batch-Visible: Changed the 'Apply filters' button to go full width.
Mobile control down: Add Brand/Dark background when expanded.
- (Forms) Predictive list: Added text underline to result items
- Edit component: (Forms) Input group - Changed text input color from Text/Dark to Greys/Grey 01. Added ‘Search input’ variant to icon version of the search.
- Edit component: Tabs - Change 'Label' to 'Heading'.
- Edit component: Tables - Add variant for caption position.
- Edit component: List items - Changed 'Mobile' variant name 'Viewport'.
- Edit component: Progress Indicators - Fixed the sizing issue for 'Total' and 'Current steps' variants.
- Edit component: Results bar - Changed 'Mobile' variant name 'Viewport'. Changed mobile input label from v2 font family to v3 font family. Fixed the center alignment of the input label.
-
Edit component: In-Page alert - Update content with a link.
-
Edit component: Hero banner - Remove ‘banner bg’ from all versions/ variants. Header (On mobile) - Changed font family to Public Sans for the ‘Menu’ text. Changed font size to 12px for the ‘Menu’ text. Changed font weight to bold for the ‘Menu’ text.
-
Edit component: Global alert - Added version without 'cta' button to match the DS doc site.
-
Edit text style: Change the 'Large screens (>992px)/Small link from bold to regular.
-
Edit component: File upload - For the grey box that appears after uploading a file: Replace the 'Remove file' text with the icon. Add 4px rounded cornners to the grey background. Increase the height of the grey box to 56px.(ask Lauren if we should also add this icon to the close button component).
-
Edit component: Content blocks - Removed hidden layers from the Master Component that are not being used.
-
Edit component: Main navigation - Created new variant 'State' with new value called 'active'. Moved existing 'hover' variant into newly created 'State' variant.
- Edit component - Blockquote: Increase the padding space on desktop
- Edit component - Callout: Removed the
- Edit text style: Changed the ‘Small link’ text style from ‘bold’ to ‘regular’ (see updates to components such as the breadcrumbs which utilize the text style).
- Edit component - Buttons: Add Outlines (white) version.
- Edit component - Tabs: Realignment of the non active items.
- New Component - Tooltip
- Edit component - Filter: Replaced the back link with close icon for Batch Filter.
- Edit component - Filter: Change the headings text from 'Filter results' to 'Filters'
- New template - Landing pages
- Colour update - Changed all instances of Pink to Fuchsia
- Logo usage and placement - Add space to bottom white strip in the header (make consistent with the top)
- New component - Status labels
- New component - Select (multi)
- New component - File upload
- New component - Loader
- New component - Filter variants added
- Colour update - Status success green HEX updated from #00A908 to #008A07 for accessibility
- Colour update - Status warning orange HEX updated from #DC5800 to #C95000 for accessibility
- Colour update - Text hover colour updated to 10% of Brand Dark
- Tag stroke updated to inside and increased height of container to enable alignment in Figma and match height of code component.
- Predictive list cell spacing updated to 12px top and bottom to align with code component
- Highlight card height updated to hug to remove fixed setting bug
- New component - Hero banner off-white variant added
- New component - Footer brand dark, brand light, custom and social icon variants added
- New component - Dialog
- New Usage & demo code component added to encourage users to view individual component guidance.
- Side navigation level 4 indentation increased to align with code.
- New component - Hero banner variant added using line system
- New component - Steps
- New method - You are here
- Hero banner featured list Brand Accent line changed to Brand Light
- Drop shadow added as Figma style - Floating drop shadow
- Drop shadow on predictive list and main navigation mega nav components replaced with Floating drop shadow style (no visual change).
- Updated Figma date component to Public Sans
- Header:
- updated with new NSW Government logo
- increased top and bottom padding to 20px to align with brand requirements
- updated spacing between NSW Government logo and descriptor/co-brand logo to 40px to align with brand requirements
- updated descriptor line height to 28px
- added new variant of co-brand header for rectangular co-brand logos
- White keyline removed from NSW Government logo
- Callout highlight bar updated from 2px to 4px
- New Templates - Maps
- New Components - Map symbols, pop ups and controls
- Typography styles updated with Public Sans
- Text links bolded in Content blocks, Filters, Tags and Hero search.
- Update colour palette and colour theming:
- Primary Blue updated to Blue 01
- Primary Highlight updated to Red 02
- Secondary Blue updated to Blue 02
- Light 10 updated to Off-white
- Light 20 updated to Grey 04
- Light 40 updated to Grey 03
- Dark 60 updated to Grey 02
- Dark 70 updated to Grey 02
- Dark 80 updated to Grey 01
- Core components defined - including Masthead, Header, Footer, Buttons and Forms.
- All components updated with new typography and colour palette
- All icons updated to material icons and sizing implemented to be in line with updated guidelines (see individual componemt for updates)
- Accordion:
- Default and active states updated
- Chevron icon updated from 16px to 30px
- Blockquote highlight bar updated from 6px to 2px
- Breadcrumb chevron icon updated from 8px to 20px (reduced spacing between text and material icon)
- Buttons:
- padding on all sides reduced by 2px
- Primary renamed Brand Dark
- Brand Dark outline text updated to Brand Dark
- Danger colour updated to Status Error Red #B81237
- Disabled state updated to 38% of active state
- Hover state updated to according dark or light overlay
- Variant Brand light, Brand light outline and with icon added
- Callout:
- Icon removed
- Background colour removed
- Padding around content updated to 16px on all sides
- Highlight bar updated from 6px to 2px
- Cards:
- Variants Brand Light and Brand Dark added
- Removed drop shadow
- Added outline on white variant
- Headline updated to text dark
- Hover state updated to full colour change
- Highlight bar updated from 6px to 4px
- Arrow icon updated from 24px to 30px
- Filters:
- Mobile filters: 16px to 24px
- Mobile filters back: 16px to 24px (reduced spacing between text and material icon)
- Footer:
- Tertiary link (viewport 0-767) 16px horizontal padding added between columns
- Secondary links (viewport 0-991) 16px horizontal padding added between columns and vertical padding decreased to 16px between rows
- Secondary link (viewport <991) 32px horizontal padding added between columns.
- Forms:
- Dropdown form field chevron updated to Grey 01
- Form field colour updated from Dark 70 to Grey 01
- Input group search icon updated from 24px to 36px
- Validation tick icon updated from 16px to 20px
- Validation info circle icon updated from 16px to 20px
- Global alert Default variant updated to Information and close icons reduced in size.
- Header:
- Masthead padding top and bottom reduced to 8px
- New component added: Masterbrand Header
- New component added: Co-Brand Header (vertial staked)
- New component added: Co-Brand Header (horizontal staked)
- Mobile search icon updated from 16px to 24px
- Mobile menu icon updated from 16px to 24px
- Desktop header search icon updated from 24px to 36px
- Header text updated to Brand Dark
- Hero banner:
- Variants Brand Light and Brand Dark added
- New and replaceable watermark (due to brand removing watermark from visual identity)
- Hero search highlight bar updated from 6px to 4px
- Featured list highlight bar updated from 4px to 2px
- In-page navigation highlight bar updated from 4px to 2px
- In-page notification:
- Name updated to In-page alerts
- Highlight bar updated from 6px to 4px
- Icon updated from 32px to 30px
- Link list arrow icon updated from 16px to 20px
- Main navigation:
- Mobile navigation chevron icon updated from 16px to 24px
- Mobile navigation back text updated to brand dark
- Mega navigation arrow icon updated from 16px to 24px
- Desktop main navigation chevron icon updated from 12px to 24px (reduced spacing between text and material icon)
- Top border line removed
- Media caption variants Brand Light and Brand Dark added
- Pagination:
- Direction links removed and replaced with chevrons
- Active page link updated to Text dark with Accent highlight bar
- Inactive page udpated to Brand dark to align with text link style
- Spacing reduced between items
- Pictogram colour variants added
- Tabs highlight bar updated from 4px to 2px
- Tag colour updated from Secondary Blue to Blue 01
- New component added: Input group button form field
- New component added: Input group icon form field
- New component added: Predictive search for input field
- New component added: Expanding multiselect
- New component added: List item
- New component added: Filters
- New component added: Mobile filter icon
- New component added: Results bar
- Search bar component reduced to 58px in height
- New templates added: Search results
- New templates added: Filtering
- New component added: Media
- “Media caption” component renamed to “Caption” and moved to under Media
- New grid styles added: xl, lg, md, sm, xs breakpoints
- New typography style added: Text link strong
- Renamed "Emphasis" typography style to "Strong" to align with code
- Global alert updated to demonstrate linking text in description
- New component added - Media caption without background
- Updated Hero banner
- Previous Hero banner moved to archive
- New templates added - Homepage
- New templates added - Basic content page
- New component added - Content Cards
- New component added - Content Blocks
- New component added - Progress indicator
- Highlight card component library path renamed from "Cards" to "Highlight card"
- Highlight card component image updated to consistent placeholder image
- Highlight card default desktop width increased by 1px to 368px to allow three column card layout with 32ps gutter to equal 1168px
- Renamed highlight card "Headline only" to "Headline"
- Renamed highlight card "All options" to "Label and date"
- Renamed highlight card "With image" to "Image"
- Renamed "Highlight" button to "Danger"
- Renamed "Outline" button to "Secondary"
- Aligned button constraints to top and left of frame
- Max container widths added to Grid sizing table
- Updated In-page navigation to separate section titles for prototyping
- Updated Sign up form border colour to Light20 and linked Privacy in checkbox text
- Updated Sign up component form fields to new variant components
- Added 4px to bottom of Section Link title in footer to match code
- Added usage guidance for strokes and fills
- Updated H3 line height to 32px on large screens
- Updated H4 line height to 28px on large screens
- Updated H4 line height to 24px on small screens
- Updated H5 & H6 line height to 24px on small and large screens
- Updated Body line height to 24px on small and large screens
- Updated Small text line height to 19px on small and large screens
- Added Intro text typography style on large and small screens
- Removed Body condensed typography style on large and small screens
- Replaced instances of bold font with semibold for consistency
- Updated md, lg and xl grid breakpoint to 16px margins
- Updated md, lg and xl grid breakpoints to 16px gutters
- Line break colour changed to Light20 for consistency
- Corner radius on cards updated to 4px to refelct build
- Added underline to in-page notification, callout, in-page navigation and footer text links for consistency and accessibility
- Updated in-page notification and callout icons to 24px on mobile and 32px on desktop
- Updated global alert close icon to 24px
- Updated hero banner arrow icon to 32px
- Updated link list pattern to be consistent with typography style and updated icon size to 16px
- Updated internal spacing for cards and arrow icon size to 24px
- Updated Headline only card to H3 title
- Updated internal spacing for mega menu, level 2 links to NSW Primary Blue, and icon size to 24px
- Changed label form field to body emphasis and increased spacing under helper text to improve legibility
- Decreased spacing after chevron in breadcrumbs
- Added hero search pattern