catppuccin/docs/style-guide.md

🖌️ 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 0		Subtext 0		Subtext 0
Bold Colors 1)
	Latte		Frappé		Macchiato		Mocha
color8		Subtext 0		Surface 2		Surface 2		Surface 2
color9		Bright Red		Bright Red		Bright Red		Bright Red
color10		Bright Green		Bright Green		Bright Green		Bright Green
color11		Bright Yellow		Bright Yellow		Bright Yellow		Bright Yellow
color12		Bright Blue		Bright Blue		Bright Blue		Bright Blue
color13		Bright Pink		Bright Pink		Bright Pink		Bright Pink
color14		Bright Teal		Bright Teal		Bright Teal		Bright Teal
color15		Surface 1		Subtext 1		Subtext 1		Subtext 1
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

¹⁾ ANSI Color Generation

[!NOTE]
These bright colors are not necessarily "brighter" than the normal colors, but rather more bold and saturated.

The ANSI brights, excluding black and white, are automatically generated based on the following formulas:

Mocha, Macchiato, Frappé	Latte
color.lightness * 0.94 color.chroma + 8 color.hue + 2	color.lightness * 1.09 color.hue + 2

The color values for black and white are mapped as shown below:

Mocha, Macchiato, Frappé	Latte
Black (0): Surface 1 Black (8): Surface 2 White (7): Subtext 0 White (15): Subtext 1	Black (0): Subtext 1 Black (8): Subtext 0 White (7): Surface 2 White (15): Surface 1

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