hammy
/
catppuccin
mirror of https://github.com/sgoudham/catppuccin.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

docs: relative file paths

Browse Source
pull/1/head
Andreas Grafen 2 years ago
parent 18cdc235c2
commit 488a2430ce
No known key found for this signature in database
GPG Key ID: 3285EA6DB8CDE2D1
1 changed files with 208 additions and 208 deletions
Show Stats Download Patch File Download Diff File

416
docs/style-guide.md
Unescape Escape View File

@ -27,16 +27,16 @@ These are general use cases for most of the palette relevant for user interfaces
<td>Main Canvas, Page Background</td> <td>Main Canvas, Page Background</td>
<td>Base</td> <td>Base</td>
<td> <td>
<img src="assets/palette/circles/latte_base.png" height="16" width="16"/> <img src="../assets/palette/circles/latte_base.png" height="16" width="16"/>
</td> </td>
<td> <td>
<img src="assets/palette/circles/frappe_base.png" height="16" width="16"/> <img src="../assets/palette/circles/frappe_base.png" height="16" width="16"/>
</td> </td>
<td> <td>
<img src="assets/palette/circles/macchiato_base.png" height="16" width="16"/> <img src="../assets/palette/circles/macchiato_base.png" height="16" width="16"/>
</td> </td>
<td> <td>
<img src="assets/palette/circles/mocha_base.png" height="16" width="16"/> <img src="../assets/palette/circles/mocha_base.png" height="16" width="16"/>
</td> </td>
</tr> </tr>
<tr> <tr>
@ -47,20 +47,20 @@ These are general use cases for most of the palette relevant for user interfaces
Mantle Mantle
</td> </td>
<td> <td>
<img src="assets/palette/circles/latte_crust.png" height="16" width="16"/><br> <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"/> <img src="../assets/palette/circles/latte_mantle.png" height="16" width="16"/>
</td> </td>
<td> <td>
<img src="assets/palette/circles/frappe_crust.png" height="16" width="16"/><br> <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"/> <img src="../assets/palette/circles/frappe_mantle.png" height="16" width="16"/>
</td> </td>
<td> <td>
<img src="assets/palette/circles/macchiato_crust.png" height="16" width="16"/><br> <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"/> <img src="../assets/palette/circles/macchiato_mantle.png" height="16" width="16"/>
</td> </td>
<td> <td>
<img src="assets/palette/circles/mocha_crust.png" height="16" width="16"/><br> <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"/> <img src="../assets/palette/circles/mocha_mantle.png" height="16" width="16"/>
</td> </td>
</tr> </tr>
<tr> <tr>
@ -72,24 +72,24 @@ These are general use cases for most of the palette relevant for user interfaces
Surface 2 Surface 2
</td> </td>
<td> <td>
<img src="assets/palette/circles/latte_surface0.png" height="16" width="16"/><br> <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_surface1.png" height="16" width="16"/><br>
<img src="assets/palette/circles/latte_surface2.png" height="16" width="16"/> <img src="../assets/palette/circles/latte_surface2.png" height="16" width="16"/>
</td> </td>
<td> <td>
<img src="assets/palette/circles/frappe_surface0.png" height="16" width="16"/><br> <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_surface1.png" height="16" width="16"/><br>
<img src="assets/palette/circles/frappe_surface2.png" height="16" width="16"/> <img src="../assets/palette/circles/frappe_surface2.png" height="16" width="16"/>
</td> </td>
<td> <td>
<img src="assets/palette/circles/macchiato_surface0.png" height="16" width="16"/><br> <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_surface1.png" height="16" width="16"/><br>
<img src="assets/palette/circles/macchiato_surface2.png" height="16" width="16"/> <img src="../assets/palette/circles/macchiato_surface2.png" height="16" width="16"/>
</td> </td>
<td> <td>
<img src="assets/palette/circles/mocha_surface0.png" height="16" width="16"/><br> <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_surface1.png" height="16" width="16"/><br>
<img src="assets/palette/circles/mocha_surface2.png" height="16" width="16"/> <img src="../assets/palette/circles/mocha_surface2.png" height="16" width="16"/>
</td> </td>
</tr> </tr>
<tr> <tr>
@ -101,24 +101,24 @@ These are general use cases for most of the palette relevant for user interfaces
Overlay 2 Overlay 2
</td> </td>
<td> <td>
<img src="assets/palette/circles/latte_overlay0.png" height="16" width="16"/><br> <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_overlay1.png" height="16" width="16"/><br>
<img src="assets/palette/circles/latte_overlay2.png" height="16" width="16"/> <img src="../assets/palette/circles/latte_overlay2.png" height="16" width="16"/>
</td> </td>
<td> <td>
<img src="assets/palette/circles/frappe_overlay0.png" height="16" width="16"/><br> <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_overlay1.png" height="16" width="16"/><br>
<img src="assets/palette/circles/frappe_overlay2.png" height="16" width="16"/> <img src="../assets/palette/circles/frappe_overlay2.png" height="16" width="16"/>
</td> </td>
<td> <td>
<img src="assets/palette/circles/macchiato_overlay0.png" height="16" width="16"/><br> <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_overlay1.png" height="16" width="16"/><br>
<img src="assets/palette/circles/macchiato_overlay2.png" height="16" width="16"/> <img src="../assets/palette/circles/macchiato_overlay2.png" height="16" width="16"/>
</td> </td>
<td> <td>
<img src="assets/palette/circles/mocha_overlay0.png" height="16" width="16"/><br> <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_overlay1.png" height="16" width="16"/><br>
<img src="assets/palette/circles/mocha_overlay2.png" height="16" width="16"/> <img src="../assets/palette/circles/mocha_overlay2.png" height="16" width="16"/>
</td> </td>
</tr> </tr>
<tr> <tr>
@ -134,16 +134,16 @@ These are general use cases for most of the palette relevant for user interfaces
<td>Main Text, Body Copy</td> <td>Main Text, Body Copy</td>
<td>Text</td> <td>Text</td>
<td> <td>
<img src="assets/palette/circles/latte_text.png" height="16" width="16"/> <img src="../assets/palette/circles/latte_text.png" height="16" width="16"/>
</td> </td>
<td> <td>
<img src="assets/palette/circles/frappe_text.png" height="16" width="16"/> <img src="../assets/palette/circles/frappe_text.png" height="16" width="16"/>
</td> </td>
<td> <td>
<img src="assets/palette/circles/macchiato_text.png" height="16" width="16"/> <img src="../assets/palette/circles/macchiato_text.png" height="16" width="16"/>
</td> </td>
<td> <td>
<img src="assets/palette/circles/mocha_text.png" height="16" width="16"/> <img src="../assets/palette/circles/mocha_text.png" height="16" width="16"/>
</td> </td>
</tr> </tr>
<tr> <tr>
@ -154,20 +154,20 @@ These are general use cases for most of the palette relevant for user interfaces
Subtext 1 Subtext 1
</td> </td>
<td> <td>
<img src="assets/palette/circles/latte_subtext0.png" height="16" width="16"/><br> <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"/> <img src="../assets/palette/circles/latte_subtext1.png" height="16" width="16"/>
</td> </td>
<td> <td>
<img src="assets/palette/circles/frappe_subtext0.png" height="16" width="16"/><br> <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"/> <img src="../assets/palette/circles/frappe_subtext1.png" height="16" width="16"/>
</td> </td>
<td> <td>
<img src="assets/palette/circles/macchiato_subtext0.png" height="16" width="16"/><br> <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"/> <img src="../assets/palette/circles/macchiato_subtext1.png" height="16" width="16"/>
</td> </td>
<td> <td>
<img src="assets/palette/circles/mocha_subtext0.png" height="16" width="16"/><br> <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"/> <img src="../assets/palette/circles/mocha_subtext1.png" height="16" width="16"/>
</td> </td>
</tr> </tr>
<tr> <tr>
@ -175,16 +175,16 @@ These are general use cases for most of the palette relevant for user interfaces
<td>Comments, Footnotes, Inactive Text</td> <td>Comments, Footnotes, Inactive Text</td>
<td>Overlay 1</td> <td>Overlay 1</td>
<td> <td>
<img src="assets/palette/circles/latte_overlay1.png" height="16" width="16"/> <img src="../assets/palette/circles/latte_overlay1.png" height="16" width="16"/>
</td> </td>
<td> <td>
<img src="assets/palette/circles/frappe_overlay1.png" height="16" width="16"/> <img src="../assets/palette/circles/frappe_overlay1.png" height="16" width="16"/>
</td> </td>
<td> <td>
<img src="assets/palette/circles/macchiato_overlay1.png" height="16" width="16"/> <img src="../assets/palette/circles/macchiato_overlay1.png" height="16" width="16"/>
</td> </td>
<td> <td>
<img src="assets/palette/circles/mocha_overlay1.png" height="16" width="16"/> <img src="../assets/palette/circles/mocha_overlay1.png" height="16" width="16"/>
</td> </td>
</tr> </tr>
<tr> <tr>
@ -204,32 +204,32 @@ These are general use cases for most of the palette relevant for user interfaces
Blue<br> Blue<br>
</td> </td>
<td> <td>
<img src="assets/palette/circles/latte_rosewater.png" height="16" width="16"/><br> <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_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_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_maroon.png" height="16" width="16"/><br>
<img src="assets/palette/circles/latte_blue.png" height="16" width="16"/> <img src="../assets/palette/circles/latte_blue.png" height="16" width="16"/>
</td> </td>
<td> <td>
<img src="assets/palette/circles/frappe_rosewater.png" height="16" width="16"/><br> <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_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_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_maroon.png" height="16" width="16"/><br>
<img src="assets/palette/circles/frappe_blue.png" height="16" width="16"/> <img src="../assets/palette/circles/frappe_blue.png" height="16" width="16"/>
</td> </td>
<td> <td>
<img src="assets/palette/circles/macchiato_rosewater.png" height="16" width="16"/><br> <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_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_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_maroon.png" height="16" width="16"/><br>
<img src="assets/palette/circles/macchiato_blue.png" height="16" width="16"/> <img src="../assets/palette/circles/macchiato_blue.png" height="16" width="16"/>
</td> </td>
<td> <td>
<img src="assets/palette/circles/mocha_rosewater.png" height="16" width="16"/><br> <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_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_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_maroon.png" height="16" width="16"/><br>
<img src="assets/palette/circles/mocha_blue.png" height="16" width="16"/> <img src="../assets/palette/circles/mocha_blue.png" height="16" width="16"/>
</td> </td>
</tr> </tr>
</table> </table>
@ -256,160 +256,160 @@ These are general use cases for most of the palette relevant for user interfaces
<!-- ## Background ## --> <!-- ## Background ## -->
<td>Background</td> <td>Background</td>
<!-- Latte --> <!-- Latte -->
<td><img src="assets/palette/circles/latte_base.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/latte_base.png" height="16" width="16"/></td>
<td>Base</td> <td>Base</td>
<!-- Frappé --> <!-- Frappé -->
<td><img src="assets/palette/circles/frappe_base.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/frappe_base.png" height="16" width="16"/></td>
<td>Base</td> <td>Base</td>
<!-- Macchiato --> <!-- Macchiato -->
<td><img src="assets/palette/circles/macchiato_base.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/macchiato_base.png" height="16" width="16"/></td>
<td>Base</td> <td>Base</td>
<!-- Mocha --> <!-- Mocha -->
<td><img src="assets/palette/circles/mocha_base.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/mocha_base.png" height="16" width="16"/></td>
<td>Base</td> <td>Base</td>
</tr> </tr>
<tr> <tr>
<!-- ## Text ## --> <!-- ## Text ## -->
<td>Main Text</td> <td>Main Text</td>
<!-- Latte --> <!-- Latte -->
<td><img src="assets/palette/circles/latte_text.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/latte_text.png" height="16" width="16"/></td>
<td>Text</td> <td>Text</td>
<!-- Frappé --> <!-- Frappé -->
<td><img src="assets/palette/circles/frappe_text.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/frappe_text.png" height="16" width="16"/></td>
<td>Text</td> <td>Text</td>
<!-- Macchiato --> <!-- Macchiato -->
<td><img src="assets/palette/circles/macchiato_text.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/macchiato_text.png" height="16" width="16"/></td>
<td>Text</td> <td>Text</td>
<!-- Mocha --> <!-- Mocha -->
<td><img src="assets/palette/circles/mocha_text.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/mocha_text.png" height="16" width="16"/></td>
<td>Text</td> <td>Text</td>
</tr> </tr>
<tr> <tr>
<!-- ## URLs ## --> <!-- ## URLs ## -->
<td>URLs</td> <td>URLs</td>
<!-- Latte --> <!-- Latte -->
<td><img src="assets/palette/circles/latte_rosewater.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/latte_rosewater.png" height="16" width="16"/></td>
<td>Rosewater</td> <td>Rosewater</td>
<!-- Frappé --> <!-- Frappé -->
<td><img src="assets/palette/circles/frappe_rosewater.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/frappe_rosewater.png" height="16" width="16"/></td>
<td>Rosewater</td> <td>Rosewater</td>
<!-- Macchiato --> <!-- Macchiato -->
<td><img src="assets/palette/circles/macchiato_rosewater.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/macchiato_rosewater.png" height="16" width="16"/></td>
<td>Rosewater</td> <td>Rosewater</td>
<!-- Mocha --> <!-- Mocha -->
<td><img src="assets/palette/circles/mocha_rosewater.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/mocha_rosewater.png" height="16" width="16"/></td>
<td>Rosewater</td> <td>Rosewater</td>
</tr> </tr>
<tr> <tr>
<!-- ## Selection ## --> <!-- ## Selection ## -->
<td>Selection</td> <td>Selection</td>
<!-- Latte --> <!-- Latte -->
<td><img src="assets/palette/circles/latte_surface2.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/latte_surface2.png" height="16" width="16"/></td>
<td>Surface 2</td> <td>Surface 2</td>
<!-- Frappé --> <!-- Frappé -->
<td><img src="assets/palette/circles/frappe_surface2.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/frappe_surface2.png" height="16" width="16"/></td>
<td>Surface 2</td> <td>Surface 2</td>
<!-- Macchiato --> <!-- Macchiato -->
<td><img src="assets/palette/circles/macchiato_surface2.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/macchiato_surface2.png" height="16" width="16"/></td>
<td>Surface 2</td> <td>Surface 2</td>
<!-- Mocha --> <!-- Mocha -->
<td><img src="assets/palette/circles/mocha_surface2.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/mocha_surface2.png" height="16" width="16"/></td>
<td>Surface 2</td> <td>Surface 2</td>
</tr> </tr>
<tr> <tr>
<!-- ## Selection Text ## --> <!-- ## Selection Text ## -->
<td>Selection Text</td> <td>Selection Text</td>
<!-- Latte --> <!-- Latte -->
<td><img src="assets/palette/circles/latte_text.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/latte_text.png" height="16" width="16"/></td>
<td>Text</td> <td>Text</td>
<!-- Frappé --> <!-- Frappé -->
<td><img src="assets/palette/circles/frappe_text.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/frappe_text.png" height="16" width="16"/></td>
<td>Text</td> <td>Text</td>
<!-- Macchiato --> <!-- Macchiato -->
<td><img src="assets/palette/circles/macchiato_text.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/macchiato_text.png" height="16" width="16"/></td>
<td>Text</td> <td>Text</td>
<!-- Mocha --> <!-- Mocha -->
<td><img src="assets/palette/circles/mocha_text.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/mocha_text.png" height="16" width="16"/></td>
<td>Text</td> <td>Text</td>
</tr> </tr>
<tr> <tr>
<!-- ## Cursor ## --> <!-- ## Cursor ## -->
<td>Cursor</td> <td>Cursor</td>
<!-- Latte --> <!-- Latte -->
<td><img src="assets/palette/circles/latte_rosewater.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/latte_rosewater.png" height="16" width="16"/></td>
<td>Rosewater</td> <td>Rosewater</td>
<!-- Frappé --> <!-- Frappé -->
<td><img src="assets/palette/circles/frappe_rosewater.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/frappe_rosewater.png" height="16" width="16"/></td>
<td>Rosewater</td> <td>Rosewater</td>
<!-- Macchiato --> <!-- Macchiato -->
<td><img src="assets/palette/circles/macchiato_rosewater.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/macchiato_rosewater.png" height="16" width="16"/></td>
<td>Rosewater</td> <td>Rosewater</td>
<!-- Mocha --> <!-- Mocha -->
<td><img src="assets/palette/circles/mocha_rosewater.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/mocha_rosewater.png" height="16" width="16"/></td>
<td>Rosewater</td> <td>Rosewater</td>
</tr> </tr>
<tr> <tr>
<!-- ## Cursor Text ## --> <!-- ## Cursor Text ## -->
<td>Cursor Text</td> <td>Cursor Text</td>
<!-- Latte --> <!-- Latte -->
<td><img src="assets/palette/circles/latte_base.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/latte_base.png" height="16" width="16"/></td>
<td>Base</td> <td>Base</td>
<!-- Frappé --> <!-- Frappé -->
<td><img src="assets/palette/circles/frappe_crust.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/frappe_crust.png" height="16" width="16"/></td>
<td>Crust</td> <td>Crust</td>
<!-- Macchiato --> <!-- Macchiato -->
<td><img src="assets/palette/circles/macchiato_crust.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/macchiato_crust.png" height="16" width="16"/></td>
<td>Crust</td> <td>Crust</td>
<!-- Mocha --> <!-- Mocha -->
<td><img src="assets/palette/circles/mocha_crust.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/mocha_crust.png" height="16" width="16"/></td>
<td>Crust</td> <td>Crust</td>
</tr> </tr>
<tr> <tr>
<!-- ## Active Border ## --> <!-- ## Active Border ## -->
<td>Active Border</td> <td>Active Border</td>
<!-- Latte --> <!-- Latte -->
<td><img src="assets/palette/circles/latte_lavender.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/latte_lavender.png" height="16" width="16"/></td>
<td>Lavender</td> <td>Lavender</td>
<!-- Frappé --> <!-- Frappé -->
<td><img src="assets/palette/circles/frappe_lavender.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/frappe_lavender.png" height="16" width="16"/></td>
<td>Lavender</td> <td>Lavender</td>
<!-- Macchiato --> <!-- Macchiato -->
<td><img src="assets/palette/circles/macchiato_lavender.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/macchiato_lavender.png" height="16" width="16"/></td>
<td>Lavender</td> <td>Lavender</td>
<!-- Mocha --> <!-- Mocha -->
<td><img src="assets/palette/circles/mocha_lavender.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/mocha_lavender.png" height="16" width="16"/></td>
<td>Lavender</td> <td>Lavender</td>
</tr> </tr>
<tr> <tr>
<!-- ## Inactive Border ## --> <!-- ## Inactive Border ## -->
<td>Inactive Border</td> <td>Inactive Border</td>
<!-- Latte --> <!-- Latte -->
<td><img src="assets/palette/circles/latte_overlay0.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/latte_overlay0.png" height="16" width="16"/></td>
<td>Overlay 0</td> <td>Overlay 0</td>
<!-- Frappé --> <!-- Frappé -->
<td><img src="assets/palette/circles/frappe_overlay0.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/frappe_overlay0.png" height="16" width="16"/></td>
<td>Overlay 0</td> <td>Overlay 0</td>
<!-- Macchiato --> <!-- Macchiato -->
<td><img src="assets/palette/circles/macchiato_overlay0.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/macchiato_overlay0.png" height="16" width="16"/></td>
<td>Overlay 0</td> <td>Overlay 0</td>
<!-- Mocha --> <!-- Mocha -->
<td><img src="assets/palette/circles/mocha_overlay0.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/mocha_overlay0.png" height="16" width="16"/></td>
<td>Overlay 0</td> <td>Overlay 0</td>
</tr> </tr>
<tr> <tr>
<!-- ## Bell Border ## --> <!-- ## Bell Border ## -->
<td>Bell Border</td> <td>Bell Border</td>
<!-- Latte --> <!-- Latte -->
<td><img src="assets/palette/circles/latte_yellow.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/latte_yellow.png" height="16" width="16"/></td>
<td>Yellow</td> <td>Yellow</td>
<!-- Frappé --> <!-- Frappé -->
<td><img src="assets/palette/circles/frappe_yellow.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/frappe_yellow.png" height="16" width="16"/></td>
<td>Yellow</td> <td>Yellow</td>
<!-- Macchiato --> <!-- Macchiato -->
<td><img src="assets/palette/circles/macchiato_yellow.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/macchiato_yellow.png" height="16" width="16"/></td>
<td>Yellow</td> <td>Yellow</td>
<!-- Mocha --> <!-- Mocha -->
<td><img src="assets/palette/circles/mocha_yellow.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/mocha_yellow.png" height="16" width="16"/></td>
<td>Yellow</td> <td>Yellow</td>
</tr> </tr>
<!------------------ <!------------------
@ -429,128 +429,128 @@ These are general use cases for most of the palette relevant for user interfaces
<!-- ## Black ## --> <!-- ## Black ## -->
<td>color0</td> <td>color0</td>
<!-- Latte --> <!-- Latte -->
<td><img src="assets/palette/circles/latte_subtext1.png" height="16" width="16"/> <td><img src="../assets/palette/circles/latte_subtext1.png" height="16" width="16"/>
</td><td>Subtext 1</td> </td><td>Subtext 1</td>
<!-- Frappé --> <!-- Frappé -->
<td><img src="assets/palette/circles/frappe_surface1.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/frappe_surface1.png" height="16" width="16"/></td>
<td>Surface 1</td> <td>Surface 1</td>
<!-- Macchiato --> <!-- Macchiato -->
<td><img src="assets/palette/circles/macchiato_surface1.png" height="16" width="16"/> <td><img src="../assets/palette/circles/macchiato_surface1.png" height="16" width="16"/>
</td><td>Surface 1</td> </td><td>Surface 1</td>
<!-- Mocha --> <!-- Mocha -->
<td><img src="assets/palette/circles/mocha_surface1.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/mocha_surface1.png" height="16" width="16"/></td>
<td>Surface 1</td> <td>Surface 1</td>
</tr> </tr>
<tr> <tr>
<!-- ## Red ## --> <!-- ## Red ## -->
<td>color1</td> <td>color1</td>
<!-- Latte --> <!-- Latte -->
<td><img src="assets/palette/circles/latte_red.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/latte_red.png" height="16" width="16"/></td>
<td>Red</td> <td>Red</td>
<!-- Frappé --> <!-- Frappé -->
<td><img src="assets/palette/circles/frappe_red.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/frappe_red.png" height="16" width="16"/></td>
<td>Red</td> <td>Red</td>
<!-- Macchiato --> <!-- Macchiato -->
<td><img src="assets/palette/circles/macchiato_red.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/macchiato_red.png" height="16" width="16"/></td>
<td>Red</td> <td>Red</td>
<!-- Mocha --> <!-- Mocha -->
<td><img src="assets/palette/circles/mocha_red.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/mocha_red.png" height="16" width="16"/></td>
<td>Red</td> <td>Red</td>
</tr> </tr>
<tr> <tr>
<!-- ## Green ## --> <!-- ## Green ## -->
<td>color2</td> <td>color2</td>
<!-- Latte --> <!-- Latte -->
<td><img src="assets/palette/circles/latte_green.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/latte_green.png" height="16" width="16"/></td>
<td>Green</td> <td>Green</td>
<!-- Frappé --> <!-- Frappé -->
<td><img src="assets/palette/circles/frappe_green.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/frappe_green.png" height="16" width="16"/></td>
<td>Green</td> <td>Green</td>
<!-- Macchiato --> <!-- Macchiato -->
<td><img src="assets/palette/circles/macchiato_green.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/macchiato_green.png" height="16" width="16"/></td>
<td>Green</td> <td>Green</td>
<!-- Mocha --> <!-- Mocha -->
<td><img src="assets/palette/circles/mocha_green.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/mocha_green.png" height="16" width="16"/></td>
<td>Green</td> <td>Green</td>
</tr> </tr>
<tr> <tr>
<!-- ## Yellow ## --> <!-- ## Yellow ## -->
<td>color3</td> <td>color3</td>
<!-- Latte --> <!-- Latte -->
<td><img src="assets/palette/circles/latte_yellow.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/latte_yellow.png" height="16" width="16"/></td>
<td>Yellow</td> <td>Yellow</td>
<!-- Frappé --> <!-- Frappé -->
<td><img src="assets/palette/circles/frappe_yellow.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/frappe_yellow.png" height="16" width="16"/></td>
<td>Yellow</td> <td>Yellow</td>
<!-- Macchiato --> <!-- Macchiato -->
<td><img src="assets/palette/circles/macchiato_yellow.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/macchiato_yellow.png" height="16" width="16"/></td>
<td>Yellow</td> <td>Yellow</td>
<!-- Mocha --> <!-- Mocha -->
<td><img src="assets/palette/circles/mocha_yellow.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/mocha_yellow.png" height="16" width="16"/></td>
<td>Yellow</td> <td>Yellow</td>
</tr> </tr>
<tr> <tr>
<!-- ## Blue ## --> <!-- ## Blue ## -->
<td>color4</td> <td>color4</td>
<!-- Latte --> <!-- Latte -->
<td><img src="assets/palette/circles/latte_blue.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/latte_blue.png" height="16" width="16"/></td>
<td>Blue</td> <td>Blue</td>
<!-- Frappé --> <!-- Frappé -->
<td><img src="assets/palette/circles/frappe_blue.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/frappe_blue.png" height="16" width="16"/></td>
<td>Blue</td> <td>Blue</td>
<!-- Macchiato --> <!-- Macchiato -->
<td><img src="assets/palette/circles/macchiato_blue.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/macchiato_blue.png" height="16" width="16"/></td>
<td>Blue</td> <td>Blue</td>
<!-- Mocha --> <!-- Mocha -->
<td><img src="assets/palette/circles/mocha_blue.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/mocha_blue.png" height="16" width="16"/></td>
<td>Blue</td> <td>Blue</td>
</tr> </tr>
<tr> <tr>
<!-- ## Magenta ## --> <!-- ## Magenta ## -->
<td>color5</td> <td>color5</td>
<!-- Latte --> <!-- Latte -->
<td><img src="assets/palette/circles/latte_pink.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/latte_pink.png" height="16" width="16"/></td>
<td>Pink</td> <td>Pink</td>
<!-- Frappé --> <!-- Frappé -->
<td><img src="assets/palette/circles/frappe_pink.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/frappe_pink.png" height="16" width="16"/></td>
<td>Pink</td> <td>Pink</td>
<!-- Macchiato --> <!-- Macchiato -->
<td><img src="assets/palette/circles/macchiato_pink.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/macchiato_pink.png" height="16" width="16"/></td>
<td>Pink</td> <td>Pink</td>
<!-- Mocha --> <!-- Mocha -->
<td><img src="assets/palette/circles/mocha_pink.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/mocha_pink.png" height="16" width="16"/></td>
<td>Pink</td> <td>Pink</td>
</tr> </tr>
<tr> <tr>
<!-- ## Cyan ## --> <!-- ## Cyan ## -->
<td>color6</td> <td>color6</td>
<!-- Latte --> <!-- Latte -->
<td><img src="assets/palette/circles/latte_teal.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/latte_teal.png" height="16" width="16"/></td>
<td>Teal</td> <td>Teal</td>
<!-- Frappé --> <!-- Frappé -->
<td><img src="assets/palette/circles/frappe_teal.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/frappe_teal.png" height="16" width="16"/></td>
<td>Teal</td> <td>Teal</td>
<!-- Macchiato --> <!-- Macchiato -->
<td><img src="assets/palette/circles/macchiato_teal.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/macchiato_teal.png" height="16" width="16"/></td>
<td>Teal</td> <td>Teal</td>
<!-- Mocha --> <!-- Mocha -->
<td><img src="assets/palette/circles/mocha_teal.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/mocha_teal.png" height="16" width="16"/></td>
<td>Teal</td> <td>Teal</td>
</tr> </tr>
<tr> <tr>
<!-- ## White ## --> <!-- ## White ## -->
<td>color7</td> <td>color7</td>
<!-- Latte --> <!-- Latte -->
<td><img src="assets/palette/circles/latte_surface2.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/latte_surface2.png" height="16" width="16"/></td>
<td>Surface 2</td> <td>Surface 2</td>
<!-- Frappé --> <!-- Frappé -->
<td><img src="assets/palette/circles/frappe_subtext1.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/frappe_subtext1.png" height="16" width="16"/></td>
<td>Subtext 1</td> <td>Subtext 1</td>
<!-- Macchiato --> <!-- Macchiato -->
<td><img src="assets/palette/circles/macchiato_subtext1.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/macchiato_subtext1.png" height="16" width="16"/></td>
<td>Subtext 1</td> <td>Subtext 1</td>
<!-- Mocha --> <!-- Mocha -->
<td><img src="assets/palette/circles/mocha_subtext1.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/mocha_subtext1.png" height="16" width="16"/></td>
<td>Subtext 1</td> <td>Subtext 1</td>
</tr> </tr>
<!--------------- <!---------------
@ -570,128 +570,128 @@ These are general use cases for most of the palette relevant for user interfaces
<!-- ## Black ## --> <!-- ## Black ## -->
<td>color8</td> <td>color8</td>
<!-- Latte --> <!-- Latte -->
<td><img src="assets/palette/circles/latte_subtext0.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/latte_subtext0.png" height="16" width="16"/></td>
<td>Subtext 0</td> <td>Subtext 0</td>
<!-- Frappé --> <!-- Frappé -->
<td><img src="assets/palette/circles/frappe_surface2.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/frappe_surface2.png" height="16" width="16"/></td>
<td>Surface 2</td> <td>Surface 2</td>
<!-- Macchiato --> <!-- Macchiato -->
<td><img src="assets/palette/circles/macchiato_surface2.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/macchiato_surface2.png" height="16" width="16"/></td>
<td>Surface 2</td> <td>Surface 2</td>
<!-- Mocha --> <!-- Mocha -->
<td><img src="assets/palette/circles/mocha_surface2.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/mocha_surface2.png" height="16" width="16"/></td>
<td>Surface 2</td> <td>Surface 2</td>
</tr> </tr>
<tr> <tr>
<!-- ## Red ## --> <!-- ## Red ## -->
<td>color9</td> <td>color9</td>
<!-- Latte --> <!-- Latte -->
<td><img src="assets/palette/circles/latte_red.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/latte_red.png" height="16" width="16"/></td>
<td>Red</td> <td>Red</td>
<!-- Frappé --> <!-- Frappé -->
<td><img src="assets/palette/circles/frappe_red.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/frappe_red.png" height="16" width="16"/></td>
<td>Red</td> <td>Red</td>
<!-- Macchiato --> <!-- Macchiato -->
<td><img src="assets/palette/circles/macchiato_red.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/macchiato_red.png" height="16" width="16"/></td>
<td>Red</td> <td>Red</td>
<!-- Mocha --> <!-- Mocha -->
<td><img src="assets/palette/circles/mocha_red.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/mocha_red.png" height="16" width="16"/></td>
<td>Red</td> <td>Red</td>
</tr> </tr>
<tr> <tr>
<!-- ## Green ## --> <!-- ## Green ## -->
<td>color10</td> <td>color10</td>
<!-- Latte --> <!-- Latte -->
<td><img src="assets/palette/circles/latte_green.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/latte_green.png" height="16" width="16"/></td>
<td>Green</td> <td>Green</td>
<!-- Frappé --> <!-- Frappé -->
<td><img src="assets/palette/circles/frappe_green.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/frappe_green.png" height="16" width="16"/></td>
<td>Green</td> <td>Green</td>
<!-- Macchiato --> <!-- Macchiato -->
<td><img src="assets/palette/circles/macchiato_green.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/macchiato_green.png" height="16" width="16"/></td>
<td>Green</td> <td>Green</td>
<!-- Mocha --> <!-- Mocha -->
<td><img src="assets/palette/circles/mocha_green.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/mocha_green.png" height="16" width="16"/></td>
<td>Green</td> <td>Green</td>
</tr> </tr>
<tr> <tr>
<!-- ## Yellow ## --> <!-- ## Yellow ## -->
<td>color11</td> <td>color11</td>
<!-- Latte --> <!-- Latte -->
<td><img src="assets/palette/circles/latte_yellow.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/latte_yellow.png" height="16" width="16"/></td>
<td>Yellow</td> <td>Yellow</td>
<!-- Frappé --> <!-- Frappé -->
<td><img src="assets/palette/circles/frappe_yellow.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/frappe_yellow.png" height="16" width="16"/></td>
<td>Yellow</td> <td>Yellow</td>
<!-- Macchiato --> <!-- Macchiato -->
<td><img src="assets/palette/circles/macchiato_yellow.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/macchiato_yellow.png" height="16" width="16"/></td>
<td>Yellow</td> <td>Yellow</td>
<!-- Mocha --> <!-- Mocha -->
<td><img src="assets/palette/circles/mocha_yellow.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/mocha_yellow.png" height="16" width="16"/></td>
<td>Yellow</td> <td>Yellow</td>
</tr> </tr>
<tr> <tr>
<!-- ## Blue ## --> <!-- ## Blue ## -->
<td>color12</td> <td>color12</td>
<!-- Latte --> <!-- Latte -->
<td><img src="assets/palette/circles/latte_blue.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/latte_blue.png" height="16" width="16"/></td>
<td>Blue</td> <td>Blue</td>
<!-- Frappé --> <!-- Frappé -->
<td><img src="assets/palette/circles/frappe_blue.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/frappe_blue.png" height="16" width="16"/></td>
<td>Blue</td> <td>Blue</td>
<!-- Macchiato --> <!-- Macchiato -->
<td><img src="assets/palette/circles/macchiato_blue.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/macchiato_blue.png" height="16" width="16"/></td>
<td>Blue</td> <td>Blue</td>
<!-- Mocha --> <!-- Mocha -->
<td><img src="assets/palette/circles/mocha_blue.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/mocha_blue.png" height="16" width="16"/></td>
<td>Blue</td> <td>Blue</td>
</tr> </tr>
<tr> <tr>
<!-- ## Magenta ## --> <!-- ## Magenta ## -->
<td>color13</td> <td>color13</td>
<!-- Latte --> <!-- Latte -->
<td><img src="assets/palette/circles/latte_pink.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/latte_pink.png" height="16" width="16"/></td>
<td>Pink</td> <td>Pink</td>
<!-- Frappé --> <!-- Frappé -->
<td><img src="assets/palette/circles/frappe_pink.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/frappe_pink.png" height="16" width="16"/></td>
<td>Pink</td> <td>Pink</td>
<!-- Macchiato --> <!-- Macchiato -->
<td><img src="assets/palette/circles/macchiato_pink.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/macchiato_pink.png" height="16" width="16"/></td>
<td>Pink</td> <td>Pink</td>
<!-- Mocha --> <!-- Mocha -->
<td><img src="assets/palette/circles/mocha_pink.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/mocha_pink.png" height="16" width="16"/></td>
<td>Pink</td> <td>Pink</td>
</tr> </tr>
<tr> <tr>
<!-- ## Cyan ## --> <!-- ## Cyan ## -->
<td>color14</td> <td>color14</td>
<!-- Latte --> <!-- Latte -->
<td><img src="assets/palette/circles/latte_teal.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/latte_teal.png" height="16" width="16"/></td>
<td>Teal</td> <td>Teal</td>
<!-- Frappé --> <!-- Frappé -->
<td><img src="assets/palette/circles/frappe_teal.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/frappe_teal.png" height="16" width="16"/></td>
<td>Teal</td> <td>Teal</td>
<!-- Macchiato --> <!-- Macchiato -->
<td><img src="assets/palette/circles/macchiato_teal.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/macchiato_teal.png" height="16" width="16"/></td>
<td>Teal</td> <td>Teal</td>
<!-- Mocha --> <!-- Mocha -->
<td><img src="assets/palette/circles/mocha_teal.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/mocha_teal.png" height="16" width="16"/></td>
<td>Teal</td> <td>Teal</td>
</tr> </tr>
<tr> <tr>
<!-- ## White ## --> <!-- ## White ## -->
<td>color15</td> <td>color15</td>
<!-- Latte --> <!-- Latte -->
<td><img src="assets/palette/circles/latte_surface1.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/latte_surface1.png" height="16" width="16"/></td>
<td>Surface 1</td> <td>Surface 1</td>
<!-- Frappé --> <!-- Frappé -->
<td><img src="assets/palette/circles/frappe_subtext0.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/frappe_subtext0.png" height="16" width="16"/></td>
<td>Subtext 0</td> <td>Subtext 0</td>
<!-- Macchiato --> <!-- Macchiato -->
<td><img src="assets/palette/circles/macchiato_subtext0.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/macchiato_subtext0.png" height="16" width="16"/></td>
<td>Subtext 0</td> <td>Subtext 0</td>
<!-- Mocha --> <!-- Mocha -->
<td><img src="assets/palette/circles/mocha_subtext0.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/mocha_subtext0.png" height="16" width="16"/></td>
<td>Subtext 0</td> <td>Subtext 0</td>
</tr> </tr>
<!------------------- <!-------------------
@ -711,32 +711,32 @@ These are general use cases for most of the palette relevant for user interfaces
<!-- ## Peach ## --> <!-- ## Peach ## -->
<td>color16</td> <td>color16</td>
<!-- Latte --> <!-- Latte -->
<td><img src="assets/palette/circles/latte_peach.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/latte_peach.png" height="16" width="16"/></td>
<td>Peach</td> <td>Peach</td>
<!-- Frappé --> <!-- Frappé -->
<td><img src="assets/palette/circles/frappe_peach.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/frappe_peach.png" height="16" width="16"/></td>
<td>Peach</td> <td>Peach</td>
<!-- Macchiato --> <!-- Macchiato -->
<td><img src="assets/palette/circles/macchiato_peach.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/macchiato_peach.png" height="16" width="16"/></td>
<td>Peach</td> <td>Peach</td>
<!-- Mocha --> <!-- Mocha -->
<td><img src="assets/palette/circles/mocha_peach.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/mocha_peach.png" height="16" width="16"/></td>
<td>Peach</td> <td>Peach</td>
</tr> </tr>
<tr> <tr>
<!-- ## Rosewater ## --> <!-- ## Rosewater ## -->
<td>color17</td> <td>color17</td>
<!-- Latte --> <!-- Latte -->
<td><img src="assets/palette/circles/latte_rosewater.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/latte_rosewater.png" height="16" width="16"/></td>
<td>Rosewater</td> <td>Rosewater</td>
<!-- Frappé --> <!-- Frappé -->
<td><img src="assets/palette/circles/frappe_rosewater.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/frappe_rosewater.png" height="16" width="16"/></td>
<td>Rosewater</td> <td>Rosewater</td>
<!-- Macchiato --> <!-- Macchiato -->
<td><img src="assets/palette/circles/macchiato_rosewater.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/macchiato_rosewater.png" height="16" width="16"/></td>
<td>Rosewater</td> <td>Rosewater</td>
<!-- Mocha --> <!-- Mocha -->
<td><img src="assets/palette/circles/mocha_rosewater.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/mocha_rosewater.png" height="16" width="16"/></td>
<td>Rosewater</td> <td>Rosewater</td>
</tr> </tr>
<!----------------- <!-----------------
@ -756,96 +756,96 @@ These are general use cases for most of the palette relevant for user interfaces
<!-- ## Mark 1 ## --> <!-- ## Mark 1 ## -->
<td>Mark 1</td> <td>Mark 1</td>
<!-- Latte --> <!-- Latte -->
<td><img src="assets/palette/circles/latte_lavender.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/latte_lavender.png" height="16" width="16"/></td>
<td>Lavender</td> <td>Lavender</td>
<!-- Frappé --> <!-- Frappé -->
<td><img src="assets/palette/circles/frappe_lavender.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/frappe_lavender.png" height="16" width="16"/></td>
<td>Lavender</td> <td>Lavender</td>
<!-- Macchiato --> <!-- Macchiato -->
<td><img src="assets/palette/circles/macchiato_lavender.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/macchiato_lavender.png" height="16" width="16"/></td>
<td>Lavender</td> <td>Lavender</td>
<!-- Mocha --> <!-- Mocha -->
<td><img src="assets/palette/circles/mocha_lavender.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/mocha_lavender.png" height="16" width="16"/></td>
<td>Lavender</td> <td>Lavender</td>
</tr> </tr>
<tr> <tr>
<!-- ## Mark 1 Text ## --> <!-- ## Mark 1 Text ## -->
<td>Mark 1 Text</td> <td>Mark 1 Text</td>
<!-- Latte --> <!-- Latte -->
<td><img src="assets/palette/circles/latte_base.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/latte_base.png" height="16" width="16"/></td>
<td>Base</td> <td>Base</td>
<!-- Frappé --> <!-- Frappé -->
<td><img src="assets/palette/circles/frappe_crust.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/frappe_crust.png" height="16" width="16"/></td>
<td>Crust</td> <td>Crust</td>
<!-- Macchiato --> <!-- Macchiato -->
<td><img src="assets/palette/circles/macchiato_crust.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/macchiato_crust.png" height="16" width="16"/></td>
<td>Crust</td> <td>Crust</td>
<!-- Mocha --> <!-- Mocha -->
<td><img src="assets/palette/circles/mocha_crust.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/mocha_crust.png" height="16" width="16"/></td>
<td>Crust</td> <td>Crust</td>
</tr> </tr>
<tr> <tr>
<!-- ## Mark 2 ## --> <!-- ## Mark 2 ## -->
<td>Mark 2</td> <td>Mark 2</td>
<!-- Latte --> <!-- Latte -->
<td><img src="assets/palette/circles/latte_mauve.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/latte_mauve.png" height="16" width="16"/></td>
<td>Mauve</td> <td>Mauve</td>
<!-- Frappé --> <!-- Frappé -->
<td><img src="assets/palette/circles/frappe_mauve.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/frappe_mauve.png" height="16" width="16"/></td>
<td>Mauve</td> <td>Mauve</td>
<!-- Macchiato --> <!-- Macchiato -->
<td><img src="assets/palette/circles/macchiato_mauve.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/macchiato_mauve.png" height="16" width="16"/></td>
<td>Mauve</td> <td>Mauve</td>
<!-- Mocha --> <!-- Mocha -->
<td><img src="assets/palette/circles/mocha_mauve.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/mocha_mauve.png" height="16" width="16"/></td>
<td>Mauve</td> <td>Mauve</td>
</tr> </tr>
<tr> <tr>
<!-- ## Mark 2 Text ## --> <!-- ## Mark 2 Text ## -->
<td>Mark 2 Text</td> <td>Mark 2 Text</td>
<!-- Latte --> <!-- Latte -->
<td><img src="assets/palette/circles/latte_base.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/latte_base.png" height="16" width="16"/></td>
<td>Base</td> <td>Base</td>
<!-- Frappé --> <!-- Frappé -->
<td><img src="assets/palette/circles/frappe_crust.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/frappe_crust.png" height="16" width="16"/></td>
<td>Crust</td> <td>Crust</td>
<!-- Macchiato --> <!-- Macchiato -->
<td><img src="assets/palette/circles/macchiato_crust.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/macchiato_crust.png" height="16" width="16"/></td>
<td>Crust</td> <td>Crust</td>
<!-- Mocha --> <!-- Mocha -->
<td><img src="assets/palette/circles/mocha_crust.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/mocha_crust.png" height="16" width="16"/></td>
<td>Crust</td> <td>Crust</td>
</tr> </tr>
<tr> <tr>
<!-- ## Mark 3 ## --> <!-- ## Mark 3 ## -->
<td>Mark 3</td> <td>Mark 3</td>
<!-- Latte --> <!-- Latte -->
<td><img src="assets/palette/circles/latte_sapphire.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/latte_sapphire.png" height="16" width="16"/></td>
<td>Sapphire</td> <td>Sapphire</td>
<!-- Frappé --> <!-- Frappé -->
<td><img src="assets/palette/circles/frappe_sapphire.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/frappe_sapphire.png" height="16" width="16"/></td>
<td>Sapphire</td> <td>Sapphire</td>
<!-- Macchiato --> <!-- Macchiato -->
<td><img src="assets/palette/circles/macchiato_sapphire.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/macchiato_sapphire.png" height="16" width="16"/></td>
<td>Sapphire</td> <td>Sapphire</td>
<!-- Mocha --> <!-- Mocha -->
<td><img src="assets/palette/circles/mocha_sapphire.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/mocha_sapphire.png" height="16" width="16"/></td>
<td>Sapphire</td> <td>Sapphire</td>
</tr> </tr>
<tr> <tr>
<!-- ## Mark 3 Text ## --> <!-- ## Mark 3 Text ## -->
<td>Mark 3 Text</td> <td>Mark 3 Text</td>
<!-- Latte --> <!-- Latte -->
<td><img src="assets/palette/circles/latte_base.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/latte_base.png" height="16" width="16"/></td>
<td>Base</td> <td>Base</td>
<!-- Frappé --> <!-- Frappé -->
<td><img src="assets/palette/circles/frappe_crust.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/frappe_crust.png" height="16" width="16"/></td>
<td>Crust</td> <td>Crust</td>
<!-- Macchiato --> <!-- Macchiato -->
<td><img src="assets/palette/circles/macchiato_crust.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/macchiato_crust.png" height="16" width="16"/></td>
<td>Crust</td> <td>Crust</td>
<!-- Mocha --> <!-- Mocha -->
<td><img src="assets/palette/circles/mocha_crust.png" height="16" width="16"/></td> <td><img src="../assets/palette/circles/mocha_crust.png" height="16" width="16"/></td>
<td>Crust</td> <td>Crust</td>
</tr> </tr>
</table> </table>

Write Preview
Loading…
Cancel
Save