You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

47 KiB

🖌️ Style Guide

A guide on how to properly use the palette

 

General Usage

Note
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 Surface 2
40% - 60% 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

Note
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
Escape Sequences Pink
Comments Overlay 0
Constants, Numbers Peach
Operators Sky
Braces, Delimiters Overlay 2
Methods, Functions Blue
Parameters Maroon
Builtins Red
Classes, Metadata Yellow

General

Syntax Color
Cursor Rosewater
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