Website Design System

A Codecademy Challenge Project by Anton Vlasenko

Popular Website Color Schemes

Using color schemes can vastly improve your website's aesthetic and brand perception. Each scheme suits some website styles more than others, so it's important to choose colors that not only compliment eachother, but also fit the main theme of your brand.

The five color schemes below have been used in many modern websites in recent years:

Blue Yonder

#587291

Blue Green

#2F97C1

Dark Turquoise

#1CCAD8

Turquoise

#15E6CD

Spring Green

#0CF574

Electric Blue

#373E98

Hot Pink

#F16775

Shocking Yellow

#FEE36E

Chartreuse-ish

#CEB92C

Darkest Gray

#2A2A2A

Black

#000000

Medium Gray

#565656

Light Gray

#9E9E9E

Hot Orange

#FBA92C

White

#FFFFFF

Beige

#C8B7A6

Perriwinkle

#7D94B5

Dusty Rose

#C29591

Maroon Brown

#703F37

Muted Green

#B6C199

Light Lime

#ABD699

Fresh Lemon

#FFE26A

Teal

#75C9B7

Mint

#C7DDCC

Common Font Combinations

Here are some of my favorite font combinations that can really make a website stand out and look professional. All of these fonts can be found in the Google Fonts API.

- Barlow Condensed & Cantarell -

The Quick Brown Fox Jumps Over the Lazy Dog

Vigorous writing is concise. A sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts.

- William Strunk, Jr.

- Cardo & DM Sans -

The Quick Brown Fox Jumps Over the Lazy Dog

Vigorous writing is concise. A sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts.

- William Strunk, Jr.

- DM Serif Display & Fjalla One -

The Quick Brown Fox Jumps Over the Lazy Dog

Vigorous writing is concise. A sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts.

- William Strunk, Jr.

- Hind & Inconsolata -

The Quick Brown Fox Jumps Over the Lazy Dog

Vigorous writing is concise. A sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts.

- William Strunk, Jr.

- Inter & Josefin Sans -

The Quick Brown Fox Jumps Over the Lazy Dog

Vigorous writing is concise. A sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts.

- William Strunk, Jr.

- Karla & Libre Baskerville -

The Quick Brown Fox Jumps Over the Lazy Dog

Vigorous writing is concise. A sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts.

- William Strunk, Jr.

- Lora & Montserrat -

The Quick Brown Fox Jumps Over the Lazy Dog

Vigorous writing is concise. A sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts.

- William Strunk, Jr.

- PT Serif & Quattrocento Sans -

The Quick Brown Fox Jumps Over the Lazy Dog

Vigorous writing is concise. A sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts.

- William Strunk, Jr.

- Source Sans Pro & Syne -

The Quick Brown Fox Jumps Over the Lazy Dog

Vigorous writing is concise. A sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts.

- William Strunk, Jr.

- Ultra & Yeseva One -

The Quick Brown Fox Jumps Over the Lazy Dog

Vigorous writing is concise. A sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts.

- William Strunk, Jr.

Button Styles

Using a call-to-action button that clearly differentiates itself from the rest of the website is one of the best ways to improve conversion rates. This is mostly achieved in 2 ways - by focusing on the button's colors and it's styling.

Buttons come in all shapes and sizes, ranging from simple, minimalistic styles to much more vibrant and animated buttons that change their style after user interaction (such as mouse clicks and hovers).

- Minimalistic Buttons -

HTML Code

<button class="button-1" role="button">Button 1</button>


CSS Code

.button-1 {
  background-color: #FAFBFC;
  border: 1px solid rgba(27, 31, 35, 0.15);
  border-radius: 6px;
  color: #24292E;
  cursor: pointer;
  font-family: Helvetica, sans-serif;
  font-size: 14px;
  line-height: 20px;
  padding: 6px 16px;
}

.button-1:hover {
  background-color: #F3F4F6;
  transition-duration: 0.2s;
}

.button-1:active {
  background-color: #EDEFF2;
  transition: none 0s;
}

HTML Code

<button class="button-2" role="button">Button 2</button>


CSS Code

.button-2 {
  background-color: transparent;
  border: 2px solid #1A1A1A;
  border-radius: 15px;
  color: #3B3B3B;
  cursor: pointer;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  padding: 16px 24px;
  transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
}

