catppuccin/docs/style-guide.md

<div align="center">
  <h2>🖌️ Style Guide</h2>
  <p> A guide on how to properly <strong>use</strong> the palette </p>
</div>

&nbsp;

### General Usage

> [!IMPORTANT]
> Text colors are guidelines, certain cases require deviations
> from the guidelines below. An example would be `text` on colored backgrounds.
> Legibility always comes first, so please use your own judgement.

<table>
  <tr>
    <th colspan="3" align="center"><h4>Background Colors</h4></th>
  </tr>
  <tr>
    <th>Function</th>
    <th colspan="2">Colors</th>
  </tr>
  <tr>
    <td>Background Pane</td>
    <td>Base</td>
    <td>
      <img src="../assets/palette/circles/latte_base.png" height="15" width="16"/>
      <img src="../assets/palette/circles/frappe_base.png" height="15" width="16"/>
      <img src="../assets/palette/circles/macchiato_base.png" height="15" width="16"/>
      <img src="../assets/palette/circles/mocha_base.png" height="15" width="16"/>
    </td>
  </tr>
  <tr>
    <td>Secondary Panes</td>
    <td>
      Crust,<br>
      Mantle
    </td>
    <td>
      <img src="../assets/palette/circles/latte_crust.png" height="15" width="16"/>
      <img src="../assets/palette/circles/frappe_crust.png" height="15" width="16"/>
      <img src="../assets/palette/circles/macchiato_crust.png" height="15" width="16"/>
      <img src="../assets/palette/circles/mocha_crust.png" height="15" width="16"/><br>
      <img src="../assets/palette/circles/latte_mantle.png" height="15" width="16"/>
      <img src="../assets/palette/circles/frappe_mantle.png" height="15" width="16"/>
      <img src="../assets/palette/circles/macchiato_mantle.png" height="15" width="16"/>
      <img src="../assets/palette/circles/mocha_mantle.png" height="15" width="16"/>
    </td>
  </tr>
  <tr>
    <td>Surface Elements</td>
    <td>
      Surface 0,<br>
      Surface 1,<br>
      Surface 2
    </td>
    <td>
      <img src="../assets/palette/circles/latte_surface0.png" height="16" width="16"/>
      <img src="../assets/palette/circles/frappe_surface0.png" height="16" width="16"/>
      <img src="../assets/palette/circles/macchiato_surface0.png" height="16" width="16"/>
      <img src="../assets/palette/circles/mocha_surface0.png" height="16" width="16"/><br>
      <img src="../assets/palette/circles/latte_surface1.png" height="16" width="16"/>
      <img src="../assets/palette/circles/frappe_surface1.png" height="16" width="16"/>
      <img src="../assets/palette/circles/macchiato_surface1.png" height="16" width="16"/>
      <img src="../assets/palette/circles/mocha_surface1.png" height="16" width="16"/><br>
      <img src="../assets/palette/circles/latte_surface2.png" height="16" width="16"/>
      <img src="../assets/palette/circles/frappe_surface2.png" height="16" width="16"/>
      <img src="../assets/palette/circles/macchiato_surface2.png" height="16" width="16"/>
      <img src="../assets/palette/circles/mocha_surface2.png" height="16" width="16"/>
    </td>
  </tr>
  <tr>
    <td>Overlays</td>
    <td>
      Overlay 0,<br>
      Overlay 1,<br>
      Overlay 2
    </td>
    <td>
      <img src="../assets/palette/circles/latte_overlay0.png" height="16" width="16"/>
      <img src="../assets/palette/circles/frappe_overlay0.png" height="16" width="16"/>
      <img src="../assets/palette/circles/macchiato_overlay0.png" height="16" width="16"/>
      <img src="../assets/palette/circles/mocha_overlay0.png" height="16" width="16"/><br>
      <img src="../assets/palette/circles/latte_overlay1.png" height="16" width="16"/>
      <img src="../assets/palette/circles/frappe_overlay1.png" height="16" width="16"/>
      <img src="../assets/palette/circles/macchiato_overlay1.png" height="16" width="16"/>
      <img src="../assets/palette/circles/mocha_overlay1.png" height="16" width="16"/><br>
      <img src="../assets/palette/circles/latte_overlay2.png" height="16" width="16"/>
      <img src="../assets/palette/circles/frappe_overlay2.png" height="16" width="16"/>
      <img src="../assets/palette/circles/macchiato_overlay2.png" height="16" width="16"/>
      <img src="../assets/palette/circles/mocha_overlay2.png" height="16" width="16"/>
    </td>
  </tr>
  <tr>
    <th colspan="3" align="center"><h4>Typography</h4></th>
  </tr>
  <tr>
    <th>Function</th>
    <th colspan="2">Colors</th>
  </tr>
  <tr>
    <td>Body Copy</td>
    <td>Text</td>
    <td>
      <img src="../assets/palette/circles/latte_text.png" height="16" width="16"/>
      <img src="../assets/palette/circles/frappe_text.png" height="16" width="16"/>
      <img src="../assets/palette/circles/macchiato_text.png" height="16" width="16"/>
      <img src="../assets/palette/circles/mocha_text.png" height="16" width="16"/>
    </td>
  </tr>
  <tr>
    <td>Main Headline</td>
    <td>Text</td>
    <td>
      <img src="../assets/palette/circles/latte_text.png" height="16" width="16"/>
      <img src="../assets/palette/circles/frappe_text.png" height="16" width="16"/>
      <img src="../assets/palette/circles/macchiato_text.png" height="16" width="16"/>
      <img src="../assets/palette/circles/mocha_text.png" height="16" width="16"/>
    </td>
  </tr>
  <tr>
    <td>Sub-Headlines, Labels</td>
    <td>
      Subtext 0,<br>
      Subtext 1
    </td>
    <td>
      <img src="../assets/palette/circles/latte_subtext0.png" height="16" width="16"/>
      <img src="../assets/palette/circles/frappe_subtext0.png" height="16" width="16"/>
      <img src="../assets/palette/circles/macchiato_subtext0.png" height="16" width="16"/>
      <img src="../assets/palette/circles/mocha_subtext0.png" height="16" width="16"/><br>
      <img src="../assets/palette/circles/latte_subtext1.png" height="16" width="16"/>
      <img src="../assets/palette/circles/frappe_subtext1.png" height="16" width="16"/>
      <img src="../assets/palette/circles/macchiato_subtext1.png" height="16" width="16"/>
      <img src="../assets/palette/circles/mocha_subtext1.png" height="16" width="16"/>
    </td>
  </tr>
  <tr>
    <td>Subtle</td>
    <td>Overlay 1</td>
    <td>
      <img src="../assets/palette/circles/latte_overlay1.png" height="16" width="16"/>
      <img src="../assets/palette/circles/frappe_overlay1.png" height="16" width="16"/>
      <img src="../assets/palette/circles/macchiato_overlay1.png" height="16" width="16"/>
      <img src="../assets/palette/circles/mocha_overlay1.png" height="16" width="16"/>
    </td>
  </tr>
  <tr>
    <td>Links, URLs</td>
    <td>Blue</td>
    <td>
      <img src="../assets/palette/circles/latte_blue.png" height="16" width="16"/>
      <img src="../assets/palette/circles/frappe_blue.png" height="16" width="16"/>
      <img src="../assets/palette/circles/macchiato_blue.png" height="16" width="16"/>
      <img src="../assets/palette/circles/mocha_blue.png" height="16" width="16"/>
    </td>
  </tr>
  <tr>
    <td>Success</td>
    <td>Green</td>
    <td>
      <img src="../assets/palette/circles/latte_green.png" height="16" width="16"/>
      <img src="../assets/palette/circles/frappe_green.png" height="16" width="16"/>
      <img src="../assets/palette/circles/macchiato_green.png" height="16" width="16"/>
      <img src="../assets/palette/circles/mocha_green.png" height="16" width="16"/>
    </td>
  </tr>
  <tr>
    <td>Warnings</td>
    <td>Yellow</td>
    <td>
      <img src="../assets/palette/circles/latte_yellow.png" height="16" width="16"/>
      <img src="../assets/palette/circles/frappe_yellow.png" height="16" width="16"/>
      <img src="../assets/palette/circles/macchiato_yellow.png" height="16" width="16"/>
      <img src="../assets/palette/circles/mocha_yellow.png" height="16" width="16"/>
    </td>
  </tr>
  <tr>
    <td>Errors</td>
    <td>Red</td>
    <td>
      <img src="../assets/palette/circles/latte_red.png" height="16" width="16"/>
      <img src="../assets/palette/circles/frappe_red.png" height="16" width="16"/>
      <img src="../assets/palette/circles/macchiato_red.png" height="16" width="16"/>
      <img src="../assets/palette/circles/mocha_red.png" height="16" width="16"/>
    </td>
  </tr>
  <tr>
    <td>Tags, Pills</td>
    <td>Blue</td>
    <td>
      <img src="../assets/palette/circles/latte_blue.png" height="16" width="16"/>
      <img src="../assets/palette/circles/frappe_blue.png" height="16" width="16"/>
      <img src="../assets/palette/circles/macchiato_blue.png" height="16" width="16"/>
      <img src="../assets/palette/circles/mocha_blue.png" height="16" width="16"/>
    </td>
  </tr>
  <tr>
    <td>Selection Background</td>
    <td>
      Overlay 2<br>
      <strong>20% - 30% Opacity</strong>
    </td>
    <td>
      <img src="../assets/palette/circles/latte_overlay2.png" height="16" width="16"/>
      <img src="../assets/palette/circles/frappe_overlay2.png" height="16" width="16"/>
      <img src="../assets/palette/circles/macchiato_overlay2.png" height="16" width="16"/>
      <img src="../assets/palette/circles/mocha_overlay2.png" height="16" width="16"/>
    </td>
  </tr>
  <tr>
    <td>Cursor</td>
    <td>Rosewater</td>
    <td>
      <img src="../assets/palette/circles/latte_rosewater.png" height="16" width="16"/>
      <img src="../assets/palette/circles/frappe_rosewater.png" height="16" width="16"/>
      <img src="../assets/palette/circles/macchiato_rosewater.png" height="16" width="16"/>
      <img src="../assets/palette/circles/mocha_rosewater.png" height="16" width="16"/>
    </td>
  </tr>
