Colors

Light Theme

Dark Theme

Typography

Headings

Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

.cuz-p {}

<p class="cuz-p"></p>

Text Link

Text Link

.cuz-link {
 color: c-cuz-key;
}

<a href="#" class="cuz-link">Text Link</a>

Block Quote

Block Quote

.cuz-blockquote {
 border-top-style: solid;
 border-top-width: 1px;
 border-top-color: panel;
 border-right-style: solid;
 border-right-width: 1px;
 border-right-color: panel;
 border-bottom-style: solid;
 border-bottom-width: 1px;
 border-bottom-color: panel;
 border-left-style: solid;
 border-left-width: 1px;
 border-left-color: text-main;
 border-top-left-radius: 10px;
 border-top-right-radius: 10px;
 border-bottom-left-radius: 10px;
 border-bottom-right-radius: 10px;
 background-color: panel-tint;
}

<blockquote class="cuz-blockquote"></blockquote>

Lists

• Lorem ipsum dolor sit amet, consectetur adipiscing elit.
• Ipsum dolor sit amet, consectetur
• Dolor sit amet, consectetur adipiscing elit. Lorem

.cuz-list {
 margin-top: 10px;
 margin-bottom: 20px;
 padding-left: 40px;
 list-style-type: disc;
}.cuz-list:small {
 padding-left: 30px;
}

<ul role="list" class="cuz-list">
             <li></li>
             <li></li>
             <li></li>
           </ul>

Icons

Navigation

Actions

Project Types

Project Types

Breakpoints

Desktop

* > 991px

Tablet

991px > 767px

Mobile Landscape

767px > 478px

Mobile Portrait

478px > *

Body

.cuz-body {
 background-color: hsla(0, 0.00%, 100.00%, 1.00);
 font-family: Quicksand;
 color: cuz-text-tint;
 font-size: 14px;
 line-height: 145%;
 font-weight: 400;
}

<div class="cuz-body"></div>

Section

.cuz-section {
 padding-right: 5%;
 padding-bottom: 130px;
 padding-left: 5%;
}

.cuz-section:small {
 padding-right: 0%;
 padding-bottom: 100px;
 padding-left: 0%;
}

<section class="cuz-section"></section>

Container

.cuz-container {
 width: 100%;
 max-width: 1080px;
 margin-right: auto;
 margin-left: auto;
 padding-top: 30px;
 padding-right: 60px;
 padding-bottom: 30px;
 padding-left: 60px;
 border-right-style: solid;
 border-right-width: 1px;
 border-right-color: @swatch_17a75a60;
 border-bottom-style: solid;
 border-bottom-width: 1px;
 border-bottom-color: @swatch_17a75a60;
 border-left-style: solid;
 border-left-width: 1px;
 border-left-color: @swatch_17a75a60;
}

.cuz-container:medium {
 padding-top: 20px;
 padding-right: 30px;
 padding-bottom: 20px;
 padding-left: 30px;
}

.cuz-container:small {
 padding-right: 20px;
 padding-left: 20px;
 border-right-style: none;
 border-left-style: none;
}

<div class="cuz-container"></div>

Grid

Two Columns

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

.cuz-grid-two {
 display: grid;
 justify-content: stretch;
 justify-items: stretch;
 align-items: stretch;
 align-content: stretch;
 grid-column-gap: 40px;
 grid-row-gap: 40px;
 grid-template-columns: 1fr 1fr;
 grid-template-rows: auto;
}

.cuz-grid-two:medium {
 grid-column-gap: 20px;
 grid-row-gap: 20px;
}

.cuz-grid-two:small {
 grid-template-columns: 1fr;
}

<div class="cuz-grid-two"></div>

Three Columns

.cuz-grid-three {
 display: grid;
 justify-content: stretch;
 justify-items: stretch;
 align-items: stretch;
 align-content: stretch;
 grid-column-gap: 40px;
 grid-row-gap: 40px;
 grid-template-columns: 1fr 1fr 1fr;
 grid-template-rows: auto;
}

.cuz-grid-three:medium {
 grid-column-gap: 20px;
 grid-row-gap: 20px;
}

.cuz-grid-three:small {
 grid-template-columns: 1fr;
}

<div class="cuz-grid-three"></div>

Divider

Line Divider

.cuz-line-divider {
 height: 1px;
 margin-top: 20px;
 margin-bottom: 20px;
 background-color: @swatch_17a75a60;
}

<div class="cuz-line-divider"></div>

Invisible Divider

.cuz-invis-divider {
 height: 40px;
}

font-family: Quicksand, sans-serif;
color: #8e8e8e;
font-size: 14px;
line-height: 145%;
box-sizing: border-box;
height: 40px;

<div class="cuz-invis-divider"></div>

Button with Left Icon

Normal State

Loading State

Disabled State

Button with Right Icon

Button

