🖌️ Style Guide

A guide on how to properly use the palette

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

Background Colors
Function Colors
Background Pane Base
Secondary Panes Crust,
Mantle
Surface Elements Surface 0,
Surface 1,
Surface 2

Overlays Overlay 0,
Overlay 1,
Overlay 2

Typography
Function Colors
Body Copy Text
Main Headline Text
Sub-Headlines, Labels Subtext 0,
Subtext 1
Subtle Overlay 1
Links, URLs Blue
Success Green
Warnings Yellow
Errors Red
Tags, Pills Blue
Selection Background Overlay 2
20% - 30% Opacity
Cursor Rosewater
### Terminals

Window Colors
Latte Frappé Macchiato Mocha
Cursor Rosewater Rosewater Rosewater Rosewater
Cursor Text Base Crust Crust Crust
Active Border Lavender Lavender Lavender Lavender
Inactive Border Overlay 0 Overlay 0 Overlay 0 Overlay 0
Bell Border Yellow Yellow Yellow Yellow

Regular Colors
Latte Frappé Macchiato Mocha
color0 Subtext 1 Surface 1 Surface 1 Surface 1
color1 Red Red Red Red
color2 Green Green Green Green
color3 Yellow Yellow Yellow Yellow
color4 Blue Blue Blue Blue
color5 Pink Pink Pink Pink
color6 Teal Teal Teal Teal
color7 Surface 2 Subtext 1 Subtext 1 Subtext 1

Bold Colors
Latte Frappé Macchiato Mocha
color8 Subtext 0 Surface 2 Surface 2 Surface 2
color9 Red Red Red Red
color10 Green Green Green Green
color11 Yellow Yellow Yellow Yellow
color12 Blue Blue Blue Blue
color13 Pink Pink Pink Pink
color14 Teal Teal Teal Teal
color15 Surface 1 Subtext 0 Subtext 0 Subtext 0

Extended Colors
Latte Frappé Macchiato Mocha
color16 Peach Peach Peach Peach
color17 Rosewater Rosewater Rosewater Rosewater

Syntax Colors
Latte Frappé Macchiato Mocha
Mark 1 Lavender Lavender Lavender Lavender
Mark 1 Text Base Crust Crust Crust
Mark 2 Mauve Mauve Mauve Mauve
Mark 2 Text Base Crust Crust Crust
Mark 3 Sapphire Sapphire Sapphire Sapphire
Mark 3 Text Base Crust Crust Crust
### Code Editors > [!IMPORTANT] > **This is still a work-in-progress.** Additionally, it's > important to acknowledge that different editors have different capabilities > for theming, please use your own judgement in accordance with the main colors > defined below.

Language Defaults
Syntax Color
Keyword Mauve
Strings Green
Symbols, Atoms Red
Escape Sequences
Regex 		Pink
Comments Overlay 2
Constants, Numbers Peach
Operators Sky
Braces, Delimiters Overlay 2
Methods, Functions Blue
Parameters Maroon
Builtins Red
Classes, Interfaces,
Annotations, Metadata,
Enums, Types 		Yellow
Enum Variants Teal
Property
(e.g. JSON keys) 		Blue
Attributes
(e.g. XML-style attributes) 		Yellow

General
Syntax Color
Cursor Rosewater
Cursor Line Text
10% Opacity
Line Numbers Overlay 1
Active Line Number Lavender
Normal Links
Followed Links
On Hover Links 		Blue
Lavender
Sky

Search FG
Search BG
Active Search FG
Active Search BG 		Text
Teal
Text
Red


Errors Red
Warnings Yellow
Peach
Information Teal

Rainbow Highlights
(Brackets, Headings, etc.)

Syntax Color
Color #1 Red
Color #2 Peach
Color #3 Yellow
Color #4 Green
Color #5 Sapphire
Color #6 Lavender

Rainbow Parameters &
Local Variables
Syntax Color
Color #1 60% Text/Red Mix
Color #2 60% Text/Yellow Mix
Color #3 60% Text/Green Mix
Color #4 60% Text/Teal Mix
Color #5 60% Text/Blue Mix
Color #6 60% Text/Mauve Mix

Diff & Merge
Function Color
Changed Text BG
Changed Line BG 		Blue (10% - 20% Opacity)
Blue (15% - 25% Opacity)
Inserted Text BG
Inserted Line BG 		Green (10% - 20% Opacity)
Green (15% - 25% Opacity)
Removed Text BG
Removed Line BG 		Red (10% - 20% Opacity)
Red (15% - 25% Opacity)

Debugging
Function Color
Breakpoint Icon Red
Breakpoint Line Transparent --------------
Breakpoint Line During Execution Yellow
15% Opacity