catppuccin/docs/style-guide.md
2022-09-27 16:27:56 +02:00

29 KiB

🖌️ 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
Background 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

















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.

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