catppuccin/docs/style-guide.md

<p align="center">
  <h2 align="center">🖌️ Style Guide</h2>
</p>


<p align="center">
	A guide on how to properly <i>use</i> the palette
</p>

&nbsp;

### General Usage

These are general use cases for most of the palette relevant for user interfaces. The `function` expresses a very vague use-case of a color and the `scope example` is how it is generally used:

<table>
	<tr>
		<th colspan="7" align="left"><h4>Background Colours<h4></th>
	</tr>
	<tr>
		<th>Function</th>
		<th>Examples</th>
		<th colspan="5">Colours</th>
	</tr>
	<tr>
		<td>Background Pane</td>
		<td>Main Canvas, Page Background</td>
		<td>Base</td>
		<td>
			<img src="../assets/palette/circles/latte_base.png" height="16" width="16"/>
		</td>
		<td>
			<img src="../assets/palette/circles/frappe_base.png" height="16" width="16"/>
		</td>
		<td>
			<img src="../assets/palette/circles/macchiato_base.png" height="16" width="16"/>
		</td>
		<td>
			<img src="../assets/palette/circles/mocha_base.png" height="16" width="16"/>
		</td>
	</tr>
	<tr>
		<td>Secondary Panes</td>
		<td>Secondary Canvases, Content Boxes, Sidebars</td>
		<td>
			Crust,<br>
			Mantle
		</td>
		<td>
			<img src="../assets/palette/circles/latte_crust.png" height="16" width="16"/><br>
			<img src="../assets/palette/circles/latte_mantle.png" height="16" width="16"/>
		</td>
		<td>
			<img src="../assets/palette/circles/frappe_crust.png" height="16" width="16"/><br>
			<img src="../assets/palette/circles/frappe_mantle.png" height="16" width="16"/>
		</td>
		<td>
			<img src="../assets/palette/circles/macchiato_crust.png" height="16" width="16"/><br>
			<img src="../assets/palette/circles/macchiato_mantle.png" height="16" width="16"/>
		</td>
		<td>
			<img src="../assets/palette/circles/mocha_crust.png" height="16" width="16"/><br>
			<img src="../assets/palette/circles/mocha_mantle.png" height="16" width="16"/>
		</td>
	</tr>
	<tr>
		<td>Surface Elements</td>
		<td>Sign Columns, Cursor Line, Generic Buttons, Inputs</td>
		<td>
			Surface 0,<br>
			Surface 1,<br>
			Surface 2
		</td>
		<td>
			<img src="../assets/palette/circles/latte_surface0.png" height="16" width="16"/><br>
			<img src="../assets/palette/circles/latte_surface1.png" height="16" width="16"/><br>
			<img src="../assets/palette/circles/latte_surface2.png" height="16" width="16"/>
		</td>
		<td>
			<img src="../assets/palette/circles/frappe_surface0.png" height="16" width="16"/><br>
			<img src="../assets/palette/circles/frappe_surface1.png" height="16" width="16"/><br>
			<img src="../assets/palette/circles/frappe_surface2.png" height="16" width="16"/>
		</td>
		<td>
			<img src="../assets/palette/circles/macchiato_surface0.png" height="16" width="16"/><br>
			<img src="../assets/palette/circles/macchiato_surface1.png" height="16" width="16"/><br>
			<img src="../assets/palette/circles/macchiato_surface2.png" height="16" width="16"/>
		</td>
		<td>
			<img src="../assets/palette/circles/mocha_surface0.png" height="16" width="16"/><br>
			<img src="../assets/palette/circles/mocha_surface1.png" height="16" width="16"/><br>
			<img src="../assets/palette/circles/mocha_surface2.png" height="16" width="16"/>
		</td>
	</tr>
	<tr>
		<td>Overlays</td>
		<td>Splits, Floating Elements</td>
		<td>
			Overlay 0,<br>
			Overlay 1,<br>
			Overlay 2
		</td>
		<td>
			<img src="../assets/palette/circles/latte_overlay0.png" height="16" width="16"/><br>
			<img src="../assets/palette/circles/latte_overlay1.png" height="16" width="16"/><br>
			<img src="../assets/palette/circles/latte_overlay2.png" height="16" width="16"/>
		</td>
		<td>
			<img src="../assets/palette/circles/frappe_overlay0.png" height="16" width="16"/><br>
			<img src="../assets/palette/circles/frappe_overlay1.png" height="16" width="16"/><br>
			<img src="../assets/palette/circles/frappe_overlay2.png" height="16" width="16"/>
		</td>
		<td>
			<img src="../assets/palette/circles/macchiato_overlay0.png" height="16" width="16"/><br>
			<img src="../assets/palette/circles/macchiato_overlay1.png" height="16" width="16"/><br>
			<img src="../assets/palette/circles/macchiato_overlay2.png" height="16" width="16"/>
		</td>
		<td>
			<img src="../assets/palette/circles/mocha_overlay0.png" height="16" width="16"/><br>
			<img src="../assets/palette/circles/mocha_overlay1.png" height="16" width="16"/><br>
			<img src="../assets/palette/circles/mocha_overlay2.png" height="16" width="16"/>
		</td>
	</tr>
	<tr>
		<th colspan="7" align="left"><h4>Typography<h4></th>
	</tr>
	<tr>
		<th>Function</th>
		<th>Examples</th>
		<th colspan="5">Colours</th>
	</tr>
	<tr>
		<td>Foreground</td>
		<td>Main Text, Body Copy</td>
		<td>Text</td>
		<td>
			<img src="../assets/palette/circles/latte_text.png" height="16" width="16"/>
		</td>
		<td>
			<img src="../assets/palette/circles/frappe_text.png" height="16" width="16"/>
		</td>
		<td>
			<img src="../assets/palette/circles/macchiato_text.png" height="16" width="16"/>
		</td>
		<td>
			<img src="../assets/palette/circles/mocha_text.png" height="16" width="16"/>
		</td>
	</tr>
	<tr>
		<td>Subtext</td>
		<td>Secondary Text, Headlines, Labels</td>
		<td>
			Subtext 0,<br>
			Subtext 1
		</td>
		<td>
			<img src="../assets/palette/circles/latte_subtext0.png" height="16" width="16"/><br>
			<img src="../assets/palette/circles/latte_subtext1.png" height="16" width="16"/>
		</td>
		<td>
			<img src="../assets/palette/circles/frappe_subtext0.png" height="16" width="16"/><br>
			<img src="../assets/palette/circles/frappe_subtext1.png" height="16" width="16"/>
		</td>
		<td>
			<img src="../assets/palette/circles/macchiato_subtext0.png" height="16" width="16"/><br>
			<img src="../assets/palette/circles/macchiato_subtext1.png" height="16" width="16"/>
		</td>
		<td>
			<img src="../assets/palette/circles/mocha_subtext0.png" height="16" width="16"/><br>
			<img src="../assets/palette/circles/mocha_subtext1.png" height="16" width="16"/>
		</td>
	</tr>
	<tr>
		<td>Subtle</td>
		<td>Comments, Footnotes, Inactive Text</td>
		<td>Overlay 1</td>
		<td>
			<img src="../assets/palette/circles/latte_overlay1.png" height="16" width="16"/>
		</td>
		<td>
			<img src="../assets/palette/circles/frappe_overlay1.png" height="16" width="16"/>
		</td>
		<td>
			<img src="../assets/palette/circles/macchiato_overlay1.png" height="16" width="16"/>
		</td>
		<td>
			<img src="../assets/palette/circles/mocha_overlay1.png" height="16" width="16"/>
		</td>
	</tr>
	<tr>
		<td>Highlights</td>
		<td>
			Links, URLs<br>
			Success<br>
			Warnings<br>
			Errors<br>
			Search Results, Tags
		</td>
		<td>
			Rosewater<br>
			Green<br>
			Peach<br>
			Maroon<br>
			Blue<br>
		</td>
		<td>
			<img src="../assets/palette/circles/latte_rosewater.png" height="16" width="16"/><br>
			<img src="../assets/palette/circles/latte_green.png" height="16" width="16"/><br>
			<img src="../assets/palette/circles/latte_peach.png" height="16" width="16"/><br>
			<img src="../assets/palette/circles/latte_maroon.png" height="16" width="16"/><br>
			<img src="../assets/palette/circles/latte_blue.png" height="16" width="16"/>
		</td>
		<td>
			<img src="../assets/palette/circles/frappe_rosewater.png" height="16" width="16"/><br>
			<img src="../assets/palette/circles/frappe_green.png" height="16" width="16"/><br>
			<img src="../assets/palette/circles/frappe_peach.png" height="16" width="16"/><br>
			<img src="../assets/palette/circles/frappe_maroon.png" height="16" width="16"/><br>
			<img src="../assets/palette/circles/frappe_blue.png" height="16" width="16"/>
		</td>
		<td>
			<img src="../assets/palette/circles/macchiato_rosewater.png" height="16" width="16"/><br>
			<img src="../assets/palette/circles/macchiato_green.png" height="16" width="16"/><br>
			<img src="../assets/palette/circles/macchiato_peach.png" height="16" width="16"/><br>
			<img src="../assets/palette/circles/macchiato_maroon.png" height="16" width="16"/><br>
			<img src="../assets/palette/circles/macchiato_blue.png" height="16" width="16"/>
		</td>
		<td>
			<img src="../assets/palette/circles/mocha_rosewater.png" height="16" width="16"/><br>
			<img src="../assets/palette/circles/mocha_green.png" height="16" width="16"/><br>
			<img src="../assets/palette/circles/mocha_peach.png" height="16" width="16"/><br>
			<img src="../assets/palette/circles/mocha_maroon.png" height="16" width="16"/><br>
			<img src="../assets/palette/circles/mocha_blue.png" height="16" width="16"/>
		</td>
	</tr>
	<tr>
		<td colspan="7" align="left"><br>
      