</table>

### Terminals

<table>
  <tr>
    <th colspan="9" align="center"><h4>Window Colors</h4></th>
  </tr>
  <tr>
    <th></th>
    <th colspan="2">Latte</th>
    <th colspan="2">Frappé</th>
    <th colspan="2">Macchiato</th>
    <th colspan="2">Mocha</th>
  </tr>
  <tr>
    <td>Cursor</td>
    <td><img src="../assets/palette/circles/latte_rosewater.png" height="16" width="16"/></td>
    <td>Rosewater</td>
    <td><img src="../assets/palette/circles/frappe_rosewater.png" height="16" width="16"/></td>
    <td>Rosewater</td>
    <td><img src="../assets/palette/circles/macchiato_rosewater.png" height="16" width="16"/></td>
    <td>Rosewater</td>
    <td><img src="../assets/palette/circles/mocha_rosewater.png" height="16" width="16"/></td>
    <td>Rosewater</td>
  </tr>
  <tr>
    <td>Cursor Text</td>
    <td><img src="../assets/palette/circles/latte_base.png" height="16" width="16"/></td>
    <td>Base</td>
    <td><img src="../assets/palette/circles/frappe_crust.png" height="16" width="16"/></td>
    <td>Crust</td>
    <td><img src="../assets/palette/circles/macchiato_crust.png" height="16" width="16"/></td>
    <td>Crust</td>
    <td><img src="../assets/palette/circles/mocha_crust.png" height="16" width="16"/></td>
    <td>Crust</td>
  </tr>
  <tr>
    <td>Active Border</td>
    <td><img src="../assets/palette/circles/latte_lavender.png" height="16" width="16"/></td>
    <td>Lavender</td>
    <td><img src="../assets/palette/circles/frappe_lavender.png" height="16" width="16"/></td>
    <td>Lavender</td>
    <td><img src="../assets/palette/circles/macchiato_lavender.png" height="16" width="16"/></td>
    <td>Lavender</td>
    <td><img src="../assets/palette/circles/mocha_lavender.png" height="16" width="16"/></td>
    <td>Lavender</td>
  </tr>
  <tr>
    <td>Inactive Border</td>
    <td><img src="../assets/palette/circles/latte_overlay0.png" height="16" width="16"/></td>
    <td>Overlay 0</td>
    <td><img src="../assets/palette/circles/frappe_overlay0.png" height="16" width="16"/></td>
    <td>Overlay 0</td>
    <td><img src="../assets/palette/circles/macchiato_overlay0.png" height="16" width="16"/></td>
    <td>Overlay 0</td>
    <td><img src="../assets/palette/circles/mocha_overlay0.png" height="16" width="16"/></td>
    <td>Overlay 0</td>
  </tr>
  <tr>
    <td>Bell Border</td>
    <td><img src="../assets/palette/circles/latte_yellow.png" height="16" width="16"/></td>
    <td>Yellow</td>
    <td><img src="../assets/palette/circles/frappe_yellow.png" height="16" width="16"/></td>
    <td>Yellow</td>
    <td><img src="../assets/palette/circles/macchiato_yellow.png" height="16" width="16"/></td>
    <td>Yellow</td>
    <td><img src="../assets/palette/circles/mocha_yellow.png" height="16" width="16"/></td>
    <td>Yellow</td>
  </tr>
  <tr>
    <th colspan="9" align="center"><h4>Regular Colors</h4></th>
  </tr>
  <tr>
    <th></th>
    <th colspan="2">Latte</th>
    <th colspan="2">Frappé</th>
    <th colspan="2">Macchiato</th>
    <th colspan="2">Mocha</th>
  </tr>
  <tr>
    <td>color0</td>
    <td><img src="../assets/palette/circles/ansi/latte_ansi_black.png" height="16" width="16"/>
    </td><td>Subtext 1</td>
    <td><img src="../assets/palette/circles/ansi/frappe_ansi_black.png" height="16" width="16"/></td>
    <td>Surface 1</td>
    <td><img src="../assets/palette/circles/ansi/macchiato_ansi_black.png" height="16" width="16"/></td>
    <td>Surface 1</td>
    <td><img src="../assets/palette/circles/ansi/mocha_ansi_black.png" height="16" width="16"/></td>
    <td>Surface 1</td>
  </tr>
  <tr>
    <td>color1</td>
    <td><img src="../assets/palette/circles/ansi/latte_ansi_red.png" height="16" width="16"/></td>
    <td>Red</td>
    <td><img src="../assets/palette/circles/ansi/frappe_ansi_red.png" height="16" width="16"/></td>
    <td>Red</td>
    <td><img src="../assets/palette/circles/ansi/macchiato_ansi_red.png" height="16" width="16"/></td>
    <td>Red</td>
    <td><img src="../assets/palette/circles/ansi/mocha_ansi_red.png" height="16" width="16"/></td>
    <td>Red</td>
  </tr>
  <tr>
    <td>color2</td>
    <td><img src="../assets/palette/circles/ansi/latte_ansi_green.png" height="16" width="16"/></td>
    <td>Green</td>
    <td><img src="../assets/palette/circles/ansi/frappe_ansi_green.png" height="16" width="16"/></td>
    <td>Green</td>
    <td><img src="../assets/palette/circles/ansi/macchiato_ansi_green.png" height="16" width="16"/></td>
    <td>Green</td>
    <td><img src="../assets/palette/circles/ansi/mocha_ansi_green.png" height="16" width="16"/></td>
    <td>Green</td>
  </tr>
  <tr>
    <td>color3</td>
    <td><img src="../assets/palette/circles/ansi/latte_ansi_yellow.png" height="16" width="16"/></td>
    <td>Yellow</td>
    <td><img src="../assets/palette/circles/ansi/frappe_ansi_yellow.png" height="16" width="16"/></td>
    <td>Yellow</td>
    <td><img src="../assets/palette/circles/ansi/macchiato_ansi_yellow.png" height="16" width="16"/></td>
    <td>Yellow</td>
    <td><img src="../assets/palette/circles/ansi/mocha_ansi_yellow.png" height="16" width="16"/></td>
    <td>Yellow</td>
  </tr>
  <tr>
    <td>color4</td>
    <td><img src="../assets/palette/circles/ansi/latte_ansi_blue.png" height="16" width="16"/></td>
    <td>Blue</td>
    <td><img src="../assets/palette/circles/ansi/frappe_ansi_blue.png" height="16" width="16"/></td>
    <td>Blue</td>
    <td><img src="../assets/palette/circles/ansi/macchiato_ansi_blue.png" height="16" width="16"/></td>
    <td>Blue</td>
    <td><img src="../assets/palette/circles/ansi/mocha_ansi_blue.png" height="16" width="16"/></td>
    <td>Blue</td>
  </tr>
  <tr>
    <td>color5</td>
    <td><img src="../assets/palette/circles/ansi/latte_ansi_magenta.png" height="16" width="16"/></td>
    <td>Pink</td>
    <td><img src="../assets/palette/circles/ansi/frappe_ansi_magenta.png" height="16" width="16"/></td>
    <td>Pink</td>
    <td><img src="../assets/palette/circles/ansi/macchiato_ansi_magenta.png" height="16" width="16"/></td>
    <td>Pink</td>
    <td><img src="../assets/palette/circles/ansi/mocha_ansi_magenta.png" height="16" width="16"/></td>
    <td>Pink</td>
  </tr>
  <tr>
    <td>color6</td>
    <td><img src="../assets/palette/circles/ansi/latte_ansi_cyan.png" height="16" width="16"/></td>
    <td>Teal</td>
    <td><img src="../assets/palette/circles/ansi/frappe_ansi_cyan.png" height="16" width="16"/></td>
    <td>Teal</td>
    <td><img src="../assets/palette/circles/ansi/macchiato_ansi_cyan.png" height="16" width="16"/></td>
    <td>Teal</td>
    <td><img src="../assets/palette/circles/ansi/mocha_ansi_cyan.png" height="16" width="16"/></td>
    <td>Teal</td>
  </tr>
  <tr>
    <td>color7</td>
    <td><img src="../assets/palette/circles/ansi/latte_ansi_white.png" height="16" width="16"/></td>
    <td>Surface 2</td>
    <td><img src="../assets/palette/circles/ansi/frappe_ansi_white.png" height="16" width="16"/></td>
    <td>Subtext 0</td>
    <td><img src="../assets/palette/circles/ansi/macchiato_ansi_white.png" height="16" width="16"/></td>
    <td>Subtext 0</td>
    <td><img src="../assets/palette/circles/ansi/mocha_ansi_white.png" height="16" width="16"/></td>
    <td>Subtext 0</td>
  </tr>
  <tr>
    <th colspan="9" align="center"><h4>Bold Colors <a href="#1-ansi-color-generation"><sup>1)</sup></a></h4></th>
  </tr>
  <tr>
    <th></th>
    <th colspan="2">Latte</th>
    <th colspan="2">Frappé</th>
    <th colspan="2">Macchiato</th>
    <th colspan="2">Mocha</th>
  </tr>
  <tr>
    <td>color8</td>
    <td><img src="../assets/palette/circles/ansi/latte_ansi_bright_black.png" height="16" width="16"/></td>
    <td>Subtext 0</td>
    <td><img src="../assets/palette/circles/ansi/frappe_ansi_bright_black.png" height="16" width="16"/></td>
    <td>Surface 2</td>
    <td><img src="../assets/palette/circles/ansi/macchiato_ansi_bright_black.png" height="16" width="16"/>
    </td><td>Surface 2</td>
    <td><img src="../assets/palette/circles/ansi/mocha_ansi_bright_black.png" height="16" width="16"/></td>
    <td>Surface 2</td>
  </tr>
  <tr>
    <td>color9</td>
    <td><img src="../assets/palette/circles/ansi/latte_ansi_bright_red.png" height="16" width="16"/></td>
    <td>Bright Red</td>
    <td><img src="../assets/palette/circles/ansi/frappe_ansi_bright_red.png" height="16" width="16"/></td>
    <td>Bright Red</td>
    <td><img src="../assets/palette/circles/ansi/macchiato_ansi_bright_red.png" height="16" width="16"/></td>
    <td>Bright Red</td>
    <td><img src="../assets/palette/circles/ansi/mocha_ansi_bright_red.png" height="16" width="16"/></td>
    <td>Bright Red</td>
  </tr>
  <tr>
    <td>color10</td>
    <td><img src="../assets/palette/circles/ansi/latte_ansi_bright_green.png" height="16" width="16"/></td>
    <td>Bright Green</td>
    <td><img src="../assets/palette/circles/ansi/frappe_ansi_bright_green.png" height="16" width="16"/></td>
    <td>Bright Green</td>
    <td><img src="../assets/palette/circles/ansi/macchiato_ansi_bright_green.png" height="16" width="16"/></td>
    <td>Bright Green</td>
    <td><img src="../assets/palette/circles/ansi/mocha_ansi_bright_green.png" height="16" width="16"/></td>
    <td>Bright Green</td>
  </tr>
  <tr>
    <td>color11</td>
    <td><img src="../assets/palette/circles/ansi/latte_ansi_bright_yellow.png" height="16" width="16"/></td>
    <td>Bright Yellow</td>
    <td><img src="../assets/palette/circles/ansi/frappe_ansi_bright_yellow.png" height="16" width="16"/></td>
    <td>Bright Yellow</td>
    <td><img src="../assets/palette/circles/ansi/macchiato_ansi_bright_yellow.png" height="16" width="16"/></td>
    <td>Bright Yellow</td>
    <td><img src="../assets/palette/circles/ansi/mocha_ansi_bright_yellow.png" height="16" width="16"/></td>
    <td>Bright Yellow</td>
  </tr>
  <tr>
    <td>color12</td>
    <td><img src="../assets/palette/circles/ansi/latte_ansi_bright_blue.png" height="16" width="16"/></td>
    <td>Bright Blue</td>
    <td><img src="../assets/palette/circles/ansi/frappe_ansi_bright_blue.png" height="16" width="16"/></td>
    <td>Bright Blue</td>
    <td><img src="../assets/palette/circles/ansi/macchiato_ansi_bright_blue.png" height="16" width="16"/></td>
    <td>Bright Blue</td>
    <td><img src="../assets/palette/circles/ansi/mocha_ansi_bright_blue.png" height="16" width="16"/></td>
    <td>Bright Blue</td>
  </tr>
  <tr>
    <td>color13</td>
    <td><img src="../assets/palette/circles/ansi/latte_ansi_bright_magenta.png" height="16" width="16"/></td>
    <td>Bright Pink</td>
    <td><img src="../assets/palette/circles/ansi/frappe_ansi_bright_magenta.png" height="16" width="16"/></td>
    <td>Bright Pink</td>
    <td><img src="../assets/palette/circles/ansi/macchiato_ansi_bright_magenta.png" height="16" width="16"/></td>
    <td>Bright Pink</td>
    <td><img src="../assets/palette/circles/ansi/mocha_ansi_bright_magenta.png" height="16" width="16"/></td>
    <td>Bright Pink</td>
  </tr>
  <tr>
    <td>color14</td>
    <td><img src="../assets/palette/circles/ansi/latte_ansi_bright_cyan.png" height="16" width="16"/></td>
    <td>Bright Teal</td>
    <td><img src="../assets/palette/circles/ansi/frappe_ansi_bright_cyan.png" height="16" width="16"/></td>
    <td>Bright Teal</td>
    <td><img src="../assets/palette/circles/ansi/macchiato_ansi_bright_cyan.png" height="16" width="16"/></td>
    <td>Bright Teal</td>
    <td><img src="../assets/palette/circles/ansi/mocha_ansi_bright_cyan.png" height="16" width="16"/></td>
    <td>Bright Teal</td>
  </tr>
  <tr>
    <td>color15</td>
    <td><img src="../assets/palette/circles/ansi/latte_ansi_bright_white.png" height="16" width="16"/></td>
    <td>Surface 1</td>
    <td><img src="../assets/palette/circles/ansi/frappe_ansi_bright_white.png" height="16" width="16"/></td>
    <td>Subtext 1</td>
    <td><img src="../assets/palette/circles/ansi/macchiato_ansi_bright_white.png" height="16" width="16"/></td>
    <td>Subtext 1</td>
    <td><img src="../assets/palette/circles/ansi/mocha_ansi_bright_white.png" height="16" width="16"/></td>
    <td>Subtext 1</td>
  </tr>
  <tr>
    <th colspan="9" align="center"><h4>Extended Colors</h4></th>
  </tr>
  <tr>
    <th></th>
    <th colspan="2">Latte</th>
    <th colspan="2">Frappé</th>
    <th colspan="2">Macchiato</th>
    <th colspan="2">Mocha</th>
  </tr>
  <tr>
    <td>color16</td>
    <td><img src="../assets/palette/circles/latte_peach.png" height="16" width="16"/></td>
    <td>Peach</td>
    <td><img src="../assets/palette/circles/frappe_peach.png" height="16" width="16"/></td>
    <td>Peach</td>
    <td><img src="../assets/palette/circles/macchiato_peach.png" height="16" width="16"/></td>
    <td>Peach</td>
    <td><img src="../assets/palette/circles/mocha_peach.png" height="16" width="16"/></td>
    <td>Peach</td>
  </tr>
  <tr>
    <td>color17</td>
    <td><img src="../assets/palette/circles/latte_rosewater.png" height="16" width="16"/></td>
    <td>Rosewater</td>
    <td><img src="../assets/palette/circles/frappe_rosewater.png" height="16" width="16"/></td>
    <td>Rosewater</td>
    <td><img src="../assets/palette/circles/macchiato_rosewater.png" height="16" width="16"/></td>
    <td>Rosewater</td>
    <td><img src="../assets/palette/circles/mocha_rosewater.png" height="16" width="16"/></td>
    <td>Rosewater</td>
  </tr>
  <tr>
    <th colspan="9" align="center"><h4>Syntax Colors</h4></th>
  </tr>
  <tr>
    <th></th>
    <th colspan="2">Latte</th>
    <th colspan="2">Frappé</th>
    <th colspan="2">Macchiato</th>
    <th colspan="2">Mocha</th>
  </tr>
  <tr>
    <td>Mark 1</td>
    <td><img src="../assets/palette/circles/latte_lavender.png" height="16" width="16"/></td>
    <td>Lavender</td>
    <td><img src="../assets/palette/circles/frappe_lavender.png" height="16" width="16"/></td>
    <td>Lavender</td>
    <td><img src="../assets/palette/circles/macchiato_lavender.png" height="16" width="16"/></td>
    <td>Lavender</td>
    <td><img src="../assets/palette/circles/mocha_lavender.png" height="16" width="16"/></td>
    <td>Lavender</td>
  </tr>
  <tr>
    <td>Mark 1 Text</td>
    <td><img src="../assets/palette/circles/latte_base.png" height="16" width="16"/></td>
    <td>Base</td>
    <td><img src="../assets/palette/circles/frappe_crust.png" height="16" width="16"/></td>
    <td>Crust</td>
    <td><img src="../assets/palette/circles/macchiato_crust.png" height="16" width="16"/></td>
    <td>Crust</td>
    <td><img src="../assets/palette/circles/mocha_crust.png" height="16" width="16"/></td>
    <td>Crust</td>
  </tr>
  <tr>
    <td>Mark 2</td>
    <td><img src="../assets/palette/circles/latte_mauve.png" height="16" width="16"/></td>
    <td>Mauve</td>
    <td><img src="../assets/palette/circles/frappe_mauve.png" height="16" width="16"/></td>
    <td>Mauve</td>
    <td><img src="../assets/palette/circles/macchiato_mauve.png" height="16" width="16"/></td>
    <td>Mauve</td>
    <td><img src="../assets/palette/circles/mocha_mauve.png" height="16" width="16"/></td>
    <td>Mauve</td>
  </tr>
  <tr>
    <td>Mark 2 Text</td>
    <td><img src="../assets/palette/circles/latte_base.png" height="16" width="16"/></td>
    <td>Base</td>
    <td><img src="../assets/palette/circles/frappe_crust.png" height="16" width="16"/></td>
    <td>Crust</td>
    <td><img src="../assets/palette/circles/macchiato_crust.png" height="16" width="16"/></td>
    <td>Crust</td>
    <td><img src="../assets/palette/circles/mocha_crust.png" height="16" width="16"/></td>
    <td>Crust</td>
  </tr>
  <tr>
    <td>Mark 3</td>
    <td><img src="../assets/palette/circles/latte_sapphire.png" height="16" width="16"/></td>
    <td>Sapphire</td>
    <td><img src="../assets/palette/circles/frappe_sapphire.png" height="16" width="16"/></td>
    <td>Sapphire</td>
    <td><img src="../assets/palette/circles/macchiato_sapphire.png" height="16" width="16"/></td>
    <td>Sapphire</td>
    <td><img src="../assets/palette/circles/mocha_sapphire.png" height="16" width="16"/></td>
    <td>Sapphire</td>
  </tr>
  <tr>
    <td>Mark 3 Text</td>
    <td><img src="../assets/palette/circles/latte_base.png" height="16" width="16"/></td>
    <td>Base</td>
    <td><img src="../assets/palette/circles/frappe_crust.png" height="16" width="16"/></td>
    <td>Crust</td>
    <td><img src="../assets/palette/circles/macchiato_crust.png" height="16" width="16"/></td>
    <td>Crust</td>
    <td><img src="../assets/palette/circles/mocha_crust.png" height="16" width="16"/></td>
    <td>Crust</td>
  </tr>
