<div class="color-container">
                <div class="color-item bg-gray-10 non-uniform double-size">
                    <div class="details">
                        <h4>$app-gray-10</h4>
                        <span>#F3F2F1</span>
                        <p>Used for our main canvas color and channel replies.</p>
                    </div>
                </div>
                <div class="color-item bg-brand-00 non-uniform double-size">
                    <div class="details white-text">
                        <h4>$app-brand-00</h4>
                        <span>#6264A7</span>
                        <p>Used for primary buttons, icon button hover states, hover and selected states, and navigation indicators.</p>
                    </div>
                </div>
                <div class="color-item bg-red extended-basis">
                    <div class="details white-text">
                        <h4>$app-red</h4>
                        <span>#CC4A31</span>
                        <p>Used for notification badges and @mentions.</p><br/>
                    </div>
                </div>
            </div>
/*.color-item .details.white-text h4, 
.color-item .details.white-text p, 
.color-item .details.white-text span {
    color: #fff
}*/

/*main selectors */
body {
    font-size: 1.4rem;
    padding: 0;
}

* {
    font-family: "Segoe UI","Courier New",Courier;
    box-sizing: border-box;
}

h4 {
    display: block;
    margin-block-start: 1.33em;
    margin-block-end: 1.33em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

/*parent container*/
.color-container {
    display: flex;
    flex-direction: column;
    width: 100%
}

/*$app-gray-10 child container*/
.bg-gray-10 {
    background: #eef1f5;
}

.color-item {
    flex: 1 0 6rem;
    display: flex;
    align-items: center;
    padding: .05rem .1rem;
}

.color-item.non-uniform {
    flex-shrink: 1;
}

.color-item.double-size {
    flex-basis: 12rem;
}

.color-item .details {
    padding-left: 1rem;
    font-size: 12px;
}

.color-item .details h4 {
    font-size: 14px;
    margin-bottom: 0;
}

.color-item.non-uniform .details {
    align-self: flex-end;
    margin-bottom: 1rem;
}

/*$app-brand-00 child container*/
.bg-brand-00 {
    background: #5558af;
}

.color-item.double-size {
    flex-basis: 12rem;
}

.color-item .details.white-text h4, 
.color-item .details.white-text p, 
.color-item .details.white-text span {
    color: #fff
}

/*$app-red child container*/
/*.color-item .details.white-text h4, 
.color-item .details.white-text p, 
.color-item .details.white-text span {
    color: #fff
}*/
.bg-red {
    background: #c50e2e;
}
.color-item.extended-basis {
    flex-basis: 7.5rem;
}


External CSS

  1. https://statics.teams.microsoft.com/evergreen-assets/doc-assets/styles/main.css

External JavaScript

This Pen doesn't use any external JavaScript resources.