npm - newskit - Versions diffs - 5.4.3 → 5.4.4 - Mend

newskit 5.4.3 → 5.4.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (122) hide show

package/public/theme/breakpoints/index.html CHANGED Viewed

@@ -6,7 +6,7 @@
             body {
               margin: 0;
             }
-            </style><script data-react-helmet="true" type="text/javascript">window._sp_ = {"config":{"accountId":259,"propertyHref":"https://newskit.co.uk","baseEndpoint":"https://cdn.privacy-mgmt.com"}}</script><script data-react-helmet="true" type="text/javascript" src="https://cdn.privacy-mgmt.com/messagingNoTcfApi.js" async=""></script><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="icon" type="image/x-icon" href="static/favicon.ico"/><link rel="apple-touch-icon" sizes="180x180" href="static/apple-touch-icon.png"/><link rel="icon" type="image/png" sizes="16x16" href="static/favicon-16x16.png"/><link rel="icon" type="image/png" sizes="32x32" href="static/favicon-32x32.png"/><link rel="icon" type="image/png" sizes="192x192" href="static/android-chrome-192x192.png"/><link rel="manifest" href="static/site.webmanifest"/><meta name="msapplication-TileColor" content="#ffffff"/><meta name="msapplication-square150x150logo" content="mstile-150x150.png"/><meta name="theme-color" content="#ffffff"/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-5cd94c89d3acac5f.js"></script><script src="/_next/static/chunks/webpack-c0cad99bf97088e2.js" defer=""></script><script src="/_next/static/chunks/framework-a1dc26d0ae5e7407.js" defer=""></script><script src="/_next/static/chunks/main-ea11f884a96185e4.js" defer=""></script><script src="/_next/static/chunks/pages/_app-b9df849172598dfa.js" defer=""></script><script src="/_next/static/chunks/2ebec9a3-c51e9946115f3de3.js" defer=""></script><script src="/_next/static/chunks/2365afd3-2dcc650597ed5bea.js" defer=""></script><script src="/_next/static/chunks/61519-78f3aa2a16269f79.js" defer=""></script><script src="/_next/static/chunks/97475-a4abd0f30d3e91f5.js" defer=""></script><script src="/_next/static/chunks/51863-2bfb71df42da8833.js" defer=""></script><script src="/_next/static/chunks/58760-80709d0c225631ef.js" defer=""></script><script src="/_next/static/chunks/39471-ccf0d27bcb507ab7.js" defer=""></script><script src="/_next/static/chunks/83762-cf7a34852c935d16.js" defer=""></script><script src="/_next/static/chunks/92206-0a9a59fef6e96a54.js" defer=""></script><script src="/_next/static/chunks/27107-b360fbe4fb7271f4.js" defer=""></script><script src="/_next/static/chunks/23816-e4c65d0cd93ea612.js" defer=""></script><script src="/_next/static/chunks/pages/theme/breakpoints-e104286b2854ab7a.js" defer=""></script><script src="/_next/static/4eEzQdZEpSITC7CcT92PH/_buildManifest.js" defer=""></script><script src="/_next/static/4eEzQdZEpSITC7CcT92PH/_ssgManifest.js" defer=""></script><script src="/_next/static/4eEzQdZEpSITC7CcT92PH/_middlewareManifest.js" defer=""></script></head><body><style data-emotion="css-global goexhq">html{scroll-behavior:smooth;scroll-padding-top:90px;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-regular-webfont.woff2') format('woff2'),url('static/fonts/dmsans-regular-webfont.woff') format('woff');font-style:normal;font-weight:400;font-display:swap;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-italic-webfont.woff2') format('woff2'),url('static/fonts/dmsans-italic-webfont.woff') format('woff');font-style:italic;font-weight:400;font-display:swap;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-medium-webfont.woff2') format('woff2'),url('static/fonts/dmsans-medium-webfont.woff') format('woff');font-style:normal;font-weight:500;font-display:swap;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-mediumitalic-webfont.woff2') format('woff2'),url('static/fonts/dmsans-mediumitalic-webfont.woff') format('woff');font-style:italic;font-weight:500;font-display:swap;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-bold-webfont.woff2') format('woff2'),url('static/fonts/dmsans-bold-webfont.woff') format('woff');font-style:normal;font-weight:700;font-display:swap;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-bolditalic-webfont.woff2') format('woff2'),url('static/fonts/dmsans-bolditalic-webfont.woff') format('woff');font-style:italic;font-weight:700;font-display:swap;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-bold-webfont.woff2') format('woff2'),url('static/fonts/poppins-bold-webfont.woff') format('woff');font-weight:700;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-bolditalic-webfont.woff2') format('woff2'),url('static/fonts/poppins-bolditalic-webfont.woff') format('woff');font-weight:normal;font-style:italic;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-extrabold-webfont.woff2') format('woff2'),url('static/fonts/poppins-extrabold-webfont.woff') format('woff');font-weight:800;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-extrabolditalic-webfont.woff2') format('woff2'),url('static/fonts/poppins-extrabolditalic-webfont.woff') format('woff');font-weight:800;font-style:italic;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-italic-webfont.woff2') format('woff2'),url('static/fonts/poppins-italic-webfont.woff') format('woff');font-weight:400;font-style:italic;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-light-webfont.woff2') format('woff2'),url('static/fonts/poppins-light-webfont.woff') format('woff');font-weight:300;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-lightitalic-webfont.woff2') format('woff2'),url('static/fonts/poppins-lightitalic-webfont.woff') format('woff');font-weight:300;font-style:italic;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-medium-webfont.woff2') format('woff2'),url('static/fonts/poppins-medium-webfont.woff') format('woff');font-weight:500;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-mediumitalic-webfont.woff2') format('woff2'),url('static/fonts/poppins-mediumitalic-webfont.woff') format('woff');font-weight:500;font-style:italic;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-regular-webfont.woff2') format('woff2'),url('static/fonts/poppins-regular-webfont.woff') format('woff');font-weight:400;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-semibold-webfont.woff2') format('woff2'),url('static/fonts/poppins-semibold-webfont.woff') format('woff');font-weight:600;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-semibolditalic-webfont.woff2') format('woff2'),url('static/fonts/poppins-semibolditalic-webfont.woff') format('woff');font-weight:600;font-style:italic;}@font-face{font-family:'DM Mono';src:url('static/fonts/dmmono-medium.woff2') format('woff2'),url('static/fonts/dmmono-medium.woff') format('woff');font-style:normal;font-weight:500;font-display:swap;}</style><script type="text/javascript">(function(a,b,c,d){
+            </style><script data-react-helmet="true" type="text/javascript">window._sp_ = {"config":{"accountId":259,"propertyHref":"https://newskit.co.uk","baseEndpoint":"https://cdn.privacy-mgmt.com"}}</script><script data-react-helmet="true" type="text/javascript" src="https://cdn.privacy-mgmt.com/messagingNoTcfApi.js" async=""></script><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="icon" type="image/x-icon" href="static/favicon.ico"/><link rel="apple-touch-icon" sizes="180x180" href="static/apple-touch-icon.png"/><link rel="icon" type="image/png" sizes="16x16" href="static/favicon-16x16.png"/><link rel="icon" type="image/png" sizes="32x32" href="static/favicon-32x32.png"/><link rel="icon" type="image/png" sizes="192x192" href="static/android-chrome-192x192.png"/><link rel="manifest" href="static/site.webmanifest"/><meta name="msapplication-TileColor" content="#ffffff"/><meta name="msapplication-square150x150logo" content="mstile-150x150.png"/><meta name="theme-color" content="#ffffff"/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-5cd94c89d3acac5f.js"></script><script src="/_next/static/chunks/webpack-c0cad99bf97088e2.js" defer=""></script><script src="/_next/static/chunks/framework-a1dc26d0ae5e7407.js" defer=""></script><script src="/_next/static/chunks/main-ea11f884a96185e4.js" defer=""></script><script src="/_next/static/chunks/pages/_app-b9df849172598dfa.js" defer=""></script><script src="/_next/static/chunks/2ebec9a3-c51e9946115f3de3.js" defer=""></script><script src="/_next/static/chunks/2365afd3-2dcc650597ed5bea.js" defer=""></script><script src="/_next/static/chunks/61519-78f3aa2a16269f79.js" defer=""></script><script src="/_next/static/chunks/97475-a4abd0f30d3e91f5.js" defer=""></script><script src="/_next/static/chunks/51863-d9a28ce188f9fa84.js" defer=""></script><script src="/_next/static/chunks/58760-80709d0c225631ef.js" defer=""></script><script src="/_next/static/chunks/39471-ccf0d27bcb507ab7.js" defer=""></script><script src="/_next/static/chunks/83762-cf7a34852c935d16.js" defer=""></script><script src="/_next/static/chunks/92206-0a9a59fef6e96a54.js" defer=""></script><script src="/_next/static/chunks/27107-b360fbe4fb7271f4.js" defer=""></script><script src="/_next/static/chunks/23816-e4c65d0cd93ea612.js" defer=""></script><script src="/_next/static/chunks/pages/theme/breakpoints-e104286b2854ab7a.js" defer=""></script><script src="/_next/static/16aAekWqHChB9xZCUOXJs/_buildManifest.js" defer=""></script><script src="/_next/static/16aAekWqHChB9xZCUOXJs/_ssgManifest.js" defer=""></script><script src="/_next/static/16aAekWqHChB9xZCUOXJs/_middlewareManifest.js" defer=""></script></head><body><style data-emotion="css-global goexhq">html{scroll-behavior:smooth;scroll-padding-top:90px;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-regular-webfont.woff2') format('woff2'),url('static/fonts/dmsans-regular-webfont.woff') format('woff');font-style:normal;font-weight:400;font-display:swap;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-italic-webfont.woff2') format('woff2'),url('static/fonts/dmsans-italic-webfont.woff') format('woff');font-style:italic;font-weight:400;font-display:swap;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-medium-webfont.woff2') format('woff2'),url('static/fonts/dmsans-medium-webfont.woff') format('woff');font-style:normal;font-weight:500;font-display:swap;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-mediumitalic-webfont.woff2') format('woff2'),url('static/fonts/dmsans-mediumitalic-webfont.woff') format('woff');font-style:italic;font-weight:500;font-display:swap;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-bold-webfont.woff2') format('woff2'),url('static/fonts/dmsans-bold-webfont.woff') format('woff');font-style:normal;font-weight:700;font-display:swap;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-bolditalic-webfont.woff2') format('woff2'),url('static/fonts/dmsans-bolditalic-webfont.woff') format('woff');font-style:italic;font-weight:700;font-display:swap;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-bold-webfont.woff2') format('woff2'),url('static/fonts/poppins-bold-webfont.woff') format('woff');font-weight:700;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-bolditalic-webfont.woff2') format('woff2'),url('static/fonts/poppins-bolditalic-webfont.woff') format('woff');font-weight:normal;font-style:italic;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-extrabold-webfont.woff2') format('woff2'),url('static/fonts/poppins-extrabold-webfont.woff') format('woff');font-weight:800;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-extrabolditalic-webfont.woff2') format('woff2'),url('static/fonts/poppins-extrabolditalic-webfont.woff') format('woff');font-weight:800;font-style:italic;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-italic-webfont.woff2') format('woff2'),url('static/fonts/poppins-italic-webfont.woff') format('woff');font-weight:400;font-style:italic;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-light-webfont.woff2') format('woff2'),url('static/fonts/poppins-light-webfont.woff') format('woff');font-weight:300;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-lightitalic-webfont.woff2') format('woff2'),url('static/fonts/poppins-lightitalic-webfont.woff') format('woff');font-weight:300;font-style:italic;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-medium-webfont.woff2') format('woff2'),url('static/fonts/poppins-medium-webfont.woff') format('woff');font-weight:500;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-mediumitalic-webfont.woff2') format('woff2'),url('static/fonts/poppins-mediumitalic-webfont.woff') format('woff');font-weight:500;font-style:italic;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-regular-webfont.woff2') format('woff2'),url('static/fonts/poppins-regular-webfont.woff') format('woff');font-weight:400;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-semibold-webfont.woff2') format('woff2'),url('static/fonts/poppins-semibold-webfont.woff') format('woff');font-weight:600;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-semibolditalic-webfont.woff2') format('woff2'),url('static/fonts/poppins-semibolditalic-webfont.woff') format('woff');font-weight:600;font-style:italic;}@font-face{font-family:'DM Mono';src:url('static/fonts/dmmono-medium.woff2') format('woff2'),url('static/fonts/dmmono-medium.woff') format('woff');font-style:normal;font-weight:500;font-display:swap;}</style><script type="text/javascript">(function(a,b,c,d){
               a='//tags.tiqcdn.com/utag/newsinternational/thetimes.newskit/dev/utag.js';
               b=document;
               c='script';
@@ -75,4 +75,4 @@
 </span><span class="linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2em;padding-right:1em;text-align:right;user-select:none;color:#C0C0C0">5</span><span>      lg</span><span class="token" style="color:#577FFB">:</span><span> </span><span class="token" style="color:#0A782A">&#x27;editorialHeadline030&#x27;</span><span class="token" style="color:#535353">,</span><span>
 </span><span class="linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2em;padding-right:1em;text-align:right;user-select:none;color:#C0C0C0">6</span><span>    </span><span class="token" style="color:#535353">}</span><span>
 </span><span class="linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2em;padding-right:1em;text-align:right;user-select:none;color:#C0C0C0">7</span>