</table>

#### <sup>1)</sup> ANSI Color Generation

> [!NOTE]<br>
> These bright colors are not necessarily "brighter" than the normal colors, but rather more bold and saturated.

The ANSI brights, excluding `black` and `white`,  are automatically generated based on the following formulas:

<table>
  <tr>
    <th>Mocha, Macchiato, Frappé</th>
    <th>Latte</th>
  </tr>
  <tr>
    <td>
<pre><code>color.lightness * 0.94
color.chroma + 8
color.hue + 2</code></pre>
    </td>
    <td>
<pre><code>color.lightness * 1.09
<br>
color.hue + 2</code></pre>
    </td>
  </tr>
</table>

The color values for `black` and `white` are mapped as shown below:

<table>
  <tr>
    <th>Mocha, Macchiato, Frappé</th>
    <th>Latte</th>
  </tr>
  <tr>
    <td>
      Black (0): <code>Surface 1</code><br>
      Black (8): <code>Surface 2</code><br>
      White (7): <code>Subtext 0</code><br>
      White (15): <code>Subtext 1</code>
    </td>
    <td>
      Black  (0): <code>Subtext 1</code><br>
      Black  (8): <code>Subtext 0</code><br>
      White  (7): <code>Surface 2</code><br>
      White (15): <code>Surface 1</code>
    </td>
  </tr>
