https://www.dayoutwiththekids.co.uk/_next/static/chunks/pages/design-system/colours-4ef01b17eea8fd44.js

1!function(){try{var e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:{},s=(new e.Error).stack;s&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[s]="10693b1f-7c8e-4091-b124-7af2f5b4582b",e._sentryDebugIdIdentifier="sentry-dbid-10693b1f-7c8e-4091-b124-7af2f5b4582b")}catch(e){}}(),(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[921],{2277:function(e,s,d){(window.__NEXT_P=window.__NEXT_P||[]).push(["/design-system/colours",function(){return d(87270)}])},87270:function(e,s,d){"use strict";d.r(s),d.d(s,{__N_SSG:function(){return a}});var l=d(85893),n=d(41664),t=d.n(n),r=d(62981),i=[{title:"Grey",swatches:[{token:"--ds-grey-100",tailwind:"ds-grey-100",hex:"#fbfbfb"},{token:"--ds-grey-200",tailwind:"ds-grey-200",hex:"#f3f3f4"},{token:"--ds-grey-300",tailwind:"ds-grey-300",hex:"#eeeeee"},{token:"--ds-grey-400",tailwind:"ds-grey-400",hex:"#a1a1a9"},{token:"--ds-grey-500",tailwind:"ds-grey-500",hex:"#4b4a4a"}]},{title:"Purple",swatches:[{token:"--ds-purple-100",tailwind:"ds-purple-100",hex:"#f0ebfa"},{token:"--ds-purple-200",tailwind:"ds-purple-200",hex:"#EEE8F8"},{token:"--ds-purple-300",tailwind:"ds-purple-300",hex:"#6836d1"},{token:"--ds-purple-400",tailwind:"ds-purple-400",hex:"#8B2380"}]},{title:"Blue",swatches:[{token:"--ds-blue-100",tailwind:"ds-blue-100",hex:"#f5faff"},{token:"--ds-blue-200",tailwind:"ds-blue-200",hex:"#edf8ff"},{token:"--ds-blue-300",tailwind:"ds-blue-300",hex:"#dceefd"},{token:"--ds-blue-400",tailwind:"ds-blue-400",hex:"#A4CBF0"},{token:"--ds-blue-500",tailwind:"ds-blue-500",hex:"#0085f2"}]},{title:"Pink",swatches:[{token:"--ds-pink-100",tailwind:"ds-pink-100",hex:"#fff7f6"},{token:"--ds-pink-200",tailwind:"ds-pink-200",hex:"#facfe3"},{token:"--ds-pink-300",tailwind:"ds-pink-300",hex:"#fed6cc"},{token:"--ds-pink-400",tailwind:"ds-pink-400",hex:"#fa2080"}]},{title:"Green",swatches:[{token:"--ds-green-100",tailwind:"ds-green-100",hex:"#a9d8cf"}]},{title:"Yellow",swatches:[{token:"--ds-yellow-100",tailwind:"ds-yellow-100",hex:"#ffe37f"},{token:"--ds-yellow-200",tailwind:"ds-yellow-200",hex:"#eeb95b"}]},{title:"Cream",swatches:[{token:"--ds-cream-100",tailwind:"ds-cream-100",hex:"#fbf7f2"}]},{title:"Notifications",swatches:[{token:"--ds-error-100",tailwind:"ds-error-100",hex:"#fdefee"},{token:"--ds-error-200",tailwind:"ds-error-200",hex:"#e41902"},{token:"--ds-warning-100",tailwind:"ds-warning-100",hex:"#fff0dc"},{token:"--ds-warning-200",tailwind:"ds-warning-200",hex:"#f79009"},{token:"--ds-success-100",tailwind:"ds-success-100",hex:"#dff6eb"},{token:"--ds-success-200",tailwind:"ds-success-200",hex:"#0a7d48"}]},{title:"Partners",swatches:[{token:"--ds-partner-merlin",tailwind:"ds-partner-merlin",hex:"#00378b"},{token:"--ds-partner-tui",tailwind:"ds-partner-tui",hex:"#c2e6fa"},{token:"--ds-partner-color-sea-life-dark-blue",tailwind:"ds-partner-color-sea-life-dark-blue",hex:"#1D1F6A"}]}],SwatchCard=function(e){var s,d=e.swatch,n=(299*parseInt((s=d.hex.replace("#","")).substring(0,2),16)+587*parseInt(s.substring(2,4),16)+114*parseInt(s.substring(4,6),16))/1e3>160;return(0,l.jsxs)("div",{className:"flex flex-col overflow-hidden rounded-lg border border-ds-grey-300",children:[(0,l.jsx)("div",{className:"flex items-end p-3 h-24",style:{backgroundColor:d.hex},children:(0,l.jsx)("span",{className:"ds-label-sm font-semibold ".concat(n?"text-black":"text-white"),children:d.hex.toUpperCase()})}),(0,l.jsxs)("div",{className:"flex flex-col gap-1 p-3 bg-white",children:[(0,l.jsx)("code",{className:"bg-ds-grey-200 px-1.5 py-0.5 rounded text-ds-purple-300 ds-copy-small self-start",children:d.token}),(0,l.jsxs)("span",{className:"text-ds-grey-500 ds-label-sm",children:["bg-",d.tailwind]})]})]})},ColourSection=function(e){var s=e.group;return(0,l.jsxs)("section",{className:"mb-10",children:[(0,l.jsx)("h2",{className:"mb-4 ds-bc-heading-02",children:s.title}),(0,l.jsx)("div",{className:"gap-3 grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5",children:s.swatches.map(function(e){return(0,l.jsx)(SwatchCard,{swatch:e},e.token)})})]})},a=!0;s.default=function(){return(0,l.jsx)(r.Z,{dataLayer:{pageType:"DESIGN_SYSTEM"},head:{title:"Colours | Design System | Day Out With The Kids",canonicalUrl:"https://www.dayoutwiththekids.co.uk/design-system/colours",metaDescription:"Colour primitives, notification tokens and partner colours used across the DOWTK frontend.",next:null,prev:null,socialMeta:{title:"Colours — Design System",type:"website",url:"https://www.dayoutwiththekids.co.uk/design-system/colours",image:null,description:"Colour primitives, notification tokens and partner colours used across the DOWTK frontend.",coordinates:null},enableAdverts:!1,noIndex:!0},preview:!1,disableAds:!0,children:(0,l.jsxs)("div",{className:"container",children:[(0,l.jsx)("div",{className:"mb-6",children:(0,l.jsx)(t(),{href:"/design-system",className:"text-ds-purple-300 ds-copy-small",children:"← Back to Design System"})}),(0,l.jsx)("h1",{className:"mb-1 ds-bc-heading-01",children:"Colours"}),(0,l.jsxs)("p",{className:"mb-8 text-ds-grey-500 ds-copy-regular",children:["All colour primitives defined in ",(0,l.jsx)("code",{className:"bg-ds-grey-200 px-1 py-0.5 rounded ds-copy-small",children:"design-system.css"}),". Use the Tailwind class shown on each swatch (e.g. ",(0,l.jsx)("code",{className:"bg-ds-grey-200 px-1 py-0.5 rounded ds-copy-small",children:"bg-ds-purple-300"})," or ",(0,l.jsx)("code",{className:"bg-ds-grey-200 px-1 py-0.5 rounded ds-copy-small",children:"text-ds-purple-300"}),"). Never reference hex values directly."]}),i.map(function(e){return(0,l.jsx)(ColourSection,{group:e},e.title)}),(0,l.jsxs)("section",{className:"mb-10",children:[(0,l.jsx)("h2",{className:"mb-4 ds-bc-heading-02",children:"Gradients"}),(0,l.jsxs)("div",{className:"gap-3 grid grid-cols-1 sm:grid-cols-2",children:[(0,l.jsxs)("div",{className:"flex flex-col overflow-hidden rounded-lg border border-ds-grey-300",children:[(0,l.jsx)("div",{className:"flex items-end p-3 h-24",style:{background:"linear-gradient(135deg, #fa2080 26%, #1997f4 100%)"},children:(0,l.jsx)("span",{className:"text-white ds-label-sm font-semibold",children:"Brand"})}),(0,l.jsx)("div",{className:"flex flex-col gap-1 p-3 bg-white",children:(0,l.jsx)("code",{className:"bg-ds-grey-200 px-1.5 py-0.5 rounded text-ds-purple-300 ds-copy-small self-start",children:"--ds-gradient-brand"})})]}),(0,l.jsxs)("div",{className:"flex flex-col overflow-hidden rounded-lg border border-ds-grey-300",children:[(0,l.jsx)("div",{className:"flex items-end p-3 h-24",style:{background:"linear-gradient(135deg, #b722ff 0%, #25d1fe 100%)"},children:(0,l.jsx)("span",{className:"text-white ds-label-sm font-semibold",children:"Membership"})}),(0,l.jsx)("div",{className:"flex flex-col gap-1 p-3 bg-white",children:(0,l.jsx)("code",{className:"bg-ds-grey-200 px-1.5 py-0.5 rounded text-ds-purple-300 ds-copy-small self-start",children:"--ds-gradient-membership"})})]})]})]}),(0,l.jsxs)("section",{className:"mb-10",children:[(0,l.jsx)("h2",{className:"mb-4 ds-bc-heading-02",children:"Effects"}),(0,l.jsxs)("div",{className:"gap-3 grid grid-cols-1 sm:grid-cols-2",children:[(0,l.jsxs)("div",{className:"flex flex-col overflow-hidden rounded-lg border border-ds-grey-300",children:[(0,l.jsx)("div",{className:"flex items-center justify-center p-6 bg-ds-grey-200",children:(0,l.jsx)("div",{className:"bg-white rounded-lg w-full h-16",style:{boxShadow:"0 8px 16px 0 rgba(0, 0, 0, 0.04)"}})}),(0,l.jsxs)("div",{className:"flex flex-col gap-1 p-3 bg-white",children:[(0,l.jsx)("code",{className:"bg-ds-grey-200 px-1.5 py-0.5 rounded text-ds-purple-300 ds-copy-small self-start",children:"--ds-shadow-card"}),(0,l.jsx)("span",{className:"text-ds-grey-500 ds-label-sm",children:"0 8px 16px 0 rgba(0,0,0,0.04)"})]})]}),(0,l.jsxs)("div",{className:"flex flex-col overflow-hidden rounded-lg border border-ds-grey-300",children:[(0,l.jsxs)("div",{className:"flex items-center justify-center p-6 relative h-24 overflow-hidden",children:[(0,l.jsx)("img",{src:"https://res.dayoutwiththekids.co.uk/image/upload/v1775725769/design-system-v1/assets/young-girl-feeding-goat-masked_oetpxu.png",alt:"",className:"absolute inset-0 w-full h-full object-cover"}),(0,l.jsx)("div",{className:"absolute inset-0",style:{backgroundColor:"rgba(0, 0, 0, 0.4)"}}),(0,l.jsx)("span",{className:"relative text-white ds-label-sm font-semibold",children:"Modal Overlay"})]}),(0,l.jsxs)("div",{className:"flex flex-col gap-1 p-3 bg-white",children:[(0,l.jsx)("code",{className:"bg-ds-grey-200 px-1.5 py-0.5 rounded text-ds-purple-300 ds-copy-small self-start",children:"--ds-modal-overlay"}),(0,l.jsx)("span",{className:"text-ds-grey-500 ds-label-sm",children:"rgba(0, 0, 0, 0.4)"})]})]})]})]})]})})}}},function(e){e.O(0,[9734,1664,2981,9774,2888,179],function(){return e(e.s=2277)}),_N_E=e.O()}]);