Squarespace Admin UI

I really like the simple black and white style of the Squarespace Admin UI and would like to use it in my projects. So far I've got the following:

• Link styles
• Buttons
• Two-cols with sections
• Eyebrow Headings

Would like to add more in future

Demo

Code

:root {
  --maroon-candy-color-alpha: #2c2c2c;
  --maroon-candy-color-alpha-text: #fff;
  --maroon-candy-color-alpha-hover: #000;
  --maroon-candy-color-beta: rgb(231, 231, 231);   /* Border Color */
  --maroon-candy-color-apollo: rgb(102, 102, 102); /* Light Text Color */
  --maroon-candy-color-ares: #191919;              /* Dark Text Color */
}

.maroon-candy {
  color: var(--maroon-candy-color-ares);
}

.maroon-candy h1 {
  font-size: 22px;
  line-height: 26px;
  font-weight: bold;
}

.maroon-candy .--box {
  border: 1px solid var(--maroon-candy-color-beta);
  padding: 22px;
  h3 {
    font-size: 16px;
  }
  p {
    color: var(--maroon-candy-color-apollo);
    font-size: 14px;
    line-height: 21px;
  }
}

.maroon-candy .--two-col {
  .--section-title {
    font-size: 16px;
    font-weight: bold;
  }
  .--section-title.--eyebrow {
    font-size: 10px;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--maroon-candy-color-apollo);
  }
  .--item {
    padding: 11px 0;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--maroon-candy-color-beta);
    font-size: 14px;
    .--title {
      font-weight: 600;
      font-size: 14px;
    }
    .--description {
      font-size: 12px;
      line-height: 20px;
      color: var(--maroon-candy-color-apollo);
    }
    .--left,
    .--right {
      justify-content: center;
      display: flex;
      flex-direction: column;
    }
    .--right {
      color: var(--maroon-candy-color-apollo);
    }
  }
}

.maroon-candy .--button-primary,
.maroon-candy .--button-link {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.maroon-candy .--button-primary {
  padding: 11px;
  background-color: var(--maroon-candy-color-alpha);
  color: var(--maroon-candy-color-alpha-text);
  transition: all;
  &:hover {
    background-color: var(--maroon-candy-color-alpha-hover);
  }
}

.maroon-candy .--button-link {
  line-height: 12px;
  align-self: start;
}

.maroon-candy .--link,
.maroon-candy .--button-link {
  position: relative;
  color: var(--maroon-candy-color-alpha);
}

.maroon-candy .--link:after,
.maroon-candy .--button-link:after {
  height: 2px;
  position: absolute;
  right: 0;
  top: 100%;
  width: 0;
  --tw-translate-y: 0.25rem;
  content: var(--tw-content);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transition-duration: .4s;
  transition-property: all;
  transition-timing-function: cubic-bezier(.59,0,.06,1);
  background-color: var(--maroon-candy-color-alpha);
}

.maroon-candy .--link:hover:after,
.maroon-candy .--link.active:after,
.maroon-candy .--button-link:hover:after,
.maroon-candy .--button-link.active:after {
  left: 0;
  width: 100%;
}