</table>

### Code Editors

> [!IMPORTANT]
> **This is still a work-in-progress.** Additionally, it's
> important to acknowledge that different editors have different capabilities
> for theming, please use your own judgement in accordance with the main colors
> defined below.

<table>
  <tr>
    <td>
      <table>
        <tr>
          <th colspan="3" align="center">
            <h4>Language Defaults</h4>
          </th>
        </tr>
        <tr>
          <th>Syntax</th>
          <th colspan="2">Color</th>
        </tr>
        <tr>
          <td>Keyword</td>
          <td>Mauve</td>
          <td>
            <img src="../assets/palette/circles/latte_mauve.png" height="16" width="16"/>
            <img src="../assets/palette/circles/frappe_mauve.png" height="16" width="16"/>
            <img src="../assets/palette/circles/macchiato_mauve.png" height="16" width="16"/>
            <img src="../assets/palette/circles/mocha_mauve.png" height="16" width="16"/>
          </td>
        </tr>
        <tr>
          <td>Strings</td>
          <td>Green</td>
          <td>
            <img src="../assets/palette/circles/latte_green.png" height="16" width="16"/>
            <img src="../assets/palette/circles/frappe_green.png" height="16" width="16"/>
            <img src="../assets/palette/circles/macchiato_green.png" height="16" width="16"/>
            <img src="../assets/palette/circles/mocha_green.png" height="16" width="16"/>
          </td>
        </tr>
        <tr>
          <td>Symbols, Atoms</td>
          <td>Red</td>
          <td>
            <img src="../assets/palette/circles/latte_red.png" height="16" width="16"/>
            <img src="../assets/palette/circles/frappe_red.png" height="16" width="16"/>
            <img src="../assets/palette/circles/macchiato_red.png" height="16" width="16"/>
            <img src="../assets/palette/circles/mocha_red.png" height="16" width="16"/>
          </td>
        </tr>
        <tr>
          <td>
            Escape Sequences<br>
            Regex
          </td>
          <td>Pink</td>
          <td>
            <img src="../assets/palette/circles/latte_pink.png" height="16" width="16"/>
            <img src="../assets/palette/circles/frappe_pink.png" height="16" width="16"/>
            <img src="../assets/palette/circles/macchiato_pink.png" height="16" width="16"/>
            <img src="../assets/palette/circles/mocha_pink.png" height="16" width="16"/>
          </td>
        </tr>
        <tr>
          <td>Comments</td>
          <td>Overlay 2</td>
          <td>
            <img src="../assets/palette/circles/latte_overlay2.png" height="16" width="16"/>
            <img src="../assets/palette/circles/frappe_overlay2.png" height="16" width="16"/>
            <img src="../assets/palette/circles/macchiato_overlay2.png" height="16" width="16"/>
            <img src="../assets/palette/circles/mocha_overlay2.png" height="16" width="16"/>
          </td>
        </tr>
        <tr>
          <td>Constants, Numbers</td>
          <td>Peach</td>
          <td>
            <img src="../assets/palette/circles/latte_peach.png" height="16" width="16"/>
            <img src="../assets/palette/circles/frappe_peach.png" height="16" width="16"/>
            <img src="../assets/palette/circles/macchiato_peach.png" height="16" width="16"/>
            <img src="../assets/palette/circles/mocha_peach.png" height="16" width="16"/>
          </td>
        </tr>
        <tr>
          <td>Operators</td>
          <td>Sky</td>
          <td>
            <img src="../assets/palette/circles/latte_sky.png" height="16" width="16"/>
            <img src="../assets/palette/circles/frappe_sky.png" height="16" width="16"/>
            <img src="../assets/palette/circles/macchiato_sky.png" height="16" width="16"/>
            <img src="../assets/palette/circles/mocha_sky.png" height="16" width="16"/>
          </td>
        </tr>
        <tr>
          <td>Braces, Delimiters</td>
          <td>Overlay 2</td>
          <td>
            <img src="../assets/palette/circles/latte_overlay2.png" height="16" width="16"/>
            <img src="../assets/palette/circles/frappe_overlay2.png" height="16" width="16"/>
            <img src="../assets/palette/circles/macchiato_overlay2.png" height="16" width="16"/>
            <img src="../assets/palette/circles/mocha_overlay2.png" height="16" width="16"/>
          </td>
        </tr>
        <tr>
          <td>Methods, Functions</td>
          <td>Blue</td>
          <td>
            <img src="../assets/palette/circles/latte_blue.png" height="16" width="16"/>
            <img src="../assets/palette/circles/frappe_blue.png" height="16" width="16"/>
            <img src="../assets/palette/circles/macchiato_blue.png" height="16" width="16"/>
            <img src="../assets/palette/circles/mocha_blue.png" height="16" width="16"/>
          </td>
        </tr>
        <tr>
          <td>Parameters</td>
          <td>Maroon</td>
          <td>
            <img src="../assets/palette/circles/latte_maroon.png" height="16" width="16"/>
            <img src="../assets/palette/circles/frappe_maroon.png" height="16" width="16"/>
            <img src="../assets/palette/circles/macchiato_maroon.png" height="16" width="16"/>
            <img src="../assets/palette/circles/mocha_maroon.png" height="16" width="16"/>
          </td>
        </tr>
        <tr>
          <td>Builtins</td>
          <td>Red</td>
          <td>
            <img src="../assets/palette/circles/latte_red.png" height="16" width="16"/>
            <img src="../assets/palette/circles/frappe_red.png" height="16" width="16"/>
            <img src="../assets/palette/circles/macchiato_red.png" height="16" width="16"/>
            <img src="../assets/palette/circles/mocha_red.png" height="16" width="16"/>
          </td>
        </tr>
        <tr>
          <td>
            Classes, Interfaces,<br>
            Annotations, Metadata,<br>
            Enums, Types
          </td>
          <td>Yellow</td>
          <td>
            <img src="../assets/palette/circles/latte_yellow.png" height="16" width="16"/>
            <img src="../assets/palette/circles/frappe_yellow.png" height="16" width="16"/>
            <img src="../assets/palette/circles/macchiato_yellow.png" height="16" width="16"/>
            <img src="../assets/palette/circles/mocha_yellow.png" height="16" width="16"/>
          </td>
        </tr>
        <tr>
          <td>Enum Variants</td>
          <td>Teal</td>
          <td>
            <img src="../assets/palette/circles/latte_teal.png" height="16" width="16"/>
            <img src="../assets/palette/circles/frappe_teal.png" height="16" width="16"/>
            <img src="../assets/palette/circles/macchiato_teal.png" height="16" width="16"/>
            <img src="../assets/palette/circles/mocha_teal.png" height="16" width="16"/>
          </td>
        </tr>
        <tr>
          <td>
            Property<br>
            (e.g. JSON keys)
          </td>
          <td>Blue</td>
          <td>
            <img src="../assets/palette/circles/latte_blue.png" height="16" width="16"/>
            <img src="../assets/palette/circles/frappe_blue.png" height="16" width="16"/>
            <img src="../assets/palette/circles/macchiato_blue.png" height="16" width="16"/>
            <img src="../assets/palette/circles/mocha_blue.png" height="16" width="16"/>
          </td>
        </tr>
        <tr>
          <td>
            Attributes<br>
            (e.g. XML-style attributes)
          </td>
          <td>Yellow</td>
          <td>
            <img src="../assets/palette/circles/latte_yellow.png" height="16" width="16"/>
            <img src="../assets/palette/circles/frappe_yellow.png" height="16" width="16"/>
            <img src="../assets/palette/circles/macchiato_yellow.png" height="16" width="16"/>
            <img src="../assets/palette/circles/mocha_yellow.png" height="16" width="16"/>
          </td>
        </tr>
      </table>
    </td>
    <td>
      <table>
        <tr>
          <th colspan="3" align="center">
            <h4>General</h4>
          </th>
        </tr>
        <tr>
          <th>Syntax</th>
          <th colspan="2">Color</th>
        </tr>
        <tr>
          <td>Cursor</td>
          <td>Rosewater</td>
          <td>
            <img src="../assets/palette/circles/latte_rosewater.png" height="16" width="16"/>
            <img src="../assets/palette/circles/frappe_rosewater.png" height="16" width="16"/>
            <img src="../assets/palette/circles/macchiato_rosewater.png" height="16" width="16"/>
            <img src="../assets/palette/circles/mocha_rosewater.png" height="16" width="16"/>
          </td>
        </tr>
        <tr>
          <td>Cursor Line</td>
          <td>
            Text<br>
            <strong>10% Opacity</strong>
          </td>
          <td>
            <img src="../assets/palette/circles/latte_text.png" height="16" width="16"/>
            <img src="../assets/palette/circles/frappe_text.png" height="16" width="16"/>
            <img src="../assets/palette/circles/macchiato_text.png" height="16" width="16"/>
            <img src="../assets/palette/circles/mocha_text.png" height="16" width="16"/>
          </td>
        </tr>
        <tr>
          <td>Line Numbers</td>
          <td>Overlay 1</td>
          <td>
            <img src="../assets/palette/circles/latte_overlay1.png" height="16" width="16"/>
            <img src="../assets/palette/circles/frappe_overlay1.png" height="16" width="16"/>
            <img src="../assets/palette/circles/macchiato_overlay1.png" height="16" width="16"/>
            <img src="../assets/palette/circles/mocha_overlay1.png" height="16" width="16"/>
          </td>
        </tr>
        <tr>
          <td>Active Line Number</td>
          <td>Lavender</td>
          <td>
            <img src="../assets/palette/circles/latte_lavender.png" height="16" width="16"/>
            <img src="../assets/palette/circles/frappe_lavender.png" height="16" width="16"/>
            <img src="../assets/palette/circles/macchiato_lavender.png" height="16" width="16"/>
            <img src="../assets/palette/circles/mocha_lavender.png" height="16" width="16"/>
          </td>
        </tr>
        <tr>
          <td>
            Normal Links<br>
            Followed Links<br>
            On Hover Links
          </td>
          <td>
            Blue<br>
            Lavender<br>
            Sky
          </td>
          <td>
            <img src="../assets/palette/circles/latte_blue.png" height="16" width="16"/>
            <img src="../assets/palette/circles/frappe_blue.png" height="16" width="16"/>
            <img src="../assets/palette/circles/macchiato_blue.png" height="16" width="16"/>
            <img src="../assets/palette/circles/mocha_blue.png" height="16" width="16"/><br>
            <img src="../assets/palette/circles/latte_lavender.png" height="16" width="16"/>
            <img src="../assets/palette/circles/frappe_lavender.png" height="16" width="16"/>
            <img src="../assets/palette/circles/macchiato_lavender.png" height="16" width="16"/>
            <img src="../assets/palette/circles/mocha_lavender.png" height="16" width="16"/><br>
            <img src="../assets/palette/circles/latte_sky.png" height="16" width="16"/>
            <img src="../assets/palette/circles/frappe_sky.png" height="16" width="16"/>
            <img src="../assets/palette/circles/macchiato_sky.png" height="16" width="16"/>
            <img src="../assets/palette/circles/mocha_sky.png" height="16" width="16"/>
          </td>
        </tr>
        <tr>
          <td>
            Search FG<br>
            Search BG<br>
            Active Search FG<br>
            Active Search BG
          </td>
          <td>
            Text<br>
            Teal<br>
            Text<br>
            Red
          </td>
          <td>
            <img src="../assets/palette/circles/latte_text.png" height="16" width="16"/>
            <img src="../assets/palette/circles/frappe_text.png" height="16" width="16"/>
            <img src="../assets/palette/circles/macchiato_text.png" height="16" width="16"/>
            <img src="../assets/palette/circles/mocha_text.png" height="16" width="16"/><br>
            <img src="../assets/palette/circles/latte_teal.png" height="16" width="16"/>
            <img src="../assets/palette/circles/frappe_teal.png" height="16" width="16"/>
            <img src="../assets/palette/circles/macchiato_teal.png" height="16" width="16"/>
            <img src="../assets/palette/circles/mocha_teal.png" height="16" width="16"/><br>
            <img src="../assets/palette/circles/latte_text.png" height="16" width="16"/>
            <img src="../assets/palette/circles/frappe_text.png" height="16" width="16"/>
            <img src="../assets/palette/circles/macchiato_text.png" height="16" width="16"/>
            <img src="../assets/palette/circles/mocha_text.png" height="16" width="16"/><br>
            <img src="../assets/palette/circles/latte_red.png" height="16" width="16"/>
            <img src="../assets/palette/circles/frappe_red.png" height="16" width="16"/>
            <img src="../assets/palette/circles/macchiato_red.png" height="16" width="16"/>
            <img src="../assets/palette/circles/mocha_red.png" height="16" width="16"/>
          </td>
        </tr>
        <tr>
          <td>Errors</td>
          <td>Red</td>
          <td>
            <img src="../assets/palette/circles/latte_red.png" height="16" width="16"/>
            <img src="../assets/palette/circles/frappe_red.png" height="16" width="16"/>
            <img src="../assets/palette/circles/macchiato_red.png" height="16" width="16"/>
            <img src="../assets/palette/circles/mocha_red.png" height="16" width="16"/>
          </td>
        </tr>
        <tr>
          <td>Warnings</td>
          <td>Yellow<br>Peach</td>
          <td>
            <img src="../assets/palette/circles/latte_yellow.png" height="16" width="16"/>
            <img src="../assets/palette/circles/frappe_yellow.png" height="16" width="16"/>
            <img src="../assets/palette/circles/macchiato_yellow.png" height="16" width="16"/>
            <img src="../assets/palette/circles/mocha_yellow.png" height="16" width="16"/><br>
            <img src="../assets/palette/circles/latte_peach.png" height="16" width="16"/>
            <img src="../assets/palette/circles/frappe_peach.png" height="16" width="16"/>
            <img src="../assets/palette/circles/macchiato_peach.png" height="16" width="16"/>
            <img src="../assets/palette/circles/mocha_peach.png" height="16" width="16"/>
          </td>
        </tr>
        <tr>
          <td>Information</td>
          <td>Teal</td>
          <td>
            <img src="../assets/palette/circles/latte_teal.png" height="16" width="16"/>
            <img src="../assets/palette/circles/frappe_teal.png" height="16" width="16"/>
            <img src="../assets/palette/circles/macchiato_teal.png" height="16" width="16"/>
            <img src="../assets/palette/circles/mocha_teal.png" height="16" width="16"/>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