.cuz-button {
 margin-top: 10px;
 margin-right: 10px;
 margin-bottom: 10px;
 padding-top: 10px;
 padding-right: 15px;
 padding-bottom: 10px;
 padding-left: 15px;
 align-items: center;
 flex-grow: 0;
 flex-shrink: 0;
 flex-basis: auto;
 border-top-style: solid;
 border-top-width: 4px;
 border-top-color: btn-border;
 border-right-style: solid;
 border-right-width: 4px;
 border-right-color: btn-border;
 border-bottom-style: solid;
 border-bottom-width: 4px;
 border-bottom-color: btn-border;
 border-left-style: solid;
 border-left-width: 4px;
 border-left-color: btn-border;
 border-top-left-radius: 16px;
 border-top-right-radius: 16px;
 border-bottom-left-radius: 16px;
 border-bottom-right-radius: 16px;
 background-color: key;
 box-shadow: 0 3px 3px 0 btn-shadow;
 transform: scale3d(1none, 1none, 1none);
 transition-property: all;
 transition-duration: 300ms;
 transition-timing-function: ease;
 color: btn-text;
 font-weight: 700;
 text-align: center;
 text-transform: uppercase;
}.cuz-button:main_hover {
 box-shadow: 0 6px 10px -2px hsla(0, 0.00%, 0.00%, 0.25);
 transform: scale(1.06);
}.cuz-button:main_active {
 box-shadow: 0 4px 6px -2px hsla(0, 0.00%, 0.00%, 0.25);
 transform: scale(1.03);
}.cuz-button:small {
 display: block;
 padding-top: 7px;
 padding-bottom: 7px;
 border-top-width: 3px;
 border-right-width: 3px;
 border-bottom-width: 3px;
 border-left-width: 3px;
 border-top-left-radius: 12px;
 border-top-right-radius: 12px;
 border-bottom-left-radius: 12px;
 border-bottom-right-radius: 12px;
}.cuz-button:tiny {
 display: block;
 margin-right: 0px;
}.cuz-button:small_active {
 padding-top: 11px;
 padding-bottom: 11px;
 border-top-width: 2px;
 border-right-width: 2px;
 border-bottom-width: 2px;
 border-left-width: 2px;
}

.cuz-btn-text {
 display: inline-block;
 margin-right: 10px;
 margin-left: 10px;
}

.cuz-btn-icon {
 width: 18px;
 height: 18px;
 margin-top: -2px;
 opacity: 0.85;
}.cuz-btn-icon:tiny {}

<a href="#" class="cuz-button"> <div class="cuz-btn-text">Button</div><img src="icon.svg" alt="right-icon" class="cuz-btn-icon"></a>

Normal State

Loading State

Disabled State

Button with Right Icon

Normal State

Loading State

Disabled State

Button

Button

Button

Button

Button - New Project

Normal State

.cuz-button.cuz-new-project {
 width: 64px;
 height: 64px;
 padding-top: 10px;
 padding-right: 10px;
 padding-bottom: 10px;
 padding-left: 10px;
 border-top-left-radius: 50px;
 border-top-right-radius: 50px;
 border-bottom-left-radius: 50px;
 border-bottom-right-radius: 50px;
}
.cuz-btn-icon.cuz-new-project {
 width: 100%;
 height: auto;
 margin-top: 0px;
}

<a href="#" class="cuz-button cuz-new-project"><img src="icon.svg" alt="main-icon" class="cuz-btn-icon cuz-new-project"></a>

Loading State

Disabled State

Button

Button

.cuz-button {
 margin-top: 10px;
 margin-right: 10px;
 margin-bottom: 10px;
 padding-top: 10px;
 padding-right: 15px;
 padding-bottom: 10px;
 padding-left: 15px;
 align-items: center;
 flex-grow: 0;
 flex-shrink: 0;
 flex-basis: auto;
 border-top-style: solid;
 border-top-width: 4px;
 border-top-color: btn-border;
 border-right-style: solid;
 border-right-width: 4px;
 border-right-color: btn-border;
 border-bottom-style: solid;
 border-bottom-width: 4px;
 border-bottom-color: btn-border;
 border-left-style: solid;
 border-left-width: 4px;
 border-left-color: btn-border;
 border-top-left-radius: 16px;
 border-top-right-radius: 16px;
 border-bottom-left-radius: 16px;
 border-bottom-right-radius: 16px;
 background-color: key;
 box-shadow: 0 3px 3px 0 btn-shadow;
 transform: scale3d(1none, 1none, 1none);
 transition-property: all;
 transition-duration: 300ms;
 transition-timing-function: ease;
 color: btn-text;
 font-weight: 700;
 text-align: center;
 text-transform: uppercase;
}.cuz-button:main_hover {
 box-shadow: 0 6px 10px -2px hsla(0, 0.00%, 0.00%, 0.25);
 transform: scale(1.06);
}.cuz-button:main_active {
 box-shadow: 0 4px 6px -2px hsla(0, 0.00%, 0.00%, 0.25);
 transform: scale(1.03);
}.cuz-button:small {
 display: block;
 padding-top: 7px;
 padding-bottom: 7px;
 border-top-width: 3px;
 border-right-width: 3px;
 border-bottom-width: 3px;
 border-left-width: 3px;
 border-top-left-radius: 12px;
 border-top-right-radius: 12px;
 border-bottom-left-radius: 12px;
 border-bottom-right-radius: 12px;
}.cuz-button:tiny {
 display: block;
 margin-right: 0px;
}.cuz-button:small_active {
 padding-top: 11px;
 padding-bottom: 11px;
 border-top-width: 2px;
 border-right-width: 2px;
 border-bottom-width: 2px;
 border-left-width: 2px;
}

.cuz-btn-text {
 display: inline-block;
 margin-right: 10px;
 margin-left: 10px;
}.cuz-btn-text:tiny {}

<a href="#" class="cuz-button">
             <div class="cuz-btn-text">Button</div>
           </a>

Normal State

Loading State

Disabled State

Button - Upload

Normal State

Uploading State

Uploaded State

file_name.pdf

Button - Chip

Normal State