.button-2:hover {   color: #fff;
  background-color: #1A1A1A;
  box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
  transform: translateY(-2px);
}

.button-2:active {
  box-shadow: none;
  transform: translateY(0);
}

HTML Code

<button class="button-3" role="button">Button 3</button>


CSS Code

.button-3 {
  align-items: center;
  background-color: #fff;
  border: 2px solid #000;
  color: #000;
  cursor: pointer;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 600;
  height: 48px;
  letter-spacing: -.8px;
  line-height: 24px;
  min-width: 140px;
  padding: 0 17px;
  transition: all .3s;
}

.button-3:hover {
  border-color: #06f;
  color: #06f;
}

.button-3:active {
  border-color: #06f;
  color: #06f;
  height: 68px;
}

HTML Code

<button class="button-4" role="button">Button 4</button>


CSS Code

.button-4 {
  color: #668ad8;
  width: 120px;
  height: 120px;
  font-size: 16px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  line-height: 120px;
  border-radius: 50%;
  border: solid 2px #668ad8;
  font-weight: bold;
  transition: .4s;
  cursor: pointer;
}

.button-4:hover {
  background: #b3e1ff;
}

- Colorful Buttons -

HTML Code

<button class="button-5" role="button">
  <span class"text">Button 5</span>
</button>


CSS Code

.button-5 {
  background-image: linear-gradient(144deg,#AF40FF, #5B42F3 50%,#00DDEB);
  border: 0;
  border-radius: 8px;
  box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px;
  color: #FFFFFF;
  display: flex;
  font-family: Tahoma, sans-serif;
  font-size: 20px;
  justify-content: center;
  line-height: 16px;
  padding: 3px;
  cursor: pointer;
}

.button-5:active,
.button-5:hover {
  outline: 0;
}

.button-5 span {
  background-color: rgb(5, 6, 45);
  padding: 16px 24px;
  border-radius: 6px;
  transition: 300ms;
}

.button-5:hover span {
  background: none;
}

HTML Code

<button class="button-6" role="button">Button 6</button>


CSS Code

.button-6 {
  background-color: #FFFFFF;
  border-radius: 40px;
  border-style: none;
  box-shadow: #ADCFFF 0 -12px 6px inset;
  color: #000000;
  cursor: pointer;
  font-family: sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.24px;
  padding: 16px 18px;
  transition: all .15s;
}

.button-6:hover {
  background-color: #FFC229;
  box-shadow: #FF6314 0 -6px 8px inset;
  transform: scale(1.125);
}

.button-6:active {
  transform: scale(1.025);
}

HTML Code

<button class="button-7" role="button">Button 7</button>


CSS Code

.button-7 {
  content: "";
  background: linear-gradient(
    45deg,
    #ff0000,
    #ff7300,
    #fffb00,
    #48ff00,
    #00ffd5,
    #002bff,
    #7a00ff,
    #ff00c8,
    #ff0000
  );
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 400%;
  z-index: -1;
  filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: glowing-button-7 20s linear infinite;
  transition: opacity 0.3s ease-in-out;
  border-radius: 10px;
}

@keyframes glowing-button-7 {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 400% 0;
  }
  100% {
    background-position: 0 0;
  }
}

.button-7:after {
  z-index: -1;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #222;
  left: 0;
  top: 0;
  border-radius: 10px;
}

HTML Code

<button class="button-8" role="button">Button 8</button>


CSS Code

.button-8 {
  background-color: initial;
  border-style: none;
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: 800;
  line-height: 24px;
  padding: 19px 26px;
  position: relative;
}

.button-8:before,
.button-8:after {
  border-radius: 80px;
}

.button-8:before {
  background-image: linear-gradient(92.83deg, #ff7426 0, #f93a13 100%);
  content: "";
  height: 100%;
  left: 0;
  top: 0;
  position: absolute;
  width: 100%;
  z-index: -2;
}

.button-8:after {
  background-image: linear-gradient(#541a0f 0, #0c0d0d 100%);
  inset: 4px;
  content: "";
  position: absolute;
  transition: all 0.2s ease-out;
  z-index: -1;
}

.button-8:hover:after {
  transition-timing-function: ease-in;
  opacity: 0;
}

.button-8:active {
  color: #ccc;
}

.button-8:active:before {
  background-image: linear-gradient(0deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)),
  linear-gradient(92.83deg, #ff7426 0, #f93a13 100%);
}