This website is not optimized for mobile view yet...
// Layout

.display-flex {
    display: flex;
}

.display-grid {
    display: grid;
}
// Typography

.font-size-16 {
    font-size: 1.6rem;
}

.font-size-20 {
    font-size: 2.0rem;
}
// Whitespace

.margin-24 {
    margin: 2.4rem;
}

.margin-center {
    margin: 0 auto;
}

Amigo CSS

// Shortcuts

.display-flex-center-both {
    display: flex;
    align-items: center;
    justify-content: center;
}



// Extras

.scroll-smooth {
    scroll-behaviour: smooth;
}
.cursor-pointer {
    cursor: pointer;
}

  
 

 

Color

Getting color right can be tricky especially if you're brand new to web design. There are literally millions of color options and variations out there. Choosing from a list of a million option is not ideal that's why Amigo CSS has a color system.

Amigo CSS color system is adapted from an open source project - Open Color. However Amigo CSS didn't take all the options provided by Open Color. To limit our number of options, Amigo CSS comes with 6 variations of each Open Color color instead of 10. In Amigo CSS there are three lighter versions of each color, and also three darker versions.

Again, be free to add your own colors and palettes as you see fit but for most a system like this is good to begin with.

Amigo CSS Colors

13 color options

.gray-00{color:#f8f9fa;}

.gray-02{color:#e9ecef;}

.gray-04{color:#ced4da;}


.gray-05{color:#adb5bd;}

.gray-07{color:#495057;}

.gray-09{color:#212529;}
.red-00{color:#fff5f5;}

.red-02{color:#ffc9c9;}

.red-04{color:#ff8787;}


.red-05{color:#ff6b6b;}

.red-07{color:#f03e3e;}

.red-09{color:#c92a2a;}
.pink-00{color:#fff0f6;}

.pink-02{color:#fcc2d7;}

.pink-04{color:#f783ac;}


.pink-05{color:#f06595;}

.pink-07{color:#d6336c;}

.pink-09{color:#a61e4d;}
.grape-00{color:#f8f0fc;}

.grape-02{color:#eebefa;}

.grape-04{color:#da77f2;}


.grape-05{color:#cc5de8;}

.grape-07{color:#ae3ec9;}

.grape-09{color:#862e9c;}
.violet-00{color:#f3f0ff;}

.violet-02{color:#d0bfff;}

.violet-04{color:#9775fa;}


.violet-05{color:#845ef7;}

.violet-07{color:#7048e8;}

.violet-09{color:#5f3dc4;}
.indigo-00{color:#edf2ff;}

.indigo-02{color:#bac8ff;}

.indigo-04{color:#748ffc;}


.indigo-05{color:#5c7cfa;}

.indigo-07{color:#4263eb;}

.indigo-09{color:#364fc7;}
.blue-00{color:#e7f5ff;}

.blue-02{color:#a5d8ff;}

.blue-04{color:#4dabf7;}


.blue-05{color:#339af0;}

.blue-07{color:#1c7ed6;}

.blue-09{color:#1864ab;}
.cyan-00{color:#e3fafc;}

.cyan-02{color:#99e9f2;}

.cyan-04{color:#3bc9db;}


.cyan-05{color:#22b8cf;}

.cyan-07{color:#1098ad;}

.cyan-09{color:#0b7285;}
.teal-00{color:#e6fcf5;}

.teal-02{color:#96f2d7;}

.teal-04{color:#38d9a9;}


.teal-05{color:#20c997;}

.teal-07{color:#0ca678;}

.teal-09{color:#087f5b;}
.green-00{color:#ebfbee;}

.green-02{color:#b2f2bb;}

.green-04{color:#69db7c;}


.green-05{color:#51cf66;}

.green-07{color:#37b24d;}

.green-09{color:#2b8a3e;}
.lime-00{color:#f4fce3;}

.lime-02{color:#d8f5a2;}

.lime-04{color:#a9e34b;}


.lime-05{color:#94d82d;}

.lime-07{color:#74b816;}

.lime-09{color:#5c940d;}
.yellow-00{color:#fff9db;}

.yellow-02{color:#ffec99;}

.yellow-04{color:#ffd43b;}


.yellow-05{color:#fcc419;}

.yellow-07{color:#f59f00;}

.yellow-09{color:#e67700;}
.orange-00{color:#fff4e6;}

.orange-02{color:#ffd8a8;}

.orange-04{color:#ffa94d;}


.orange-05{color:#ff922b;}

.orange-07{color:#f76707;}

.orange-09{color:#d9480f;}

Extra Colors

.white{color:#fff;}

.gray{color:#333;}

.black{color:#000;}