Codepen

:root {
  --color-dominant: #fad44d;
  --color-surface: #24719d;
  --color-ink: #e4b478;
  --color-accent: #a86ea6;
  --color-detail: #c597a7;
}

/* CSS variables exposed by source */
:root {
  --bg-overlay: 1;
  --bg-angle: 0deg;
  --cp-color-13: hsl(227.37deg 12.26% 30.39%);
  --cp-color-yellow-darker-hsl: 43.56deg 65.77% 21.76%;
  --cp-pen-header-button-hover-bg: hsl(227.37deg 12.26% 30.39%);
  --cp-header-height: 65px;
  --cp-color-projects: hsl(49.32deg 100% 62.55%);
  --cp-input-focus-bg: hsl(0deg 0% 100%);
  --cp-grid-item-screenshot-bg: hsl(227.37deg 12.26% 30.39%);
  --cp-control-bar-input-placeholder: hsl(226.67deg 11.84% 70.2%);
  --cp-color-9-hsl: 233.33deg 9.89% 64.31%;
  --cp-overlay-bg-gradient: radial-gradient(circle,hsl(228.39deg 12.25% 50.39%/90%) 35%,hsl(227.37deg 12.26% 30.39%/90%));
  --cp-button-border-width: 3px;
  --cp-control-bar-space-between: 1.5rem;
  --cp-control-bar-input-bg: hsl(222.86deg 13.73% 20%);
  --cp-color-posts: hsl(139.41deg 58.62% 54.51%);
  --cp-overlay-bg: hsl(227.37deg 12.26% 30.39%);
  --cp-pen-panel-spacing: 10px;
  --cp-control-bar-button-bg: hsl(227.37deg 12.26% 30.39%);
  --cp-font-family: "Lato","Lucida Grande","Lucida Sans Unicode",Tahoma,Sans-Serif;
  --cp-color-blue: hsl(196.18deg 100% 52.75%);
  --cp-color-posts-hsl: 139.41deg 58.62% 54.51%;
  --cp-color-green-dark: hsl(139.62deg 59.09% 34.51%);
  --cp-color-19-hsl: 0deg 0% 0.39%;
  --cp-modal-content-border: hsl(226.36deg 12.94% 16.67%);
  --cp-color-13-hsl: 227.37deg 12.26% 30.39%;
  --cp-pen-panel-box-bg: hsl(222.86deg 13.73% 20%);
  --cp-color-9: hsl(233.33deg 9.89% 64.31%);
  --cp-color-3: hsl(231.43deg 9.09% 92.45%);
  --cp-color-16-hsl: 232.5deg 11.76% 13.33%;
  --cp-button-hover-icon: currentColor;
  --cp-control-bar-color: hsl(226.15deg 12.04% 57.65%);
  --cp-button-icon: currentColor;
  --cp-color-6-hsl: 230deg 12% 80.39%;
  --cp-color-7-hsl: 225.88deg 13.39% 75.1%;
  --cp-color-10: hsl(226.15deg 12.04% 57.65%);
  --s-x: 1;
  --progress: 0;
  --cp-color-15: hsl(226.36deg 12.94% 16.67%);
  --cp-pen-sidebar-spacing: 6px;
  --cp-control-bar-button-hover-bg: hsl(228.39deg 12.25% 50.39%);
  --cp-input-focus-border: hsl(228.39deg 12.25% 50.39%);
  --cp-pen-bar-height: 45px;
  --cp-pen-panel-bg-secondary: hsl(227.37deg 12.26% 30.39%);
  --cp-pen-header-button-icon: hsl(226.15deg 12.04% 57.65%);
  --cp-color-16: hsl(232.5deg 11.76% 13.33%);
  --cp-control-bar-input-color: hsl(231.43deg 9.09% 92.45%);
  --cp-control-bar-height: 29px;
  --cp-pen-panel-bg: hsl(232.5deg 11.76% 13.33%);
  --t-x: 0px;
  --cp-select-focus-border: hsl(240deg 9.09% 4.31%);
  --cp-bg-gradient-linear: linear-gradient(to right,hsl(196.18deg 100% 52.75%),hsl(49.32deg 100% 62.55%),hsl(274.88deg 70.49% 64.12%),hsl(139.41deg 58.62% 54.51%));
  --cp-input-bg: hsl(228deg 9.8% 90%);
  --cp-color-2-hsl: 240deg 7.69% 94.9%;
  --cp-color-purple-hsl: 274.88deg 70.49% 64.12%;
  --cp-control-bar-button-color: hsl(0deg 0% 100%);
  --cp-pen-header-button-color: hsl(226.67deg 11.84% 70.2%);
  --cp-color-link-on-white-hsl: 191.79deg 64.37% 34.12%;
  --cp-header-height-small: 53px;
  --cp-color-link: hsl(196.2deg 100% 73.14%);
}