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;
}

  
 

 

Background

In this first release of Amigo CSS, we will deal with only Background colors, we will add more background properties later. In Amigo CSS, background colors follow the same system as our color system. So you have the same number of options of colors to pick from. Just like the color system it's also adapted from Open colors and comes with 6 variations instead of 10 variations per color.

Different from the color system, I have decided to display these background colors in a vertical order to make it maybe even easier to differentiate between different tints (lightness) and shades (darkness) of colors

 

Amigo CSS Background Colors

13 options

.background-gray-00{background:#f8f9fa;}
.background-gray-02{background:#e9ecef;}
.background-gray-04{background:#ced4da;}
.background-gray-05{background:#adb5bd;}
.background-gray-07{background:#495057;}
.background-gray-09{background:#212529;}
.background-red-00{background:#fff5f5;}
.background-red-02{background:#ffc9c9;}
.background-red-04{background:#ff8787;}
.background-red-05{background:#ff6b6b;}
.background-red-07{background:#f03e3e;}
.background-red-09{background:#c92a2a;}
.background-pink-00{background:#fff0f6;}
.background-pink-02{background:#fcc2d7;}
.background-pink-04{background:#f783ac;}
.background-pink-05{background:#f06595;}
.background-pink-07{background:#d6336c;}
.background-pink-09{background:#a61e4d;}
.background-grape-00{background:#f8f0fc;}
.background-grape-02{background:#eebefa;}
.background-grape-04{background:#da77f2;}
.background-grape-05{background:#cc5de8;}
.background-grape-07{background:#ae3ec9;}
.background-grape-09{background:#862e9c;}
.background-violet-00{background:#f3f0ff;}
.background-violet-02{background:#d0bfff;}
.background-violet-04{background:#9775fa;}
.background-violet-05{background:#845ef7;}
.background-violet-07{background:#7048e8;}
.background-violet-09{background:#5f3dc4;}
.background-indigo-00{background:#edf2ff;}
.background-indigo-02{background:#bac8ff;}
.background-indigo-04{background:#748ffc;}
.background-indigo-05{background:#5c7cfa;}
.background-indigo-07{background:#4263eb;}
.background-indigo-09{background:#364fc7;}
.background-blue-00{background:#e7f5ff;}
.background-blue-02{background:#a5d8ff;}
.background-blue-04{background:#4dabf7;}
.background-blue-05{background:#339af0;}
.background-blue-07{background:#1c7ed6;}
.background-blue-09{background:#1864ab;}
.background-cyan-00{background:#e3fafc;}
.background-cyan-02{background:#99e9f2;}
.background-cyan-04{background:#3bc9db;}
.background-cyan-05{background:#22b8cf;}
.background-cyan-07{background:#1098ad;}
.background-cyan-09{background:#0b7285;}
.background-teal-00{background:#e6fcf5;}
.background-teal-02{background:#96f2d7;}
.background-teal-04{background:#38d9a9;}
.background-teal-05{background:#20c997;}
.background-teal-07{background:#0ca678;}
.background-teal-09{background:#087f5b;}
.background-green-00{background:#ebfbee;}
.background-green-02{background:#b2f2bb;}
.background-green-04{background:#69db7c;}
.background-green-05{background:#51cf66;}
.background-green-07{background:#37b24d;}
.background-green-09{background:#2b8a3e;}
.background-lime-00{background:#f4fce3;}
.background-lime-02{background:#d8f5a2;}
.background-lime-04{background:#a9e34b;}
.background-lime-05{background:#94d82d;}
.background-lime-07{background:#74b816;}
.background-lime-09{background:#5c940d;}
.background-yellow-00{background:#fff9db;}
.background-yellow-02{background:#ffec99;}
.background-yellow-04{background:#ffd43b;}
.background-yellow-05{background:#fcc419;}
.background-yellow-07{background:#f59f00;}
.background-yellow-09{background:#e67700;}
.background-orange-00{background:#fff4e6;}
.background-orange-02{background:#ffd8a8;}
.background-orange-04{background:#ffa94d;}
.background-orange-05{background:#ff922b;}
.background-orange-07{background:#f76707;}
.background-orange-09{background:#d9480f;}

Extra Colors

.background-white{background:#fff;}
.background-gray{background:#333;}
.background-black{background:#000;}