<table>
  <tr>
    <td>
      <table>
        <tr>
          <th colspan="3" align="center">
            <h4>
              Rainbow Highlights<br>
              (Brackets, Headings, etc.)
            </h4>
          </th>
        </tr>
        <tr>
          <th>Syntax</th>
          <th colspan="2">Color</th>
        </tr>
        <tr>
          <td>Color #1</td>
          <td>Red</td>
          <td>
            <img src="../assets/palette/circles/latte_red.png" height="16" width="16"/>
            <img src="../assets/palette/circles/frappe_red.png" height="16" width="16"/>
            <img src="../assets/palette/circles/macchiato_red.png" height="16" width="16"/>
            <img src="../assets/palette/circles/mocha_red.png" height="16" width="16"/>
          </td>
        </tr>
        <tr>
          <td>Color #2</td>
          <td>Peach</td>
          <td>
            <img src="../assets/palette/circles/latte_peach.png" height="16" width="16"/>
            <img src="../assets/palette/circles/frappe_peach.png" height="16" width="16"/>
            <img src="../assets/palette/circles/macchiato_peach.png" height="16" width="16"/>
            <img src="../assets/palette/circles/mocha_peach.png" height="16" width="16"/>
          </td>
        </tr>
        <tr>
          <td>Color #3</td>
          <td>Yellow</td>
          <td>
            <img src="../assets/palette/circles/latte_yellow.png" height="16" width="16"/>
            <img src="../assets/palette/circles/frappe_yellow.png" height="16" width="16"/>
            <img src="../assets/palette/circles/macchiato_yellow.png" height="16" width="16"/>
            <img src="../assets/palette/circles/mocha_yellow.png" height="16" width="16"/>
          </td>
        </tr>
        <tr>
          <td>Color #4</td>
          <td>Green</td>
          <td>
            <img src="../assets/palette/circles/latte_green.png" height="16" width="16"/>
            <img src="../assets/palette/circles/frappe_green.png" height="16" width="16"/>
            <img src="../assets/palette/circles/macchiato_green.png" height="16" width="16"/>
            <img src="../assets/palette/circles/mocha_green.png" height="16" width="16"/>
          </td>
        </tr>
        <tr>
          <td>Color #5</td>
          <td>Sapphire</td>
          <td>
            <img src="../assets/palette/circles/latte_sapphire.png" height="16" width="16"/>
            <img src="../assets/palette/circles/frappe_sapphire.png" height="16" width="16"/>
            <img src="../assets/palette/circles/macchiato_sapphire.png" height="16" width="16"/>
            <img src="../assets/palette/circles/mocha_sapphire.png" height="16" width="16"/>
          </td>
        </tr>
        <tr>
          <td>Color #6</td>
          <td>Lavender</td>
          <td>
            <img src="../assets/palette/circles/latte_lavender.png" height="16" width="16"/>
            <img src="../assets/palette/circles/frappe_lavender.png" height="16" width="16"/>
            <img src="../assets/palette/circles/macchiato_lavender.png" height="16" width="16"/>
            <img src="../assets/palette/circles/mocha_lavender.png" height="16" width="16"/>
          </td>
        </tr>
      </table>
    </td>
    <td>
      <table>
        <tr>
          <th colspan="3" align="center">
            <h4>Rainbow Parameters &<br/> Local Variables</h4>
          </th>
        </tr>
        <tr>
          <th>Syntax</th>
          <th colspan="2">Color</th>
        </tr>
        <tr>
          <td>Color #1</td>
          <td>60% Text/Red Mix</td>
          <td>
            <img src="../assets/palette/circles/semantic/latte_semantic_red.png" height="16" width="16"/>
            <img src="../assets/palette/circles/semantic/frappe_semantic_red.png" height="16" width="16"/>
            <img src="../assets/palette/circles/semantic/macchiato_semantic_red.png" height="16" width="16"/>
            <img src="../assets/palette/circles/semantic/mocha_semantic_red.png" height="16" width="16"/>
          </td>
        </tr>
        <tr>
          <td>Color #2</td>
          <td>60% Text/Yellow Mix</td>
          <td>
            <img src="../assets/palette/circles/semantic/latte_semantic_yellow.png" height="16" width="16"/>
            <img src="../assets/palette/circles/semantic/frappe_semantic_yellow.png" height="16" width="16"/>
            <img src="../assets/palette/circles/semantic/macchiato_semantic_yellow.png" height="16" width="16"/>
            <img src="../assets/palette/circles/semantic/mocha_semantic_yellow.png" height="16" width="16"/>
          </td>
        </tr>
        <tr>
          <td>Color #3</td>
          <td>60% Text/Green Mix</td>
          <td>
            <img src="../assets/palette/circles/semantic/latte_semantic_green.png" height="16" width="16"/>
            <img src="../assets/palette/circles/semantic/frappe_semantic_green.png" height="16" width="16"/>
            <img src="../assets/palette/circles/semantic/macchiato_semantic_green.png" height="16" width="16"/>
            <img src="../assets/palette/circles/semantic/mocha_semantic_green.png" height="16" width="16"/>
          </td>
        </tr>
        <tr>
          <td>Color #4</td>
          <td>60% Text/Teal Mix</td>
          <td>
            <img src="../assets/palette/circles/semantic/latte_semantic_teal.png" height="16" width="16"/>
            <img src="../assets/palette/circles/semantic/frappe_semantic_teal.png" height="16" width="16"/>
            <img src="../assets/palette/circles/semantic/macchiato_semantic_teal.png" height="16" width="16"/>
            <img src="../assets/palette/circles/semantic/mocha_semantic_teal.png" height="16" width="16"/>
          </td>
        </tr>
        <tr>
          <td>Color #5</td>
          <td>60% Text/Blue Mix</td>
          <td>
            <img src="../assets/palette/circles/semantic/latte_semantic_blue.png" height="16" width="16"/>
            <img src="../assets/palette/circles/semantic/frappe_semantic_blue.png" height="16" width="16"/>
            <img src="../assets/palette/circles/semantic/macchiato_semantic_blue.png" height="16" width="16"/>
            <img src="../assets/palette/circles/semantic/mocha_semantic_blue.png" height="16" width="16"/>
          </td>
        </tr>
        <tr>
          <td>Color #6</td>
          <td>60% Text/Mauve Mix</td>
          <td>
            <img src="../assets/palette/circles/semantic/latte_semantic_mauve.png" height="16" width="16"/>
            <img src="../assets/palette/circles/semantic/frappe_semantic_mauve.png" height="16" width="16"/>
            <img src="../assets/palette/circles/semantic/macchiato_semantic_mauve.png" height="16" width="16"/>
            <img src="../assets/palette/circles/semantic/mocha_semantic_mauve.png" height="16" width="16"/>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

