<commit_before>import { FC, Fragment, createElement as h } from 'react';
import { Helmet } from 'react-helmet-async';
import { PageProps } from '@not-govuk/app-composer';
import { A, NavigationMenu } from '@not-govuk/components';

import '../../../../assets/colour.scss';

const colour = (colour: string, whiteText: boolean = false) => ({
  backgroundColor: colour,
  color: (
    whiteText
    ? 'white'
    : undefined
  ),
  border: '1px solid #CBCBCB'
});

const Page: FC<PageProps> = ({ location }) => (
  <div className="govuk-grid-row">
    <Helmet>
      <title>Colour - Home Office Design System</title>
      <meta name="og:article:section" content="Styles" />
    </Helmet>
    <div className="govuk-grid-column-one-quarter">
      <NavigationMenu items={[
        {
          href: '/styles/colour',
          text: 'Colour'
        },
        {
          href: '/styles/images',
          text: 'Images'
        },
        {
          href: '/styles/typography',
          text: 'Typography'
        }
      ]} />
    </div>

    <div className="govuk-grid-column-three-quarters">

      <span className="govuk-caption-xl">Styles</span>
      <h1 className="heading-section">Colour</h1>

      <p className="govuk-body">Always use the Home Office colour palette when you are designing and building internal services and products. For public facing and transactional sites use the <A href="https://design-system.service.gov.uk/styles/colour/">GOV.UK colour palette</A>.</p>
      <p className="govuk-body">Ask the central design team (<A href="mailto:<EMAIL>"><EMAIL></A>).</p>

      {/* PRIMARY  */}

      <section className="colour-swatch-wrapper">
        <h2 className="govuk-heading-l" style={{marginTop: "1.5em"}}>Main colours</h2>

        <h3 className="govuk-heading-m" style={{marginTop: "1.5em", marginBottom: "0.5em"}} >Brand colour</h3>
        <div className="colour-swatch">
          <span className="app-swatch" style={{backgroundColor: "#8f23b3"}}></span>
          <div className="hex">
            #8f23b3
          </div>
          <div className="colour-info">
            Purple is the Home Office's brand colour. This doesn't mean it should be used as the dominant colour in a digital interface. Overuse of the purple can make content hard to read on screen, particularly on services that are designed to be used for long periods of time. Home Office purple works best in digital interfaces when reserved for the Home Office logo and sparingly used as a keyline or accent.
          </div>
        </div>

        <h3 className="govuk-heading-m" style={{marginTop: "1.5em", marginBottom: "0.5em"}}>Page background</h3>
        <div className="colour-swatch">
          <span className="app-swatch" style={{backgroundColor: "#f1f1f1", border: "1px solid #CBCBCB"}}></span>
          <div className="hex">
            #f1f1f1
          </div>
          <div className="colour-info">
            Light grey is used as the page background colour on internal services to minimise eye strain caused by high contrast user interfaces. It also supports readability for those who have dyslexia.
          </div>
        </div>

        <h3 className="govuk-heading-m" style={{marginTop: "1.5em", marginBottom: "0.5em"}}>Border</h3>
        <div className="colour-swatch">
          <span className="app-swatch" style={{backgroundColor: "#cbcbcb", border: "1px solid #f1f1f1"}}></span><commit_msg>missing text for contacting central design team added<commit_after>import { FC, Fragment, createElement as h } from 'react';
import { Helmet } from 'react-helmet-async';
import { PageProps } from '@not-govuk/app-composer';
import { A, NavigationMenu } from '@not-govuk/components';

import '../../../../assets/colour.scss';

const colour = (colour: string, whiteText: boolean = false) => ({
  backgroundColor: colour,
  color: (
    whiteText
    ? 'white'
    : undefined
  ),
  border: '1px solid #CBCBCB'
});

const Page: FC<PageProps> = ({ location }) => (
  <div className="govuk-grid-row">
    <Helmet>
      <title>Colour - Home Office Design System</title>
      <meta name="og:article:section" content="Styles" />
    </Helmet>
    <div className="govuk-grid-column-one-quarter">
      <NavigationMenu items={[
        {
          href: '/styles/colour',
          text: 'Colour'
        },
        {
          href: '/styles/images',
          text: 'Images'
        },
        {
          href: '/styles/typography',
          text: 'Typography'
        }
      ]} />
    </div>

    <div className="govuk-grid-column-three-quarters">

      <span className="govuk-caption-xl">Styles</span>
      <h1 className="heading-section">Colour</h1>

      <p className="govuk-body">Always use the Home Office colour palette when you are designing and building internal services and products. For public facing and transactional sites use the <A href="https://design-system.service.gov.uk/styles/colour/">GOV.UK colour palette</A>.</p>
      <p className="govuk-body">Ask the central design team (<A href="mailto:<EMAIL>"><EMAIL></A>) if you have any questions or for advice.</p>

      {/* PRIMARY  */}

      <section className="colour-swatch-wrapper">
        <h2 className="govuk-heading-l" style={{marginTop: "1.5em"}}>Main colours</h2>

        <h3 className="govuk-heading-m" style={{marginTop: "1.5em", marginBottom: "0.5em"}} >Brand colour</h3>
        <div className="colour-swatch">
          <span className="app-swatch" style={{backgroundColor: "#8f23b3"}}></span>
          <div className="hex">
            #8f23b3
          </div>
          <div className="colour-info">
            Purple is the Home Office's brand colour. This doesn't mean it should be used as the dominant colour in a digital interface. Overuse of the purple can make content hard to read on screen, particularly on services that are designed to be used for long periods of time. Home Office purple works best in digital interfaces when reserved for the Home Office logo and sparingly used as a keyline or accent.
          </div>
        </div>

        <h3 className="govuk-heading-m" style={{marginTop: "1.5em", marginBottom: "0.5em"}}>Page background</h3>
        <div className="colour-swatch">
          <span className="app-swatch" style={{backgroundColor: "#f1f1f1", border: "1px solid #CBCBCB"}}></span>
          <div className="hex">
            #f1f1f1
          </div>
          <div className="colour-info">
            Light grey is used as the page background colour on internal services to minimise eye strain caused by high contrast user interfaces. It also supports readability for those who have dyslexia.
          </div>
        </div>

        <h3 className="govuk-heading-m" style={{marginTop: "1.5em", marginBottom: "0.5em"}}>Border</h3>
        <div className="colour-swatch">
          <span className="app-swatch" style={{backgroundColor: "#cbcbcb", border: "1px solid #f1f1f1"}}></span>
{'fraction_non_alphanumeric': 0.14289838337182448, 'fraction_numerical': 0.012702078521939953, 'mean_word_length': 2.8666294642857144, 'pattern_counts': {'":': 0, '<': 109, '<?xml version=': 0, '>': 113, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1359426', 'n_tokens_mistral': 2105, 'n_tokens_neox': 2044, 'n_words': 594}