mirror of
https://github.com/catppuccin/catppuccin
synced 2024-11-22 11:33:07 +00:00
29 KiB
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 |
|
|
|
|
|
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 |