<table>
  <tr>
    <th colspan="3" align="center">
      <h4>Diff & Merge</h4>
    </th>
  </tr>
  <tr>
    <th>Function</th>
    <th colspan="2">Color</th>
  </tr>
  <tr>
    <td>
      Changed Text BG<br>
      Changed Line BG
    </td>
    <td>
      Blue <strong>(10% - 20% Opacity)</strong><br>
      Blue <strong>(15% - 25% Opacity)</strong>
    </td>
    <td>
      <img src="../assets/palette/circles/latte_blue.png" height="16" width="16"/>
      <img src="../assets/palette/circles/frappe_blue.png" height="16" width="16"/>
      <img src="../assets/palette/circles/macchiato_blue.png" height="16" width="16"/>
      <img src="../assets/palette/circles/mocha_blue.png" height="16" width="16"/><br>
      <img src="../assets/palette/circles/latte_blue.png" height="16" width="16"/>
      <img src="../assets/palette/circles/frappe_blue.png" height="16" width="16"/>
      <img src="../assets/palette/circles/macchiato_blue.png" height="16" width="16"/>
      <img src="../assets/palette/circles/mocha_blue.png" height="16" width="16"/>
    </td>
  </tr>
  <tr>
    <td>
      Inserted Text BG<br>
      Inserted Line BG
    </td>
    <td>
      Green <strong>(10% - 20% Opacity)</strong><br>
      Green <strong>(15% - 25% Opacity)</strong>
    </td>
    <td>
      <img src="../assets/palette/circles/latte_green.png" height="16" width="16"/>
      <img src="../assets/palette/circles/frappe_green.png" height="16" width="16"/>
      <img src="../assets/palette/circles/macchiato_green.png" height="16" width="16"/>
      <img src="../assets/palette/circles/mocha_green.png" height="16" width="16"/><br>
      <img src="../assets/palette/circles/latte_green.png" height="16" width="16"/>
      <img src="../assets/palette/circles/frappe_green.png" height="16" width="16"/>
      <img src="../assets/palette/circles/macchiato_green.png" height="16" width="16"/>
      <img src="../assets/palette/circles/mocha_green.png" height="16" width="16"/>
    </td>
  </tr>
  <tr>
    <td>
      Removed Text BG<br>
      Removed Line BG
    </td>
    <td>
      Red <strong>(10% - 20% Opacity)</strong><br>
      Red <strong>(15% - 25% Opacity)</strong>
    </td>
    <td>
      <img src="../assets/palette/circles/latte_red.png" height="16" width="16"/>
      <img src="../assets/palette/circles/frappe_red.png" height="16" width="16"/>
      <img src="../assets/palette/circles/macchiato_red.png" height="16" width="16"/>
      <img src="../assets/palette/circles/mocha_red.png" height="16" width="16"/><br>
      <img src="../assets/palette/circles/latte_red.png" height="16" width="16"/>
      <img src="../assets/palette/circles/frappe_red.png" height="16" width="16"/>
      <img src="../assets/palette/circles/macchiato_red.png" height="16" width="16"/>
      <img src="../assets/palette/circles/mocha_red.png" height="16" width="16"/>
    </td>
  </tr>
