The Rose color preset — modern rose/pink, warm and expressive.

Design language

Rose uses a vibrant magenta-pink primary (hue angle ~350°, near the red-magenta boundary) with warm rose-tinted neutral surfaces. It projects a modern, creative, and slightly feminine aesthetic.

Use Rose when you want:

• A distinctive, memorable brand palette that stands out from blue-grey defaults.
• A warm UI for lifestyle, beauty, wellness, or creative applications.
• An expressive color scheme that pairs well with white space and minimal layout.

Color values

All values are encoded in OKLCH (CSS Color Level 4). The three numeric arguments are:

• L — perceived lightness, 0 (black) to 1 (white)
• C — chroma (color saturation), 0 = achromatic grey
• H — hue angle in degrees (0/360 = red, 180 = cyan, 300 = magenta)

The primary oklch(0.592 0.241 349.615) sits at hue 350° — a vivid rose that is neither a pure red nor a pure pink. Its high chroma (0.241) gives it the saturation needed to work as a call-to-action color while the medium lightness (L ≈ 0.59) keeps it accessible against white backgrounds.

The neutral surfaces use a subtle rose hue (H ≈ 11–13°, C ≈ 0.015–0.019) so that even the backgrounds carry a hint of warmth, unifying the palette.

Destructive vs primary

Rose is unusual in that its primary color (a cool-leaning rose/pink) is distinctly different from the destructive color (a warmer red at H ≈ 27°). This separation ensures users can tell "primary action" apart from "danger/delete" even though both are in the red-pink family.

Radius

Uses 0.5rem (8px at 16px base font) — a standard, balanced radius that avoids competing with the expressiveness of the rose palette.