catppuccin/docs/style-guide.md

🖌️ Style Guide

A guide on how to properly use the palettes

 

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:

Background Colours
Function	Examples	Colours
Backgroun Pane	Main Canvas, Page Background	Base
Secondary Panes	Secondary Canvases, Content Boxes, Sidebars	Crust, Mantle
Surface Elements	Sign Columns, Cursor Line, Generic Buttons, Inputs	Surface 0, Surface 1, Surface 2
Overlays	Splits, Floating Elements	Overlay 0, Overlay 1, Overlay 2
Typography
Function	Examples	Colours
Foreground	Main Text, Body Copy	Text
Subtext	Secondary Text, Headlines, Labels	Subtext 0, Subtext 1
Subtle	Comments, Footnotes, Inactive Text	Overlay 1
Highlights	Links, URLs Success Warnings Errors Search Results, Tags	Rosewater Green Peach Maroon Blue

Terminals

Window Colours
	Latte		Frappé		Macchiato		Mocha
Background		Base		Base		Base		Base
Main Text		Text		Text		Text		Text
URLs		Rosewater		Rosewater		Rosewater		Rosewater
Selection		Surface 2		Surface 2		Surface 2		Surface 2
Selection Text		Text		Text		Text		Text
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 Colours
	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 Colours
	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 Colours
	Latte		Frappé		Macchiato		Mocha
color16		Peach		Peach		Peach		Peach
color17		Rosewater		Rosewater		Rosewater		Rosewater
Syntax Colours
	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