</table>

<table>
  <tr>
    <th colspan="3" align="center">
      <h4>Debugging</h4>
    </th>
  </tr>
  <tr>
    <th>Function</th>
    <th colspan="2">Color</th>
  </tr>
  <tr>
    <td>Breakpoint Icon</td>
    <td>Red</td>
    <td>
      <img src="../assets/palette/circles/latte_red.png" height="16" width="16"/>
      <img src="../assets/palette/circles/frappe_red.png" height="16" width="16"/>
      <img src="../assets/palette/circles/macchiato_red.png" height="16" width="16"/>
      <img src="../assets/palette/circles/mocha_red.png" height="16" width="16"/>
    </td>
  </tr>
  <tr>
    <td>Breakpoint Line</td>
    <td>Transparent</td>
    <td>--------------</td>
  </tr>
  <tr>
    <td>Breakpoint Line During Execution</td>
    <td>Yellow<br><strong>15% Opacity</strong></td>
    <td>
      <img src="../assets/palette/circles/latte_yellow.png" height="16" width="16"/>
      <img src="../assets/palette/circles/frappe_yellow.png" height="16" width="16"/>
      <img src="../assets/palette/circles/macchiato_yellow.png" height="16" width="16"/>
      <img src="../assets/palette/circles/mocha_yellow.png" height="16" width="16"/>
    </td>
  </tr>
</table>