Containers
Containers group related content into clear regions—cards, panels, callouts—so layouts stay readable and consistent. They give typography predictable padding, constrain widths, and let you swap backgrounds or borders to convey emphasis without rewriting every block.
Regular
Standard containers provide balanced padding and a neutral surface, ideal for grouping paragraphs, forms, or small widgets. Use them to separate sections on a page without heavy chrome; keep nesting shallow to avoid cramped layouts, and let the container handle spacing instead of adding ad-hoc margins to children.
A container groups related content on a neutral surface with comfortable padding. Place a short text, a form or a small widget inside, and let the container take care of the spacing around it.
Tip: prefer a single container per logical chunk and rely on consistent spacing tokens, so vertical rhythm stays predictable between sections.
<div class="container">...</div>Colors
Colored containers use Catppuccin palette hues to add hierarchy—call attention to warnings, highlight tips, or distinguish sidebars from the main thread. Choose a tone that reinforces intent (Peach for notices, Green for success) and keep text contrast high for readability. Explore the full palette at the Catppuccin site.
Rosewater container
A soft, warm tone for friendly asides and personal notes.
Flamingo container
Works well for quotes and testimonials that should stand out gently.
Pink container
A playful accent for promotions and seasonal highlights.
Mauve container
Suits new features and anything that deserves a little extra attention.
Red container
Reserve for errors and destructive actions that need a second look.
Maroon container
A calmer alternative to red for problems that aren’t urgent.
Peach container
Draws the eye to notices and things that are about to change.
Yellow container
Classic for warnings, tips and content that is still in draft.
Green container
Confirms success: saved, sent, completed or approved.
Teal container
A fresh tone for help texts and background information.
Sky container
Light and open, good for hints and onboarding steps.
Sapphire container
A deeper blue for secondary information and sidebars.
Blue container
The default choice for neutral information and links to more.
Lavender container
A quiet highlight for related content and further reading.
Gray container
Steps back from the page for metadata and less important details.
<div class="container rosewater">...</div>
<div class="container flamingo">...</div>
<div class="container pink">...</div>
<div class="container mauve">...</div>
<div class="container red">...</div>
<div class="container maroon">...</div>
<div class="container peach">...</div>
<div class="container yellow">...</div>
<div class="container green">...</div>
<div class="container teal">...</div>
<div class="container sky">...</div>
<div class="container sapphire">...</div>
<div class="container blue">...</div>
<div class="container lavender">...</div>
<div class="container gray">...</div>E-ink: in the e-ink theme every container is white with a black border. A container with a color class gets a thick black bar on its left to set it apart; only black stays black.
Mock browser
Mock browser containers frame content inside a faux browser window, useful for showcasing UI screenshots, code outputs, or embedded demos without leaving the page. Use them to tell stories about web experiences while keeping the focus on the captured content.
The browser container frames an example as if it were a web page, complete with window controls and an address bar. It’s useful for showing how a layout looks on its own, away from the documentation around it.
<div class="container browser">
<main>...</main>
</div>URL
URL labels reinforce context by displaying the address bar above the content. Populate it with a representative domain or route to help readers understand where the captured view would live, and keep it concise so it doesn’t overpower the mock frame.
The address bar shows where this page would live. Use a short, realistic address, so readers immediately understand the context of the example.
<div class="container browser">
<span class="url">http://...</span>
<main>...</main>
</div>