docs(docs): 📝 update about information

.vscode/extensions.json

@@ -10,6 +10,7 @@
     "editorconfig.editorconfig",
     "stylelint.vscode-stylelint",
     "alexkrechik.cucumberautocomplete",
-    "circleci.circleci"
+    "circleci.circleci",
+    "nuxt.mdc"
   ]
 }

.vscode/settings.json

@@ -31,6 +31,9 @@
   "cSpell.words": [
     "colour",
     "composables",
+    "customisation",
+    "customising",
+    "familiarise",
     "formkit",
     "jsonapi",
     "maxlength",

docs/app.config.ts

@@ -9,7 +9,7 @@ export default defineAppConfig({
       neutralFooter: false
     },
     framework: {
-      title: 'Ripple Layer Development Guide',
+      title: 'Ripple Framework',
       color: 'var(--rpl-clr-dark)',
       neutralFooter: true
     }

docs/components/content/DocsIcon.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+interface Props {
+  name: string
+  size?: 'xs' | 's' | 'm' | 'l'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 'xs'
+})
+</script>
+
+<template>
+  <RplIcon :name="name" colour="default" :size="size" />
+</template>

docs/content/1.index.md

@@ -5,13 +5,13 @@ icon: carbon:home
 layout: home
 primaryCTA: 
   title: For Designers
-  description: Paragraph Default. Cards contain actionable content about a single topic. These are usually grouped as similar style sets.
+  description: Information for designers using Ripple to create brand Victoria compliant digital experiences.
   image: 
     src: /assets/img/for-designers.png
   url: /design-system/design/getting-started
 secondaryCTA: 
   title: For Developers
-  description: Paragraph Default. Cards contain actionable content about a single topic. These are usually grouped as similar style sets.
+  description: How to get started implementing Ripple UI components in digital products.
   image:
     src: /assets/img/for-developers.png
   url: /design-system/develop/getting-started
@@ -20,25 +20,30 @@ modulesCTA:
   description: Paragraph Default. Cards contain actionable content about a single topic. These are usually grouped as similar style sets.
   url: /framework
 quickLink1: 
-  title: Who should use it
-  description: Paragraph Default. Cards contain actionable content about a single topic. These are usually grouped as similar style sets.
-  url: /
+  title: About Ripple
+  description: Ripple is a system of reusable styles, components, patterns and tools for creating Victorian government digital experiences.
+  url: /design-system/about/what-is-ripple
 quickLink2: 
-  title: How it works
-  description: Paragraph Default. Cards contain actionable content about a single topic. These are usually grouped as similar style sets.
-  url: /
+  title: Who should use it
+  description: Ripple is built by government for government to deliver services Victorians trust and rely on.
+  url: /design-system/about/whos-it-for
 quickLink3: 
-  title: Getting help
-  description: Paragraph Default. Cards contain actionable content about a single topic. These are usually grouped as similar style sets.
-  url: /
+  title: Design principles
+  description: The guiding principles that are the foundation of the Ripple Design System.
+  url: /design-system/design/our-design-principles
+
+framework:
+  title: Ripple framework
+  description: Ripple framework contains the tools for building SDP sites using Ripple design system components.
+  url: /framework
 # whatsNew: 
 #   title: What's new
 #   description: Ripple release information text
 #   links:
 #     - 
-#       text: 'This link goes somewhere'
+#       text: 'Ripple 2.0 changelog'
 #       url: '#first'
 #     - 
-#       text: 'As does this one'
+#       text: 'Ripple 2.0 Figma changelog'
 #       url: '#second'
 ---

docs/content/design-system/1.about/1.what-is-ripple.md

@@ -1,7 +1,66 @@
 ---
-title: What is ripple
-description: Page description
+title: About Ripple
+description: The design system for brand Victoria digital products
 layout: page
 ---
 
-## Content goes here
+Ripple is a system of reusable styles, components, patterns and tools for building brand Victoria digital products.
+
+Developed by the Single Digital Presence (SDP) team within the Department of Government Services,
+Ripple strives to:
+
+- make it easier for citizens to find, understand and use government information
+- ensure users can easily navigate sites regardless of technical ability, location or device
+- allow designers and developers to create consistent Brand Victoria digital products
+- increase the speed of delivery for digital products and services
+
+Over 50 government websites use Ripple to date, including our main vic.gov.au platform. These sites attract the visitation of millions of views per month.
+
+
+![Screenshots of websites using SDP, vic.gov.au, police.vic.gov.au, health.vic.gov.au, legislation.vic.gov.au](/assets/img/sites.png){.docs-center-img}
+
+
+## Why use Ripple?
+
+### We solve the hard problems so you don’t have to
+
+We have spent the past 5 years refining Ripple based on user feedback to ensure it...
+
+- meets the publishing needs of government users, and
+- makes it easier for citizens to interact with government services
+
+Ripple users can be confident their site meets the highest industry standards and best practices for:
+
+- accessibility
+- SEO
+- security
+- performance
+
+### Promotes efficiency and reuse across government
+
+Ripple promotes efficiency and reuse by providing reusable styles, components and patterns.
+
+It provides a set of standards to manage design at scale, to...
+
+- reduce redundancy
+- create a shared language
+- provide visual consistency
+
+Developer contributions can be shared across projects, adding value to all government departments. This results in reduced project development time and expense.
+
+### By government, for government
+
+The Ripple design system has been made open source by to foster collaboration across government. By making the system open source, departments and agencies can help improve the citizen experience across government. Ripple has been developed by government, for government and retains all intellectual property and expertise.
+
+
+## Who can use Ripple?
+
+Ripple is open to all departments or agencies that use Victorian Government branding.
+
+See [Who's it for](2.whos-it-for.md) for more information on who Ripple is for.
+
+## How do I find out more?
+
+If you are a Victorian Government department or agency wanting to use Ripple in a brand Victoria digital product (or a vendor supporting them), please visit [https://www.vic.gov.au/work-sdp](https://www.vic.gov.au/work-sdp) or contact digital@dpc.vic.gov.au
+
+To find out more about the Single Digital Presence program please see [https://www.vic.gov.au/single-digital-presence](https://www.vic.gov.au/single-digital-presence).

docs/content/design-system/1.about/2.whos-it-for.md

@@ -0,0 +1,13 @@
+---
+title: Who's it for?
+description: Built by government for government.
+layout: page
+---
+
+Ripple is built to help deliver websites to deliver government information to Victorian citizens. It is primarily used by Victorian government departments and agencies through the [SDP program](https://www.vic.gov.au/single-digital-presence). 
+
+Ripple is designed to make it easy to communicate government information in a clear, concise and accessible manner for all Victorians. It is solely used to represent the Victorian government brand in digital products and services.
+
+> Ripple is intended for Victorian government branded products only, and should only be used to produce approved Victorian government branded communications.
+
+As the system is intended to be modular, it is possible to opt into various parts of the system. For example projects not on SDP can adopt the design into their own digital products, either by building their own components, referencing our styles or importing our components. See the [Usage page](../3.develop/3.usage.md) for more information. If you are site using or wanting to use Ripple in a non SDP project please get in [touch with us](3.getting-support.md) to see how we can support your project.

docs/content/design-system/1.about/3.getting-support.md

@@ -0,0 +1,26 @@
+---
+title: Support
+description: How to get help
+layout: page
+---
+
+
+The [Ripple design system](https://www.vic.gov.au/ripple-design-system) is maintained by the [Single Digital Presence (SDP)](https://www.vic.gov.au/single-digital-presence) team at the Victorian Department of Government Services.  
+
+You can reach out to us via the following channels:
+
+### For technical and project support
+
+- join the discussion on [GitHub](https://github.com/dpc-sdp/ripple-framework/discussions)
+- log a request through our [helpdesk](https://digital-vic.atlassian.net/servicedesk/customer/portals)
+- sign up to the [SDP Slack](vic-sdp.slack.com) (Open to projects with an MoU for application support)
+
+## Design enquiries
+
+Email: design@dpc.vic.gov.au
+
+## General enquiries
+
+Email: digital@dpc.vic.gov.au
+
+

docs/content/design-system/2.design/1.getting-started.md

@@ -4,7 +4,7 @@ description:
 layout: page
 ---
 
-Ripple is the design system for the Victorian Government’s digital products. The Ripple Design System makes websites and other digital products look and feel like part of the vic.gov.au brand.
+Ripple is the design system for Victorian Government digital products. The Ripple Design System makes websites and other digital products look and feel like part of the vic.gov.au brand.
 
 The Ripple Design System creates an accessible and consistent visual user interface across all our digital products. This helps citizens trust they are visiting an official source of Victorian Government information.
 

docs/content/design-system/2.design/2.our-design-principles.md

@@ -17,7 +17,7 @@ The Ripple Design System uses these principles when making design decisions.
 
 ### Inclusive.
 
-- A11y is top priority
+- Accessibility is top priority
 - Collaborative in design
 - Transparent documentation
 - Friendly, helpful and trustworthy

docs/content/design-system/2.design/3.design-tokens.md

@@ -95,4 +95,4 @@ Design tokens prevent or reduce the need to find and replace thousands of instan
 
 ## For developers
 
-Design tokens in Ripple are implemented as CSS variables. E.g. `--rpl-clr-primary: #0052C2`. Theming is achieved by overriding or adjusting the value of these CSS variables.
+For information for developers using tokens to theme Ripple components see the [themeing guide](../3.develop/2.theming.md)

docs/content/design-system/2.design/4.theme-and-brand-application.md

@@ -0,0 +1,74 @@
+---
+title: Theme and brand application
+description: Design tokens store our design decisions in the Ripple Design System. They are the single source of truth.
+layout: page
+label: Core
+
+---
+
+Ripple has been designed with in-built custom theming capabilities. Theming can be applied if your site requires department or entity branding and has been approved to use theming. Please note it is recommend you utilise the brand equity of vic.gov where possible and only theme your site if needed and approved. Please contact the SDP team for more information on approvals for theming.
+
+Ripple uses primary and accent colours, an optional gradient, a link colour and a focus state colour. You can read more about their roles and uses in the colour documentation.
+
+When theming your site, styles and components will re-theme automatically. This has been done through the use of design tokens. Design tokens represent repeated design decisions that make up a design system's visual style. Tokens replace static values, such as hex codes for colour. The token informs how colour is used and inherited to ensure a consistent and accessible user experience. 
+
+We’ve designed a colour testing process to ensure the selected colours will pass the accessibility contrast ratios. By classifying the selected colours into ‘Light’ or ‘Dark’ category. The colour system will automatically provide accessible colour contrast to ensure legibility of all content. You will not need to check if you meet WCAG requirements as we have done this for you.
+
+To learn more about if your site should be themed, please contact the SDP team.
+
+---
+
+## Create a custom theme
+
+Ripple has been designed with a primary and accent colour, this informs the colour framework. 
+
+A link colour, focus colour and optional gradient are also required when theming.
+
+The primary, accent and focus colours can be either light or dark:
+
+- ‘Light’ means the colour is WCAG 2.1 AA compliant with dark type (rpl-clr-dark / #1A1A1A)
+- ‘Dark’ means the colour is WCAG 2.1 AA compliant with light type (rpl-clr-light / #FFFFFF)
+
+To classify your colour as light or dark, we recommend the use [WebAim Colour Contrast Checker](https://webaim.org/resources/contrastchecker/) or the Figma plugin, [A11y - Colour Contrast Checker](https://www.figma.com/community/plugin/733159460536249875) to see if the colour is accessible with the Ripple dark or light type colours listed above.“
+
+Classifying colours as either ‘dark’ or ‘light’ informs the implementation of other colour tokens to guarantee WCAG 2.1 AA colour contrast requirements. 
+
+It is recommended that the primary colour is always visually darker than the accent and is visually different at glance. This will ensure your users are quickly and easily directed to the most important areas of a web page.
+
+Guidance for creating your own theme can be found on the Theming page of the Ripple 2.0 Design System Figma file. 
+
+If you don’t have access, you can request access to view the Ripple 2.0 Design System. 
+
+---
+
+## Component specific theming
+
+The Ripple Design System has components that allow for specific theming. This is optional, and if not used, components will adopt the default framework styling. Component specific theming is defined at a site level, and will affect all instances of the component.
+
+There are two options for component specific styling:
+
+- Neutral
+- Custom
+
+### Neutral
+
+'Neutral' can be applied to the following components:
+
+- Buttons
+- Header (Reverse + Image variants only)
+- Footer
+
+The colour of neutral component variants cannot be changed. Neutral components have predefined neutral styling and cannot be edited or customised.
+
+
+### Custom
+
+'Custom' component theming can only be applied to the Footer.
+
+The Footer has been created with component specific design tokens. It is recommended custom theming is only done if required.
+
+To learn more about custom styling please see the Theming page of the Ripple 2.0 Design System Figma file. 
+
+
+## Theme Accessibility 
+