close
tony / Squarespace Admin UI

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

Section Title

Upgrade to the Google Workspace Standard plan

Get more out of Google Workspace with larger meeting sizes, video recording, and more cloud storage per user.

Plan

Business Starter Plan

Get custom email (@yourcompany.com), 100 participant video meetings, and more.

Business Starter Plan

Get custom email (@yourcompany.com), 100 participant video meetings, and more.

Registration

Domain

tonic-software.com

Online Since

June 15, 2024

Users

10 Active Users

Online Since

June 15, 2024

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%;
} 

Add this to the <head> of your page