<div class="color-container">
  <div class="color-item bg-black non-uniform double-size">
    <div class="details white-text">
      <h4>$app-black</h4>
      <span>#252423</span>
      <p>Primary text—used for headers and base text.</p>
    </div>
  </div>
  <div class="color-item bg-gray-02 non-uniform double-size">
    <div class="details white-text">
      <h4>$app-gray-02</h4>
      <span>$app-black at 74% opacity (#484644)</span>
      <p>Secondary text—used for labels, subheads, attributions, and icon buttons.</p>
    </div>
  </div>
  <div class="color-item bg-gray-03">
    <div class="details white-text">
      <h4>$app-gray-03</h4>
      <span>$app-black at 64% opacity (#605E5C)</span>
      <p>Tertiary text—used for message previews and help text.</p><br/>
    </div>
  </div>
  <div class="color-item bg-gray-04">
    <div class="details white-text">
      <h4>$app-gray-04</h4>
      <span>$app-black at 52% opacity (#979593)</span>
      <p>Used for timestamps.</p><br/>
    </div>
  </div>
  <div class="color-item bg-gray-06">
    <div class="details">
      <h4>$app-gray-06</h4>
      <span>$app-black at 36% opacity (#C8C6C4)</span>
      <p>Used for disabled text.</p><br/>
    </div>
  </div>
  <div class="color-item bg-gray-08">
    <div class="details">
      <h4>$app-gray-08</h4>
      <span>$app-black at 14% opacity (#E1DFDD)</span>
      <p>Used for separators, borders, channel dividers, and banner backgrounds. </p><br/>
    </div>
  </div>
  <div class="color-item bg-gray-12">
    <div class="details">
      <h4>$app-gray-12</h4>
      <span>$app-black at 5% opacity (#F4F4F4)</span><br/>
      <p>Used for disabled button and card borders.</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-black child container*/
.bg-black {
    background: #16233a
}

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

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


/*$app-gray-02 child container*/
/*.color-item .details.white-text h4, 
.color-item .details.white-text p, 
.color-item .details.white-text span {
    color: #fff
}*/

.bg-gray-02 {
    background: rgba(22,35,58,.74);
}

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

/*$app-gray-03 child container*/
/*.color-item .details.white-text h4, 
.color-item .details.white-text p, 
.color-item .details.white-text span {
    color: #fff
}*/

.bg-gray-03 {
    background: rgba(22,35,58,.64);
}

/*$app-gray-04 child container*/
/*.color-item .details.white-text h4, 
.color-item .details.white-text p, 
.color-item .details.white-text span {
    color: #fff
}*/

.bg-gray-04 {
    background: rgba(22,35,58,.52);
}

/*$app-gray-06 child container*/
/*.color-item .details {
    padding-left: 1rem;
    font-size: 12px;
}*/

.bg-gray-06 {
    background: rgba(22,35,58,.36);
}

/*$app-gray-08 child container*/
/*.color-item .details {
    padding-left: 1rem;
    font-size: 12px;
}*/

.bg-gray-08 {
    background: rgba(22,35,58,.14);
}

/*$app-gray-12*/
/*.color-item .details {
    padding-left: 1rem;
    font-size: 12px;
}*/

.bg-gray-12 {
    background: rgba(22,35,58,.05);
}

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.