Catppuccin

A soothing pastel palette, ported to Bootstrap 5. A soothing pastel palette, ported to Bootstrap 5. One flavour per theme, two modes: light and dark.

Palette

Accent colours

roserose
flamingoflamingo
pinkpink
mauvemauve
redred
maroonmaroon
peachpeach
yellowyellow
greengreen
tealteal
skysky
sapphiresapphire
blueblue
lavenderlavender

Surfaces

baseapp background
mantlecards & menus
crustdeepest layer
surface0raised surface
surface1borders
textprimary label

Colour utilities

rose pink mauve blue green peach teal lavender

Code block

// main.rs
use bootlegance::theme::{Catppuccin, Flavour};

fn main() {
    let flavour = Flavour::Mocha;
    let accent = flavour.mauve;   // #cba6f7
    println!("{} items indexed", 128);
}

Navbar

Buttons & Button Groups

Contextual variants

Outline variants

Sizes & states

Button groups

Typography

h1. The quick brown fox

h2. Jumps over the lazy dog

h3. Pack my box with five dozen

h4. Dozens of liquor jugs

h5. How vexingly quick daft zebras
h6. Jump!

A lead paragraph set at a larger size for introductory content.

Body copy pairs Inter with a monospace stack for code — the same pairing you get in terminals and editors.

Inline elements like links, bold text, emphasis, inline code, Super + Space and highlighted text.

Semantic colours: red, peach, yellow, green, teal, sky, blue, lavender.

Small print, footnotes and legal text.

Display headings

Display 6

Display 5

Blockquote

Comfortable, soft, calm — a place to linger.

Catppuccin

Lists

  • One accent, two modes, hand-tuned
  • Every colour available as a utility class
  • Consistent palette across editor, terminal and app

Tables

Modes
Mode Background Mauve
Catppuccin Macchiato dark#24273a#c6a0f6
Catppuccin Macchiato light#eff1f5re-mixed
Token Semantic role Mocha
--ct-baseBody background#1e1e2e
--ct-mantleCards, menus, inputs#181825
--ct-crustDeepest layer#11111b
--ct-surface1Borders#45475a

Forms

We'll never share your address.
Name is available.
Slugs cannot contain spaces.

Search & input groups

@
$ .00

Checks, radios & switches

Range

Floating labels

Navs & Tabs

General

Session and account settings.

Display

Resolution, scaling and night light.

Storage

Disks, partitions and cleanup.

Hidden

You should not see this.

Pills & underline

Breadcrumbs

Pagination

Alerts

Badges

Primary Secondary Success Danger Warning Info Light Dark Pill
Mail 12+

Progress & Spinners

Basic & contextual

Striped & animated

Stacked

Spinners

List Groups

Default & active

  • Favorites
  • Recents
  • Shared
  • Trash

Linked & actions

Dash Files Web

Flush

  • Flush item
  • Flush item

Inset

  • Work
  • Personal

Cards

Basic

Mantle surface over base.

Primary

Contextual card.

Success

Contextual card.

Bordered

Accent border variant.

Header
Header, body & footer

Cards compose cleanly with surface layers.

Updated 2 minutes ago
Image cap

Rounded corners keep imagery inside the card.

Wallpaper.tiff
Card with list group
Backgrounds
Accent colour
Icons
Settings sync completed.

Accordions

Default

One cohesive set of colours — surfaces, text and 14 accents — designed to work together.

Latte is the light flavour. Frappé is medium, Macchiato darker, Mocha darkest.

The same palette ships for terminals, editors, GTK, KDE and more — keep them in sync.

Flush

Flush variant removes the outer border.

Each item keeps the flavour's surface colours.

Carousel

Dialogs

Offcanvas

Sidebar
  • Favorites
  • Recents
  • Shared
Inspector
Panel content goes here.
Toolbar
A top drawer, handy for filters.

Popovers & Tooltips

Hover me

Toasts

Placeholders

Misc

Close buttons

Menus

Usage

Dark: <html data-bs-theme="dark"> · Light: data-bs-theme="light"