Feature/design system (#352)

* Start work on design-system overlay

* Update styles to match latest design system discussion

* Make final tweaks to Redbox design system overlay

Update latest CSS bundle

Tweak response feedback spacing

* Reduce spacing between email input and button

* Make i.AI logo greyscale

* Move iai-logo location

django_app/frontend/iai-readme.md

@@ -0,0 +1,50 @@
+# i.AI Design System
+
+This is a light-weight wrapper to go over the top of the gov.uk design system, adding styles for i.AI services.
+
+## Installation
+
+1. Import the `iai.scss` file
+
+2. Add the i.AI logo to govuk-assets folder (or other appropriate folder for serving static files)
+
+3. In the footer, replace:
+
+```
+<a class="govuk-footer__link govuk-footer__copyright-logo" href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/"> © Crown copyright</a>
+```
+
+With:
+
+```
+<a class="govuk-footer__link govuk-footer__copyright-logo" href="https://ai.gov.uk">
+    <img src="/static/govuk-assets/i-dot-ai-Official-Logo.svg" alt="Incubator for Artificial Intelligence" loading="lazy"/>
+</a>
+```
+
+## Optional styles and components
+
+## Brand colour
+
+The default brand colour is the i.AI pink. It is possible to change this by updating the `--product-colour` css variable at the top of the `iai.scss` file.
+
+### Phase banner
+
+Instead of using the standard phase banner, it is possible to add this to the header.
+
+Replace:
+
+```
+<a href="/" class="govuk-header__link govuk-header__service-name">Service name</a>
+```
+
+With:
+
+```
+<div class="iai-header__service-name-container">
+    <a href="/" class="govuk-header__link govuk-header__service-name">Service name</a>
+    <strong class="govuk-tag govuk-phase-banner__content__tag">Beta</strong>
+</div>
+```
+
+You may also wish to add a feedback link to the footer. Using the example at https://design-system.service.gov.uk/components/footer/#footer-with-links-and-secondary-navigation replace "Built by the Government Digital Service" with "This is a new service – your feedback will help us to improve it.".

django_app/frontend/iai.scss

@@ -0,0 +1,103 @@
+/* GENERAL */
+:root {
+    --product-colour: #A50202;
+    --border-radius: 0.5rem;
+}
+.govuk-main-wrapper {
+    padding: 2rem 0;
+}
+
+/* HEADER */
+.govuk-header {
+    border-bottom: 0;
+}
+.govuk-header__container {
+    border-bottom: 0;
+    margin-bottom: 0;
+    padding-bottom: 0.625rem;
+    padding-top: 0.5rem;
+}
+.govuk-header__logo {
+    display: none;
+}
+.govuk-header__content {
+    padding-left: 0;
+    width: 100%;
+}
+.iai-header__service-name-container {
+    align-items: center;
+    display: flex;
+    gap: 0.75rem;
+}
+.govuk-header__service-name {
+    margin-bottom: 0;
+}
+.govuk-header__navigation {
+    margin-bottom: 0;
+}
+.govuk-header__navigation-list {
+    margin-top: 0.75rem;
+}
+@media (min-width: 769px) {
+    .govuk-header__content {
+        align-items: center;
+        display: flex;
+        justify-content: space-between;
+    }
+    .govuk-header__navigation-list {
+        margin-top: 0;
+    }
+}
+
+/* BUTTON */
+.govuk-button {
+    border: 0;
+    border-radius: var(--border-radius);
+    box-shadow: none;
+    padding: 13px 12px 12px 12px;
+}
+
+/* FOOTER */
+.govuk-footer {
+    padding-top: 1.75rem;
+}
+.govuk-footer__meta-item {
+    margin-bottom: 0;
+}
+.govuk-footer__copyright-logo {
+    background-image: none;
+    padding-top: 0.5rem;
+}
+.govuk-footer__copyright-logo img {
+    filter: grayscale(1);
+    height: 5.25rem;
+    width: 7rem;
+}
+
+/* LINKS */
+.govuk-link:visited {
+    color: inherit;
+}
+
+/* NOTIFICATION BANNER */
+.govuk-notification-banner {
+    border-radius: var(--border-radius);
+}
+.govuk-notification-banner__content {
+    border-bottom-right-radius: var(--border-radius);
+    border-bottom-left-radius: var(--border-radius);
+}
+
+/* PHASE BANNER */
+.govuk-phase-banner__content__tag {
+    background-color: var(--product-colour);
+    font-weight: 700;
+    margin-top: -4px;
+    padding-top: 4px;
+    text-transform: uppercase;
+}
+
+/* INPUT, TEXTAREA */
+.govuk-input, .govuk-textarea {
+    border-radius: var(--border-radius);
+}

django_app/frontend/readme.md

@@ -0,0 +1,4 @@
+# SASS Compilation (if not using django-compressor)
+
+`npm install -g sass`
+`sass style.scss style.css -w`