Tony's Collections
Tony's Bundles
tony /
Primitives.css
Plan
Choose the plan that works best for your team.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.
html {
/* Colors */
--ui-color-zeus: #4a4a4a; /* Dark Grey */
--ui-color-zeus-hover: #000; /* Slightly Darker Grey */
--ui-color-zeus-text: #efefef;
--ui-color-hermes: #191919;
--ui-color-hermes-lighter: #626262;
--ui-color-grey-100: #e4e4e4;
/* Font Sizes */
--ui-font-size-xs: 0.75rem;
--ui-font-size-sm: 0.75rem;
--ui-font-size-md: 0.9rem;
--ui-font-size-base: 1rem;
--ui-font-size-lg: 1.2rem;
--ui-font-size-xl: 1.4rem;
--ui-font-weight-light: 300;
--ui-font-weight-normal: 400;
--ui-font-weight-bold: 700;
--ui-font-weight-extrabold: 900;
/* Other Config */
--ui-border-radius: 0.25rem;
--ui-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
--ui-input-border-width: 1px;
--ui-padding-sm: 0.5rem;
--ui-padding-md: 0.75rem;
--ui-padding-base: 1.25rem;
/* Buttons */
--ui-border-radius-buttons: --uikit-border-radius;
font-size: 13px;
}
.ui-box {
box-shadow: var(--ui-box-shadow);
padding: var(--ui-padding-base);
border-radius: var(--ui-border-radius);
}
.ui-button {
position: relative;
padding: 8px 10px 7px;
font-size: var(--ui-font-size-base);
border-radius: var(--ui-border-radius-buttons);
border-radius: var(--ui-border-radius);
border-color: var(--ui-color-zeus);
border-width: var(--ui-input-border-width);
transition: all 0.2s;
&:hover {
background-color: var(--ui-color-zeus-hover);
color: var(--ui-color-zeus-text);
}
&.--primary {
background-color: var(--ui-color-zeus);
color: var(--ui-color-zeus-text);
&:hover {
background-color: var(--ui-color-zeus-hover);
}
}
}
.ui-link {
display: flex;
align-items: center;
font-size: var(--ui-font-size-base);
position: relative;
line-height: 20px;
align-self: center;
cursor: pointer;
color: var(--ui-color-zeus);
svg {
width: 14px;
height: 14px;
}
}
.ui-link:after {
background-color: var(--ui-color-zeus);
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);
}
.ui-link:hover:after {
left: 0;
width: 100%;
}
.ui-eyebrow {
font-size: 10px;
font-weight: normal;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--maroon-candy-color-apollo);
}
.ui-titlepair {
& > .--title {
font-size: var(--ui-font-size-lg);
font-weight: var(--ui-font-weight-bold);
color: var(--ui-color-hermes);
}
& > .--description {
font-size: var(--ui-font-size-base);
color: var(--ui-color-hermes-lighter);
}
&.--lg {
& > .--title {
font-size: var(--ui-font-size-xl);
}
& > .--description {
font-size: var(--ui-font-size-lg);
}
}
&.--md {
& > .--title {
font-size: var(--ui-font-size-base);
}
& > .--description {
font-size: var(--ui-font-size-md);
}
}
&.--sm {
& > .--title {
font-size: var(--ui-font-size-sm);
}
& > .--description {
font-size: var(--ui-font-size-xs);
}
}
}
.ui-two-col {
width: 100%;
.--section-title {
font-size: var(--ui-font-size-lg);
font-weight: var(--ui-font-weight-bold);
}
.--item {
padding: 11px 0;
display: flex;
justify-content: space-between;
border-bottom: 1px solid var(--ui-color-grey-100);
font-size: 14px;
.--left,
.--right {
justify-content: center;
display: flex;
flex-direction: column;
}
.--right {
color: var(--maroon-candy-color-apollo);
}
}
}
Add this to the <head> of your page