About the Catppuccin Color Palette¶

This article explains what Catppuccin is, why it's used in this documentation, and how its design philosophy creates comfortable reading experiences.

What is Catppuccin?¶

Catppuccin is a community-driven pastel color palette designed for comfort and aesthetics. Created in 2021, it has become one of the most popular color schemes in developer tools and applications.

The palette comes in four flavors:

Latte - Light theme with warm tones
Frappé - Light-medium theme
Macchiato - Medium-dark theme
Mocha - Dark theme with soft, muted colors

Design Philosophy¶

Pastel Colors for Reduced Eye Strain¶

Unlike high-contrast themes that use pure whites and blacks, Catppuccin uses softer, pastel colors. This reduces eye strain during extended reading or coding sessions.

The colors are carefully calibrated to:

Provide sufficient contrast for readability
Avoid harsh brightness that causes fatigue
Create a pleasant, aesthetically consistent experience

Consistent Color Roles¶

Each color in the Catppuccin palette has a specific semantic meaning:

Rosewater, Flamingo, Pink, Mauve - Keywords and important elements
Red - Errors and warnings
Peach - Operators and special characters
Yellow - Types and classes
Green - Strings and success states
Teal, Sky, Sapphire, Blue - Functions and links
Lavender - Variables and parameters

This consistency means that once you're familiar with one Catppuccin-themed application, colors carry the same meaning everywhere.

Why We Use Mocha¶

This documentation uses the Mocha flavor for several reasons:

Dark Mode First¶

Many developers and readers prefer dark themes, especially during extended sessions. Mocha provides an excellent dark theme foundation while remaining accessible for light theme users.

Flexible Base Colors¶

Mocha's base colors (Crust, Mantle, Base) provide multiple levels of contrast, making it easy to create visual hierarchy:

Crust (#11111b) - Darkest, for backgrounds
Mantle (#181825) - Slightly lighter, for elevated surfaces
Base (#1e1e2e) - Main background color

This layering creates depth without relying on shadows or borders.

Vibrant Accent Colors¶

Mocha's accent colors (Sapphire, Sky, Teal, etc.) remain vibrant against dark backgrounds while avoiding the harsh neon effect of some dark themes.

Color Choices in This Site¶

Light Mode: Base¶

We use Base (#1e1e2e) as the primary color in light mode. While unconventional, this provides:

Strong contrast against light backgrounds
Visual connection to the dark mode experience
Professional, modern appearance

Dark Mode: Sapphire¶

Sapphire (#74c7ec) serves as the primary color in dark mode because:

It's visible and pleasant against dark backgrounds
It represents trust and professionalism (blue family)
It provides good contrast without being harsh
It's distinct from the typical cyan/teal often used in tech

The Community Aspect¶

Catppuccin is more than a color palette - it's a community project with:

Ports for 200+ applications
Consistent theming across your entire workflow
Active community maintaining quality
Open-source and freely available

Users familiar with Catppuccin from their code editor, terminal, or other tools will feel at home in this documentation.

Performance Considerations¶

Using custom CSS colors instead of Material Design's default palette gives us:

Fine-grained control over exact shades
Ability to match other Catppuccin-themed tools
Consistent experience across light and dark modes
No dependency on external color libraries