Ashbloom Palette

Ashbloom is designed for flow states. The Slate background creates a quiet, distraction-free workspace that sits softly on the eyes.

Against this calm, the colors bloom with purpose, not noise. Mint and Gold guide the eye naturally to success states and warnings, while Rose and Orange offer warmth without the alarm. It’s high contrast without the fatigue—keeping you focused, calm, and productive.

ROSE

Rose

#F04770

--ashbloom-rose

ORANGE

Orange

#FF9E64

--ashbloom-orange

GOLD

Gold

#F2CD60

--ashbloom-gold

MINT

Mint

#6DEcb9

--ashbloom-mint

CYAN

Cyan

#3DD6F5

--ashbloom-cyan

PURPLE

Purple

#9E86FF

--ashbloom-purple

CREAM

Cream

#e8e2d0

--ashbloom-cream

SLATE

Slate

#202124

--ashbloom-slate

ashbloom.css

/* Include the palette */
<link rel="stylesheet" href="ashbloom.css">

/* Use CSS variables */
.my-element {
    background-color: var(--ashbloom-slate);
    color: var(--ashbloom-cream); /* Ashbloom Cream */
    border: 1px solid var(--ashbloom-border);
}

/* Or use utility classes */
<div class="ashbloom-bg-gold ashbloom-text-slate">
    Gold background, dark text
</div>

/* Text color utilities */
<p class="ashbloom-text-cream">Ashbloom Cream text</p>
<p class="ashbloom-text-muted">Muted text</p>