System Colors

<main>
  <ul role="list">
    <li>
      <div class="color" style="background-color: AccentColorText;"></div>
      <div class="body">
        <p class="name">AccentColorText</p>
        <p style="color: GrayText;">Accent text</p>
      </div>
    </li>
    <li>
      <div class="color" style="background-color: AccentColor;"></div>
      <div class="body">
        <p class="name">AccentColor</p>
        <p style="color: GrayText;">System accent</p>
      </div>
    </li>
    <li>
      <div class="color" style="background-color: ActiveText;"></div>
      <div class="body">
        <p class="name">ActiveText</p>
        <p style="color: GrayText;">Active links</p>
      </div>
    </li>
    <li>
      <div class="color" style="background-color: ButtonBorder;"></div>
      <div class="body">
        <p class="name">ButtonBorder</p>
        <p style="color: GrayText;">Button borders</p>
      </div>
    </li>
    <li>
      <div class="color" style="background-color: ButtonFace;"></div>
      <div class="body">
        <p class="name">ButtonFace</p>
        <p style="color: GrayText;">Button surface</p>
      </div>
    </li>
    <li>
      <div class="color" style="background-color: ButtonText;"></div>
      <div class="body">
        <p class="name">ButtonText</p>
        <p style="color: GrayText;">Button text</p>
      </div>
    </li>
    <li>
      <div class="color" style="background-color: Canvas;"></div>
      <div class="body">
        <p class="name">Canvas</p>
        <p style="color: GrayText;">App background</p>
      </div>
    </li>
    <li>
      <div class="color" style="background-color: CanvasText;"></div>
      <div class="body">
        <p class="name">CanvasText</p>
        <p style="color: GrayText;">App text</p>
      </div>
    </li>
    <li>
      <div class="color" style="background-color: Field;"></div>
      <div class="body">
        <p class="name">Field</p>
        <p style="color: GrayText;">Input background</p>
      </div>
    </li>
    <li>
      <div class="color" style="background-color: FieldText;"></div>
      <div class="body">
        <p class="name">FieldText</p>
        <p style="color: GrayText;">Input text</p>
      </div>
    </li>
    <li>
      <div class="color" style="background-color: GrayText;"></div>
      <div class="body">
        <p class="name">GrayText</p>
        <p style="color: GrayText;">Disabled text</p>
      </div>
    </li>
    <li>
      <div class="color" style="background-color: Highlight;"></div>
      <div class="body">
        <p class="name">Highlight</p>
        <p style="color: GrayText;">Selected background</p>
      </div>
    </li>
    <li>
      <div class="color" style="background-color: HighlightText;"></div>
      <div class="body">
        <p class="name">HighlightText</p>
        <p style="color: GrayText;">Selected text</p>
      </div>
    </li>
    <li>
      <div class="color" style="background-color: LinkText;"></div>
      <div class="body">
        <p class="name">LinkText</p>
        <p style="color: GrayText;">Non-active links</p>
      </div>
    </li>
    <li>
      <div class="color" style="background-color: Mark;"></div>
      <div class="body">
        <p class="name">Mark</p>
        <p style="color: GrayText;">Marked background</p>
      </div>
    </li>
    <li>
      <div class="color" style="background-color: MarkText;"></div>
      <div class="body">
        <p class="name">MarkText</p>
        <p style="color: GrayText;">Marked text</p>
      </div>
    </li>
    <li>
      <div class="color" style="background-color: VisitedText;"></div>
      <div class="body">
        <p class="name">VisitedText</p>
        <p style="color: GrayText;">Visited links</p>
      </div>
    </li>
  </ul>
</main>

<!--CSS:START:main-->
<style>
  /* Grid Layout */
  ul {
    display: grid;
    margin-top: 0.75rem;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1.25rem;
  }

  @media (min-width: 640px) {
    ul {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1.5rem;
    }
  }

  @media (min-width: 1024px) {
    ul {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  /* List Items */
  li {
    display: flex;
    border-radius: 0.375rem;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
  }

  /* Color Swatch */
  .color {
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    border-top-left-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
    width: 4rem;
  }

  /* Card Body */
  .body {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.5rem 1rem;
    border-top-right-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
    border-left: none;
    background-color: Canvas;
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  /* Typography */
  .name {
    font-weight: 600;
    color: CanvasText;
  }

  .name:hover {
    color: Highlight;
  }

  /* Dark Mode */
  @media (prefers-color-scheme: dark) {
    li {
      box-shadow: none;
    }

    .body {
      border-color: rgba(255, 255, 255, 0.1);
    }
  }
</style>
<!--CSS:END:main-->