<div class="color-container">
  <div class="color-item bg-gray-10-darktheme non-uniform double-size">
    <div class="details white-text">
      <h4>$app-gray-10-darktheme</h4>
      <span>#F3F2F1</span>
      <p>Used for our message bubble color.</p>
    </div>
  </div>
  <div class="color-item bg-brand-00-darktheme non-uniform double-size">
    <div class="details">
      <h4>$app-brand-00-darktheme</h4>
      <span>#6264A7</span>
      <p>Used for primary buttons, icon button hover states, and navigation indicators.</p>
    </div>
  </div>
  <div class="color-item bg-red-darktheme extended-basis">
    <div class="details white-text">
      <h4>$app-red-darktheme</h4>
      <span>#D74654</span>
      <p>Used for notification badges and @mentions.</p><br/>
    </div>
  </div>
</div>
/*complete css file available @
https://statics.teams.microsoft.com/evergreen-assets/doc-assets/styles/main.css*/

/*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-darktheme 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.non-uniform .details {
    align-self: flex-end;
    margin-bottom: 1rem;
}

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

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

p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
.color-item .details p {
    margin: 0;
    max-width: 32rem;
}

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.