> **Note** Text colours are guidelines. Certain cases require deviations from the guidelines above. An example would be Text on coloured backgrounds. Legibility always comes first, so please use your own judgement.
      
</td>
</tr>
</table>



### Terminals

<table>
	<!-----------------
	- ## Window Colours
	------------------>
	<tr>
		<th colspan="9" align="left"><h4>Window Colours<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>
		<!-- ## Background ## -->
		<td>Background</td>
		<!-- Latte -->
		<td><img src="../assets/palette/circles/latte_base.png" height="16" width="16"/></td>
		<td>Base</td>
		<!-- Frappé -->
		<td><img src="../assets/palette/circles/frappe_base.png" height="16" width="16"/></td>
		<td>Base</td>
		<!-- Macchiato -->
		<td><img src="../assets/palette/circles/macchiato_base.png" height="16" width="16"/></td>
		<td>Base</td>
		<!-- Mocha -->
		<td><img src="../assets/palette/circles/mocha_base.png" height="16" width="16"/></td>
		<td>Base</td>
	</tr>
	<tr>
		<!-- ## Text ## -->
		<td>Main Text</td>
		<!-- Latte -->
		<td><img src="../assets/palette/circles/latte_text.png" height="16" width="16"/></td>
		<td>Text</td>
		<!-- Frappé -->
		<td><img src="../assets/palette/circles/frappe_text.png" height="16" width="16"/></td>
		<td>Text</td>
		<!-- Macchiato -->
		<td><img src="../assets/palette/circles/macchiato_text.png" height="16" width="16"/></td>
		<td>Text</td>
		<!-- Mocha -->
		<td><img src="../assets/palette/circles/mocha_text.png" height="16" width="16"/></td>
		<td>Text</td>
	</tr>
	<tr>
		<!-- ## URLs ## -->
		<td>URLs</td>
		<!-- Latte -->
		<td><img src="../assets/palette/circles/latte_rosewater.png" height="16" width="16"/></td>
		<td>Rosewater</td>
		<!-- Frappé -->
		<td><img src="../assets/palette/circles/frappe_rosewater.png" height="16" width="16"/></td>
		<td>Rosewater</td>
		<!-- Macchiato -->
		<td><img src="../assets/palette/circles/macchiato_rosewater.png" height="16" width="16"/></td>
		<td>Rosewater</td>
		<!-- Mocha -->
		<td><img src="../assets/palette/circles/mocha_rosewater.png" height="16" width="16"/></td>
		<td>Rosewater</td>
	</tr>
	<tr>
		<!-- ## Selection ## -->
		<td>Selection</td>
		<!-- Latte -->
		<td><img src="../assets/palette/circles/latte_surface2.png" height="16" width="16"/></td>
		<td>Surface 2</td>
		<!-- Frappé -->
		<td><img src="../assets/palette/circles/frappe_surface2.png" height="16" width="16"/></td>
		<td>Surface 2</td>
		<!-- Macchiato -->
		<td><img src="../assets/palette/circles/macchiato_surface2.png" height="16" width="16"/></td>
		<td>Surface 2</td>
		<!-- Mocha -->
		<td><img src="../assets/palette/circles/mocha_surface2.png" height="16" width="16"/></td>
		<td>Surface 2</td>
	</tr>
	<tr>
		<!-- ## Selection Text ## -->
		<td>Selection Text</td>
		<!-- Latte -->
		<td><img src="../assets/palette/circles/latte_text.png" height="16" width="16"/></td>
		<td>Text</td>
		<!-- Frappé -->
		<td><img src="../assets/palette/circles/frappe_text.png" height="16" width="16"/></td>
		<td>Text</td>
		<!-- Macchiato -->
		<td><img src="../assets/palette/circles/macchiato_text.png" height="16" width="16"/></td>
		<td>Text</td>
		<!-- Mocha -->
		<td><img src="../assets/palette/circles/mocha_text.png" height="16" width="16"/></td>
		<td>Text</td>
	</tr>
	<tr>
		<!-- ## Cursor ## -->
		<td>Cursor</td>
		<!-- Latte -->
		<td><img src="../assets/palette/circles/latte_rosewater.png" height="16" width="16"/></td>
		<td>Rosewater</td>
		<!-- Frappé -->
		<td><img src="../assets/palette/circles/frappe_rosewater.png" height="16" width="16"/></td>
		<td>Rosewater</td>
		<!-- Macchiato -->
		<td><img src="../assets/palette/circles/macchiato_rosewater.png" height="16" width="16"/></td>
		<td>Rosewater</td>
		<!-- Mocha -->
		<td><img src="../assets/palette/circles/mocha_rosewater.png" height="16" width="16"/></td>
		<td>Rosewater</td>
	</tr>
	<tr>
		<!-- ## Cursor Text ## -->
		<td>Cursor Text</td>
		<!-- Latte -->
		<td><img src="../assets/palette/circles/latte_base.png" height="16" width="16"/></td>
		<td>Base</td>
		<!-- Frappé -->
		<td><img src="../assets/palette/circles/frappe_crust.png" height="16" width="16"/></td>
		<td>Crust</td>
		<!-- Macchiato -->
		<td><img src="../assets/palette/circles/macchiato_crust.png" height="16" width="16"/></td>
		<td>Crust</td>
		<!-- Mocha -->
		<td><img src="../assets/palette/circles/mocha_crust.png" height="16" width="16"/></td>
		<td>Crust</td>
	</tr>
	<tr>
		<!-- ## Active Border ## -->
		<td>Active Border</td>
		<!-- Latte -->
		<td><img src="../assets/palette/circles/latte_lavender.png" height="16" width="16"/></td>
		<td>Lavender</td>
		<!-- Frappé -->
		<td><img src="../assets/palette/circles/frappe_lavender.png" height="16" width="16"/></td>
		<td>Lavender</td>
		<!-- Macchiato -->
		<td><img src="../assets/palette/circles/macchiato_lavender.png" height="16" width="16"/></td>
		<td>Lavender</td>
		<!-- Mocha -->
		<td><img src="../assets/palette/circles/mocha_lavender.png" height="16" width="16"/></td>
		<td>Lavender</td>
	</tr>
	<tr>
		<!-- ## Inactive Border ## -->
		<td>Inactive Border</td>
		<!-- Latte -->
		<td><img src="../assets/palette/circles/latte_overlay0.png" height="16" width="16"/></td>
		<td>Overlay 0</td>
		<!-- Frappé -->
		<td><img src="../assets/palette/circles/frappe_overlay0.png" height="16" width="16"/></td>
		<td>Overlay 0</td>
		<!-- Macchiato -->
		<td><img src="../assets/palette/circles/macchiato_overlay0.png" height="16" width="16"/></td>
		<td>Overlay 0</td>
		<!-- Mocha -->
		<td><img src="../assets/palette/circles/mocha_overlay0.png" height="16" width="16"/></td>
		<td>Overlay 0</td>
	</tr>
	<tr>
		<!-- ## Bell Border ## -->
		<td>Bell Border</td>
		<!-- Latte -->
		<td><img src="../assets/palette/circles/latte_yellow.png" height="16" width="16"/></td>
		<td>Yellow</td>
		<!-- Frappé -->
		<td><img src="../assets/palette/circles/frappe_yellow.png" height="16" width="16"/></td>
		<td>Yellow</td>
		<!-- Macchiato -->
		<td><img src="../assets/palette/circles/macchiato_yellow.png" height="16" width="16"/></td>
		<td>Yellow</td>
		<!-- Mocha -->
		<td><img src="../assets/palette/circles/mocha_yellow.png" height="16" width="16"/></td>
		<td>Yellow</td>
	</tr>
	<!------------------
	- ## Regular Colours
	------------------->
	<tr>
		<th colspan="9" align="left"><h4>Regular Colours<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>
		<!-- ## Black ## -->
		<td>color0</td>
		<!-- Latte -->
		<td><img src="../assets/palette/circles/latte_subtext1.png" height="16" width="16"/>
		</td><td>Subtext 1</td>
		<!-- Frappé -->
		<td><img src="../assets/palette/circles/frappe_surface1.png" height="16" width="16"/></td>
		<td>Surface 1</td>
		<!-- Macchiato -->
		<td><img src="../assets/palette/circles/macchiato_surface1.png" height="16" width="16"/>
		</td><td>Surface 1</td>
		<!-- Mocha -->
		<td><img src="../assets/palette/circles/mocha_surface1.png" height="16" width="16"/></td>
		<td>Surface 1</td>
	</tr>
	<tr>
		<!-- ## Red ## -->
		<td>color1</td>
		<!-- Latte -->
		<td><img src="../assets/palette/circles/latte_red.png" height="16" width="16"/></td>
		<td>Red</td>
		<!-- Frappé -->
		<td><img src="../assets/palette/circles/frappe_red.png" height="16" width="16"/></td>
		<td>Red</td>
		<!-- Macchiato -->
		<td><img src="../assets/palette/circles/macchiato_red.png" height="16" width="16"/></td>
		<td>Red</td>
		<!-- Mocha -->
		<td><img src="../assets/palette/circles/mocha_red.png" height="16" width="16"/></td>
		<td>Red</td>
	</tr>
	<tr>
		<!-- ## Green ## -->
		<td>color2</td>
		<!-- Latte -->
		<td><img src="../assets/palette/circles/latte_green.png" height="16" width="16"/></td>
		<td>Green</td>
		<!-- Frappé -->
		<td><img src="../assets/palette/circles/frappe_green.png" height="16" width="16"/></td>
		<td>Green</td>
		<!-- Macchiato -->
		<td><img src="../assets/palette/circles/macchiato_green.png" height="16" width="16"/></td>
		<td>Green</td>
		<!-- Mocha -->
		<td><img src="../assets/palette/circles/mocha_green.png" height="16" width="16"/></td>
		<td>Green</td>
	</tr>
	<tr>
		<!-- ## Yellow ## -->
		<td>color3</td>
		<!-- Latte -->
		<td><img src="../assets/palette/circles/latte_yellow.png" height="16" width="16"/></td>
		<td>Yellow</td>
		<!-- Frappé -->
		<td><img src="../assets/palette/circles/frappe_yellow.png" height="16" width="16"/></td>
		<td>Yellow</td>
		<!-- Macchiato -->
		<td><img src="../assets/palette/circles/macchiato_yellow.png" height="16" width="16"/></td>
		<td>Yellow</td>
		<!-- Mocha -->
		<td><img src="../assets/palette/circles/mocha_yellow.png" height="16" width="16"/></td>
		<td>Yellow</td>
	</tr>
	<tr>
		<!-- ## Blue ## -->
		<td>color4</td>
		<!-- Latte -->
		<td><img src="../assets/palette/circles/latte_blue.png" height="16" width="16"/></td>
		<td>Blue</td>
		<!-- Frappé -->
		<td><img src="../assets/palette/circles/frappe_blue.png" height="16" width="16"/></td>
		<td>Blue</td>
		<!-- Macchiato -->
		<td><img src="../assets/palette/circles/macchiato_blue.png" height="16" width="16"/></td>
		<td>Blue</td>
		<!-- Mocha -->
		<td><img src="../assets/palette/circles/mocha_blue.png" height="16" width="16"/></td>
		<td>Blue</td>
	</tr>
	<tr>
		<!-- ## Magenta ## -->
		<td>color5</td>
		<!-- Latte -->
		<td><img src="../assets/palette/circles/latte_pink.png" height="16" width="16"/></td>
		<td>Pink</td>
		<!-- Frappé -->
		<td><img src="../assets/palette/circles/frappe_pink.png" height="16" width="16"/></td>
		<td>Pink</td>
		<!-- Macchiato -->
		<td><img src="../assets/palette/circles/macchiato_pink.png" height="16" width="16"/></td>
		<td>Pink</td>
		<!-- Mocha -->
		<td><img src="../assets/palette/circles/mocha_pink.png" height="16" width="16"/></td>
		<td>Pink</td>
	</tr>
	<tr>
		<!-- ## Cyan ## -->
		<td>color6</td>
		<!-- Latte -->
		<td><img src="../assets/palette/circles/latte_teal.png" height="16" width="16"/></td>
		<td>Teal</td>
		<!-- Frappé -->
		<td><img src="../assets/palette/circles/frappe_teal.png" height="16" width="16"/></td>
		<td>Teal</td>
		<!-- Macchiato -->
		<td><img src="../assets/palette/circles/macchiato_teal.png" height="16" width="16"/></td>
		<td>Teal</td>
		<!-- Mocha -->
		<td><img src="../assets/palette/circles/mocha_teal.png" height="16" width="16"/></td>
		<td>Teal</td>
	</tr>
	<tr>
		<!-- ## White ## -->
		<td>color7</td>
		<!-- Latte -->
		<td><img src="../assets/palette/circles/latte_surface2.png" height="16" width="16"/></td>
		<td>Surface 2</td>
		<!-- Frappé -->
		<td><img src="../assets/palette/circles/frappe_subtext1.png" height="16" width="16"/></td>
		<td>Subtext 1</td>
		<!-- Macchiato -->
		<td><img src="../assets/palette/circles/macchiato_subtext1.png" height="16" width="16"/></td>
		<td>Subtext 1</td>
		<!-- Mocha -->
		<td><img src="../assets/palette/circles/mocha_subtext1.png" height="16" width="16"/></td>
		<td>Subtext 1</td>
	</tr>
	<!---------------
	- ## Bold Colours
	---------------->
	<tr>
		<th colspan="9" align="left"><h4>Bold Colours</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>
		<!-- ## Black ## -->
		<td>color8</td>
		<!-- Latte -->
		<td><img src="../assets/palette/circles/latte_subtext0.png" height="16" width="16"/></td>
		<td>Subtext 0</td>
		<!-- Frappé -->
		<td><img src="../assets/palette/circles/frappe_surface2.png" height="16" width="16"/></td>
		<td>Surface 2</td>
		<!-- Macchiato -->
		<td><img src="../assets/palette/circles/macchiato_surface2.png" height="16" width="16"/></td>
		<td>Surface 2</td>
		<!-- Mocha -->
		<td><img src="../assets/palette/circles/mocha_surface2.png" height="16" width="16"/></td>
		<td>Surface 2</td>
	</tr>
	<tr>
		<!-- ## Red ## -->
		<td>color9</td>
		<!-- Latte -->
		<td><img src="../assets/palette/circles/latte_red.png" height="16" width="16"/></td>
		<td>Red</td>
		<!-- Frappé -->
		<td><img src="../assets/palette/circles/frappe_red.png" height="16" width="16"/></td>
		<td>Red</td>
		<!-- Macchiato -->
		<td><img src="../assets/palette/circles/macchiato_red.png" height="16" width="16"/></td>
		<td>Red</td>
		<!-- Mocha -->
		<td><img src="../assets/palette/circles/mocha_red.png" height="16" width="16"/></td>
		<td>Red</td>
	</tr>
	<tr>
		<!-- ## Green ## -->
		<td>color10</td>
		<!-- Latte -->
		<td><img src="../assets/palette/circles/latte_green.png" height="16" width="16"/></td>
		<td>Green</td>
		<!-- Frappé -->
		<td><img src="../assets/palette/circles/frappe_green.png" height="16" width="16"/></td>
		<td>Green</td>
		<!-- Macchiato -->
		<td><img src="../assets/palette/circles/macchiato_green.png" height="16" width="16"/></td>
		<td>Green</td>
		<!-- Mocha -->
		<td><img src="../assets/palette/circles/mocha_green.png" height="16" width="16"/></td>
		<td>Green</td>
	</tr>
	<tr>
		<!-- ## Yellow ## -->
		<td>color11</td>
		<!-- Latte -->
		<td><img src="../assets/palette/circles/latte_yellow.png" height="16" width="16"/></td>
		<td>Yellow</td>
		<!-- Frappé -->
		<td><img src="../assets/palette/circles/frappe_yellow.png" height="16" width="16"/></td>
		<td>Yellow</td>
		<!-- Macchiato -->
		<td><img src="../assets/palette/circles/macchiato_yellow.png" height="16" width="16"/></td>
		<td>Yellow</td>
		<!-- Mocha -->
		<td><img src="../assets/palette/circles/mocha_yellow.png" height="16" width="16"/></td>
		<td>Yellow</td>
	</tr>
	<tr>
		<!-- ## Blue ## -->
		<td>color12</td>
		<!-- Latte -->
		<td><img src="../assets/palette/circles/latte_blue.png" height="16" width="16"/></td>
		<td>Blue</td>
		<!-- Frappé -->
		<td><img src="../assets/palette/circles/frappe_blue.png" height="16" width="16"/></td>
		<td>Blue</td>
		<!-- Macchiato -->
		<td><img src="../assets/palette/circles/macchiato_blue.png" height="16" width="16"/></td>
		<td>Blue</td>
		<!-- Mocha -->
		<td><img src="../assets/palette/circles/mocha_blue.png" height="16" width="16"/></td>
		<td>Blue</td>
	</tr>
	<tr>
		<!-- ## Magenta ## -->
		<td>color13</td>
		<!-- Latte -->
		<td><img src="../assets/palette/circles/latte_pink.png" height="16" width="16"/></td>
		<td>Pink</td>
		<!-- Frappé -->
		<td><img src="../assets/palette/circles/frappe_pink.png" height="16" width="16"/></td>
		<td>Pink</td>
		<!-- Macchiato -->
		<td><img src="../assets/palette/circles/macchiato_pink.png" height="16" width="16"/></td>
		<td>Pink</td>
		<!-- Mocha -->
		<td><img src="../assets/palette/circles/mocha_pink.png" height="16" width="16"/></td>
		<td>Pink</td>
	</tr>
	<tr>
		<!-- ## Cyan ## -->
		<td>color14</td>
		<!-- Latte -->
		<td><img src="../assets/palette/circles/latte_teal.png" height="16" width="16"/></td>
		<td>Teal</td>
		<!-- Frappé -->
		<td><img src="../assets/palette/circles/frappe_teal.png" height="16" width="16"/></td>
		<td>Teal</td>
		<!-- Macchiato -->
		<td><img src="../assets/palette/circles/macchiato_teal.png" height="16" width="16"/></td>
		<td>Teal</td>
		<!-- Mocha -->
		<td><img src="../assets/palette/circles/mocha_teal.png" height="16" width="16"/></td>
		<td>Teal</td>
	</tr>
	<tr>
		<!-- ## White ## -->
		<td>color15</td>
		<!-- Latte -->
		<td><img src="../assets/palette/circles/latte_surface1.png" height="16" width="16"/></td>
		<td>Surface 1</td>
		<!-- Frappé -->
		<td><img src="../assets/palette/circles/frappe_subtext0.png" height="16" width="16"/></td>
		<td>Subtext 0</td>
		<!-- Macchiato -->
		<td><img src="../assets/palette/circles/macchiato_subtext0.png" height="16" width="16"/></td>
		<td>Subtext 0</td>
		<!-- Mocha -->
		<td><img src="../assets/palette/circles/mocha_subtext0.png" height="16" width="16"/></td>
		<td>Subtext 0</td>
	</tr>
	<!-------------------
	- ## Extended Colours
	-------------------->
	<tr>
		<th colspan="9" align="left"><h4>Extended Colours<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>
		<!-- ## Peach ## -->
		<td>color16</td>
		<!-- Latte -->
		<td><img src="../assets/palette/circles/latte_peach.png" height="16" width="16"/></td>
		<td>Peach</td>
		<!-- Frappé -->
		<td><img src="../assets/palette/circles/frappe_peach.png" height="16" width="16"/></td>
		<td>Peach</td>
		<!-- Macchiato -->
		<td><img src="../assets/palette/circles/macchiato_peach.png" height="16" width="16"/></td>
		<td>Peach</td>
		<!-- Mocha -->
		<td><img src="../assets/palette/circles/mocha_peach.png" height="16" width="16"/></td>
		<td>Peach</td>
	</tr>
	<tr>
		<!-- ## Rosewater ## -->
		<td>color17</td>
		<!-- Latte -->
		<td><img src="../assets/palette/circles/latte_rosewater.png" height="16" width="16"/></td>
		<td>Rosewater</td>
		<!-- Frappé -->
		<td><img src="../assets/palette/circles/frappe_rosewater.png" height="16" width="16"/></td>
		<td>Rosewater</td>
		<!-- Macchiato -->
		<td><img src="../assets/palette/circles/macchiato_rosewater.png" height="16" width="16"/></td>
		<td>Rosewater</td>
		<!-- Mocha -->
		<td><img src="../assets/palette/circles/mocha_rosewater.png" height="16" width="16"/></td>
		<td>Rosewater</td>
	</tr>
	<!-----------------
	- ## Syntax Colours
	------------------>
	<tr>
		<th colspan="9" align="left"><h4>Syntax Colours<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>
		<!-- ## Mark 1 ## -->
		<td>Mark 1</td>
		<!-- Latte -->
		<td><img src="../assets/palette/circles/latte_lavender.png" height="16" width="16"/></td>
		<td>Lavender</td>
		<!-- Frappé -->
		<td><img src="../assets/palette/circles/frappe_lavender.png" height="16" width="16"/></td>
		<td>Lavender</td>
		<!-- Macchiato -->
		<td><img src="../assets/palette/circles/macchiato_lavender.png" height="16" width="16"/></td>
		<td>Lavender</td>
		<!-- Mocha -->
		<td><img src="../assets/palette/circles/mocha_lavender.png" height="16" width="16"/></td>
		<td>Lavender</td>
	</tr>
	<tr>
		<!-- ## Mark 1 Text ## -->
		<td>Mark 1 Text</td>
		<!-- Latte -->
		<td><img src="../assets/palette/circles/latte_base.png" height="16" width="16"/></td>
		<td>Base</td>
		<!-- Frappé -->
		<td><img src="../assets/palette/circles/frappe_crust.png" height="16" width="16"/></td>
		<td>Crust</td>
		<!-- Macchiato -->
		<td><img src="../assets/palette/circles/macchiato_crust.png" height="16" width="16"/></td>
		<td>Crust</td>
		<!-- Mocha -->
		<td><img src="../assets/palette/circles/mocha_crust.png" height="16" width="16"/></td>
		<td>Crust</td>
	</tr>
	<tr>
		<!-- ## Mark 2 ## -->
		<td>Mark 2</td>
		<!-- Latte -->
		<td><img src="../assets/palette/circles/latte_mauve.png" height="16" width="16"/></td>
		<td>Mauve</td>
		<!-- Frappé -->
		<td><img src="../assets/palette/circles/frappe_mauve.png" height="16" width="16"/></td>
		<td>Mauve</td>
		<!-- Macchiato -->
		<td><img src="../assets/palette/circles/macchiato_mauve.png" height="16" width="16"/></td>
		<td>Mauve</td>
		<!-- Mocha -->
		<td><img src="../assets/palette/circles/mocha_mauve.png" height="16" width="16"/></td>
		<td>Mauve</td>
	</tr>
	<tr>
		<!-- ## Mark 2 Text ## -->
		<td>Mark 2 Text</td>
		<!-- Latte -->
		<td><img src="../assets/palette/circles/latte_base.png" height="16" width="16"/></td>
		<td>Base</td>
		<!-- Frappé -->
		<td><img src="../assets/palette/circles/frappe_crust.png" height="16" width="16"/></td>
		<td>Crust</td>
		<!-- Macchiato -->
		<td><img src="../assets/palette/circles/macchiato_crust.png" height="16" width="16"/></td>
		<td>Crust</td>
		<!-- Mocha -->
		<td><img src="../assets/palette/circles/mocha_crust.png" height="16" width="16"/></td>
		<td>Crust</td>
	</tr>
	<tr>
		<!-- ## Mark 3 ## -->
		<td>Mark 3</td>
		<!-- Latte -->
		<td><img src="../assets/palette/circles/latte_sapphire.png" height="16" width="16"/></td>
		<td>Sapphire</td>
		<!-- Frappé -->
		<td><img src="../assets/palette/circles/frappe_sapphire.png" height="16" width="16"/></td>
		<td>Sapphire</td>
		<!-- Macchiato -->
		<td><img src="../assets/palette/circles/macchiato_sapphire.png" height="16" width="16"/></td>
		<td>Sapphire</td>
		<!-- Mocha -->
		<td><img src="../assets/palette/circles/mocha_sapphire.png" height="16" width="16"/></td>
		<td>Sapphire</td>
	</tr>
	<tr>
		<!-- ## Mark 3 Text ## -->
		<td>Mark 3 Text</td>
		<!-- Latte -->
		<td><img src="../assets/palette/circles/latte_base.png" height="16" width="16"/></td>
		<td>Base</td>
		<!-- Frappé -->
		<td><img src="../assets/palette/circles/frappe_crust.png" height="16" width="16"/></td>
		<td>Crust</td>
		<!-- Macchiato -->
		<td><img src="../assets/palette/circles/macchiato_crust.png" height="16" width="16"/></td>
		<td>Crust</td>
		<!-- Mocha -->
		<td><img src="../assets/palette/circles/mocha_crust.png" height="16" width="16"/></td>
		<td>Crust</td>
	</tr>
</table>

### Code Editors