-</code></pre></div></div><div class="css-exj33h"><div class="css-1tsq98o"></div></div><div class="css-exj33h"><div class="css-1tsq98o"><hr data-testid="divider" aria-hidden="true" class="css-1a12fxg"/></div></div></div></section></div><div class="css-12v76db"><style data-emotion="css 1wla9vq">.css-1wla9vq{height:100%;display:block;}.css-1wla9vq >span>div{width:100%;}</style><style data-emotion="css 1kf8klr">.css-1kf8klr{display:inline-block;-webkit-text-decoration:none;text-decoration:none;height:100%;display:block;}@media screen and (prefers-reduced-motion: no-preference){.css-1kf8klr{transition-property:color,fill;transition-duration:200ms,200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-1kf8klr{transition-property:color,fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1);}}.css-1kf8klr:hover:not(:disabled){-webkit-text-decoration:none;text-decoration:none;}.css-1kf8klr >span>div{width:100%;}</style><a href="theme/colours" class="css-1kf8klr"><span class="css-17x5lw"><div class="css-1k3e0au"><style data-emotion="css ihrckf">.css-ihrckf{transition-property:box-shadow;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}@media screen and (min-width: 768px){.css-ihrckf{min-height:248px;}}@media screen and (min-width: 1024px){.css-ihrckf{min-height:304px;}}</style><style data-emotion="css z6p3rj">.css-z6p3rj{box-sizing:border-box;overflow:hidden;background-color:#5E44E4;border-radius:12px;position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;transition-property:box-shadow;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}@media screen and (min-width: 768px){.css-z6p3rj{min-height:248px;}}@media screen and (min-width: 1024px){.css-z6p3rj{min-height:304px;}}</style><div class="css-z6p3rj"><style data-emotion="css 1fz92cy">.css-1fz92cy{box-sizing:border-box;display:block;position:relative;margin-bottom:0;}.css-1fz92cy svg{border-radius:4px;}</style><div class="css-1fz92cy"><style data-emotion="css 17zyjrj">.css-17zyjrj{background-image:url(static/feature-card-foundations.svg);border-radius:12px;-webkit-background-size:cover;background-size:cover;-webkit-background-position:bottom left;background-position:bottom left;-webkit-background-size:cover;background-size:cover;-webkit-background-position:right bottom;background-position:right bottom;height:18vh;}@media screen and (min-width: 1024px){.css-17zyjrj{height:200px;}}</style><div class="css-17zyjrj"></div></div><div class="css-1shocxe"><style data-emotion="css 1aog5rk">.css-1aog5rk{box-sizing:border-box;padding:24px;}.css-1aog5rk a:not(.nk-card-link){z-index:2;position:relative;}</style><div class="css-1aog5rk"><style data-emotion="css f7iis0">@media screen and (max-width: 1023px){.css-f7iis0{margin-bottom:20px;}}@media screen and (min-width: 1024px){.css-f7iis0{margin-bottom:24px;}}</style><div class="css-f7iis0"><style data-emotion="css 1m2iuuv">@media screen and (max-width: 1023px){.css-1m2iuuv{font-family:"Poppins",sans-serif;font-size:24px;line-height:27px;font-weight:700;letter-spacing:0;padding:0.5px 0px;}.css-1m2iuuv::before{content:'';margin-bottom:-0.2155em;display:block;}.css-1m2iuuv::after{content:'';margin-top:-0.2125em;display:block;}}@media screen and (min-width: 1024px){.css-1m2iuuv{font-family:"Poppins",sans-serif;font-size:32px;line-height:36px;font-weight:700;letter-spacing:0;padding:0.5px 0px;}.css-1m2iuuv::before{content:'';margin-bottom:-0.2155em;display:block;}.css-1m2iuuv::after{content:'';margin-top:-0.2125em;display:block;}}</style><section class="css-1m2iuuv"><style data-emotion="css 4eltk5">.css-4eltk5{display:inline;font:inherit;margin:0;color:#FFFFFF;}.css-4eltk5 svg{fill:#FFFFFF;}</style><h1 class="nk-headline-heading css-4eltk5">Colours</h1></section></div><style data-emotion="css 1kw6hwy">@media screen and (max-width: 1023px){.css-1kw6hwy{margin-bottom:24px;}}@media screen and (min-width: 1024px){.css-1kw6hwy{margin-bottom:32px;}}</style><div class="css-1kw6hwy"><style data-emotion="css 1dx0s0z">.css-1dx0s0z{margin:0;color:rgba(255,255,255,0.8);}.css-1dx0s0z svg{fill:rgba(255,255,255,0.8);}@media screen and (max-width: 1023px){.css-1dx0s0z{font-family:"Poppins",sans-serif;font-size:16px;line-height:24px;font-weight:500;letter-spacing:0;padding:0.5px 0px;}.css-1dx0s0z::before{content:'';margin-bottom:-0.403em;display:block;}.css-1dx0s0z::after{content:'';margin-top:-0.4em;display:block;}}@media screen and (min-width: 1024px){.css-1dx0s0z{font-family:"Poppins",sans-serif;font-size:20px;line-height:30px;font-weight:500;letter-spacing:0;padding:0.5px 0px;}.css-1dx0s0z::before{content:'';margin-bottom:-0.403em;display:block;}.css-1dx0s0z::after{content:'';margin-top:-0.4em;display:block;}}</style><p class="css-1dx0s0z">Colour is key to expressing brand and identity, but it also plays a vital role in conveying specific meaning to a user.</p></div><style data-emotion="css 165k7dq">.css-165k7dq{margin-bottom:8px;}</style><div class="css-165k7dq"><style data-emotion="css 14q6vju">.css-14q6vju{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-text-decoration:none;text-decoration:none;min-height:32px;min-width:64px;padding:8px 12px;cursor:default;overflow:hidden;border:none;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;background-color:#FFFFFF;border-radius:8px;color:#5E44E4;margin:0;cursor:pointer;}.css-14q6vju svg{width:16px;height:16px;}.css-14q6vju svg{fill:#5E44E4;}.css-14q6vju:hover:not(:disabled){background-color:rgba(255,255,255,0.2);}.css-14q6vju:active:not(:disabled){background-color:rgba(255,255,255,0.8);color:#36248C;}.css-14q6vju:active:not(:disabled) svg{fill:#36248C;}.css-14q6vju:disabled{background-color:rgba(255,255,255,0.2);color:#5E44E4;}.css-14q6vju:disabled svg{fill:#5E44E4;}@media screen and (prefers-reduced-motion: no-preference){.css-14q6vju{transition-property:background-color;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-14q6vju{transition-property:background-color;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}</style><button data-testid="button" type="button" class="css-14q6vju"><div class="css-bptyib"><div class="css-1yztr03"><style data-emotion="css mir38c">.css-mir38c{margin:0;font-family:"Poppins",sans-serif;font-size:12px;line-height:18px;font-weight:600;letter-spacing:0;padding:0.5px 0px;display:inline-block;}.css-mir38c::before{content:'';margin-bottom:-0.403em;display:block;}.css-mir38c::after{content:'';margin-top:-0.4em;display:block;}</style><span class="css-mir38c">Read more</span></div><div class="css-1yztr03"><style data-emotion="css 1rycle2">.css-1rycle2{fill:#2E2E2E;vertical-align:unset;display:inline-block;}@media screen and (prefers-reduced-motion: no-preference){.css-1rycle2{transition-property:fill;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-1rycle2{transition-property:fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}.css-1rycle2.css-1rycle2{width:16px;height:16px;}</style><style data-emotion="css 19fc6y7-EmotionIconBase">.css-19fc6y7-EmotionIconBase{display:inline-block;vertical-align:middle;overflow:hidden;fill:#2E2E2E;vertical-align:unset;display:inline-block;}@media screen and (prefers-reduced-motion: no-preference){.css-19fc6y7-EmotionIconBase{transition-property:fill;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-19fc6y7-EmotionIconBase{transition-property:fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}.css-19fc6y7-EmotionIconBase.css-19fc6y7-EmotionIconBase{width:16px;height:16px;}</style><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="css-19fc6y7-EmotionIconBase ex0cdmw0"><path fill="none" d="M0 0h24v24H0z"></path><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"></path></svg></div></div></button></div></div></div></div></div><div class="css-1nlep1q"><style data-emotion="css 1aaqxma">.css-1aaqxma{box-sizing:border-box;overflow:hidden;background-color:#5E44E4;border-radius:12px;position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;transition-property:box-shadow;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}@media screen and (min-width: 768px){.css-1aaqxma{min-height:248px;}}@media screen and (min-width: 1024px){.css-1aaqxma{min-height:304px;}}</style><div class="css-1aaqxma"><style data-emotion="css cq9vxn">.css-cq9vxn{box-sizing:border-box;display:block;position:relative;-webkit-flex:1;-ms-flex:1;flex:1;margin-left:0;}.css-cq9vxn svg{border-radius:4px;}</style><div class="css-cq9vxn"><style data-emotion="css kjtdkp">.css-kjtdkp{background-image:url(static/feature-card-foundations.svg);border-radius:12px;-webkit-background-size:cover;background-size:cover;-webkit-background-position:bottom left;background-position:bottom left;height:100%;}</style><div class="css-kjtdkp"></div></div><div class="css-1r2lt0d"><style data-emotion="css 1uxjazs">.css-1uxjazs{box-sizing:border-box;-webkit-flex:1;-ms-flex:1;flex:1;}@media screen and (max-width: 479px){.css-1uxjazs{padding:16px;}}@media screen and (min-width: 480px) and (max-width: 767px){.css-1uxjazs{padding:16px;}}@media screen and (min-width: 768px) and (max-width: 1023px){.css-1uxjazs{padding:24px;}}@media screen and (min-width: 1024px){.css-1uxjazs{padding:32px;}}.css-1uxjazs a:not(.nk-card-link){z-index:2;position:relative;}</style><div class="css-1uxjazs"><style data-emotion="css 1dfo3zr">.css-1dfo3zr{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}</style><div class="css-1dfo3zr"><div class="css-f7iis0"><section class="css-1m2iuuv"><h1 class="nk-headline-heading css-4eltk5">Colours</h1></section></div><div class="css-1kw6hwy"><p class="css-1dx0s0z"><style data-emotion="css 60wuij">.css-60wuij{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}</style><span class="css-60wuij">Colour is key to expressing brand and identity, but it also plays a vital role in conveying specific meaning to a user.</span></p></div><button data-testid="button" type="button" class="css-14q6vju"><div class="css-bptyib"><div class="css-1yztr03"><span class="css-mir38c">Read more</span></div><div class="css-1yztr03"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="css-19fc6y7-EmotionIconBase ex0cdmw0"><path fill="none" d="M0 0h24v24H0z"></path><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"></path></svg></div></div></button></div></div></div></div></div></span></a></div><style data-emotion="css ny3d8k">.css-ny3d8k{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;}@media screen{.css-ny3d8k{display:none;}}@media screen and (min-width: 1440px){.css-ny3d8k{display:block;padding:0 12px;margin-top:0;margin-left:83.33333333333334%;-webkit-flex-basis:16.666666666666668%;-ms-flex-preferred-size:16.666666666666668%;flex-basis:16.666666666666668%;max-width:16.666666666666668%;}}</style><div class="css-ny3d8k"><style data-emotion="css 1hq5n5s">.css-1hq5n5s{position:fixed;-webkit-transition:0.2s top,bottom ease-in;transition:0.2s top,bottom ease-in;will-change:top,bottom;}</style><style data-emotion="css 1n8f9ud">.css-1n8f9ud{position:fixed;-webkit-transition:0.2s top,bottom ease-in;transition:0.2s top,bottom ease-in;will-change:top,bottom;}</style><div style="top:0" id="toc-navigation" class="css-1n8f9ud"><style data-emotion="css 1c2ypzx">.css-1c2ypzx{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;}</style><div class="css-1c2ypzx"></div></div></div></div></div></div></main><style data-emotion="css 7cr3wq">.css-7cr3wq{background:#F4F4F4;padding-bottom:24px;}@media screen and (max-width: 767px){.css-7cr3wq{padding-top:40px;}}@media screen and (min-width: 768px){.css-7cr3wq{padding-top:48px;}}</style><footer class="css-7cr3wq"><div class="css-8atxkm"><style data-emotion="css 1l4gzx1">.css-1l4gzx1{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}@media screen{.css-1l4gzx1{margin:-32px 8px 0 8px;}}@media screen and (min-width: 480px){.css-1l4gzx1{margin:-32px 8px 0 8px;}}@media screen and (min-width: 768px){.css-1l4gzx1{margin:-0px 8px 0 8px;}}@media screen and (min-width: 1024px){.css-1l4gzx1{margin:-0px 12px 0 12px;}}@media screen and (min-width: 1440px){.css-1l4gzx1{margin:-0px 12px 0 12px;}}</style><div class="css-1l4gzx1"><style data-emotion="css 1kimetj">.css-1kimetj{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;}@media screen{.css-1kimetj{padding:0 8px;margin-top:32px;-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%;}}@media screen and (min-width: 768px){.css-1kimetj{margin-top:0;}}@media screen and (min-width: 1024px){.css-1kimetj{padding:0 12px;}}</style><div class="css-1kimetj"><style data-emotion="css 1c02ias">.css-1c02ias{display:block;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;margin-top:16px;}@media screen and (min-width: 768px){.css-1c02ias{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}}</style><div class="css-1c02ias"><style data-emotion="css 9yia0h">.css-9yia0h{text-align:center;display:block;}@media screen{.css-9yia0h{margin-bottom:40px;}.css-9yia0h:last-child{margin-bottom:0;}}@media screen and (min-width: 768px){.css-9yia0h{margin-right:48px;margin-bottom:24px;}.css-9yia0h:last-child{margin-bottom:24px;}}</style><span class="css-9yia0h"><style data-emotion="css 1m3x2du">.css-1m3x2du{display:inline-block;color:#3358CC;-webkit-text-decoration:none;text-decoration:none;}@media screen and (prefers-reduced-motion: no-preference){.css-1m3x2du{transition-property:color,fill;transition-duration:200ms,200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-1m3x2du{transition-property:color,fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1);}}.css-1m3x2du:hover:not(:disabled){color:#577FFB;-webkit-text-decoration:underline;text-decoration:underline;}.css-1m3x2du:active:not(:disabled){color:#AEBFFF;-webkit-text-decoration:none;text-decoration:none;}</style><a href="https://www.newscareers.co.uk/" target="_blank" class="css-1m3x2du"><span class="css-17x5lw"><style data-emotion="css 1ijiwz2">.css-1ijiwz2{margin:0;font-family:"Poppins",sans-serif;font-size:14px;line-height:21px;font-weight:600;letter-spacing:0;padding:0.5px 0px;display:inline-block;display:block;}.css-1ijiwz2::before{content:'';margin-bottom:-0.403em;display:block;}.css-1ijiwz2::after{content:'';margin-top:-0.4em;display:block;}</style><span class="css-1ijiwz2">Careers</span></span></a></span><span class="css-9yia0h"><a href="https://medium.com/newskit-design-system" target="_blank" class="css-1m3x2du"><span class="css-17x5lw"><span class="css-1ijiwz2">Blog</span></span></a></span><span class="css-9yia0h"><a href="#" role="button" class="css-1m3x2du"><span class="css-17x5lw"><span class="css-1ijiwz2">Privacy policy</span></span></a></span><span class="css-9yia0h"><a href="/help/terms-and-conditions/" class="css-1m3x2du"><span class="css-17x5lw"><span class="css-1ijiwz2">Terms &amp; conditions</span></span></a></span></div></div><div class="css-1kimetj"><hr data-testid="divider" aria-hidden="true" class="css-1a12fxg"/><style data-emotion="css 3dc54p">.css-3dc54p{margin:0;color:#535353;font-family:"DM Sans",sans-serif;font-size:12px;line-height:18px;font-weight:500;letter-spacing:0;padding:0.5px 0px;text-align:center;margin-top:24px;margin-bottom:40px;}.css-3dc54p svg{fill:#535353;}.css-3dc54p::before{content:'';margin-bottom:-0.391em;display:block;}.css-3dc54p::after{content:'';margin-top:-0.409em;display:block;}</style><div class="css-3dc54p">Copyright © <!-- -->2022<!-- --> News Corp UK &amp; Ireland Limited. All rights reserved. This website is published by News Corp UK &amp; Ireland Limited, 1 London Bridge Street, London, SE1 9GF. Registered in England No 81701. VAT number GB 243 8054 69.</div></div></div></div></footer></div></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"path":"/theme/breakpoints/","pageProps":{}},"page":"/theme/breakpoints","query":{},"buildId":"4eEzQdZEpSITC7CcT92PH","nextExport":true,"isFallback":false,"appGip":true,"scriptLoader":[]}</script></body></html>
+</code></pre></div></div><div class="css-exj33h"><div class="css-1tsq98o"></div></div><div class="css-exj33h"><div class="css-1tsq98o"><hr data-testid="divider" aria-hidden="true" class="css-1a12fxg"/></div></div></div></section></div><div class="css-12v76db"><style data-emotion="css 1wla9vq">.css-1wla9vq{height:100%;display:block;}.css-1wla9vq >span>div{width:100%;}</style><style data-emotion="css 1kf8klr">.css-1kf8klr{display:inline-block;-webkit-text-decoration:none;text-decoration:none;height:100%;display:block;}@media screen and (prefers-reduced-motion: no-preference){.css-1kf8klr{transition-property:color,fill;transition-duration:200ms,200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-1kf8klr{transition-property:color,fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1);}}.css-1kf8klr:hover:not(:disabled){-webkit-text-decoration:none;text-decoration:none;}.css-1kf8klr >span>div{width:100%;}</style><a href="theme/colours" class="css-1kf8klr"><span class="css-17x5lw"><div class="css-1k3e0au"><style data-emotion="css ihrckf">.css-ihrckf{transition-property:box-shadow;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}@media screen and (min-width: 768px){.css-ihrckf{min-height:248px;}}@media screen and (min-width: 1024px){.css-ihrckf{min-height:304px;}}</style><style data-emotion="css z6p3rj">.css-z6p3rj{box-sizing:border-box;overflow:hidden;background-color:#5E44E4;border-radius:12px;position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;transition-property:box-shadow;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}@media screen and (min-width: 768px){.css-z6p3rj{min-height:248px;}}@media screen and (min-width: 1024px){.css-z6p3rj{min-height:304px;}}</style><div class="css-z6p3rj"><style data-emotion="css 1fz92cy">.css-1fz92cy{box-sizing:border-box;display:block;position:relative;margin-bottom:0;}.css-1fz92cy svg{border-radius:4px;}</style><div class="css-1fz92cy"><style data-emotion="css 17zyjrj">.css-17zyjrj{background-image:url(static/feature-card-foundations.svg);border-radius:12px;-webkit-background-size:cover;background-size:cover;-webkit-background-position:bottom left;background-position:bottom left;-webkit-background-size:cover;background-size:cover;-webkit-background-position:right bottom;background-position:right bottom;height:18vh;}@media screen and (min-width: 1024px){.css-17zyjrj{height:200px;}}</style><div class="css-17zyjrj"></div></div><div class="css-1shocxe"><style data-emotion="css 1aog5rk">.css-1aog5rk{box-sizing:border-box;padding:24px;}.css-1aog5rk a:not(.nk-card-link){z-index:2;position:relative;}</style><div class="css-1aog5rk"><style data-emotion="css f7iis0">@media screen and (max-width: 1023px){.css-f7iis0{margin-bottom:20px;}}@media screen and (min-width: 1024px){.css-f7iis0{margin-bottom:24px;}}</style><div class="css-f7iis0"><style data-emotion="css 1m2iuuv">@media screen and (max-width: 1023px){.css-1m2iuuv{font-family:"Poppins",sans-serif;font-size:24px;line-height:27px;font-weight:700;letter-spacing:0;padding:0.5px 0px;}.css-1m2iuuv::before{content:'';margin-bottom:-0.2155em;display:block;}.css-1m2iuuv::after{content:'';margin-top:-0.2125em;display:block;}}@media screen and (min-width: 1024px){.css-1m2iuuv{font-family:"Poppins",sans-serif;font-size:32px;line-height:36px;font-weight:700;letter-spacing:0;padding:0.5px 0px;}.css-1m2iuuv::before{content:'';margin-bottom:-0.2155em;display:block;}.css-1m2iuuv::after{content:'';margin-top:-0.2125em;display:block;}}</style><section class="css-1m2iuuv"><style data-emotion="css 4eltk5">.css-4eltk5{display:inline;font:inherit;margin:0;color:#FFFFFF;}.css-4eltk5 svg{fill:#FFFFFF;}</style><h1 class="nk-headline-heading css-4eltk5">Colours</h1></section></div><style data-emotion="css 1kw6hwy">@media screen and (max-width: 1023px){.css-1kw6hwy{margin-bottom:24px;}}@media screen and (min-width: 1024px){.css-1kw6hwy{margin-bottom:32px;}}</style><div class="css-1kw6hwy"><style data-emotion="css 1dx0s0z">.css-1dx0s0z{margin:0;color:rgba(255,255,255,0.8);}.css-1dx0s0z svg{fill:rgba(255,255,255,0.8);}@media screen and (max-width: 1023px){.css-1dx0s0z{font-family:"Poppins",sans-serif;font-size:16px;line-height:24px;font-weight:500;letter-spacing:0;padding:0.5px 0px;}.css-1dx0s0z::before{content:'';margin-bottom:-0.403em;display:block;}.css-1dx0s0z::after{content:'';margin-top:-0.4em;display:block;}}@media screen and (min-width: 1024px){.css-1dx0s0z{font-family:"Poppins",sans-serif;font-size:20px;line-height:30px;font-weight:500;letter-spacing:0;padding:0.5px 0px;}.css-1dx0s0z::before{content:'';margin-bottom:-0.403em;display:block;}.css-1dx0s0z::after{content:'';margin-top:-0.4em;display:block;}}</style><p class="css-1dx0s0z">Colour is key to expressing brand and identity, but it also plays a vital role in conveying specific meaning to a user.</p></div><style data-emotion="css 165k7dq">.css-165k7dq{margin-bottom:8px;}</style><div class="css-165k7dq"><style data-emotion="css 14q6vju">.css-14q6vju{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-text-decoration:none;text-decoration:none;min-height:32px;min-width:64px;padding:8px 12px;cursor:default;overflow:hidden;border:none;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;background-color:#FFFFFF;border-radius:8px;color:#5E44E4;margin:0;cursor:pointer;}.css-14q6vju svg{width:16px;height:16px;}.css-14q6vju svg{fill:#5E44E4;}.css-14q6vju:hover:not(:disabled){background-color:rgba(255,255,255,0.2);}.css-14q6vju:active:not(:disabled){background-color:rgba(255,255,255,0.8);color:#36248C;}.css-14q6vju:active:not(:disabled) svg{fill:#36248C;}.css-14q6vju:disabled{background-color:rgba(255,255,255,0.2);color:#5E44E4;}.css-14q6vju:disabled svg{fill:#5E44E4;}@media screen and (prefers-reduced-motion: no-preference){.css-14q6vju{transition-property:background-color;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-14q6vju{transition-property:background-color;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}</style><button data-testid="button" type="button" class="css-14q6vju"><div class="css-bptyib"><div class="css-1yztr03"><style data-emotion="css mir38c">.css-mir38c{margin:0;font-family:"Poppins",sans-serif;font-size:12px;line-height:18px;font-weight:600;letter-spacing:0;padding:0.5px 0px;display:inline-block;}.css-mir38c::before{content:'';margin-bottom:-0.403em;display:block;}.css-mir38c::after{content:'';margin-top:-0.4em;display:block;}</style><span class="css-mir38c">Read more</span></div><div class="css-1yztr03"><style data-emotion="css 1rycle2">.css-1rycle2{fill:#2E2E2E;vertical-align:unset;display:inline-block;}@media screen and (prefers-reduced-motion: no-preference){.css-1rycle2{transition-property:fill;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-1rycle2{transition-property:fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}.css-1rycle2.css-1rycle2{width:16px;height:16px;}</style><style data-emotion="css 19fc6y7-EmotionIconBase">.css-19fc6y7-EmotionIconBase{display:inline-block;vertical-align:middle;overflow:hidden;fill:#2E2E2E;vertical-align:unset;display:inline-block;}@media screen and (prefers-reduced-motion: no-preference){.css-19fc6y7-EmotionIconBase{transition-property:fill;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-19fc6y7-EmotionIconBase{transition-property:fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}.css-19fc6y7-EmotionIconBase.css-19fc6y7-EmotionIconBase{width:16px;height:16px;}</style><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="css-19fc6y7-EmotionIconBase ex0cdmw0"><path fill="none" d="M0 0h24v24H0z"></path><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"></path></svg></div></div></button></div></div></div></div></div><div class="css-1nlep1q"><style data-emotion="css 1aaqxma">.css-1aaqxma{box-sizing:border-box;overflow:hidden;background-color:#5E44E4;border-radius:12px;position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;transition-property:box-shadow;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}@media screen and (min-width: 768px){.css-1aaqxma{min-height:248px;}}@media screen and (min-width: 1024px){.css-1aaqxma{min-height:304px;}}</style><div class="css-1aaqxma"><style data-emotion="css cq9vxn">.css-cq9vxn{box-sizing:border-box;display:block;position:relative;-webkit-flex:1;-ms-flex:1;flex:1;margin-left:0;}.css-cq9vxn svg{border-radius:4px;}</style><div class="css-cq9vxn"><style data-emotion="css kjtdkp">.css-kjtdkp{background-image:url(static/feature-card-foundations.svg);border-radius:12px;-webkit-background-size:cover;background-size:cover;-webkit-background-position:bottom left;background-position:bottom left;height:100%;}</style><div class="css-kjtdkp"></div></div><div class="css-1r2lt0d"><style data-emotion="css 1uxjazs">.css-1uxjazs{box-sizing:border-box;-webkit-flex:1;-ms-flex:1;flex:1;}@media screen and (max-width: 479px){.css-1uxjazs{padding:16px;}}@media screen and (min-width: 480px) and (max-width: 767px){.css-1uxjazs{padding:16px;}}@media screen and (min-width: 768px) and (max-width: 1023px){.css-1uxjazs{padding:24px;}}@media screen and (min-width: 1024px){.css-1uxjazs{padding:32px;}}.css-1uxjazs a:not(.nk-card-link){z-index:2;position:relative;}</style><div class="css-1uxjazs"><style data-emotion="css 1dfo3zr">.css-1dfo3zr{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}</style><div class="css-1dfo3zr"><div class="css-f7iis0"><section class="css-1m2iuuv"><h1 class="nk-headline-heading css-4eltk5">Colours</h1></section></div><div class="css-1kw6hwy"><p class="css-1dx0s0z"><style data-emotion="css 60wuij">.css-60wuij{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}</style><span class="css-60wuij">Colour is key to expressing brand and identity, but it also plays a vital role in conveying specific meaning to a user.</span></p></div><button data-testid="button" type="button" class="css-14q6vju"><div class="css-bptyib"><div class="css-1yztr03"><span class="css-mir38c">Read more</span></div><div class="css-1yztr03"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="css-19fc6y7-EmotionIconBase ex0cdmw0"><path fill="none" d="M0 0h24v24H0z"></path><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"></path></svg></div></div></button></div></div></div></div></div></span></a></div><style data-emotion="css ny3d8k">.css-ny3d8k{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;}@media screen{.css-ny3d8k{display:none;}}@media screen and (min-width: 1440px){.css-ny3d8k{display:block;padding:0 12px;margin-top:0;margin-left:83.33333333333334%;-webkit-flex-basis:16.666666666666668%;-ms-flex-preferred-size:16.666666666666668%;flex-basis:16.666666666666668%;max-width:16.666666666666668%;}}</style><div class="css-ny3d8k"><style data-emotion="css 1hq5n5s">.css-1hq5n5s{position:fixed;-webkit-transition:0.2s top,bottom ease-in;transition:0.2s top,bottom ease-in;will-change:top,bottom;}</style><style data-emotion="css 1n8f9ud">.css-1n8f9ud{position:fixed;-webkit-transition:0.2s top,bottom ease-in;transition:0.2s top,bottom ease-in;will-change:top,bottom;}</style><div style="top:0" id="toc-navigation" class="css-1n8f9ud"><style data-emotion="css 1c2ypzx">.css-1c2ypzx{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;}</style><div class="css-1c2ypzx"></div></div></div></div></div></div></main><style data-emotion="css 7cr3wq">.css-7cr3wq{background:#F4F4F4;padding-bottom:24px;}@media screen and (max-width: 767px){.css-7cr3wq{padding-top:40px;}}@media screen and (min-width: 768px){.css-7cr3wq{padding-top:48px;}}</style><footer class="css-7cr3wq"><div class="css-8atxkm"><style data-emotion="css 1l4gzx1">.css-1l4gzx1{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}@media screen{.css-1l4gzx1{margin:-32px 8px 0 8px;}}@media screen and (min-width: 480px){.css-1l4gzx1{margin:-32px 8px 0 8px;}}@media screen and (min-width: 768px){.css-1l4gzx1{margin:-0px 8px 0 8px;}}@media screen and (min-width: 1024px){.css-1l4gzx1{margin:-0px 12px 0 12px;}}@media screen and (min-width: 1440px){.css-1l4gzx1{margin:-0px 12px 0 12px;}}</style><div class="css-1l4gzx1"><style data-emotion="css 1kimetj">.css-1kimetj{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;}@media screen{.css-1kimetj{padding:0 8px;margin-top:32px;-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%;}}@media screen and (min-width: 768px){.css-1kimetj{margin-top:0;}}@media screen and (min-width: 1024px){.css-1kimetj{padding:0 12px;}}</style><div class="css-1kimetj"><style data-emotion="css 1c02ias">.css-1c02ias{display:block;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;margin-top:16px;}@media screen and (min-width: 768px){.css-1c02ias{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}}</style><div class="css-1c02ias"><style data-emotion="css 9yia0h">.css-9yia0h{text-align:center;display:block;}@media screen{.css-9yia0h{margin-bottom:40px;}.css-9yia0h:last-child{margin-bottom:0;}}@media screen and (min-width: 768px){.css-9yia0h{margin-right:48px;margin-bottom:24px;}.css-9yia0h:last-child{margin-bottom:24px;}}</style><span class="css-9yia0h"><style data-emotion="css 1m3x2du">.css-1m3x2du{display:inline-block;color:#3358CC;-webkit-text-decoration:none;text-decoration:none;}@media screen and (prefers-reduced-motion: no-preference){.css-1m3x2du{transition-property:color,fill;transition-duration:200ms,200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-1m3x2du{transition-property:color,fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1);}}.css-1m3x2du:hover:not(:disabled){color:#577FFB;-webkit-text-decoration:underline;text-decoration:underline;}.css-1m3x2du:active:not(:disabled){color:#AEBFFF;-webkit-text-decoration:none;text-decoration:none;}</style><a href="https://www.newscareers.co.uk/" target="_blank" class="css-1m3x2du"><span class="css-17x5lw"><style data-emotion="css 1ijiwz2">.css-1ijiwz2{margin:0;font-family:"Poppins",sans-serif;font-size:14px;line-height:21px;font-weight:600;letter-spacing:0;padding:0.5px 0px;display:inline-block;display:block;}.css-1ijiwz2::before{content:'';margin-bottom:-0.403em;display:block;}.css-1ijiwz2::after{content:'';margin-top:-0.4em;display:block;}</style><span class="css-1ijiwz2">Careers</span></span></a></span><span class="css-9yia0h"><a href="https://medium.com/newskit-design-system" target="_blank" class="css-1m3x2du"><span class="css-17x5lw"><span class="css-1ijiwz2">Blog</span></span></a></span><span class="css-9yia0h"><a href="#" role="button" class="css-1m3x2du"><span class="css-17x5lw"><span class="css-1ijiwz2">Privacy policy</span></span></a></span><span class="css-9yia0h"><a href="/help/terms-and-conditions/" class="css-1m3x2du"><span class="css-17x5lw"><span class="css-1ijiwz2">Terms &amp; conditions</span></span></a></span></div></div><div class="css-1kimetj"><hr data-testid="divider" aria-hidden="true" class="css-1a12fxg"/><style data-emotion="css 3dc54p">.css-3dc54p{margin:0;color:#535353;font-family:"DM Sans",sans-serif;font-size:12px;line-height:18px;font-weight:500;letter-spacing:0;padding:0.5px 0px;text-align:center;margin-top:24px;margin-bottom:40px;}.css-3dc54p svg{fill:#535353;}.css-3dc54p::before{content:'';margin-bottom:-0.391em;display:block;}.css-3dc54p::after{content:'';margin-top:-0.409em;display:block;}</style><div class="css-3dc54p">Copyright © <!-- -->2022<!-- --> News Corp UK &amp; Ireland Limited. All rights reserved. This website is published by News Corp UK &amp; Ireland Limited, 1 London Bridge Street, London, SE1 9GF. Registered in England No 81701. VAT number GB 243 8054 69.</div></div></div></div></footer></div></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"path":"/theme/breakpoints/","pageProps":{}},"page":"/theme/breakpoints","query":{},"buildId":"16aAekWqHChB9xZCUOXJs","nextExport":true,"isFallback":false,"appGip":true,"scriptLoader":[]}</script></body></html>

package/public/theme/colours/index.html CHANGED Viewed

@@ -6,7 +6,7 @@
             body {
               margin: 0;
             }
-            </style><script data-react-helmet="true" type="text/javascript">window._sp_ = {"config":{"accountId":259,"propertyHref":"https://newskit.co.uk","baseEndpoint":"https://cdn.privacy-mgmt.com"}}</script><script data-react-helmet="true" type="text/javascript" src="https://cdn.privacy-mgmt.com/messagingNoTcfApi.js" async=""></script><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="icon" type="image/x-icon" href="static/favicon.ico"/><link rel="apple-touch-icon" sizes="180x180" href="static/apple-touch-icon.png"/><link rel="icon" type="image/png" sizes="16x16" href="static/favicon-16x16.png"/><link rel="icon" type="image/png" sizes="32x32" href="static/favicon-32x32.png"/><link rel="icon" type="image/png" sizes="192x192" href="static/android-chrome-192x192.png"/><link rel="manifest" href="static/site.webmanifest"/><meta name="msapplication-TileColor" content="#ffffff"/><meta name="msapplication-square150x150logo" content="mstile-150x150.png"/><meta name="theme-color" content="#ffffff"/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-5cd94c89d3acac5f.js"></script><script src="/_next/static/chunks/webpack-c0cad99bf97088e2.js" defer=""></script><script src="/_next/static/chunks/framework-a1dc26d0ae5e7407.js" defer=""></script><script src="/_next/static/chunks/main-ea11f884a96185e4.js" defer=""></script><script src="/_next/static/chunks/pages/_app-b9df849172598dfa.js" defer=""></script><script src="/_next/static/chunks/2ebec9a3-c51e9946115f3de3.js" defer=""></script><script src="/_next/static/chunks/2365afd3-2dcc650597ed5bea.js" defer=""></script><script src="/_next/static/chunks/61519-78f3aa2a16269f79.js" defer=""></script><script src="/_next/static/chunks/97475-a4abd0f30d3e91f5.js" defer=""></script><script src="/_next/static/chunks/51863-2bfb71df42da8833.js" defer=""></script><script src="/_next/static/chunks/58760-80709d0c225631ef.js" defer=""></script><script src="/_next/static/chunks/39471-ccf0d27bcb507ab7.js" defer=""></script><script src="/_next/static/chunks/83762-cf7a34852c935d16.js" defer=""></script><script src="/_next/static/chunks/92206-0a9a59fef6e96a54.js" defer=""></script><script src="/_next/static/chunks/27107-b360fbe4fb7271f4.js" defer=""></script><script src="/_next/static/chunks/41873-fd01213764af92b8.js" defer=""></script><script src="/_next/static/chunks/23816-e4c65d0cd93ea612.js" defer=""></script><script src="/_next/static/chunks/89077-9af7d7cc4fa4ec86.js" defer=""></script><script src="/_next/static/chunks/pages/theme/colours-0d50e32f2d634645.js" defer=""></script><script src="/_next/static/4eEzQdZEpSITC7CcT92PH/_buildManifest.js" defer=""></script><script src="/_next/static/4eEzQdZEpSITC7CcT92PH/_ssgManifest.js" defer=""></script><script src="/_next/static/4eEzQdZEpSITC7CcT92PH/_middlewareManifest.js" defer=""></script></head><body><style data-emotion="css-global goexhq">html{scroll-behavior:smooth;scroll-padding-top:90px;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-regular-webfont.woff2') format('woff2'),url('static/fonts/dmsans-regular-webfont.woff') format('woff');font-style:normal;font-weight:400;font-display:swap;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-italic-webfont.woff2') format('woff2'),url('static/fonts/dmsans-italic-webfont.woff') format('woff');font-style:italic;font-weight:400;font-display:swap;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-medium-webfont.woff2') format('woff2'),url('static/fonts/dmsans-medium-webfont.woff') format('woff');font-style:normal;font-weight:500;font-display:swap;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-mediumitalic-webfont.woff2') format('woff2'),url('static/fonts/dmsans-mediumitalic-webfont.woff') format('woff');font-style:italic;font-weight:500;font-display:swap;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-bold-webfont.woff2') format('woff2'),url('static/fonts/dmsans-bold-webfont.woff') format('woff');font-style:normal;font-weight:700;font-display:swap;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-bolditalic-webfont.woff2') format('woff2'),url('static/fonts/dmsans-bolditalic-webfont.woff') format('woff');font-style:italic;font-weight:700;font-display:swap;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-bold-webfont.woff2') format('woff2'),url('static/fonts/poppins-bold-webfont.woff') format('woff');font-weight:700;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-bolditalic-webfont.woff2') format('woff2'),url('static/fonts/poppins-bolditalic-webfont.woff') format('woff');font-weight:normal;font-style:italic;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-extrabold-webfont.woff2') format('woff2'),url('static/fonts/poppins-extrabold-webfont.woff') format('woff');font-weight:800;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-extrabolditalic-webfont.woff2') format('woff2'),url('static/fonts/poppins-extrabolditalic-webfont.woff') format('woff');font-weight:800;font-style:italic;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-italic-webfont.woff2') format('woff2'),url('static/fonts/poppins-italic-webfont.woff') format('woff');font-weight:400;font-style:italic;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-light-webfont.woff2') format('woff2'),url('static/fonts/poppins-light-webfont.woff') format('woff');font-weight:300;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-lightitalic-webfont.woff2') format('woff2'),url('static/fonts/poppins-lightitalic-webfont.woff') format('woff');font-weight:300;font-style:italic;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-medium-webfont.woff2') format('woff2'),url('static/fonts/poppins-medium-webfont.woff') format('woff');font-weight:500;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-mediumitalic-webfont.woff2') format('woff2'),url('static/fonts/poppins-mediumitalic-webfont.woff') format('woff');font-weight:500;font-style:italic;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-regular-webfont.woff2') format('woff2'),url('static/fonts/poppins-regular-webfont.woff') format('woff');font-weight:400;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-semibold-webfont.woff2') format('woff2'),url('static/fonts/poppins-semibold-webfont.woff') format('woff');font-weight:600;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-semibolditalic-webfont.woff2') format('woff2'),url('static/fonts/poppins-semibolditalic-webfont.woff') format('woff');font-weight:600;font-style:italic;}@font-face{font-family:'DM Mono';src:url('static/fonts/dmmono-medium.woff2') format('woff2'),url('static/fonts/dmmono-medium.woff') format('woff');font-style:normal;font-weight:500;font-display:swap;}</style><script type="text/javascript">(function(a,b,c,d){
+            </style><script data-react-helmet="true" type="text/javascript">window._sp_ = {"config":{"accountId":259,"propertyHref":"https://newskit.co.uk","baseEndpoint":"https://cdn.privacy-mgmt.com"}}</script><script data-react-helmet="true" type="text/javascript" src="https://cdn.privacy-mgmt.com/messagingNoTcfApi.js" async=""></script><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="icon" type="image/x-icon" href="static/favicon.ico"/><link rel="apple-touch-icon" sizes="180x180" href="static/apple-touch-icon.png"/><link rel="icon" type="image/png" sizes="16x16" href="static/favicon-16x16.png"/><link rel="icon" type="image/png" sizes="32x32" href="static/favicon-32x32.png"/><link rel="icon" type="image/png" sizes="192x192" href="static/android-chrome-192x192.png"/><link rel="manifest" href="static/site.webmanifest"/><meta name="msapplication-TileColor" content="#ffffff"/><meta name="msapplication-square150x150logo" content="mstile-150x150.png"/><meta name="theme-color" content="#ffffff"/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-5cd94c89d3acac5f.js"></script><script src="/_next/static/chunks/webpack-c0cad99bf97088e2.js" defer=""></script><script src="/_next/static/chunks/framework-a1dc26d0ae5e7407.js" defer=""></script><script src="/_next/static/chunks/main-ea11f884a96185e4.js" defer=""></script><script src="/_next/static/chunks/pages/_app-b9df849172598dfa.js" defer=""></script><script src="/_next/static/chunks/2ebec9a3-c51e9946115f3de3.js" defer=""></script><script src="/_next/static/chunks/2365afd3-2dcc650597ed5bea.js" defer=""></script><script src="/_next/static/chunks/61519-78f3aa2a16269f79.js" defer=""></script><script src="/_next/static/chunks/97475-a4abd0f30d3e91f5.js" defer=""></script><script src="/_next/static/chunks/51863-d9a28ce188f9fa84.js" defer=""></script><script src="/_next/static/chunks/58760-80709d0c225631ef.js" defer=""></script><script src="/_next/static/chunks/39471-ccf0d27bcb507ab7.js" defer=""></script><script src="/_next/static/chunks/83762-cf7a34852c935d16.js" defer=""></script><script src="/_next/static/chunks/92206-0a9a59fef6e96a54.js" defer=""></script><script src="/_next/static/chunks/27107-b360fbe4fb7271f4.js" defer=""></script><script src="/_next/static/chunks/41873-fd01213764af92b8.js" defer=""></script><script src="/_next/static/chunks/23816-e4c65d0cd93ea612.js" defer=""></script><script src="/_next/static/chunks/89077-9af7d7cc4fa4ec86.js" defer=""></script><script src="/_next/static/chunks/pages/theme/colours-0d50e32f2d634645.js" defer=""></script><script src="/_next/static/16aAekWqHChB9xZCUOXJs/_buildManifest.js" defer=""></script><script src="/_next/static/16aAekWqHChB9xZCUOXJs/_ssgManifest.js" defer=""></script><script src="/_next/static/16aAekWqHChB9xZCUOXJs/_middlewareManifest.js" defer=""></script></head><body><style data-emotion="css-global goexhq">html{scroll-behavior:smooth;scroll-padding-top:90px;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-regular-webfont.woff2') format('woff2'),url('static/fonts/dmsans-regular-webfont.woff') format('woff');font-style:normal;font-weight:400;font-display:swap;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-italic-webfont.woff2') format('woff2'),url('static/fonts/dmsans-italic-webfont.woff') format('woff');font-style:italic;font-weight:400;font-display:swap;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-medium-webfont.woff2') format('woff2'),url('static/fonts/dmsans-medium-webfont.woff') format('woff');font-style:normal;font-weight:500;font-display:swap;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-mediumitalic-webfont.woff2') format('woff2'),url('static/fonts/dmsans-mediumitalic-webfont.woff') format('woff');font-style:italic;font-weight:500;font-display:swap;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-bold-webfont.woff2') format('woff2'),url('static/fonts/dmsans-bold-webfont.woff') format('woff');font-style:normal;font-weight:700;font-display:swap;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-bolditalic-webfont.woff2') format('woff2'),url('static/fonts/dmsans-bolditalic-webfont.woff') format('woff');font-style:italic;font-weight:700;font-display:swap;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-bold-webfont.woff2') format('woff2'),url('static/fonts/poppins-bold-webfont.woff') format('woff');font-weight:700;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-bolditalic-webfont.woff2') format('woff2'),url('static/fonts/poppins-bolditalic-webfont.woff') format('woff');font-weight:normal;font-style:italic;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-extrabold-webfont.woff2') format('woff2'),url('static/fonts/poppins-extrabold-webfont.woff') format('woff');font-weight:800;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-extrabolditalic-webfont.woff2') format('woff2'),url('static/fonts/poppins-extrabolditalic-webfont.woff') format('woff');font-weight:800;font-style:italic;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-italic-webfont.woff2') format('woff2'),url('static/fonts/poppins-italic-webfont.woff') format('woff');font-weight:400;font-style:italic;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-light-webfont.woff2') format('woff2'),url('static/fonts/poppins-light-webfont.woff') format('woff');font-weight:300;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-lightitalic-webfont.woff2') format('woff2'),url('static/fonts/poppins-lightitalic-webfont.woff') format('woff');font-weight:300;font-style:italic;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-medium-webfont.woff2') format('woff2'),url('static/fonts/poppins-medium-webfont.woff') format('woff');font-weight:500;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-mediumitalic-webfont.woff2') format('woff2'),url('static/fonts/poppins-mediumitalic-webfont.woff') format('woff');font-weight:500;font-style:italic;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-regular-webfont.woff2') format('woff2'),url('static/fonts/poppins-regular-webfont.woff') format('woff');font-weight:400;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-semibold-webfont.woff2') format('woff2'),url('static/fonts/poppins-semibold-webfont.woff') format('woff');font-weight:600;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-semibolditalic-webfont.woff2') format('woff2'),url('static/fonts/poppins-semibolditalic-webfont.woff') format('woff');font-weight:600;font-style:italic;}@font-face{font-family:'DM Mono';src:url('static/fonts/dmmono-medium.woff2') format('woff2'),url('static/fonts/dmmono-medium.woff') format('woff');font-style:normal;font-weight:500;font-display:swap;}</style><script type="text/javascript">(function(a,b,c,d){
               a='//tags.tiqcdn.com/utag/newsinternational/thetimes.newskit/dev/utag.js';
               b=document;
               c='script';
@@ -49,4 +49,4 @@
 </span><span class="linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2em;padding-right:1em;text-align:right;user-select:none;color:#C0C0C0">8</span><span>backgroundColor</span><span class="token" style="color:#577FFB">:</span><span> </span><span class="token" style="color:#0A782A">&#x27;{{colors.interactiveSecondary010}}&#x27;</span><span class="token" style="color:#535353">;</span><span>
 </span><span class="linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2em;padding-right:1em;text-align:right;user-select:none;color:#C0C0C0">9</span><span>backgroundColor</span><span class="token" style="color:#577FFB">:</span><span> </span><span class="token" style="color:#0A782A">&#x27;{{colors.interactiveNegative010}}&#x27;</span><span class="token" style="color:#535353">;</span><span>
 </span><span class="linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2em;padding-right:1em;text-align:right;user-select:none;color:#C0C0C0">10</span><span>backgroundColor</span><span class="token" style="color:#577FFB">:</span><span> </span><span class="token" style="color:#0A782A">&#x27;{{colors.interactiveInput010}}&#x27;</span><span class="token" style="color:#535353">;</span><span>
-</span><span class="linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2em;padding-right:1em;text-align:right;user-select:none;color:#C0C0C0">11</span><span>backgroundColor</span><span class="token" style="color:#577FFB">:</span><span> </span><span class="token" style="color:#0A782A">&#x27;{{colors.interactiveVisited010}}&#x27;</span><span class="token" style="color:#535353">;</span></code></pre></div></div><div class="css-exj33h"><div class="css-1tsq98o"></div></div><div class="css-exj33h"><div class="css-1tsq98o"><hr data-testid="divider" aria-hidden="true" class="css-1a12fxg"/></div></div></div></section><section><div class="css-f8eq1u"><div class="css-1yc9ne2"><h2 id="a11y" data-toc-indexed="Accessibility" class="css-17xz2ja">Accessibility considerations</h2><div class="css-1kwy130"></div></div><div class="css-1yc9ne2"><p class="css-krfbcy">Carefully consider what colours to assign to the NewsKit contextual colours to ensure important UI elements like text and icons are legible without compromising the aesthetic. Avoid using yellow or orange colours to convey a notice or warning intent because these colours paired with white text do not allow for sufficient colour contrast. Aim for contrast ratios that adhere to the<!-- --> <a href="https://www.w3.org/TR/WCAG20-TECHS/G18.html" target="_blank" class="css-g09sk7"><span class="css-17x5lw"><span class="css-p4p8io">WCAG AA standards:</span></span></a></p></div><div class="css-exj33h"><div class="css-10ztk7w"></div></div></div><div class="css-f8eq1u"><div class="css-1yc9ne2"><h3 class="css-16d6jfc">Contrast for text and images of text</h3><div class="css-1kwy130"></div></div><div class="css-1yc9ne2"><p class="css-krfbcy">Standard text and images of text must have a minimum of 4.5:1 contrast between the text colour and the background, except for the following:</p></div><div class="css-exj33h"><div class="css-1tsq98o"></div></div></div><div class="css-f8eq1u"><div class="css-1yc9ne2"><style data-emotion="css 1u47i3e">.css-1u47i3e{margin:0;color:#0A0A0A;}.css-1u47i3e svg{fill:#0A0A0A;}@media screen and (max-width: 767px){.css-1u47i3e{font-family:"Poppins",sans-serif;font-size:20px;line-height:22.5px;font-weight:700;letter-spacing:0;padding:0.5px 0px;}.css-1u47i3e::before{content:'';margin-bottom:-0.2155em;display:block;}.css-1u47i3e::after{content:'';margin-top:-0.2125em;display:block;}}@media screen and (min-width: 768px) and (max-width: 1023px){.css-1u47i3e{font-family:"Poppins",sans-serif;font-size:20px;line-height:22.5px;font-weight:700;letter-spacing:0;padding:0.5px 0px;}.css-1u47i3e::before{content:'';margin-bottom:-0.2155em;display:block;}.css-1u47i3e::after{content:'';margin-top:-0.2125em;display:block;}}@media screen and (min-width: 1024px) and (max-width: 1439px){.css-1u47i3e{font-family:"Poppins",sans-serif;font-size:20px;line-height:22.5px;font-weight:700;letter-spacing:0;padding:0.5px 0px;}.css-1u47i3e::before{content:'';margin-bottom:-0.2155em;display:block;}.css-1u47i3e::after{content:'';margin-top:-0.2125em;display:block;}}@media screen and (min-width: 1440px){.css-1u47i3e{font-family:"Poppins",sans-serif;font-size:20px;line-height:22.5px;font-weight:700;letter-spacing:0;padding:0.5px 0px;}.css-1u47i3e::before{content:'';margin-bottom:-0.2155em;display:block;}.css-1u47i3e::after{content:'';margin-top:-0.2125em;display:block;}}</style><h4 class="css-1u47i3e">Large text</h4><div class="css-1kwy130"></div></div><div class="css-1yc9ne2"><p class="css-krfbcy">Large-scale text and images of large-scale text must have a minimum of 3:1 contrast between the text colour and the background.</p></div><div class="css-exj33h"><div class="css-1tsq98o"></div></div></div><div class="css-f8eq1u"><div class="css-1yc9ne2"><h4 class="css-1u47i3e">Link text</h4><div class="css-1kwy130"></div></div><div class="css-1yc9ne2"><p class="css-krfbcy">Underline link text within the body text (inline link). Otherwise, in addition to the above, link text must have at least a 3:1 contrast between the link text colour and the surrounding non-link text colour.</p></div><div class="css-exj33h"><div class="css-1tsq98o"></div></div></div><div class="css-f8eq1u"><div class="css-1yc9ne2"><h4 class="css-1u47i3e">Incidental text</h4><div class="css-1kwy130"></div></div><div class="css-1yc9ne2"><p class="css-krfbcy">Text or images of text that are part of an inactive component, pure decoration, or part of a picture containing significant other visual content do not have any contrast requirements.</p></div><div class="css-exj33h"><div class="css-1tsq98o"></div></div></div><div class="css-f8eq1u"><div class="css-1yc9ne2"><h4 class="css-1u47i3e">Logotypes</h4><div class="css-1kwy130"></div></div><div class="css-1yc9ne2"><p class="css-krfbcy">Text that is part of a logo does not have any contrast requirements.</p></div><div class="css-exj33h"><div class="css-1tsq98o"></div></div></div><div class="css-f8eq1u"><div class="css-1yc9ne2"><h3 class="css-16d6jfc">Contrast for non-text elements</h3><div class="css-1kwy130"></div></div><div class="css-1yc9ne2"><p class="css-krfbcy"> User interface components and graphical objects must have at least a 3:1 contrast between against adjacent colours.</p></div><div class="css-exj33h"><div class="css-1tsq98o"></div></div><div class="css-exj33h"><div class="css-1tsq98o"><hr data-testid="divider" aria-hidden="true" class="css-1a12fxg"/></div></div></div></section></div><div class="css-12v76db"><style data-emotion="css 1wla9vq">.css-1wla9vq{height:100%;display:block;}.css-1wla9vq >span>div{width:100%;}</style><style data-emotion="css 1kf8klr">.css-1kf8klr{display:inline-block;-webkit-text-decoration:none;text-decoration:none;height:100%;display:block;}@media screen and (prefers-reduced-motion: no-preference){.css-1kf8klr{transition-property:color,fill;transition-duration:200ms,200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-1kf8klr{transition-property:color,fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1);}}.css-1kf8klr:hover:not(:disabled){-webkit-text-decoration:none;text-decoration:none;}.css-1kf8klr >span>div{width:100%;}</style><a href="theme/design-tokens" class="css-1kf8klr"><span class="css-17x5lw"><div class="css-1k3e0au"><style data-emotion="css ihrckf">.css-ihrckf{transition-property:box-shadow;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}@media screen and (min-width: 768px){.css-ihrckf{min-height:248px;}}@media screen and (min-width: 1024px){.css-ihrckf{min-height:304px;}}</style><style data-emotion="css z6p3rj">.css-z6p3rj{box-sizing:border-box;overflow:hidden;background-color:#5E44E4;border-radius:12px;position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;transition-property:box-shadow;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}@media screen and (min-width: 768px){.css-z6p3rj{min-height:248px;}}@media screen and (min-width: 1024px){.css-z6p3rj{min-height:304px;}}</style><div class="css-z6p3rj"><div class="css-1fz92cy"><style data-emotion="css 17zyjrj">.css-17zyjrj{background-image:url(static/feature-card-foundations.svg);border-radius:12px;-webkit-background-size:cover;background-size:cover;-webkit-background-position:bottom left;background-position:bottom left;-webkit-background-size:cover;background-size:cover;-webkit-background-position:right bottom;background-position:right bottom;height:18vh;}@media screen and (min-width: 1024px){.css-17zyjrj{height:200px;}}</style><div class="css-17zyjrj"></div></div><div class="css-1shocxe"><div class="css-1aog5rk"><div class="css-f7iis0"><style data-emotion="css 1m2iuuv">@media screen and (max-width: 1023px){.css-1m2iuuv{font-family:"Poppins",sans-serif;font-size:24px;line-height:27px;font-weight:700;letter-spacing:0;padding:0.5px 0px;}.css-1m2iuuv::before{content:'';margin-bottom:-0.2155em;display:block;}.css-1m2iuuv::after{content:'';margin-top:-0.2125em;display:block;}}@media screen and (min-width: 1024px){.css-1m2iuuv{font-family:"Poppins",sans-serif;font-size:32px;line-height:36px;font-weight:700;letter-spacing:0;padding:0.5px 0px;}.css-1m2iuuv::before{content:'';margin-bottom:-0.2155em;display:block;}.css-1m2iuuv::after{content:'';margin-top:-0.2125em;display:block;}}</style><section class="css-1m2iuuv"><h1 class="nk-headline-heading css-4eltk5">Design tokens</h1></section></div><div class="css-1kw6hwy"><style data-emotion="css 1dx0s0z">.css-1dx0s0z{margin:0;color:rgba(255,255,255,0.8);}.css-1dx0s0z svg{fill:rgba(255,255,255,0.8);}@media screen and (max-width: 1023px){.css-1dx0s0z{font-family:"Poppins",sans-serif;font-size:16px;line-height:24px;font-weight:500;letter-spacing:0;padding:0.5px 0px;}.css-1dx0s0z::before{content:'';margin-bottom:-0.403em;display:block;}.css-1dx0s0z::after{content:'';margin-top:-0.4em;display:block;}}@media screen and (min-width: 1024px){.css-1dx0s0z{font-family:"Poppins",sans-serif;font-size:20px;line-height:30px;font-weight:500;letter-spacing:0;padding:0.5px 0px;}.css-1dx0s0z::before{content:'';margin-bottom:-0.403em;display:block;}.css-1dx0s0z::after{content:'';margin-top:-0.4em;display:block;}}</style><p class="css-1dx0s0z">Design tokens are the design decisions of the design system. They are used in place of hard-coded values to maintain a scalable and consistent system for UI.</p></div><style data-emotion="css 165k7dq">.css-165k7dq{margin-bottom:8px;}</style><div class="css-165k7dq"><style data-emotion="css 14q6vju">.css-14q6vju{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-text-decoration:none;text-decoration:none;min-height:32px;min-width:64px;padding:8px 12px;cursor:default;overflow:hidden;border:none;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;background-color:#FFFFFF;border-radius:8px;color:#5E44E4;margin:0;cursor:pointer;}.css-14q6vju svg{width:16px;height:16px;}.css-14q6vju svg{fill:#5E44E4;}.css-14q6vju:hover:not(:disabled){background-color:rgba(255,255,255,0.2);}.css-14q6vju:active:not(:disabled){background-color:rgba(255,255,255,0.8);color:#36248C;}.css-14q6vju:active:not(:disabled) svg{fill:#36248C;}.css-14q6vju:disabled{background-color:rgba(255,255,255,0.2);color:#5E44E4;}.css-14q6vju:disabled svg{fill:#5E44E4;}@media screen and (prefers-reduced-motion: no-preference){.css-14q6vju{transition-property:background-color;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-14q6vju{transition-property:background-color;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}</style><button data-testid="button" type="button" class="css-14q6vju"><div class="css-bptyib"><div class="css-1yztr03"><style data-emotion="css mir38c">.css-mir38c{margin:0;font-family:"Poppins",sans-serif;font-size:12px;line-height:18px;font-weight:600;letter-spacing:0;padding:0.5px 0px;display:inline-block;}.css-mir38c::before{content:'';margin-bottom:-0.403em;display:block;}.css-mir38c::after{content:'';margin-top:-0.4em;display:block;}</style><span class="css-mir38c">Read more</span></div><div class="css-1yztr03"><style data-emotion="css 1rycle2">.css-1rycle2{fill:#2E2E2E;vertical-align:unset;display:inline-block;}@media screen and (prefers-reduced-motion: no-preference){.css-1rycle2{transition-property:fill;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-1rycle2{transition-property:fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}.css-1rycle2.css-1rycle2{width:16px;height:16px;}</style><style data-emotion="css 19fc6y7-EmotionIconBase">.css-19fc6y7-EmotionIconBase{display:inline-block;vertical-align:middle;overflow:hidden;fill:#2E2E2E;vertical-align:unset;display:inline-block;}@media screen and (prefers-reduced-motion: no-preference){.css-19fc6y7-EmotionIconBase{transition-property:fill;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-19fc6y7-EmotionIconBase{transition-property:fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}.css-19fc6y7-EmotionIconBase.css-19fc6y7-EmotionIconBase{width:16px;height:16px;}</style><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="css-19fc6y7-EmotionIconBase ex0cdmw0"><path fill="none" d="M0 0h24v24H0z"></path><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"></path></svg></div></div></button></div></div></div></div></div><style data-emotion="css 1nlep1q">@media screen{.css-1nlep1q{display:none;}}@media screen and (min-width: 480px){.css-1nlep1q{display:none;}}@media screen and (min-width: 768px){.css-1nlep1q{display:block;}}@media screen and (min-width: 1024px){.css-1nlep1q{display:block;}}@media screen and (min-width: 1440px){.css-1nlep1q{display:block;}}</style><div class="css-1nlep1q"><style data-emotion="css 1aaqxma">.css-1aaqxma{box-sizing:border-box;overflow:hidden;background-color:#5E44E4;border-radius:12px;position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;transition-property:box-shadow;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}@media screen and (min-width: 768px){.css-1aaqxma{min-height:248px;}}@media screen and (min-width: 1024px){.css-1aaqxma{min-height:304px;}}</style><div class="css-1aaqxma"><style data-emotion="css cq9vxn">.css-cq9vxn{box-sizing:border-box;display:block;position:relative;-webkit-flex:1;-ms-flex:1;flex:1;margin-left:0;}.css-cq9vxn svg{border-radius:4px;}</style><div class="css-cq9vxn"><style data-emotion="css kjtdkp">.css-kjtdkp{background-image:url(static/feature-card-foundations.svg);border-radius:12px;-webkit-background-size:cover;background-size:cover;-webkit-background-position:bottom left;background-position:bottom left;height:100%;}</style><div class="css-kjtdkp"></div></div><style data-emotion="css 1r2lt0d">.css-1r2lt0d{box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex:1;-ms-flex:1;flex:1;}</style><div class="css-1r2lt0d"><style data-emotion="css 1uxjazs">.css-1uxjazs{box-sizing:border-box;-webkit-flex:1;-ms-flex:1;flex:1;}@media screen and (max-width: 479px){.css-1uxjazs{padding:16px;}}@media screen and (min-width: 480px) and (max-width: 767px){.css-1uxjazs{padding:16px;}}@media screen and (min-width: 768px) and (max-width: 1023px){.css-1uxjazs{padding:24px;}}@media screen and (min-width: 1024px){.css-1uxjazs{padding:32px;}}.css-1uxjazs a:not(.nk-card-link){z-index:2;position:relative;}</style><div class="css-1uxjazs"><style data-emotion="css 1dfo3zr">.css-1dfo3zr{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}</style><div class="css-1dfo3zr"><div class="css-f7iis0"><section class="css-1m2iuuv"><h1 class="nk-headline-heading css-4eltk5">Design tokens</h1></section></div><div class="css-1kw6hwy"><p class="css-1dx0s0z"><style data-emotion="css 60wuij">.css-60wuij{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}</style><span class="css-60wuij">Design tokens are the design decisions of the design system. They are used in place of hard-coded values to maintain a scalable and consistent system for UI.</span></p></div><button data-testid="button" type="button" class="css-14q6vju"><div class="css-bptyib"><div class="css-1yztr03"><span class="css-mir38c">Read more</span></div><div class="css-1yztr03"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="css-19fc6y7-EmotionIconBase ex0cdmw0"><path fill="none" d="M0 0h24v24H0z"></path><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"></path></svg></div></div></button></div></div></div></div></div></span></a></div><style data-emotion="css ny3d8k">.css-ny3d8k{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;}@media screen{.css-ny3d8k{display:none;}}@media screen and (min-width: 1440px){.css-ny3d8k{display:block;padding:0 12px;margin-top:0;margin-left:83.33333333333334%;-webkit-flex-basis:16.666666666666668%;-ms-flex-preferred-size:16.666666666666668%;flex-basis:16.666666666666668%;max-width:16.666666666666668%;}}</style><div class="css-ny3d8k"><style data-emotion="css 1hq5n5s">.css-1hq5n5s{position:fixed;-webkit-transition:0.2s top,bottom ease-in;transition:0.2s top,bottom ease-in;will-change:top,bottom;}</style><style data-emotion="css 1n8f9ud">.css-1n8f9ud{position:fixed;-webkit-transition:0.2s top,bottom ease-in;transition:0.2s top,bottom ease-in;will-change:top,bottom;}</style><div style="top:0" id="toc-navigation" class="css-1n8f9ud"><style data-emotion="css 1c2ypzx">.css-1c2ypzx{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;}</style><div class="css-1c2ypzx"></div></div></div></div></div></div></main><style data-emotion="css 7cr3wq">.css-7cr3wq{background:#F4F4F4;padding-bottom:24px;}@media screen and (max-width: 767px){.css-7cr3wq{padding-top:40px;}}@media screen and (min-width: 768px){.css-7cr3wq{padding-top:48px;}}</style><footer class="css-7cr3wq"><div class="css-8atxkm"><style data-emotion="css 1l4gzx1">.css-1l4gzx1{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}@media screen{.css-1l4gzx1{margin:-32px 8px 0 8px;}}@media screen and (min-width: 480px){.css-1l4gzx1{margin:-32px 8px 0 8px;}}@media screen and (min-width: 768px){.css-1l4gzx1{margin:-0px 8px 0 8px;}}@media screen and (min-width: 1024px){.css-1l4gzx1{margin:-0px 12px 0 12px;}}@media screen and (min-width: 1440px){.css-1l4gzx1{margin:-0px 12px 0 12px;}}</style><div class="css-1l4gzx1"><style data-emotion="css 1kimetj">.css-1kimetj{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;}@media screen{.css-1kimetj{padding:0 8px;margin-top:32px;-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%;}}@media screen and (min-width: 768px){.css-1kimetj{margin-top:0;}}@media screen and (min-width: 1024px){.css-1kimetj{padding:0 12px;}}</style><div class="css-1kimetj"><style data-emotion="css 1c02ias">.css-1c02ias{display:block;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;margin-top:16px;}@media screen and (min-width: 768px){.css-1c02ias{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}}</style><div class="css-1c02ias"><style data-emotion="css 9yia0h">.css-9yia0h{text-align:center;display:block;}@media screen{.css-9yia0h{margin-bottom:40px;}.css-9yia0h:last-child{margin-bottom:0;}}@media screen and (min-width: 768px){.css-9yia0h{margin-right:48px;margin-bottom:24px;}.css-9yia0h:last-child{margin-bottom:24px;}}</style><span class="css-9yia0h"><style data-emotion="css 1m3x2du">.css-1m3x2du{display:inline-block;color:#3358CC;-webkit-text-decoration:none;text-decoration:none;}@media screen and (prefers-reduced-motion: no-preference){.css-1m3x2du{transition-property:color,fill;transition-duration:200ms,200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-1m3x2du{transition-property:color,fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1);}}.css-1m3x2du:hover:not(:disabled){color:#577FFB;-webkit-text-decoration:underline;text-decoration:underline;}.css-1m3x2du:active:not(:disabled){color:#AEBFFF;-webkit-text-decoration:none;text-decoration:none;}</style><a href="https://www.newscareers.co.uk/" target="_blank" class="css-1m3x2du"><span class="css-17x5lw"><style data-emotion="css 1ijiwz2">.css-1ijiwz2{margin:0;font-family:"Poppins",sans-serif;font-size:14px;line-height:21px;font-weight:600;letter-spacing:0;padding:0.5px 0px;display:inline-block;display:block;}.css-1ijiwz2::before{content:'';margin-bottom:-0.403em;display:block;}.css-1ijiwz2::after{content:'';margin-top:-0.4em;display:block;}</style><span class="css-1ijiwz2">Careers</span></span></a></span><span class="css-9yia0h"><a href="https://medium.com/newskit-design-system" target="_blank" class="css-1m3x2du"><span class="css-17x5lw"><span class="css-1ijiwz2">Blog</span></span></a></span><span class="css-9yia0h"><a href="#" role="button" class="css-1m3x2du"><span class="css-17x5lw"><span class="css-1ijiwz2">Privacy policy</span></span></a></span><span class="css-9yia0h"><a href="/help/terms-and-conditions/" class="css-1m3x2du"><span class="css-17x5lw"><span class="css-1ijiwz2">Terms &amp; conditions</span></span></a></span></div></div><div class="css-1kimetj"><hr data-testid="divider" aria-hidden="true" class="css-1a12fxg"/><style data-emotion="css 3dc54p">.css-3dc54p{margin:0;color:#535353;font-family:"DM Sans",sans-serif;font-size:12px;line-height:18px;font-weight:500;letter-spacing:0;padding:0.5px 0px;text-align:center;margin-top:24px;margin-bottom:40px;}.css-3dc54p svg{fill:#535353;}.css-3dc54p::before{content:'';margin-bottom:-0.391em;display:block;}.css-3dc54p::after{content:'';margin-top:-0.409em;display:block;}</style><div class="css-3dc54p">Copyright © <!-- -->2022<!-- --> News Corp UK &amp; Ireland Limited. All rights reserved. This website is published by News Corp UK &amp; Ireland Limited, 1 London Bridge Street, London, SE1 9GF. Registered in England No 81701. VAT number GB 243 8054 69.</div></div></div></div></footer></div></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"path":"/theme/colours/","pageProps":{}},"page":"/theme/colours","query":{},"buildId":"4eEzQdZEpSITC7CcT92PH","nextExport":true,"isFallback":false,"appGip":true,"scriptLoader":[]}</script></body></html>
+</span><span class="linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2em;padding-right:1em;text-align:right;user-select:none;color:#C0C0C0">11</span><span>backgroundColor</span><span class="token" style="color:#577FFB">:</span><span> </span><span class="token" style="color:#0A782A">&#x27;{{colors.interactiveVisited010}}&#x27;</span><span class="token" style="color:#535353">;</span></code></pre></div></div><div class="css-exj33h"><div class="css-1tsq98o"></div></div><div class="css-exj33h"><div class="css-1tsq98o"><hr data-testid="divider" aria-hidden="true" class="css-1a12fxg"/></div></div></div></section><section><div class="css-f8eq1u"><div class="css-1yc9ne2"><h2 id="a11y" data-toc-indexed="Accessibility" class="css-17xz2ja">Accessibility considerations</h2><div class="css-1kwy130"></div></div><div class="css-1yc9ne2"><p class="css-krfbcy">Carefully consider what colours to assign to the NewsKit contextual colours to ensure important UI elements like text and icons are legible without compromising the aesthetic. Avoid using yellow or orange colours to convey a notice or warning intent because these colours paired with white text do not allow for sufficient colour contrast. Aim for contrast ratios that adhere to the<!-- --> <a href="https://www.w3.org/TR/WCAG20-TECHS/G18.html" target="_blank" class="css-g09sk7"><span class="css-17x5lw"><span class="css-p4p8io">WCAG AA standards:</span></span></a></p></div><div class="css-exj33h"><div class="css-10ztk7w"></div></div></div><div class="css-f8eq1u"><div class="css-1yc9ne2"><h3 class="css-16d6jfc">Contrast for text and images of text</h3><div class="css-1kwy130"></div></div><div class="css-1yc9ne2"><p class="css-krfbcy">Standard text and images of text must have a minimum of 4.5:1 contrast between the text colour and the background, except for the following:</p></div><div class="css-exj33h"><div class="css-1tsq98o"></div></div></div><div class="css-f8eq1u"><div class="css-1yc9ne2"><style data-emotion="css 1u47i3e">.css-1u47i3e{margin:0;color:#0A0A0A;}.css-1u47i3e svg{fill:#0A0A0A;}@media screen and (max-width: 767px){.css-1u47i3e{font-family:"Poppins",sans-serif;font-size:20px;line-height:22.5px;font-weight:700;letter-spacing:0;padding:0.5px 0px;}.css-1u47i3e::before{content:'';margin-bottom:-0.2155em;display:block;}.css-1u47i3e::after{content:'';margin-top:-0.2125em;display:block;}}@media screen and (min-width: 768px) and (max-width: 1023px){.css-1u47i3e{font-family:"Poppins",sans-serif;font-size:20px;line-height:22.5px;font-weight:700;letter-spacing:0;padding:0.5px 0px;}.css-1u47i3e::before{content:'';margin-bottom:-0.2155em;display:block;}.css-1u47i3e::after{content:'';margin-top:-0.2125em;display:block;}}@media screen and (min-width: 1024px) and (max-width: 1439px){.css-1u47i3e{font-family:"Poppins",sans-serif;font-size:20px;line-height:22.5px;font-weight:700;letter-spacing:0;padding:0.5px 0px;}.css-1u47i3e::before{content:'';margin-bottom:-0.2155em;display:block;}.css-1u47i3e::after{content:'';margin-top:-0.2125em;display:block;}}@media screen and (min-width: 1440px){.css-1u47i3e{font-family:"Poppins",sans-serif;font-size:20px;line-height:22.5px;font-weight:700;letter-spacing:0;padding:0.5px 0px;}.css-1u47i3e::before{content:'';margin-bottom:-0.2155em;display:block;}.css-1u47i3e::after{content:'';margin-top:-0.2125em;display:block;}}</style><h4 class="css-1u47i3e">Large text</h4><div class="css-1kwy130"></div></div><div class="css-1yc9ne2"><p class="css-krfbcy">Large-scale text and images of large-scale text must have a minimum of 3:1 contrast between the text colour and the background.</p></div><div class="css-exj33h"><div class="css-1tsq98o"></div></div></div><div class="css-f8eq1u"><div class="css-1yc9ne2"><h4 class="css-1u47i3e">Link text</h4><div class="css-1kwy130"></div></div><div class="css-1yc9ne2"><p class="css-krfbcy">Underline link text within the body text (inline link). Otherwise, in addition to the above, link text must have at least a 3:1 contrast between the link text colour and the surrounding non-link text colour.</p></div><div class="css-exj33h"><div class="css-1tsq98o"></div></div></div><div class="css-f8eq1u"><div class="css-1yc9ne2"><h4 class="css-1u47i3e">Incidental text</h4><div class="css-1kwy130"></div></div><div class="css-1yc9ne2"><p class="css-krfbcy">Text or images of text that are part of an inactive component, pure decoration, or part of a picture containing significant other visual content do not have any contrast requirements.</p></div><div class="css-exj33h"><div class="css-1tsq98o"></div></div></div><div class="css-f8eq1u"><div class="css-1yc9ne2"><h4 class="css-1u47i3e">Logotypes</h4><div class="css-1kwy130"></div></div><div class="css-1yc9ne2"><p class="css-krfbcy">Text that is part of a logo does not have any contrast requirements.</p></div><div class="css-exj33h"><div class="css-1tsq98o"></div></div></div><div class="css-f8eq1u"><div class="css-1yc9ne2"><h3 class="css-16d6jfc">Contrast for non-text elements</h3><div class="css-1kwy130"></div></div><div class="css-1yc9ne2"><p class="css-krfbcy"> User interface components and graphical objects must have at least a 3:1 contrast between against adjacent colours.</p></div><div class="css-exj33h"><div class="css-1tsq98o"></div></div><div class="css-exj33h"><div class="css-1tsq98o"><hr data-testid="divider" aria-hidden="true" class="css-1a12fxg"/></div></div></div></section></div><div class="css-12v76db"><style data-emotion="css 1wla9vq">.css-1wla9vq{height:100%;display:block;}.css-1wla9vq >span>div{width:100%;}</style><style data-emotion="css 1kf8klr">.css-1kf8klr{display:inline-block;-webkit-text-decoration:none;text-decoration:none;height:100%;display:block;}@media screen and (prefers-reduced-motion: no-preference){.css-1kf8klr{transition-property:color,fill;transition-duration:200ms,200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-1kf8klr{transition-property:color,fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1);}}.css-1kf8klr:hover:not(:disabled){-webkit-text-decoration:none;text-decoration:none;}.css-1kf8klr >span>div{width:100%;}</style><a href="theme/design-tokens" class="css-1kf8klr"><span class="css-17x5lw"><div class="css-1k3e0au"><style data-emotion="css ihrckf">.css-ihrckf{transition-property:box-shadow;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}@media screen and (min-width: 768px){.css-ihrckf{min-height:248px;}}@media screen and (min-width: 1024px){.css-ihrckf{min-height:304px;}}</style><style data-emotion="css z6p3rj">.css-z6p3rj{box-sizing:border-box;overflow:hidden;background-color:#5E44E4;border-radius:12px;position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;transition-property:box-shadow;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}@media screen and (min-width: 768px){.css-z6p3rj{min-height:248px;}}@media screen and (min-width: 1024px){.css-z6p3rj{min-height:304px;}}</style><div class="css-z6p3rj"><div class="css-1fz92cy"><style data-emotion="css 17zyjrj">.css-17zyjrj{background-image:url(static/feature-card-foundations.svg);border-radius:12px;-webkit-background-size:cover;background-size:cover;-webkit-background-position:bottom left;background-position:bottom left;-webkit-background-size:cover;background-size:cover;-webkit-background-position:right bottom;background-position:right bottom;height:18vh;}@media screen and (min-width: 1024px){.css-17zyjrj{height:200px;}}</style><div class="css-17zyjrj"></div></div><div class="css-1shocxe"><div class="css-1aog5rk"><div class="css-f7iis0"><style data-emotion="css 1m2iuuv">@media screen and (max-width: 1023px){.css-1m2iuuv{font-family:"Poppins",sans-serif;font-size:24px;line-height:27px;font-weight:700;letter-spacing:0;padding:0.5px 0px;}.css-1m2iuuv::before{content:'';margin-bottom:-0.2155em;display:block;}.css-1m2iuuv::after{content:'';margin-top:-0.2125em;display:block;}}@media screen and (min-width: 1024px){.css-1m2iuuv{font-family:"Poppins",sans-serif;font-size:32px;line-height:36px;font-weight:700;letter-spacing:0;padding:0.5px 0px;}.css-1m2iuuv::before{content:'';margin-bottom:-0.2155em;display:block;}.css-1m2iuuv::after{content:'';margin-top:-0.2125em;display:block;}}</style><section class="css-1m2iuuv"><h1 class="nk-headline-heading css-4eltk5">Design tokens</h1></section></div><div class="css-1kw6hwy"><style data-emotion="css 1dx0s0z">.css-1dx0s0z{margin:0;color:rgba(255,255,255,0.8);}.css-1dx0s0z svg{fill:rgba(255,255,255,0.8);}@media screen and (max-width: 1023px){.css-1dx0s0z{font-family:"Poppins",sans-serif;font-size:16px;line-height:24px;font-weight:500;letter-spacing:0;padding:0.5px 0px;}.css-1dx0s0z::before{content:'';margin-bottom:-0.403em;display:block;}.css-1dx0s0z::after{content:'';margin-top:-0.4em;display:block;}}@media screen and (min-width: 1024px){.css-1dx0s0z{font-family:"Poppins",sans-serif;font-size:20px;line-height:30px;font-weight:500;letter-spacing:0;padding:0.5px 0px;}.css-1dx0s0z::before{content:'';margin-bottom:-0.403em;display:block;}.css-1dx0s0z::after{content:'';margin-top:-0.4em;display:block;}}</style><p class="css-1dx0s0z">Design tokens are the design decisions of the design system. They are used in place of hard-coded values to maintain a scalable and consistent system for UI.</p></div><style data-emotion="css 165k7dq">.css-165k7dq{margin-bottom:8px;}</style><div class="css-165k7dq"><style data-emotion="css 14q6vju">.css-14q6vju{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-text-decoration:none;text-decoration:none;min-height:32px;min-width:64px;padding:8px 12px;cursor:default;overflow:hidden;border:none;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;background-color:#FFFFFF;border-radius:8px;color:#5E44E4;margin:0;cursor:pointer;}.css-14q6vju svg{width:16px;height:16px;}.css-14q6vju svg{fill:#5E44E4;}.css-14q6vju:hover:not(:disabled){background-color:rgba(255,255,255,0.2);}.css-14q6vju:active:not(:disabled){background-color:rgba(255,255,255,0.8);color:#36248C;}.css-14q6vju:active:not(:disabled) svg{fill:#36248C;}.css-14q6vju:disabled{background-color:rgba(255,255,255,0.2);color:#5E44E4;}.css-14q6vju:disabled svg{fill:#5E44E4;}@media screen and (prefers-reduced-motion: no-preference){.css-14q6vju{transition-property:background-color;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-14q6vju{transition-property:background-color;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}</style><button data-testid="button" type="button" class="css-14q6vju"><div class="css-bptyib"><div class="css-1yztr03"><style data-emotion="css mir38c">.css-mir38c{margin:0;font-family:"Poppins",sans-serif;font-size:12px;line-height:18px;font-weight:600;letter-spacing:0;padding:0.5px 0px;display:inline-block;}.css-mir38c::before{content:'';margin-bottom:-0.403em;display:block;}.css-mir38c::after{content:'';margin-top:-0.4em;display:block;}</style><span class="css-mir38c">Read more</span></div><div class="css-1yztr03"><style data-emotion="css 1rycle2">.css-1rycle2{fill:#2E2E2E;vertical-align:unset;display:inline-block;}@media screen and (prefers-reduced-motion: no-preference){.css-1rycle2{transition-property:fill;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-1rycle2{transition-property:fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}.css-1rycle2.css-1rycle2{width:16px;height:16px;}</style><style data-emotion="css 19fc6y7-EmotionIconBase">.css-19fc6y7-EmotionIconBase{display:inline-block;vertical-align:middle;overflow:hidden;fill:#2E2E2E;vertical-align:unset;display:inline-block;}@media screen and (prefers-reduced-motion: no-preference){.css-19fc6y7-EmotionIconBase{transition-property:fill;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-19fc6y7-EmotionIconBase{transition-property:fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}.css-19fc6y7-EmotionIconBase.css-19fc6y7-EmotionIconBase{width:16px;height:16px;}</style><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="css-19fc6y7-EmotionIconBase ex0cdmw0"><path fill="none" d="M0 0h24v24H0z"></path><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"></path></svg></div></div></button></div></div></div></div></div><style data-emotion="css 1nlep1q">@media screen{.css-1nlep1q{display:none;}}@media screen and (min-width: 480px){.css-1nlep1q{display:none;}}@media screen and (min-width: 768px){.css-1nlep1q{display:block;}}@media screen and (min-width: 1024px){.css-1nlep1q{display:block;}}@media screen and (min-width: 1440px){.css-1nlep1q{display:block;}}</style><div class="css-1nlep1q"><style data-emotion="css 1aaqxma">.css-1aaqxma{box-sizing:border-box;overflow:hidden;background-color:#5E44E4;border-radius:12px;position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;transition-property:box-shadow;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}@media screen and (min-width: 768px){.css-1aaqxma{min-height:248px;}}@media screen and (min-width: 1024px){.css-1aaqxma{min-height:304px;}}</style><div class="css-1aaqxma"><style data-emotion="css cq9vxn">.css-cq9vxn{box-sizing:border-box;display:block;position:relative;-webkit-flex:1;-ms-flex:1;flex:1;margin-left:0;}.css-cq9vxn svg{border-radius:4px;}</style><div class="css-cq9vxn"><style data-emotion="css kjtdkp">.css-kjtdkp{background-image:url(static/feature-card-foundations.svg);border-radius:12px;-webkit-background-size:cover;background-size:cover;-webkit-background-position:bottom left;background-position:bottom left;height:100%;}</style><div class="css-kjtdkp"></div></div><style data-emotion="css 1r2lt0d">.css-1r2lt0d{box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex:1;-ms-flex:1;flex:1;}</style><div class="css-1r2lt0d"><style data-emotion="css 1uxjazs">.css-1uxjazs{box-sizing:border-box;-webkit-flex:1;-ms-flex:1;flex:1;}@media screen and (max-width: 479px){.css-1uxjazs{padding:16px;}}@media screen and (min-width: 480px) and (max-width: 767px){.css-1uxjazs{padding:16px;}}@media screen and (min-width: 768px) and (max-width: 1023px){.css-1uxjazs{padding:24px;}}@media screen and (min-width: 1024px){.css-1uxjazs{padding:32px;}}.css-1uxjazs a:not(.nk-card-link){z-index:2;position:relative;}</style><div class="css-1uxjazs"><style data-emotion="css 1dfo3zr">.css-1dfo3zr{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}</style><div class="css-1dfo3zr"><div class="css-f7iis0"><section class="css-1m2iuuv"><h1 class="nk-headline-heading css-4eltk5">Design tokens</h1></section></div><div class="css-1kw6hwy"><p class="css-1dx0s0z"><style data-emotion="css 60wuij">.css-60wuij{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}</style><span class="css-60wuij">Design tokens are the design decisions of the design system. They are used in place of hard-coded values to maintain a scalable and consistent system for UI.</span></p></div><button data-testid="button" type="button" class="css-14q6vju"><div class="css-bptyib"><div class="css-1yztr03"><span class="css-mir38c">Read more</span></div><div class="css-1yztr03"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="css-19fc6y7-EmotionIconBase ex0cdmw0"><path fill="none" d="M0 0h24v24H0z"></path><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"></path></svg></div></div></button></div></div></div></div></div></span></a></div><style data-emotion="css ny3d8k">.css-ny3d8k{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;}@media screen{.css-ny3d8k{display:none;}}@media screen and (min-width: 1440px){.css-ny3d8k{display:block;padding:0 12px;margin-top:0;margin-left:83.33333333333334%;-webkit-flex-basis:16.666666666666668%;-ms-flex-preferred-size:16.666666666666668%;flex-basis:16.666666666666668%;max-width:16.666666666666668%;}}</style><div class="css-ny3d8k"><style data-emotion="css 1hq5n5s">.css-1hq5n5s{position:fixed;-webkit-transition:0.2s top,bottom ease-in;transition:0.2s top,bottom ease-in;will-change:top,bottom;}</style><style data-emotion="css 1n8f9ud">.css-1n8f9ud{position:fixed;-webkit-transition:0.2s top,bottom ease-in;transition:0.2s top,bottom ease-in;will-change:top,bottom;}</style><div style="top:0" id="toc-navigation" class="css-1n8f9ud"><style data-emotion="css 1c2ypzx">.css-1c2ypzx{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;}</style><div class="css-1c2ypzx"></div></div></div></div></div></div></main><style data-emotion="css 7cr3wq">.css-7cr3wq{background:#F4F4F4;padding-bottom:24px;}@media screen and (max-width: 767px){.css-7cr3wq{padding-top:40px;}}@media screen and (min-width: 768px){.css-7cr3wq{padding-top:48px;}}</style><footer class="css-7cr3wq"><div class="css-8atxkm"><style data-emotion="css 1l4gzx1">.css-1l4gzx1{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}@media screen{.css-1l4gzx1{margin:-32px 8px 0 8px;}}@media screen and (min-width: 480px){.css-1l4gzx1{margin:-32px 8px 0 8px;}}@media screen and (min-width: 768px){.css-1l4gzx1{margin:-0px 8px 0 8px;}}@media screen and (min-width: 1024px){.css-1l4gzx1{margin:-0px 12px 0 12px;}}@media screen and (min-width: 1440px){.css-1l4gzx1{margin:-0px 12px 0 12px;}}</style><div class="css-1l4gzx1"><style data-emotion="css 1kimetj">.css-1kimetj{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;}@media screen{.css-1kimetj{padding:0 8px;margin-top:32px;-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%;}}@media screen and (min-width: 768px){.css-1kimetj{margin-top:0;}}@media screen and (min-width: 1024px){.css-1kimetj{padding:0 12px;}}</style><div class="css-1kimetj"><style data-emotion="css 1c02ias">.css-1c02ias{display:block;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;margin-top:16px;}@media screen and (min-width: 768px){.css-1c02ias{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}}</style><div class="css-1c02ias"><style data-emotion="css 9yia0h">.css-9yia0h{text-align:center;display:block;}@media screen{.css-9yia0h{margin-bottom:40px;}.css-9yia0h:last-child{margin-bottom:0;}}@media screen and (min-width: 768px){.css-9yia0h{margin-right:48px;margin-bottom:24px;}.css-9yia0h:last-child{margin-bottom:24px;}}</style><span class="css-9yia0h"><style data-emotion="css 1m3x2du">.css-1m3x2du{display:inline-block;color:#3358CC;-webkit-text-decoration:none;text-decoration:none;}@media screen and (prefers-reduced-motion: no-preference){.css-1m3x2du{transition-property:color,fill;transition-duration:200ms,200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-1m3x2du{transition-property:color,fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1);}}.css-1m3x2du:hover:not(:disabled){color:#577FFB;-webkit-text-decoration:underline;text-decoration:underline;}.css-1m3x2du:active:not(:disabled){color:#AEBFFF;-webkit-text-decoration:none;text-decoration:none;}</style><a href="https://www.newscareers.co.uk/" target="_blank" class="css-1m3x2du"><span class="css-17x5lw"><style data-emotion="css 1ijiwz2">.css-1ijiwz2{margin:0;font-family:"Poppins",sans-serif;font-size:14px;line-height:21px;font-weight:600;letter-spacing:0;padding:0.5px 0px;display:inline-block;display:block;}.css-1ijiwz2::before{content:'';margin-bottom:-0.403em;display:block;}.css-1ijiwz2::after{content:'';margin-top:-0.4em;display:block;}</style><span class="css-1ijiwz2">Careers</span></span></a></span><span class="css-9yia0h"><a href="https://medium.com/newskit-design-system" target="_blank" class="css-1m3x2du"><span class="css-17x5lw"><span class="css-1ijiwz2">Blog</span></span></a></span><span class="css-9yia0h"><a href="#" role="button" class="css-1m3x2du"><span class="css-17x5lw"><span class="css-1ijiwz2">Privacy policy</span></span></a></span><span class="css-9yia0h"><a href="/help/terms-and-conditions/" class="css-1m3x2du"><span class="css-17x5lw"><span class="css-1ijiwz2">Terms &amp; conditions</span></span></a></span></div></div><div class="css-1kimetj"><hr data-testid="divider" aria-hidden="true" class="css-1a12fxg"/><style data-emotion="css 3dc54p">.css-3dc54p{margin:0;color:#535353;font-family:"DM Sans",sans-serif;font-size:12px;line-height:18px;font-weight:500;letter-spacing:0;padding:0.5px 0px;text-align:center;margin-top:24px;margin-bottom:40px;}.css-3dc54p svg{fill:#535353;}.css-3dc54p::before{content:'';margin-bottom:-0.391em;display:block;}.css-3dc54p::after{content:'';margin-top:-0.409em;display:block;}</style><div class="css-3dc54p">Copyright © <!-- -->2022<!-- --> News Corp UK &amp; Ireland Limited. All rights reserved. This website is published by News Corp UK &amp; Ireland Limited, 1 London Bridge Street, London, SE1 9GF. Registered in England No 81701. VAT number GB 243 8054 69.</div></div></div></div></footer></div></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"path":"/theme/colours/","pageProps":{}},"page":"/theme/colours","query":{},"buildId":"16aAekWqHChB9xZCUOXJs","nextExport":true,"isFallback":false,"appGip":true,"scriptLoader":[]}</script></body></html>