Tony's Collections
Tony's Bundles
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
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
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