< p align = "center" >
< h2 align = "center" > 🖌️ Style Guide< / h2 >
< / p >
< p align = "center" >
A guide on how to properly < i > use< / i > the palettes
< / p >
### 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
